LP制作（PCデザイン・SPワイヤーフレーム）

▼制作したPCデザインカンプ／SPワイヤーフレーム

※PC画面右にあるSNSアイコンはスクロールをしても追従します。

▼案件内容

クライアント情報

女性向けのビジネススクールWORKを展開している会社。会員は20~30代の女性が多く、キャリアアップのためにビジネススキルを学び、さらにそのアウトプットの場として定期的にビジネスコンテストなどのイベントも開催されている。

ターゲット

ビジネススクールWORKの会員／WORKが気になっている非会員

目的

新たにオープンする会員限定のコワーキングスペース／カフェ"WORK lounge Aoyama"について知ってもらうこと

ペルソナ

---

▼工夫したこと

１．ターゲットに合わせたゴールの設定

今回はターゲットがビジネススクールの会員／非会員の両方だっため、それぞれに合わせたゴールの設定と情報設計、デザインを行いました。　　　　　　　　　　　　　　　　　　　　　　　　　　　　〈WORKの会員〉　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　・コワーキングスペースを利用してもらう　　　　　　　　　　　　　　　　　　　　　　　　　　　・予約専用アプリをダウンロードしてもらう　　　　　　　　　　　　　　　　　　　　　　　⇨MVへアプリのダウンロードボタンを配置、CTAの背景に写真を配置して目立たせる　　　　　

〈WORKが気になっている非会員〉　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　・まずはWORKについて詳しく知ってもらい、より興味を持ってもらう　　　　　　　　　　　　　　　　　　　　　　　　　　・WORKのページへ誘導する　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　⇨ヘッダーとコンセプト内にWORKへ誘導するボタンを配置

２．ユーザーストーリーに合わせた情報設計

クライアントから仮のワイヤーフレームを提案されていましたが、ユーザーストーリーを考えて、コンテンツを追加・情報をコンパクトにするなど見直しを行いました。

〈クライアントから提案されていたWF〉

〈改善した点〉　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　・「特徴」、「アメニティ」の追加　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　どのように利用できるのか、何が利用できるのかを知ってもらうことで、具体的な過ごし方のイメージができるようにコンテンツの追加を行いました。　

・コンテンツの配置　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　アプリのダウンロード（コワーキングスペースの利用）をゴールとした際に、以下のユーザーストーリーを考えてコンテンツを配置しました。

①どういう場所なのか視覚的に理解し、コンセプトに共感する（FV、コンセプト）　　　　　②具体的な利用イメージを持つ（特徴、アメニティ）　　　　　　　　　　　　　　　　　　　　　　　　　③どのように利用できるのか知る（利用方法）　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　

・ドリンクメニューのポップアップ化　　　　　　　　　　　　　　　　　　　　　　　　"WORK lounge Aoyama"の特徴と設定したペルソナの行動・ニーズを加味した際に、ドリンクメニューは「コワーキングスペースを利用してもらう」というゴール設定において補助的な役割であると考えました。そのため、「特徴」内にボタンを配置し、ポップアップ画面で表示するように変更しました。

３．配色　　　　　　　　　　　　　　　　　　　　　　　

ペルソナをもとに以下のイメージを設定し、配色に落とし込みました。

ピンク：女性らしさ　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　ブラック：かっこよさ、自信、芯の強さ　　　　　　　　　　　　　　　　　　　　　　　　　　　ブルー：知的さ、落ち着き　

女性らしいピンクをメインカラーとしましたが、成長意欲のある女性というイメージで締め色として黒を用いました。これによって、メリハリのある印象にしました。

４．余白

・全ての余白を5の倍数で設定し、規則性を持たせました。　　　　　　　　　　　　　　・セクション間や見出しの下などルールを持って同じ余白を繰り返し用いることで、綺麗に整ったレイアウトになるようにしました。　　　　　　　　　　　　　　　　　　　　　　　・余白にゆとりを持たせることで、「リラックス感」や「落ち着き」を表現しました。

５．画像／イラストの選定

・MVやコンセプトの画像はコワーキングスペースの雰囲気がわかるもの、ペルソナと同年代の女性が映っているものを選び、視覚的に共感が得られるようにしました。　　　　　　・LPで使用している色味に近い画像やイラストを選んだり、画像の明るさを調整することで全体的なトンマナを整えました。

６．装飾

・バリキャリの女性であるペルソナのイメージに合わせて、装飾は画像や図形を重ねる程度にしました。　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　・シンプルになりすぎず、かといってポップな印象にはならないようにしました。

７．行間／文字間の調整

・行間や文字間を広くとることで、読むやすさを意識するとともに、強い女性の「優雅さ」を表現しました。

８．UI

・セクションが切り替わるごとに背景色を変えることで、各セクションがどこまでなのかわかりやすくしました。　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　・ボタンに目立つアクセントカラーを使用したり、ボタン内に矢印を配置し、ボタンであることが直感的にわかるようにしました。

▼制作を通して学んだこと

１．軸を明確にしてからデザインすること

初めてのLP制作でしたが、ユーザーストーリーと目的、ターゲットを軸に考えていくことで最適なデザインが作成できると思いました。途中で配色について迷った部分もあ理ましたが、軸に立ち返って考えることでターゲットにあった配色ができたと思います。

２．ルールを持ってデザインすること

レイアウトや文字の大きさ、余白などは他のサイトを参考にしましたが、要素ごとに一定のルールを設けながら作成することでバランスの取れた綺麗なデザインが作成できると思いました。今は、文字の大きさや余白について、どれくらいが適切なのか感覚を身につけている段階ですが、他のサイトを参考にしながら感覚を養っていきたいです。