#001Ariホームページ制作

Ariホームページ制作

自身のWeb制作受注用のコーポレートサイトです。

HTMLとCSS、JavaScriptで制作された静的サイトです。

お問い合わせフォームはPHPで自作で制作しております。reCAPTCHAのv3を導入し、スパム対策やセキュリティ対策を考慮しました。

制作期間：14日間

知り合いづてに「Webサイトを持ちたい」という方がいらっしゃったため、Web制作の注文から公開までの流れをシンプルに伝えられるサイトを制作しました。

これまでにWebサイトを持ったことがない方に、一連の流れを口頭で説明するのは難しいという課題があり、そこでWebサイトを見せながら、流れを具体的にご説明させていただくことを目的として作成しました。

サイト内の情報を過不足なく、かつスムーズに伝えるために、シンプルなデザインを心がけました。

Webサイト制作を検討している方に、必要な情報を順を追って提供できるよう、JavaScriptでアコーディオンを実装しました。これにより、初見の表示文字数を少なくし、段階的に必要な情報を確認できるようにしました。

実際に「このくらいシンプルなサイトが欲しい」とのフィードバックをいただき、Webサイトの制作をご依頼いただきました。

課題

より円滑なコミュニケーションが取れるように、フォームでのお問い合わせを可能にしたいと考えました。しかし、フォームのセキュリティ対策が課題となりました。

解決

UdemyでPHPの基礎を学び、セキュリティを考慮したフォームを実装しました。XAMPを取り入れ、ローカル環境を用意し、各対策（入力内容の検証、XSS、CSRF、CAPTCHAv3）を行い安全に運用できるフォームを設置しました。

課題

TOPからスクロール後にナビゲーションをFixedにする挙動を考慮し、適切な位置でスクロールを停止させたいと考えました。ページ内スクロールの停止位置の調整が課題となりました。

解決

GSAPのScrollToを導入し、スクロール停止位置を正確に取得しました。それでも高さのずれが生じる部分は、取得している要素の高さを一つ一つログに出力し、どの部分でずれが生じているのかを確認しました。結果、CSSの記述やHTMLの記述が原因ということが分かり、修正することで解決しました。