【課題】架空コワーキングスペース Webサイト

OVERVIEW

(SHElikes MULTI CREATOR COURSE の実践課題) ・クライアントから共有されたワイヤーフレームの修正(PC/SP) ・LPデザインカンプ(PC) 【制作期間】21時間(4日) 【使用ツール】Photoshop

YEAR 2024

制作物

課題要件

ペルソナ

情報設計

デザインコンセプト

  • 「キャリアアップ」「人脈作り」「センスのある大人女性」

  • キャリアアップや経営に興味があり、自己投資できる30代女性がテーマ。

  • 芯があり、可愛らしさや柔らかさというよりは「ハンサム」「落ち着き」「自立した大人の女性」を想起させるデザインに落とし込みました。

  • ブルー系/オレンジ・ベージュ系をベースに制作いたしました。

  • ブルー:色彩心理学で、青は「ビジネス」「信頼感」「交流」を表すカラーとされているため。

  • オレンジやベージュ:「安心感」を想起+暖色系は無意識に注目されやすい誘目性の高い色であるため。

デザインの工夫

ヘッダー

  • ベースは英単語で記載しつつ、ユーザーが直感的に操作しやすくなるよう日本語でも表記しました。

CTAボタン

  • WORK lounge Aoyama の予約導線強化のため、画面右下固定で「席予約はこちら」のCTAボタンを追加しました。

  • ボタン色は誘目性の高い暖色(オレンジのグラデーション)を使用し、LP全体のベースカラーと差別化を図りつつユーザーが押したくなるよう設計しました。

CONCEPT背景

  • 落ち着きや安心感を感じさせるベージュを使用しつつ、コーヒーやラテをイメージして徐々に白に変化するグラデーションにしました。

  • CONCEPTは本サービスを象徴する重要な部分のため、他のセクションと差別化できるよう「CONCEPT」の文字を背景に大きく敷きました。

  • 女性の写真について、「交流」「出会いの場」を想起させるためドア型にクリッピングマスクをかけました。

各種貸出サービスのアイコン化

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

店舗写真を追加

  • より具体的に店内のイメージが湧くよう、店舗の内装がわかる写真を追加しました。

アプリ導線強化

  • ユーザーにとってより予約をしやすい(=リピーター化の促進に繋がる)ようアプリダウンロードの画像を追加しました。

  • アプリ画面をスマートフォンのモックアップで制作し、シンプルで使いやすい・予約が簡単にできそうとイメージを持ってもらえるように制作しました。


本課題で学んだこと

  • クライアント様とのヒアリング〜納品までの方法(ヒアリング時のご質問内容や、認識のすり合わせ方、ムードボード作成、要件定義に基づいたご提案等)

  • 先方からワイヤーフレームをいただいていたとしても、ご依頼のままに作るのではなく制作目的を考えてご提案する重要さ

  • ムードボードやスタイルガイドを先に制作しておくとデザインがぶれず手戻りが減ること