【SHElikes マルチクリエイターコース課題】架空LP制作(デザイン・コーディング)

OVERVIEW

SHElikes MULTI CREATOR PROJECTでLP制作課題に取り組みました。架空クライアントの依頼内容をもとに、デザインからコーディングまでWebページ制作の一連の流れを学びました。

YEAR 2023

制作時間:4週間

制作範囲:情報設計・デザイン(2週間)/コーディング(2週間)

使用ツール:Photoshop


✴︎制作要件✴︎

  • クライアント情報
    <クライアント名:TSUTSUMU 株式会社>
    ベビー用品をメインとし、ママの育児をサポートするコミュニティ事業や家族みんなが幸せになるフォトブック事業などを展開している。軸はベビー用品だが、今後ママ・パパ、家族向けのサービスも展開していく予定をしている。
  • 目的
    LPを通してエントリーをしてもらうこと
    (採用強化のためできるだけたくさんの応募がきて欲しいが、エントリーがあれば誰でもいいわけではなく、カルチャーフィットする方に応募してもらいたい)
  • ターゲット
    ・転職希望の方
    ・報酬面よりもTSUTSUMUが作っていきたい世界に強く共感してくださる方
    ・各職種において全くの未経験よりは経験を重視したいが、それよりもカルチャーフィットしている人がターゲット
  • トンマナ
    明確なブランドトンマナがまだ決まっていないので、事業内容にあうトンマナを自由に提案していただきたい。

✴︎制作したLP✴︎


✴︎ユーザーストーリー✴︎

①引き付ける(メインビジュアル、私たちについて)

 →企業の思いを伝え、興味をもってもらう

②①より詳細に伝える(事業について)

 →どんなことをやっている企業なのかの詳細を伝え、より具体的に採用後にやることがイメージしてもらう

③アピール(メンバー紹介、働く環境)

 →どんな人がいるのかや働きやすさを伝え、応募したいという思いを強くしてもらう

④応募を決める(募集職種、エントリー)

 →応募したいという気持ちが強くなったところで、募集職種のなかでエントリーする職種を決めてもらう


✴︎ビジュアルデザイン✴︎

①コンセプト

【温かみ】【心地よさ】【癒し】

企業情報や事業内容から、赤ちゃんだけでなく家族全員の幸せやあたたかさを表現できるようなコンセプトにしました。

②配色

・ベースカラー

明るさをだすためにベースは白でシンプルに。

・メインカラー

女性をイメージさせるピンクで女性らしさを表現。トーンは明るくして爽やかさで柔らかい印象に。

・アクセントカラー

健康的で爽やかなイメージの緑をアクセントカラーに。トーンは他の色とバランスをとりつつ目立つように明るめを選択。

③フォント

メインビジュアルのみ「りいてがきN」を使用。手書き風のフォントにすることで親しみとやすさと温かみを感じられて企業イメージを伝える。

見出し・本文は「DNP 秀英角ゴシック金 Std」を使用。視認性を担保しつつ、丸みがあるフォントを使用することで温かみを感じられるように。

④装飾

名前と所属部署に視線がいきやすくなるよう、背景の下部にアクセントカラーの線を追加。また、画像の陰にも同じ色をつけることで画像と統一感をもたせる。


✴︎学んだこと✴︎

・トンマナの重要性

 →企業イメージや設定したテーマを伝える際に、カラー選定やフォント選びがいかに重要かを学びました。また、知識がないことで修正を繰り返してしまったので基礎知識のインプットをきちんとしておくべきだと感じました。


・実装を踏まえたデザインの重要性

 →コーディングの知識がなかったので、レスポンシブやjQueryのことを考えずにデザインをすると実装のときに整合性があわなかったり修正が発生してしまうことに気づきました。

✴︎頑張ったポイント✴︎

デザインカンプ

メインビジュアルが見切れてしまわないように、PC・SPどちらも配置のバランスにきを付けました。また、余白やフォントの大きさなどもなるべく詰まった印象にならないように調整を細かくおこないました。

コーディング

初めて対応したので用語の意味なども全く分からなかったのですが、わからないところは復習したり色々な手段を試してみたことでとても学びになりました。