【架空】ベビー用品開発事業会社『株式会社TSUTSUMU』 採用サイト

🔹使用ツール：Photoshop、CLIP STUDIO PAINT、Visual Studio Code

🔹制作時間：ワイヤーフレーム約8時間、デザインカンプ約10時間、

　　　　　　  コーディング約2週間

🔹対応範囲：

   【情報設計】ペルソナ作成、ユーザーストーリー作成

 　【デザイン】ワイヤーフレーム、デザインカンプ、イラストやシェイプの作成　　　　　　　

 　【コーディング】HTML、CSS、JavaScript、サーバーアップ

🔹目次

　・制作物

　・課題要件

　・工夫点

　・学んだこと

◾制作物

🔸実際のサイト

https://tsutsumu.weblike.jp/practice-5/

🔸デザインカンプ

◾課題要件

🔸今回のお題

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

・ベビー用品をメインとし、ママの育児をサポートするコミュニティ事業や家族みんなが幸せになるフォトブック事業などを展開している。

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

🔸ペルソナ

お題を元に、ペルソナを考えました。

育休明けから仕事復帰を考えている主婦の方としました。

🔸ユーザーストーリー

◾工夫点

🔸配色

・ペールトーンやソフトトーンを中心に、企業のイメージに合った淡く柔らかい雰囲気になるようにしました。

・メインカラーにはオレンジとピンクを使用し、人肌から伝わるぬくもりをイメージしました。

・フォントカラーには白と黒の中間くらいの灰色を使用しました。柔らかな雰囲気に合わせつつも、可読性を確保できるようにしています。

🔸デザイン

・ユーザーストーリーに沿った設計を意識しながら作成しました。

【LINEお問い合わせボタンの設置】

🔸あしらい

・背景に使われているほわほわとしたあしらいは、やさしさをイメージしています。様々な色、形のやさしさが赤ちゃんを包むように、様々な個性を持った人々が企業に集まって「世界をやさしさでつつんでいく」様子もイメージしています。

・クレヨンで描いたようなテクスチャーのドットは、赤ちゃんが抱っこされたときに伝わる体温やぬくもりをイメージしています。企業理念を伝えているFV～私たちについてセクションと、最後のエントリーセクションに配大きく配置することで、特に伝えたい部分を目立たせています。

・ベビーグッズには天使モチーフのものが多いことから、天使のイラストをサイトの複数個所に設置しています。サイトに動きをつけたかったこともあり、羽が動いているGIFイラストを自作しました。

・天使は「導く存在」でもあるため、TSUTSUMUというサイトにユーザーを導いているようなイメージも持たせています。

🔸コーディング

【アニメーション】・FVと私たちについてセクションの写真は、ふわっと飛び出すようなアニメーションを採用しました。優しげなアニメーションでありながら、サイトを見たときに印象に残るようにしました。

【ホバーアニメーション】

・エントリーボタンや追従するCTAボタンは、特に目立たせたい・行動に繋げたいボタンであるため、気持ちや想いが盛り上がるようなイメージで色が濃くなる仕様にしました。

◾学んだこと

・今回はペルソナ分析も自身で行い、ワイヤーフレームも１から作りました。最初の要件定義をしっかり行った上で情報設計に落とし込むことで、「採用サイトとしてエントリーに繋げる」という本来の目的からブレることなく制作を行うことができたと感じています。改めて要件定義の重要性が身に染みた課題でした。

・コーディング時マークアップをしたことで、部品を分解するようにサイトの要素も分解されてわかりやすくなりました。最初は慣れず時間がかかった作業でしたが、だんだんと「どの要素をまとめるとデザインカンプ通りになるか」が見えてくるようになり、慣れると作業時間の短縮にも繋がりました。

・コーディングで行うアニメーションなども、「なぜこのアニメーションを入れるのか」という理由を明確にすることでサイトに一貫性が出ました。「デザインの理由を言語化できるようにしておく」という根本的な部分の意識の大切さを改めて感じました。