架空LPデザイン制作（会員限定のカフェ＆コワーキングスペース）

目次

① 要件

② 制作したLP

③ 制作過程

④ 工夫したこと

⑤ 学んだこと

① 要件

■クライアント情報

・クライアント名：WORK ,inc.

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

■ターゲット

・ビジネススクールWORKの会員様

・ビジネススクールWORKの会員ではないがWORKが気になっている方

■目的

WORK lounge Aoyamaについて知ってもらうこと

■トンマナ

ペルソナを参考に制作

② 制作したLP

③ 制作過程

（1）情報整理

課題の要件（クライアント・ペルソナ情報）を元に情報を整理し、Webサイトのイメージやレイアウト・ビジュアルの方向性を考えました。

（2）ワイヤーフレームの見直し

課題で提示されたワイヤーフレームの見直しを行いました。

（3）SPサイズのワイヤーフレーム作成

見直したPCサイズのワイヤーフレームを元に、SPサイズのワイヤーフレームを作成しました。視認性・操作性を考慮し、情報の見せ方を一部変更しました。

（4）ムードボード作成・配色選定

情報整理・見直したワイヤーフレームを元に、ムードボード作成・配色選定を行いました。

④ 工夫したこと

■コンテンツの優先度の見直し

コワーキングスペースの利用を検討する際の思考の流れ（※）を整理し、コンテンツの優先度を見直しました。その結果、「システム」セクション→「ドリンクメニュー」セクションの順に配置を変更しました。

（※）思考の流れ

① どんなコワーキングスペースなのか（雰囲気・コンセプトが知りたい）

② いくらなのか（価格帯が知りたい）

③ 館内設備は整っているのか（館内の様子が知りたい）

④ドリンクメニューは何があるのか（メニュー内容が知りたい）

■コンテンツの追加

初めてサイトを訪問するお客様・会員登録を迷っているお客様に向け、料金表・館内設備の紹介・館内マップを追加しました。

・料金表（価格提示）：会員登録を検討する上で重要な情報の一つ

・館内設備の紹介・館内マップ：利用シーンをイメージしやすい

■各媒体に合わせたデザイン

・PCの場合

横幅が広い特徴を活かし、スクロールやボタンのクリック回数を減らしたレイアウト・ビジュアルデザインにしました。

・SPの場合

横幅が狭く縦に長い特徴からスクロールの回数が増えることを考慮し、文章が長い部分はアコーディオンパネル（閉開ボタン）を設置しました。

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

■Webデザインの基礎

フォント・余白・ボタン・あしらい等、Webデザインの基礎（UIとデザイン）について学びました。

■制作過程の大切さ

LPを制作するまでの各過程（制作物：ワイヤーフレーム・ムードボード・デザインカンプ）で「なぜこのようなデザインにしたのか」を説明できる状態であることが大切だと感じました。