【課題】ベビー用品会社の採用サイト
SHE PROデザイナーの課題にてWebサイト制作に取り組みました。情報設計からデザインカンプの作成、コーディング、サーバーアップまで、一連の制作フローを経験。また、レスポンシブ対応も行い、さまざまな画面サイズでも閲覧できるよう工夫しました。
1.制作したワイヤーフレーム/デザインカンプ
サイトURL:http://komalily88.nikita.jp/
2.制作情報
制作時間 │ ワイヤーフレーム:6時間 デザインカンプ:10時間 コーディング:30時間(7日)
使用ツール│Photoshop・VisualStudio
3.課題要件
4.ビジュアルデザイン
ムードボード
デザインコンセプト
ブランド名がTSUTSUMUという名前だったので言葉から想起される「包み込む」イメージをLPで表現できるようにしたいなと思い制作しました。また、様々な家族の形を描けるサービスになっていると感じたので、そのきっかけを作ることができるシーンを届けるのが目的として20−30代のご夫婦もしくはファミリー層向けに展開できるといいなと思い作成しました。
スタイルガイド
5.工夫した点
<丸みや水彩・羽などでクライアント様の世界観を表現>
クライアントの企業様のやわらかく・あたたかい社風を表現するため、全体的に丸みを帯びたデザインを意識しました。また各セクションには羽や水彩画のようなのあしらいを配置することで、より柔らかく、優しい世界観を伝えられるよう工夫しました。
フォント
・実際に人が話しているようなあたたかいイメージを表現するために、メインビジュアルと各メンバーのキャッチコピーに手書き風のフォントをしました。
・各セクションのタイトルには丸ゴシックを使用し、柔らかい雰囲気を演出しました。
6.学んだこと
・デザインカンプを作成する時からコーディングを意識することの大切さ
フォントや余白のサイズ感を意識するだけでなく、実際にどんなHTMLやCSSのコードになるだろうかと考えながらデザインすることで戻りの工程が少なくなると感じました。
・アニメーションでも伝えたい世界観が表現できること
今回の課題を通して、普段何気なくみているWebサイトにもアニメーションが使用されており、その動きから直感的にそのサイトの雰囲気を感じ取っていることに気がつきました。
7.著作権・クレジット
サムネイルに使用しているモックアップの一部は Canva で作成しました。