【自主制作】架空LP コワーキングスペースWebサイト

OVERVIEW

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

YEAR 2025

1.制作物

【LPデザインカンプ】

※使用写真はすべてImageFXを使用して作成

2.課題要件

提供されたヒアリング動画をもとに、クライアントの要件を整理・要約しました。

3.ペルソナ

提供されたヒアリング動画、ペルソナの基本プロフィール、ライフスタイル・価値観をもとに、背景・課題、届けたい価値を考えました。

4.情報設計

提供されたワイヤーフレーム(以下WF)をブランドコンセプトや閲覧者の導線を考えたうえで、修正提案をしました。

①FVに配置されたコンセプトを単独セクションに変更

コンセプトをより丁寧に届けるために、FVとは別に独立したセクションを設け、ブランドの世界観がより深く伝わる構成へと再設計しました。

②交流(EVENT)のセクションを追加

このコワーキングスペースならではの価値が「利用者同士の交流」にあると感じ、その強みをしっかり伝えるために、スペース紹介とは別に”交流のセクション”を追加し、ここで生まれるつながりを具体的にイメージできる構成にしました。

③CTAボタンの追加

新規会員獲得という目的に合わせ、行動を促せるようCTAボタンを追加しました。情報を読み終えたタイミングで自然に申込へ進める導線を作ることで、離脱を防ぎ、目的達成につながる設計を意識しています。

④「ご利用方法」と「ご利用プラン」のセクションを入れ替え

料金プランを先に提示することで、利用を検討するうえでの不安を解消し、その後の利用方法もより理解しやすくなると考えました。結果として、申込まで自然に進める導線にブラッシュアップしています。

5.デザインコンセプト

Color Palette(カラーパレット)

・アイボリーやベージュを基調に、全体にやわらかく落ち着いた印象を与える配色。

・グリーン系をアクセントとして使用し、自然体でリラックスできる空間を表現。

・オレンジはコミュニケーションや活気を象徴するポイントカラーに。


Typography(タイポグラフィ)

・游ゴシック体・游明朝体を使い分け、日本語でも読みやすく上品な印象に。

・欧文にはCabinを使用し、ナチュラルかつモダンな雰囲気をプラス。


Photography / Motif(写真・モチーフ)

・自然光やグリーンを取り入れた写真で、心地よく過ごせる空間を表現。

・人物は主張しすぎず、空間や雰囲気を引き立てる存在として配置。

・「余裕」「調和」「自然体」をキーワードに、働く時間の質を感じられるビジュアルを意識。


6.デザインの工夫

CTAボタン

・行動を促す役割を明確にするため、サイト内で最も目立つカラー(オレンジ系)を使用。

・CTAを写真の中でも埋もれないよう、あたたかみのあるオレンジのグラデーションで強調。

コンセプトセクション

・サービスの思想をしっかり伝えるため、あえて情報量を抑えたシンプルなレイアウトに。

・余白を大きく取り、落ち着いた世界観を感じてもらえるように意識。

背景

・単調にならないよう、やわらかな質感の背景テクスチャを使用。

・セクションの切り替わりが自然に伝わるよう、背景のトーン差で区切り。

料金プラン

・プランの違いが一目で分かるようカード型で横並びに配置。

・初見でも比較しやすいよう、アイコンを使って内容を整理。

7.本課題で学んだこと

  • クライアントの意図を正確に汲み取り、それをデザインで的確に表現する重要性を学びました。
  • 閲覧者が途中で離脱しないよう、導線や情報の流れを意識した構成設計が重要だと感じました。
  • 情報量の多いスマートフォン版では、優先度を明確にし、伝える内容を取捨選択する必要があると学びました。
  • 依頼者の目的を達成するためには、デザインスキルだけでなくマーケティングの視点も欠かせないことを実感しました。