【実践課題】LP制作（架空コワーキングスペース）

◆制作物

STUDIO実装版はこちら（レスポンス未実装）

今回のLPは、以下の要件定義を元に、「キャリア女性に刺さる！ビジネス感・ハイクラス感がありながらも仕事に対するモチベが高まるお洒落なコワーキング＆カフェスペース」をテーマに制作しました。

20代〜30代のキャリア女性が好む上品で洗練された雰囲気、このカフェで作業すると集中できそうな落ち着き感や開放感が感じられるLPを意識しています。

しかし、女性らしい可愛いサイトではなく、経営者との交流ができるイベントなども開催しているビジネススクールWORKのハイクラス感・ビジネス感もしっかり演出したいと考え、配色や使用フォントにもこだわりました。

◆要件定義

◆情報設計

• ユーザーストーリー　

• ユーザーストーリーをもとに、下記の通りワイヤーフレームの変更提案をしました。

• デザインコンセプト

◆工夫したポイント

• ターゲットに合わせたCTAボタン

すでにビジネススクールWORK会員の方は、WORK lounge Aoyama の予約導線強化のため、PC画面では右上に、SP画面では左下に固定で「マイページ」誘導のCTAボタンを追加しました。

まだ会員でない方は、まずWORKの会員になってもらう必要があるため「会員登録」誘導のCTAボタンを追加しました。

「予約したい」「会員登録したい」と気持ちが高まった際にいつでも行動に移せるよう、CTAボタンは追従する形式で設置しました。

• FVでターゲットに刺さる利用メリットの訴求

会員であれば利用料金がかからず朝の7時〜夜10時まで使い放題であることや、人脈を増やしたいと考えているターゲットにとってビジネスイベントが多数開催されていることは大きなメリットだと考え、FVでコピーを入れ、興味を惹かせる情報設計にしました。

• 写真の色味の統一

使用する写真は、Photoshopで色味や明るさを調整し、全体の統一感が出るよう工夫しました。

• 利用可能設備のアイコン化

各サービスがユーザーに直感的に伝わるようアイコンを用いました。

◆今回の制作で学んだこと

先方からワイヤーフレームをいただいていたとしても、ご依頼のままに作るのではなく、「クライアントの先にいるユーザーにどんな行動を取ってもらいたいか」を考え、その行動に移すためのUIを、根拠を持ってデザインに落とし込み、クライアントにご提案することが大切であり、自分自身がデザインをする上でもブレることなく制作を進めることができると学ぶことができました。 

また、ペルソナをしっかり深掘りすることで、配色や使用すべきフォントがより具体的にイメージできるようになることがわかりました。

◆講師からのコメント

全体をブルー系の色味でまとめ、ベースカラーやアクセントカラーを意識して制作できており、とても配色バランスのいいデザインでした！

ポイントでイラストを入れたり、背景をノートのます目のような工夫を入れたりとあしらいの入れ方もいいですね。写真も青系の色味でトーンを揃えて、全体のバランス感やレイアウトもとってもよかったです。TOPの手書きの文字もキャッチで素敵でした！