【課題】LP制作・実装

OVERVIEW

SHElikesマルチクリエイターコースの課題として、LP制作の情報設計・ワイヤーフレーム・デザインカンプ・コーディング・サーバーアップを行いました。プレゼンテーション資料も作成しました。

YEAR 2022

< 制作概要 >

 制作時間 :200時間(情報設計1週間、デザインカンプ 2週間、実装2週間)
 制作範囲 :情報設計、ワイヤーフレーム、デザインカンプ、コーディング、実装
 使用ソフト:Illustrator、Photoshop、Atom
 使用言語 :HTML / CSS / jQuery / JavaScript


< 目次 >

 1. 要件
 2. 制作物
 3. 工夫したこと
 4. 制作を通して学んだこと


1. 要件

■ クライアントの要望
採用強化のため、採用サイトを作成することになりました。
掲載したい要素をお渡しするので、たくさんの人にエントリーいただけるようなLPの制作をお願いいたします。

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

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

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

▼ 要件書の内容を踏まえて、コンセプトシートを独自に作成


2. 制作物

実装したサイトはこちら

プレゼンテーション資料はこちら


3. 工夫したこと

・目的を最優先にしつつ、“企業のカルチャーをいかにして伝えるか”に重きをおきました
・カルチャーを伝えるにあたり、実際に働いている人の声が一番リアルに伝わるのではないかと思い、「メンバー紹介」のデザインに工夫をしました。手書きのメッセージで熱意を伝えると同時に、マウスオーバーをすると人の写真のみ拡大され、目に留めてもらえる仕組みにしました

・「働く環境」でも、どうやって会社の制度を利用しているのかインタビューを掲載することで、よりリアルに伝わりペルソナに響くのではないかと思い追加しました


・「私たちについて」の動く楕円の背景は、赤ちゃんの胎動をイメージしました

・MVでも、世界観が伝わるよう動画を取り入れたり、手書きでメッセージを書くことで人のあたたかみが伝わるように表現しました


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

・情報設計から実装まで一連の流れに取り組んだことで、LP制作における手順を学びました
・コーディングにあたり、実装を考慮したデザインを制作することの重要性を学びました
・ペルソナに何を優先して伝えたいかを考えることで、セクションの幅や装飾、動きに違いを出すことを学びました
・Google Chromeの検証ツールと実機(SP)で表示が変わることもあり、実機での確認の重要性を学びました

WEBSITE