架空LP制作（デザイン）

使用ツール：Photoshop

制作時間：48時間

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

【クライアント情報】

20~30代の女性向けビジネススクールを運営しているクライアント。キャリアアップのためのスキルを学んだり、学んだスキルをアウトプットする場として、定期的にビジネスコンテストなどのイベントも開催している。

【依頼内容】

会員様限定のカフェ&コワーキングスペースをオープンするため、利用方法やアクセス情報を載せたWebサイトの制作。

②作成したLP

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

【ペルソナ】

32歳女性。仕事で成果を出したいと考えている。
東京在住。メガベンチャーゲーム事業部部長（8年目）。旦那と2人暮らし。
仕事が大好きでスキルアップのための投資経験が豊富。
会社外の人脈を作ったり、同じような目標をもった同世代の女性と切磋琢磨しながら成長したいと考えている。
経営についても学び、ゆくゆくは役員を目指したい。企業も視野に入れている。
強いチームを作るためのマネジメントやコーチングのスキルを身に着けたい。

（※ペルソナについては課題要綱に指示あり）

【ユーザーストーリー】

必要な人へ必要な情報が届くように、情報の取捨選択と、伝える順番について工夫しました。具体的には、LPのセクションをコワーキングスペースの「雰囲気を伝える」「設備について説明する」さらに興味をもったユーザーに対して「追加情報を詳しく伝える」という順番で並べ、整理しました。

④ワイヤーフレームとスタイルガイド

【ワイヤーフレーム】

修正前の「DRINK MENU」について、ペルソナの利用目的としては優先順位が低いと判断し、「FACILITY」の1部として配置変更をしました。また、当初のセクションでは金額がわかるものがなかったので「PRICE」を追加しました。さらに、ペルソナが興味を惹く情報をLPに落とし込むため「INFORMATION」を追加しました。

【スタイルガイド】

サイト全体を通して「甘すぎない、幼すぎない、大人な女性のサードプレイス」をイメージ。具体的には「ベージュ」系の色をベースカラーに選定し「落ち着いた女性」の雰囲気を表現しました。さらに、ペルソナの女性をイメージした際「爽やか」「スマート」といった色合いを使用したいと考え「ベージュ」系の色とは補色に近い「青」「水色」などの寒色をメインカラーとして用いました。アクセントカラーは「ゴールド」で、LP全体をとおして陳腐で安っぽい印象にならないように工夫しました。

⑤頑張ったポイント

LPページに隠れたメッセージとして「アプリダウンロード」のセクションの背景を「親しみやすい」が花言葉の「黄色いガーベラ」にしました。

また、各セクションタイトルの背景にゴールドの「円」のあしらいを入れて「繋がり」を表現しました。これらの工夫だけが一人歩きしないように、ファーストビューで植物のある内観写真を選定して、配色にも気をつけ統一感を持たせました。余白やあしらいについても、違和感がないように調整しました。

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

ワイヤーフレームの大切さを学びました。しっかりワイヤーフレームを固めていたことで、セクションの配置などに悩むことなくデザインカンプを進めることができました。また、配色やサイトのトンマナを考えることの難しさも実感しました。実際のクライアントワークでは、しっかりヒアリングをしてクライアントのイメージする形を引き出さなくては、見当違いなLPを作成してしまう場合もあるんだな……と身が引き締まりました。