LP制作 vol.2

OVERVIEW

SHElikes PRO デザイナーの課題で、LP制作(ワイヤーフレームからデザイン~コーディングまで)に取り組みました。

▼PCデザインカンプ

▼SPデザインカンプ

▼ムードボード


今回の課題を通して学んだこと

----------------------------—---------------—---------------—---------------—---------------—---------------—---------------—-----------

細かい調整にこだわれば見栄えが全然違うので、根気強く諦めないのが大事ということです。

例えばスマホ表示で画像が縦に引き伸ばされる問題が発生した際、CSSのaspect-ratioやbackground-sizeの設定方法を学び、比率を保ったまま見やすく表示できるよう工夫しました。また、ハンバーガーメニューの実装では、クリック時の挙動と表示崩れの調整に苦戦しましたが、JavaScriptの制御とz-indexの関係性を理解することで改善できました。今回の課題を通じて、ユーザー視点を持ちながら技術的な試行錯誤を重ねる重要性を実感しました。


頑張ったポイント

----------------------------—---------------—---------------—---------------—---------------—---------------—---------------—-----------

デザインからコーディングまで全体的に辛抱強く頑張ったと言いたいです。

前回のLP制作でのデザインカンプ作成の際、ほかの受講生の方の作品を見て感動があり、ブラッシュアップを意識して取り組みました。

その結果、クライアントの目的をかなえることは大前提として、世界観を作るために画面が寂しくならないよう装飾を工夫したことで、コーディングがかなり難しいものになりました。何度も諦めかけましたが、諦めずに調べてなんとか完成させられました。