【課題】LP制作(エントリーサイト)

OVERVIEW

SHElikes PRO デザイナーの課題として、架空案件のLP制作を実施。ワイヤーフレーム、情報設計、PC版とSP版のLP制作(デザインとコーディング)、実装までを一通り行っています。(製作期間:5週間)

YEAR 2025

*制作物*

実装サイト

http://ss188363.stars.ne.jp/tsutsumu/index.html


*要件*

  • クライアント
    クライアント名:TSUTSUMU 株式会社
    ベビー用品をメインとし、ママの育児をサポートするコミュニティ事業や家族みんなが幸せになるフォトブック事業などを展開している。軸はベビー用品だが、今後ママ・パパ、家族向けのサービスも展開していく予定をしている。


  • 目的
    採用強化の為、LPを通してたくさんのエントリーをしてもらうこと



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


  • 必要要素
    ①キービジュアル(事業内容のイメージが伝わる写真を入れる)
    ②私たちについて
    ③働く環境
    ④事業について
    ⑤募集職種
    ⑥メンバー紹介(写真は入れ替えるため、現段階では仮で入れる)
    ⑦エントリー
    ⑧フッター
    ※ワイヤーフレーム作成時に並び替え可

*コンセプト・テーマ*

「家族の笑顔、明るい未来や幸せを創る、やさしさでつつむ」をテーマとしました。

提示された要素にあったコンセプトより、「ママやパパだけでなく、おじいちゃんからおばあちゃんまで」という所に、今後は家族みんなの幸せを創る企業でありたいという強い願いを感じました。そこを前面に押し出し、共感を得られる人物の採用を目指す事を考えました。


*ペルソナ*

設定したテーマより、以下のペルソナを設定しました。



*ユーザーストーリー*

設定したペルソナから、どのようなユーザーストーリーが描けるか考察しました。



*ワイヤーフレーム*

検討してきた内容とクライアントのターゲットやコンセプトなどを踏まえて、以下のワイヤーフレームを作成しました。

*スタイルについて*

1.色に関して

コンセプトに掲げているターゲットより、年齢や性別を限定するイメージが付かないような色合いとしました。

具体的には、やさしい雰囲気を出すため、ペールトーンを選択し、一番のメインカラーを未来や希望を表す黄色としました。さらに、平和や幸せを表す緑、やさしさを表すピンクを使用し、コンセプトを色でもできる限り表現できるようにしました。


2.フォントに関して

基本的には可読性を考慮し、すべて「Noto Sans JP」を使用しています。
キャッチコピーは「あんずもじ」で作成しています。キャッチコピー等はすべてコンセプトの言葉を使用していますが、柔らかく優しい丸みのあるフォントの為、使用に適していると考えました。


*制作のポイント*

1.背景について

「TSUTSUMU」から、つつむ=角のない形、丸を想像しました。ただし、幸せの形は様々あるという意味合いも込め、あえて丸の形を崩したことで、それぞれの家族の形や幸せを創り上げるという所を表現しました。FVやメンバーからのメッセージ、フッターに使用しています。

事業についてとエントリーのセクション間も、大きく見ると丸の形をとっているという趣旨で、丸みのある線で区切っています。


2.各セクションごとのポイントについて

  • FV

  • 私たちについて


  • 事業について

  • メンバーからのメッセージ

クライアントから提示された要素は「メンバー紹介」でしたが、「メンバーからのメッセージ」と変更することを提案します。実際のメンバーに手書きで書いたメッセージボードを持ってもらい、写真を撮る方法を想定しています。

入社後に笑顔で働けるという姿が想起できると考え、このようにしました。


  • 働く環境について・募集職種

  • エントリー



*課題を通して学んだこと*

  • デザインとは、あくまでも情報を伝える手段。
    ついつい「こんなサイトにしたら、目を引いておもしろいかも」と思ってしまい、凝ったデザインについつい行ってしまいがちだが、まずは情報を伝えるのが一番の使命であるという基本を忘れてはいけないと再認識しました。

  • 色を付けたり、画像を入れ始めると、ついついいろんな要素を足したくなりますが、本当に伝えたいことを伝えるには引き算も重要と、作業を通して学びました。

  • マークアップ設計図はしっかりと作りこんでおく事で、コーディング作業がスムーズになるという事を実感、設計図一つの作成方法でも効率化を図れる事をよく理解できました。

  • レスポンシブルサイトを作る方法として、スマホファーストでの作成の場合の方が楽な場合もある事を実感しました。小さくする方が難しいため、スタート部分から計画立てて行う事が重要と学びました。