LP制作（PC/SPデザイン、実装）

・制作時間：5週間（デザイン2週間、コーディング3週間）

・制作範囲：情報設計、WF制作、デザインカンプ制作、コーディング（レスポンシブ対応含む）

・制作ツール：Photoshop、VSCode、HTML5、CSS、jQuery

制作物

◯Webサイト

◯デザインカンプ

制作要件

制作ステップ

クライアントから提示された制作要件を基にペルソナやテーマ、コンセプトを設定し、方向性を明確にした。

• ブレインストーミングを用いて、ムードボードを作成し配色やあしらい等を選定。

工夫したポイント

・FV画像の上の丸やマスキングテープなどのあしらいは、タイトルやメッセージ等の文字とあしらいの位置関係を大事にするため、画像とは別にimgで読み込んで配置。これにより、編集しやすさの向上も狙った。またbefore/afterやpositionを使用してデザインカンプを忠実に再現する事にこだわった。

・ターゲットの性別を問わないとの事だったのと、リクルートサイトという事もあり、一般的な赤ちゃんのイメージのピンクだったり可愛らしさを全面に押し出すのではなく、ジェンダーニュートラルな配色を意識。デザインも曲線は多様せず、ビジネス感を演出するよう直線を意識して制作。曲線や可愛らしさはあしらいとしてポイントで使用。

・FVの画像も要件から連想される”赤ちゃんのみ”や”お母さんと赤ちゃん”ではなく、家族写真にすることで、男性もエントリーしやすくなるようにビジュアルから精神的ハードルを下げることを狙った。

課題を通しての学び

• デザインカンプの作成時にスペーシングやマークアップを意識して制作したつもりだったが、実装時の表現方法をもっと具体的に考えて制作する必要があると感じた。デザインカンプ作成からコーディング、実装、サーバアップと一気通貫の制作は初めてだったが、HTML、CSSの使用はスムーズにでき、jQueryも少し使用してアニメーションをつけることができた。まだまだ改善点は多いが、今後も様々なサイトを参考にブラッシュアップしていく。
• 制作途中からコードのショートカット記述にも慣れ、時短を意識したコーディングができた。今後も効率的にコーディングができるよう学習し、経験を積んでいきたい。