LP制作 #02
OVERVIEW
ベビー用品事業を展開する会社の採用サイトを作成いたしました。ワイヤーフレーム制作〜コーディングまで行いました。｜｜制作時間：178h｜｜使用ツール：Adobe XD、Photoshop、Illustrator｜｜
PCのデザインカンプ
SPのデザインカンプ
ハンバーガーメニュー
こだわりポイント
- サイトマップを考慮したWF / デザインカンプの作成
要件定義には「もっと見る」というボタンを使うように記載されていましたが、そのボタンをクリックすることでどのような情報が見れるのかを考えて、ボタンやフッダーの設計を行いました。
- あらゆるサイズのPCを想定したコーディング
自分の使っているPCが横幅1762インチと大きめのため、横幅が違うPCで見てもレイアウトが崩れないように、ヘッダー / フッター /スライダー部分をレスポンシブ対応させました！細かくブレイクポイントを刻んだため、それぞれの横幅に合わせてpaddingやmarginを変更していくのが大変でした。
学んだこと
- hoverやclickした時のデザインも作成しておくと、コーディングの時に楽ということが分かりました。
- 1通りHTML / CSSを書いてから細かいところの調整をすると、効率良くコーディングが進むと学びました。
- デザインカンプ作成時には、何度か要件定義（ペルソナ / 目的）を見返しましたが、コーディングでは全く目を通さなかったので、目的意識を常に持てるように、次回から適宜見返すようにしたいと思います。