LP制作｜コーディング込み

■　制作物

・　ワイヤーフレーム

・　デザインカンプ

・　コーディングファイル

■　制作手順

STEP１　要件整理

STEP２　情報設計

❶　ペルソナ・ユーザーストーリー検討

❷　ワイヤーフレーム作成

STEP３　ビジュアルデザイン

STEP４　コーディング・サーバーアップ　※修正中　

■　制作時間：約4週間

ビジュアルデザインまで：約2週間

コーディング：約3週間　※修正中

制作手順｜

STEP１　要件整理

＜クライアントからの制作依頼内容＞

■クライアント情報

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

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

■要件書

ターゲット

・転職希望の方

・報酬面よりTSUTSUMUが作っていきたい世界に強く共感してくださる方

・各職種において全くの未経験よりは経験を重視したいが、それよりもカルチャーフィットしている人がターゲット

目的

・LPを通してエントリーしてもらうこと

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

トンマナ

・明確なブランドトンマナが決まっていないので、事業内容に合うトンマナを自由に提案してほしい。

STEP２　情報設計

❶　ペルソナ・ユーザーストーリー検討

■ペルソナ

■ユーザーストーリー

ユーザーストーリーを意識しながら情報の順番やレイアウトを決める。

❷　ワイヤーフレーム作成

STEP３　ビジュアルデザイン

※ワイヤーフレームから変更点あり

１　配色

「世界をやさしさでつつむ」というキャッチコピーから、柔らかい優しい暖かみのある印象を与えられる配色を考えました。

柔らかい優しい暖かみのある色＝薄いピンク、薄いブルーをメインカラーにしました。

ベースの背景は、ただの白ではなく淡い橙にすることで、赤ちゃんの肌の色のような柔らかい印象を与えました。

全体的に淡い色が多いため、メインカラーはネイビーにして引き締めメリハリをつけました。

２　フォント

採用サイトなので読みやすさが大事だと思い、スタンダードなフォントを選びました。スタンダードなフォントの中でもトンマナを崩さないような温かみのある游ゴシック体を選択しました。

文字間や行間は広めに取ることで、柔らかい優しさを表現しました。

３　あしらい

❶ぼかしを使ったあしらいでふわふわさを出し、優しい柔らかい印象に。

❷写真は不透明度を下げ、少しブルーの色味を入れることでトンマナを崩さず馴染むようにした。

❸フォトブック事業を実施している企業であるため、ポラロイド写真を取り入れました。

❹エントリーの部分は、背景に写真を持ってくることで興味を惹かせるようにしました。

使用した写真は企業理念に合った「やさしさでつつむ」を表現した写真を選択。

STEP４　コーディング・サーバーアップ

頑張った点

・TSUTSUMUの世界観を崩さないよう全体的にふわっとしたデザインに仕上げた点。

・写真はトンマナを崩さないよう不透明度を下げ、少しブルーの色味を入れて全体に馴染むようにした点。

・コーディングはネットや書籍で調べながら知識を増やしていった点。

感想

　要件整理からサーバーアップまでLP制作を一通り自分一人で作れるようになれてとても嬉しく思います。コーディングで何度もつまづいてしまいましたが、ここまで完成できたのも、最後まで諦めることなくネットや書籍で調べながら毎日コツコツ制作を進めていくことができたからだと思います。

　しかしながら、コーディングしやすいデザインにした結果、完全に納得のいくデザインに仕上げることができなかったのが心残りでもあります。今回学んだ点を忘れないうちに復習しながら、高度な技術も少しずつ習得していきたいと思います。