【実践課題】 LPデザイン（コワーキングスペース＆カフェ）

目次

1.制作物

2.要件定義・ペルソナ

3.工夫した点（情報設計）

4.工夫した点（ビジュアルデザイン）

5.制作を通して得たこと

1.制作物

制作時期：2024年5月
制作期間：2週間
制作範囲：ペルソナの設定・情報設計・ワイヤーフレーム・デザインカンプ・Studio実装

使用ツール：Photoshop,Illustrator,  XD, Studio

Webサイトはこちら（レスポンシブ未実装）

デザインコンセプトは、「落ち着きがありつつ、女性らしさもあり、毎日通いたくなるような居心地の良い空間」に設定して制作しました。

ペルソナの思考や求めていることを元に情報設計を行い、必要な情報がより伝わりやすく、かつコワーキングスペースの雰囲気がわかるように、配色などのビジュアルデザインにもこだわりました。

2.要件定義・ペルソナ

3.工夫した点（情報設計）

・ユーザーストーリー

スクールの会員と非会員に分けてそれぞれ以下のゴールを設定し、そのゴールつながるようにユーザーストーリーを設定しました。

⚫︎会員：専用アプリをダウンロードしてもらい、利用予約に繋げる

⚫︎非会員：ビジネススクールWORKへの会員登録

・ワイヤーフレーム改善案

クライアントに提供いただいたワイヤーフレーム案について、ペルソナの思考、ユーザーストーリーを考慮して情報の追加、変更等の改善案を作成しました。

4.工夫した点（ビジュアルデザイン）

デザインコンセプトを元に配色とフォントを選びました。

また、全体的にビジュアルデザインに曲線や半円形を使用することで女性らしさを演出しました。

◆メインビジュアル

内装写真を窓の形にトリミングし、落ち着いた雰囲気を出しつつ「行ってみたくなる、どんな場所か気になる」という気持ちになるようにデザインしました。

◆見出し

筆記体の英字で曲線状に配置することで、メインビジュアルのイメージを踏襲するとともに、大人の女性の上品さを演出しました。

◆コンセプトセクション

背景に大理石の柄を敷き、「理想の未来に向かって頑張るあなたへ」というメッセージを際立たせ、見る人を惹きつけ、共感に誘うように演出しました。

◆CTAセクション①

「専用アプリの紹介」であることをわかりやすくするためにモックアップにしてビジュアライズしました。

◆設備情報セクション

細かい設備に関して、アイコンを使用して視覚的に内容を認識できるように工夫しました。

◆利用方法セクション

利用方法の手順を斜めに下がるように配置することで、矢印などを使わずに、ビジュアルとしても利用の流れ、順番がわかりやすくなるように工夫しました。

◆CTAセクション②

会員と非会員ぞれぞれの今後の動線を色分けして左右に配置することで、ユーザーの次に取る行動がわかりやすくなるように工夫しました。

5.制作を通して得たこと

• Webサイトデザインの基本の考え方
• ペルソナの思考や行動を詳細にイメージすることで、ターゲットに刺さるデザインを考えられること
• クライアントから提示された情報をそのまま受け取るのではなく、目的達成に向けて情報の取捨選択、追加提案を行う必要があること
• １つ１つのデザインに根拠を持たせること