LPデザイン制作（PC/SP）｜ 課題

■制作時間：45時間
■制作範囲：情報設計 / ワイヤーフレーム / デザイン

【課題の目的】
・Webデザインにおいて必要な手順を一通り学ぶ
・要件書の意図を理解し、目的に沿った情報の優先度付けや適切なレイアウトを考えながらワイヤーフレームを作成する方法を学ぶ
・実装を考慮してデザインカンプを作成することを学ぶ

【目次】
1 . クライアント情報
2 . 要件
3 . ペルソナ
4 . レイアウトやデザインの意図・工夫したポイント
5 . 成果物（PC/SPデザインカンプ）
6 .課題を通して学んだこと

【1】クライアント情報

ベビー用品をメインとし、ママの育児をサポートするコミュニティ事業や家族みんなが幸せになるフォトブック事業などを展開している会社。今後はママ・パパ、家族向けのサービス展開を予定している。
採用強化のため、たくさんの人にエントリーいただける採用サイトを作成したい。

【2】要件

●ターゲット：
・転職希望者
・報酬面よりもTSUTSUMUが作っていきたい世界観に強く共感してくれる方
・各職種において全くの未経験よりは経験を重視したいがそれよりもカルチャーフィットしている方

●目的：LPを通してエントリーしてもらうこと
・採用強化のためできるだけ多くの応募が望ましいが、誰でも良いのではなくカルチャーフィットする方に応募してもらいたい

●素材提供：ロゴのみ（写真等はフリー素材使用OK）

【3】ペルソナ

【4】成果物（PC/SPデザインカンプ）

【5】レイアウトやデザインの意図

＜ コンセプトイメージ ＞

＜ 配色 ＞

< 工夫したポイント >

●クライアントの要望や想い × ペルソナに合っトンマナの設定

・全体的にオレンジ色を使用
　→「あかちゃん＝あたたかさ・ひよこ」をイメージ
・メインカラーの一部に緑色を使用
　→ あかちゃんの誕生からイメージした「自然体」を表現
・タイトルのあしらいは、“ 四葉のクローバーで成っているハートの画像 ”を使用
　→ あかちゃんを中心とした「家族の幸せ」をイメージ

●“クライアントの想い × ユーザーストーリー” を考慮したレイアウト

・企業の本命は カルチャーフィットしている人
　・メインビジュアルで「私たちと一緒に 〜 創りだしてみませんか？」と呼びかける
　・最初のコンテンツに『ABOUT US』を置いて企業ビジョン（想い）を伝える

・募集要項は後半に置き、直後にCTAを配置
　・企業コンセプト→サービス→仲間/環境 と読み進めた人（カルチャーフィットした人）が辿り着ける仕様を考えた

【6】課題を通して学んだこと

●依頼書をもとにコーディングまで進める一連の流れ
クライアントからの依頼をもとにユーザーストーリーを考えて、１からワイヤーフレームを作成したのは今回が初めてだった。

- “クライアントが伝えたいこと” と “ユーザーが欲しい情報” をどのようにして構成するか。
- ペルソナに刺さるイメージを考え、レイアウトやデザインに落とし込むこと。
- 情報の優先順位づけと、その見せ方、最終的なアクションまでの動線を考えること。
- コーディングやレスポンシブを考慮したデザインになっているか。

など、デザインの一つ一つに意味を持たせながら制作する大切さを学んだ。

●デザインの細かいルール
・SNSアイコンを使用する際のレギュレーション
・フリーイラストを複数使用する場合、素材テイストを統一すること

などの細かいルールを知り、こういった基本中の基本とも言える知識たちを、引き続きインプットしていく必要があると実感した。