【課題】コーポレートサイト制作・実装

◆目次

1.クライアント情報

2.制作したデザインカンプ

3.ペルソナ・スタイルシート

4.工夫したこと

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

◆要件

クライアント情報
＜クライアント名：TSUTSUMU株式会社＞
ベビー用品をメインとし、ママの育児をサポートするコミュニティ事業や、家族みんなが幸せになるフォトブック事業などを展開している。軸はベビー用品だが、今後ママ・パパ、家族向けのサービスも展開していく予定をしている。

目的
LPを通してエントリーをしてもらうこと（エントリーがあれば誰でもいいわけではなく、カルチャーフィットしている人がターゲット）

ターゲット
転職希望の方
報酬面よりTSUTSUMUの世界観に強く共感できる方
未経験よりは経験を重視したいが、それよりもカルチャーフィットしている人

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

◆制作したデザインカンプ

◆ペルソナ・スタイルシート

◆工夫したこと

1.情報設計
クライアントのブランドイメージを保ちながら、カルチャーフィットした方に応募してもらいたいという課題を解決するためにペルソナを作成し、ペルソナをもとにユーザーストーリーを考えそれに基づいた動線やどのようにセクションを配置すると分かりやすい工夫ができるかを考えて、デザインに落とし込みました。

2.ブランドイメージを最大限に表現するトンマナ

サイトを訪れた方にぱっと見た印象でもブランドイメージが想像できるトンマナを意識しました。配色では特に人の温もりを表現したく、実際に赤ちゃんの写真を用いてスポイト抽出しじゅわっとした血色感のある色味を決定しました。あしらいでは、人の優しさを表現したく、全てに角がない曲線を意識しました。

◆制作を通して学んだこと

1.LPデザイン制作〜実装までの一連の流れ

クライアントの依頼を元に、ペルソナやトンマナ等の情報設計・デザイン制作・サーバーアップまで、一通りできるようになりました。

2.実装を考慮したデザインの制作
実装が初めてのこともあり、html・CSS・jQueryの理解が浅く余白の付け方や文字の大きさが実際にコードを書いていくとデザインカンプからズレてしまいました。また、アニメーションも自分の思い描いていたものとは違う仕上がりとなりました。次回以降はデザイン制作の時点から考慮し、スマートにコードが書けるよう練習をし続けたいと思います。

3.デベロッパーツールでの調整の仕方

間違っているところの見つけ方やサイト上でもっと文字は小さい方がいいかな？と思ったときにもサイトをみながら調整できることも学べました。デザインカンプでは掴めない全体の配置・大きさ等の感覚をデベロッパーツールを駆使して決めていくことの重要と思いました。