【スクール課題】LPデザイン・コーディング

OVERVIEW

SHElikes / MULTI CREATOR COURSEの課題として、ベビー用品事業等を行う会社を架空のクライアントに、採用LPデザイン・コーディングを行いました。 ▼デザインツール:Photoshop ▼コーディングツール:HTML/CSS/jQuery

YEAR 2024

▼もくじ

 1. クライアントからの要件整理

 2. 要件整理を受けての提案

 3. 制作デザイン

 4. 想定ユーザーストーリー

 5. デザインのポイント

 6. 課題を通した学び


1. クライアントからの要件整理

⚫︎クライアント:TSUTSUMU 株式会社

ベビー用品事業をメインに、ママの育児をサポートするコミュニティ事業や家族みんなが幸せになるフォトブック事業などを展開。主軸はベビー用品だが、今後ママ・パパ、家族向けのサービス展開を予定。


⚫︎目的:LPを通して採用エントリーをしてもらうこと。

採用強化のためできるだけたくさんの応募がきて欲しいが、エントリーがあれば 誰でもいいわけではなく、カルチャーフィットする方に応募してもらいたい


⚫︎ターゲット:

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


⚫︎制作物:PC、SP。


2. 要件整理を受けて自分なりの提案

コンセプト:TSUTSUMUの “ 温度 ” まで伝える採用サイト。

LPを通して達成したいことは、単なるエントリー獲得ではなく、” TSUTSUMUが作っていきたい世界に強く共感し、カルチャーフィットしている方 ”からのエントリーです。そのため、そのターゲットがどうやったらエントリーしたくなるか?、をコンセプトを考えるにあたってのポイントとしました。ターゲットが TSUTSUMUに共感し、エントリーしてもらうには、働く条件などの表層的な部分だけではなく、TSUTSUMUの芯に触れてもらう必要があると思い、企業の熱い想いや働く人のあたたかさを感じられるような上記のコンセプトを考えました。


3. 制作デザイン


4. 想定ユーザーストーリー


5. デザインのポイント

TSUTSUMUの “ 温度 ” まで伝えるというコンセプトの元、デザインにおいて以下のポイントを工夫しました。


⚫️TSUTSUMUオリジナルのあしらいを提案。

TSUTSUMUのコンセプトをより視覚的に印象付けるため、” つつむ ”というワードから、手のひらやおくるみをモチーフにしたオリジナルのあしらいを加えました。

⚫️ことば一つにもこだわる。

見出しはひらがなを中心に、また最後に「。」を加える形にすることで、やさしさやていねいさを表現しています。

⚫️「角」を徹底的に取り、まるみをちりばめる。

フォントはもちろん、線のシェイプも角をなくしてまるみで統一するようにし、ディティールすべてでコンセプトを表現しています。


6. 課題を通した学び

⚫️コンセプトをしっかり固めることでオリジナリティの高い制作提案ができる

「“ 温度 ” まで伝える」というコンセプトのもと、コピーやあしらいを一から提案することで、他社との差別化やクライアントならではの世界観を表現することができたのではないかと感じました。


⚫️デザインの時点でコーディングがイメージできているかどうかがスムーズな制作のカギ

今回は、まずデザインを自由に考え、いざコーディングが始まったら、このデザインを実現するにはどう書くのか?、を一つひとつ考えながら調べながらコードを書くというやり方をしてしまったので、非常に時間がかかってしまいました。マークアップの時点ではもちろん、デザインの時点でもコーディングもイメージできていると、全体がスムーズに進行できると感じました。