架空LP制作（デザイン・コーディング）

使用ツール：Photoshop、Visual Studio Code

制作時間：100時間（デザイン：40時間　コーデング：60時間）

目次

①クライアント情報と依頼内容

②作成したLP

③ユーザーストーリーと情報設計

④スタイルガイド

⑤頑張ったポイント

⑥制作をとおして学んだこと

①クライアント情報と依頼内容

【クライアント情報】

クライアント名：TSUTSUMU株式会社

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

【依頼内容】

採用強化のための採用サイトリニューアル。たくさんの人に応募してもらいたいが、エントリーがあればだれでもいいわけではなく、カルチャーフィットする方に応募してもらいたい。ターゲットは、各職種未経験よりは経験者を採用したいが、それ以上に、報酬面よりもTSUTSUMUがつくっていきたい世界に強く共感してくれる方が望ましい。

②作成したLP

実際に作成したLPサイトです。

TSUTSUMU採用サイト

【デザインカンプ】

③ユーザーストーリーと情報設計

【ペルソナ】

クライアント情報、依頼内容をもとにペルソナを設定しました。

【情報設計】

カルチャーフィットをする人材に応募してきて欲しいというクライアントの要望に応えるべく、必要セクションとして提示された項目を会社の雰囲気を伝えるためのセクション「カルチャー」と、選考のために必要な情報を伝えるためのセクション「手続き」に割り振り、並べ替えを行いました。また、「よくある質問」セクションを追加し選考過程を示しました。

【ユーザーストーリー】

転職を考えて就活をしているユーザーが、LPをみることでTSUTSUMUのカルチャーに魅力を感じ、エントリーボタンをクリックしたくなるようなユーザーストーリーを考えました。

④スタイルガイド

「赤ちゃん」は家族の「希望」であってほしいという願いと、新しい家族のはじまり、1人の人間の人生のはじまりを「朝日」をイメージした配色で表現しました。

朝日色の「オレンジ」をアクセントカラー、青空色の「水色」をメインカラーに選定しています。

⑤頑張ったポイント

【デザイン】

カルチャーを伝えるセクションでは、企業イメージを伝えることを意識してデザインをしました。具体的には「カルチャー」部分の背景には「毛布」のテクスチャを敷いて「TSUTSUMU（包む）」を表現しています。

また「カルチャー」の各セクション名の下に、オレンジの♡のあしらいを施し温かみを表現し統一感を持たせました。さらに、「カルチャー」部分では写真を多めに使用し、ビジュアルでも会社の雰囲気が伝わるように工夫しました。

対して「手続き」のセクションでは写真をエントリー背景以外では使わず、セクションタイトルや文章を左寄せにして引き締まった印象になるよう注意しました。

【コーディング】

「TSUTSUMU」の温かく優しい雰囲気を表現するために、jQueryで、スクロールをするとふわっとオブジェクトが浮き出てくるように実装しました。

⑥制作をとおして学んだこと

LP制作をとおして情報設計、ワイヤーフレームの作成、デザイン、コーディング、サイバーアップロードまで一連の工程を経験しました。そして制作全体をとおして、事前準備の大切さを実感しました。

デザインであれば、情報設計やワイヤーフレームの段階で「なぜこの配置にしたのか？」「この配色を選んだ理由は？」という「なぜなぜ」に言語化できるようになるまで、嚙み砕いて落とし込みました。また、コーディングについてはCSSを記述する際に、悩まないようHTMLのクラス名やマークアップを丁寧に設置することを心がけました。

事前準備をしっかりすることで、作業の途中で方向性に悩うことなく作業を進めることができました。今後LP制作をする際も事前にクライアントとのヒアリングを綿密に行いしっかり準備をしてから、制作を進めることを大切にしていきたいと思います。