3a92a0c91dd66b4e

【課題】LPデザイン

OVERVIEW

SHElikes MULTI CREATOR COURSE 4つめの課題。架空クライアントの依頼内容をもとにデザインカンプとSP版ワイヤーフレームを制作しました。目的にコミットするための一貫した情報設計をし、ターゲットに合わせてビジュアルデザインに落とし込みました。

YEAR 2021

制作時間:約20時間
制作期間:約2週間
制作範囲:情報設計・ワイヤーフレーム・デザインカンプ


成果物


課題内容

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

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

情報設計

  • 目的の分解
    ①カフェ&コワーキングスペースの雰囲気を伝える
    実際に利用するイメージを想像しやすくする。

 ②足を運んでもらう
 不明確な点を無くすために、お問い合わせ窓口をわかりやすくする。

  • ターゲットの優先順位付け
    まずは会員の方に認知を広め、会員でない方にも興味を惹かれるような内容を掲載。


ビジュアルデザイン

  • デザインコンセプトは「清潔感」「堅実」「女性らしさ」

配色
アクセントカラーに深みのあるピーコックグリーンを使用し、フェミニンに寄り過ぎず堅実さを出すようにしました。青みのグレースケールを使うことで清潔感を出しました。

フォント
本文フォントはデバイス搭載の「游ゴシック体」に。アクセントに女性らしく品のある「游明朝体」を使用しました。欧文はロゴマークと同じ「Futura PT」を使いリンクさせました。

装飾
淡いドロップシャドウと不透明度を下げた背景で清潔感を出しました。

  • 読まなくても伝わる、写真とアイコンを多用したデザイン
    内容に合わせた写真とアイコンを使用し、わかりやすく、飽きないデザインにしました。


頑張ったポイント
Webサイトの内容をくまなく読むユーザーは少ないため、ページの一部分を切り取っても「このサイトだ!」と認識できるようなビジュアルデザインを意識しました。各セクションごとのわかりやすさを保ちながらも統一感を持たせることに苦戦しました。悩んだときには「目的」「ターゲット」「コンセプト」に立ち返り確認しながら取り組みました。

課題を通して学んだこと

  • 目的を達成するために根拠を持つこと。

  • デザインに迷ったときは目的を再確認すること。

  • ページ全体で配色や装飾に統一感を持たせながらも単調にならない工夫をする。

  • コーディングを意識し、余白とフォントサイズに規則を作ること。