【架空案件】LP制作 -採用ページ-(デザイン/コーディング)

OVERVIEW

SHElikes MULTI CREATOR COURSEにて、架空クライアントの依頼内容をもとに、デザインからコーディングまでWebページ制作の一連の流れを習得しました。

YEAR 2023

|制作概要|

 制 作 期 間 :約5週間(デザイン2週間、コーディング3週間)

 制 作 範 囲 :情報設計・ワイヤーフレーム・デザインカンプ・コーディング(レスポンシブ) 

 使用ソフト:Photoshop・illustrator


|目次|

 1. 目的

 2. 制作物

 3. 要件

 4. 工夫した点

 5. 課題を通して学んだ点


1, 目的

・Webデザインにおいて必要な手順を一通り学ぶ 

・要件書の意図を理解し、目的に沿った情報の優先度付けや適切なレイアウトを考えながらワイヤーフ レームを作成する方法を学ぶ 

・実装を考慮してデザインカンプを作成することを学ぶ 

・自分で0からコーディングする際の手順を学ぶ 


2, 制作物


3, 要件

  • クライアント情報
    <クライアント名:TSUTSUMU株式会社>
    ベビー用品をメインとし、ママの育児をサポートするコミュニティ事業や、家族みんなが幸せになるフォトブック事業などを展開している。軸はベビー用品だが、今後ママ・パパ、家族向けのサービスも展開していく予定をしている。
  • 目的
    LPを通してエントリーをしてもらうこと(エントリーがあれば誰でもいいわけではなく、カルチャーフィットしている人がターゲット
  • ターゲット
    転職希望の方
    報酬面よりTSUTSUMUの世界観に強く共感できる方
    未経験よりは経験を重視したいが、それよりもカルチャーフィットしている人
  • トンマナ
    明確なブランドトンマナが決まっていないため、事業内容にあうトンマナを自由に提案してほしい

4, 工夫した点

■ 情報設計

カルチャーフィットしたユーザーにエントリーしてもらうことがこのLPのゴールであるため、そのための情報設計を以下のように考えました。

■ セクションごとの工夫ポイント


5, この課題を通して学んだ点

■ ペルソナの深堀りの大切さ

 今回の課題ではペルソナが設定されていない状態からのスタートだったため、自分でペルソナを設定し、情報設計を行いました。ペルソナが設定されていないと、トンマナのブレや判断が曖昧になってしまうことを実感しました。ペルソナを設定することで特定の人物を基準として配色やデザインの構成も判断ができるため、いかにペルソナを確りと設定することが重要か学びました。

■ 実装を考慮したデザイン

 コーディングでの実装ではどうなるかを考えながらデザインをする意識がつきました。コーディングまで理解することで、レスポンシブに対応しやすいデザインや複雑になりにくいデザインを考えることができるようになりました。

■ Webデザインにおいて必要な手順を理解
 情報設計、デザインカンプ、コーディング、サーバーアップまでを実際に行い、一連の流れを理解することができました。