【LPデザイン】コワーキングスペースのLP

OVERVIEW

SHElikes MULTI CREATOR COURSEの実践課題。架空クライアントからの要件書とワイヤーフレームを基に、PCのデザインカンプとスマホのワイヤーフレーム作成をしました。ターゲットと目的を意識してデザインに落とし込みました。

YEAR 2024

|制作概要|

 制 作 期 間  ◆ ワイヤーフレーム作成: 1 週間、デザインカンプ作成:1 週間
 制 作 範 囲  ◆ 情報設計・ワイヤーフレーム・デザイン
 使用ツール ◆ Photoshop


|目次|

 1. 制作物
 2. 制作依頼内容
 3. 情報設計(ワイヤーフレーム)
 4. 工夫したところ
 5. 課題を通して学んだ点 


1. 制作物


2. 制作依頼内容

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

ターゲット:①ビジネススクールWORKの会員様  
      ②まだ会員ではないがWORKのことが気になっている方

目的・ゴール
① WORK lounge Aoyamaを知ってもらい、アプリのDL・利用をしてもらう
② ビジネススクールWORKを知ってもらい会員になってもらう(最終的には利用してもらう)

ペルソナ
・30代前半の女性。都内在住、夫と二人暮らし
・某メガベンチャー ゲーム事業部 部長(8年目)
・仕事が大好きでキャリアアップに積極的。もっと仕事で成果を出したいと思っている
・同じ目標を持った女性と繋がり切磋琢磨しあいたい

 提供素材:ロゴデータ、PC版ワイヤーフレーム


3. 情報設計(ワイヤーフレーム)

クライアントから提示されたワイヤーフレームを、ターゲットと目的を念頭に置きブラッシュアップしました。


4. 工夫したところ

◾️ 配色
今回のLPでイメージしたキーワードは『強さ』『洗練』『大人女性』。
ペルソナから「キャリアアップに積極的でエネルギッシュな女性」をイメージし、アクセントカラーにオレンジを選びました。また、女性たちを応援したいという思いから全体を暖色系でまとめました。

◾️ フォント
洗練感先進的なイメージが出るようなフォントを選択しました。

◾️ ビジュアルデザイン 
「つながりを生み出す場所」というコンセプトから、つながりの輪を連想する『O』をアクセントカラーのオレンジで強調したり、セクションの境にラインを取り入れたりしました。全体のトーンは落ち着いたものにしたかったため、さりげないあしらいを意識しました。

◾️ アプリダウンロードへの誘導
目的の一つがアプリをDLしてもらうことなので、MV・CTAセクション、フッターの3箇所にボタンを設置しました。また、ボタンを置くだけでは警戒してなかなかDLしてもらえないと考えたため、MVでは簡単なコピーを入れ、CTAではアプリでできることをイラストを添えて分かりやすく提示しています。


5. 課題を通して学んだ点

  • いただいたワイヤーフレームをそのまま使用するのではなく、競合サイトを研究したり利用者目線で想像したりしながら、情報の優先度を考えブラッシュアップしました。そのためワイヤーフレームに半分以上の時間がかかりましたが、改めて情報設計の重要さを学びました。
  • ビジュアルデザインについてはキーワードを挙げ、参考イメージをピックアップしムードボードの作成フローを通して、イメージを固めていくことできました。バナーなどと違うLP独特の長い1ページのデザインを、統一感を持ってまとめ上げていくことを経験できました。