【スクール課題】LPデザイン(ワイヤーフレームからデザインカンプまで)

OVERVIEW

■SHElikes MULTI CREATOR COURSE Designerにて、架空クライアントの依頼内容をもとに・PC版デザインカンプ・SP版ワイヤーフレームを制作しました。■制作時間:約42時間 ■担当フェーズ:情報設計/レイアウト/ビジュアルデザイン

YEAR 2024

目次

①制作物

②課題内容

③工夫したこと

④制作を通じて学んだこと


①制作物(使用ツール:Photoshop)

▼デザインカンプ/SP版ワイヤーフレーム


【架空クライアントから提供されたPC版ワイヤーフレーム】


②課題内容

架空クライアントからの依頼内容

  • クライアント
    20代〜30代女性向けのビジネススクールを展開。定期的にビジネスコンテストなどのイベントも開催している。
  • 目的
    新しくオープンする会員限定のカフェ&コワーキングスペース「WORK lounge Aoyama」について知ってもらうこと。
  • ターゲット
    ビジネススクールの会員、員会員ではないが気になっている方。
  • ペルソナ
    30代女性、都内在住。仕事が好きでスキルアップに投資している。
  • ペルソナのニーズ
    仕事の成果をもっと出したい。同じような目標を持った女性との人脈を作り、切磋琢磨しあいたい。
  • 提供素材
    ロゴ・PC版ワイヤーフレーム

③工夫したこと

【情報設計】

  • ヘッダー

既存会員がすぐ予約ページへ飛べるよう、ボタンを追加しました。


  • MV(メインビジュアル)

笑顔で会話を楽しむ女性の写真を配置することで、ユーザーの目を引き付ける設計です。ロゴはカラー変更可能であった為、お店がある青山のイメージから紺色に変更しました。コワーキングスペースは立地条件が重要と考え、アクセスへのリンクボタンを追加し、利用を考えているユーザーを誘導をしています。

  • EVENT&NEWS

MV直下に配置することで、交流やイベントが活発に行われていることをアピールしています。


  • ABOUT

アイコンを載せることで、一目でなにができる場所なのか分かるようにしています。あわせて施設の雰囲気が分かるよう、写真をのせました。スライドして動く想定です。


  • SYSTEM

写真でイメージを伝えつつ、より伝わるよう文章を調整しています。クライアントから専用アプリがあることを訴求してほしいという依頼があった為、このセクションに配置しました。インストールに遷移しやすいようQRコードを掲載しました。


  • FAQ

見やすさを考え、クリックするとアンサーが表示される方式を採用しました。


  • ACCESS

仕様書に記載はありませんでしたが、ユーザーの利便性を考え最寄り駅からかかる時間を表記しました。


  • CTA

ターゲットに予約を促す為、コワーキングスペース利用のイメージ写真と文章でアピール、予約ページへのリンクボタンを配置しました。


  • フッター

コワーキングスペースを運営するビジネススクールのロゴを表記しました。


デザインコンセプト

  • スクールのターゲットが20代~30代の女性ということで、20代(Z世代)向けのデザインをベースに、30代の大人らしさを表現しました。本文は可読性の良いゴシック体を選び、見出しの部分に游明朝を使用、装飾として筆記体を配置することで大人っぽさを表現しています。
  • 女性らしさと、キャリアスクールに通う凛としたイメージを出したいと思い、ベースカラーを白、メインカラーをピンクに設定し、アクセントカラーとして緑、ビジネスのイメージを表現するグレー・紺色を使用しました。


④制作を通じて学んだこと

  • ムードボードを用意することで、デザインに悩む時間が大幅に減ることが分かりました。制作ではそういった下準備がとても大切なのだと実感しました。
  • 参考サイトを探すことで、流行のデザインやレイアウトについての知見が増えたので、情報収集は大切だと改めて感じました。