Site-2
コピーする
パスワード兼ユーザーID :
概要
ユアコーディングという
「Webコーダーの架空のホームページ」
を制作しました。
「デザインカンプからのコーディング」
が私の担当範囲です。ただ、1366pxサイズのみのデザインカンプからコーディングしたため、それ以外の画面サイズでのデザイン,レイアウト調整に関しては私が担当しております。
※実在しない事業のサイトで検索結果が汚染されるのを防ぐため、サイトにはアクセス制限をかけています。アクセスの際は上記の「パスワード兼ユーザーID」をご使用ください。
使用スキル
- ・HTML
- ・CSS
- ・jQuery
工夫した点
ページ内の移動を快適にする
固定ヘッダー
閲覧者の中には、ページが長くなると「スクロールするのが煩わしく感じる」という方もいると思います。そこで、ヘッダーを上部に固定し、ヘッダーにあるナビを用いてページ内の移動を容易にできるようにしました。ナビにはスムーススクロールを採用しため、任意のセクションまで自動的にスクロールされる仕様になっています。
お問い合わせフォームを
Googleフォームに紐付け
お問い合わせフォームとGoogleフォームを紐付けすることで、サイトのフォームで入力されたお問い合わせ内容が、サイト管理者(今回の場合は私)のGoogleフォームで確認できるようになります。Googleフォームは、フォームから送られてきた情報を自動で集計、グラフ化してくれるため便利です。また、お問い合わせ内容の確認メールをサイト管理者とお問い合わせをした方に自動送信するようにも設定しました。
閲覧者が情報量をコントロールできる
アコーディオンメニュー
アコーディオンメニューによって、一部コンテンツを折りたたんで隠しています。これによってページの情報量がコンパクトになり、閲覧者が全体を把握しやすくなります。さらに、アコーディオンメニューであることをより分かりやすくするため、最初のメニューだけは開いた状態に設定しています。
コンテンツがふわっと表示される
スクロールアニメーション
プラグインのaos.jsを使用し、スクロールアニメーションを実装しています。ページをスクロールさせると、コンテンツが次々に、ふわっと表示されるようになっています。ページに動きがつくことで、閲覧者におしゃれで先進的なサイトであるという印象を持ってもらおうという狙いです。
自動でコンテンツがスライドする
スライダー
プラグインのswiperを使用し、スライダーを実装しています。省スペースかつスクロールの休憩地点になることを目的としています。
各デバイスサイズに適応した
レスポンシブデザイン
スマホやタブレット、ノートパソコンはもちろんのこと、表示崩れが多い1920px以上の大画面サイズにも対応しているサイトです。サイトのレイアウト崩れによって、ページ閲覧者が直帰することを防ぎます。