■課題 ベビー用品会社 採用サイト制作

OVERVIEW

SHElikes MULTI CREATORコースのLP制作課題に取り組みました。 架空のクライアントからの依頼を想定し、WF作成からデザインカンプ作成、実装(レスポンシブ含む)、サーバーアップまでを行いました。 【制作期間:デザイン約7日/コーディング約10日】

YEAR 2024

【目次】

1.制作物

2.制作要件

3.情報設計

4.テーマとイメージ

5.デザインのポイント

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


1. 制作物

制作したサイトはこちら

2. 制作要件

3.情報設計

【ペルソナ】
ターゲットである「カルチャーフィット」した人物像の解像度を上げるため、クライアント情報から深掘りを行い、それをもとにペルソナ設定をしました。

  • 「やさしさでつつむ」「やさしく幸せに暮らせる」というワードに共感し、自分もその世界を広める手伝いがしたいと思う人
  • 子育てや家族について日々考えたり感じることがある人
  • 「コミュニティ」「(共有できる)フォトブック」などのワードから、人とのつながりを大切に考えているような思いやりがある人


【ユーザーストーリー】
「TSUTSUMUが好き、ここで一緒に働きたい!」と思ってもらいエントリーに進んでもらえるようなサイトにするために前半でビジョンや事業、社員紹介を掲載し、後半でより具体的な選考情報を掲載する流れとしました。


4. テーマとイメージ

【テーマ:ひだまりの生活】
あかちゃんと家族はもちろんママ友や近所の人など、あかちゃんという光を中心にやさしくあたたかな生活が送れるようなイメージで制作しました。

5. デザインのポイント

  • 「ひだまり」である黄色のぼかしは全体のモチーフとして使用しました。曲線も多く使用して柔らかい印象にしました。

  • グレー背景では無機質にならないように手触りの質感があるようなテクスチャを敷きました。

  • 写真のトーンは透明感を出すため少し青みがかるよう調整し、雰囲気を合わせました。

  • 世界観を色濃く反映したいサイトであるもののコーポレートサイトではなく採用サイトであることが伝わるように下記4点の工夫を行いました。

    ①全体
    色味は主に装飾に使い、シンプルで読みやすい設計とする
    ②ヘッダー
    ロゴの横に「採用サイト」と記載
    ③MV
    キャッチコピーにマッチした写真、かつターゲットが自己投影できそうな写真を使用
    ④ABOUT
    もっとも伝えたいビジョン概要については背景に「つつむ」イメージの線画イラストを置き、印象的にする

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

①UIのルールに則ったデザインの重要性
 ボタンの一貫性や配色など、ユーザーが分かりやすいようにデザインすることを意識しました。
②コーディングを考慮したデザイン
 オリジナリティを出すよりもコーディングがしやすいデザインとしました。