【自主制作】採用サイトのLP制作 (デザインカンプ)

■使用ツール：Photoshop

■制作時間：約30時間

■制作範囲：ペルソナ作成｜ PC・スマホ版ワイヤーフレームの作成｜

　　　　　    PC・スマホ版デザインカンプの作成　

｜目次｜

1. 制作物 (PC・スマホ版デザインカンプ)

2. 制作手順・工夫したこと

　①要件整理

　②PC・スマホ版ワイヤーフレームの作成

　③PC・スマホ版デザインカンプの作成

3. 制作を通して磨いたスキル

4. 制作を通して学んだこと

1. 制作物 (PC・スマホ版デザインカンプ)

PC・スマホ版デザインカンプ

2. 制作手順・工夫したこと

①要件整理

・クライアント情報

　クライアント名:TSUTSUMU株式会社

　ベビー用品をメインとし、ママの育児をサポートするコミュニティ事業や

　家族みんなが幸せになるフォトブック事業などを展開。

　軸はベビー用品だが、今後ママ・パパ・家族向けのサービスも展開していく予定。

・目的
　LPを通してエントリーをしてもらうこと (カルチャーフィット重視)

・ターゲット

    転職希望の方

　報酬面よりもTSUTSUMUが作っていきたい世界に強く共感している人

　各職種において全くの未経験よりは経験を重視したいが、

    それよりもカルチャーフィットしている人

・イメージ

　明確なブランドトンマナがまだ決まっていないため、事業に合うトンマナを自由に提案

・提供物

　TSUTSUMUのロゴ｜必要要素が記載されたGoogleドキュメント

②PC・スマホ版ワイヤーフレームの作成

PC・スマホ版ワイヤーフレーム

工夫したこと

・クライアントの目的を達成する情報設計：カルチャーフィットする方からの応募

　架空クライアントはカルチャーフィットを重視しているため、下記の順番でセクショ

　ンを配置し、会社の想いや事業について理解を深めてからエントリーしてもらえるよう

　にしました。

・ターゲットの疑問や不安を解消する情報設計：

「メンバー紹介」セクションの見直し

　情報収集をする中で、ママ社員の方は下記のような悩みを抱えていることが

　わかりました。

　＊仕事と育児の両立：同僚の理解を得ることができるか

　＊育休後のキャリア：キャリアアップを諦めたくない

　架空クライアントから提供していただいたGoogle ドキュメントには、メンバーの

　名前と所属部署名のみが記載されていましたが、コンテンツ内容を見直し、

　ターゲットに刺さるメッセージを追加しました。

　また、上の「働く環境」セクションで社内制度について理解した後、それらがどの

　程度社内に定着しているのかペルソナは疑問に思うと考え、タグを追加しました。

「選考の流れ」セクションの追加

　求職者にとって「選考の流れ」は、把握しておきたい情報の1つです。

　特にペルソナの場合、家事や育児をしながら転職活動をする必要があり、日程調整に

　不安を抱えているのではないかと想像。

　選考の流れや面接の回数を明確に示すことでペルソナの不安を軽減しました。

③PC・スマホ版デザインカンプの作成

PC・スマホ版デザインカンプ

■コンセプト：「世界をやさしさでつつむ」※架空クライアントの既存コンセプト

■キーワード：「タオルでつつまれているようなぬくもり・安心感・柔らかさ」

　　　　　　　「赤ちゃん」

工夫したこと

・伝えたいイメージに合わせた配色、写真、フォント選び

■配色

・ベージュ：安心感、柔らかさ

・オレンジ：ぬくもり

・ピンク：赤ちゃんのほっぺのような血色感

■写真

・タオルにつつまれている赤ちゃんの写真をメインビジュアルで使用

・「コンセプト」セクションでタオルの写真を使用し「やさしさ」を演出

・背景に水彩風の画像を敷くことで柔らかさを追加

・「メンバー紹介」セクションで子どもと写っている写真を使用し、

　ターゲットに共感してもらう

■フォント

 ・「01」にはアクセントとして「Chalkduster」を使い、可愛らしさや親しみやすさを

　　プラス

・コピーでは読みやすく、柔らかい印象を与える「ヒラギノ角ゴ Pro」を使用

3. 制作を通して磨いたスキル

・要件書の意図を理解し、目的に沿った情報の優先順位付けや適切なレイアウトを

　考えながらワイヤーフレームを作成する力

・実装を考慮したデザインカンプを作成する力

4. 制作を通して学んだこと

・使用するカラー・フォント・写真の雰囲気を揃えることの大切さ

　カラーだけでなくフォントや写真もLPの雰囲気を構成する重要な要素であるため、

　伝えたいイメージに合わせて3つの雰囲気を揃える必要があると学びました。

　前回制作したコワーキングスペースのLPもメインカラーがオレンジでしたが、

　コンセプトやキーワードに合わせて配色やフォント、写真を丁寧に選んだことで、

　異なる雰囲気のデザインに仕上がりました。