【課題】LPデザイン制作(PCデザイン、SPワイヤーフレーム)

OVERVIEW

SHElikes MULTI CREATOR COURSE Designerの課題で、会員様限定カフェ&コワーキングスペースのLP制作に取組みました。クライアントからの要件書とワイヤーフレームを元に、PCのデザインカンプとSPのワイヤーフレームを制作しました。

YEAR 2022

┃要件

┃ワイヤーフレームの見直し

■ 競合の調査と特徴の洗い出し

  • コワーキングスペースの競合LPを研究し、どのような情報を掲載しているのか、また「WORK Lounge Aoyama」との特徴の違いは何かを洗い出しました。


■情報設計の再考

  • クライアントからのワイヤーフレームを基に、上記競合との特徴の違いを活かせるようPCのワイヤーフレームを再考し、SPのワイヤーフレームも制作しました。

┃LPデザインカンプ


┃工夫したこと

■コンセプト

ペルソナの「背景や行動」では向上心を持ちながらも人との繋がりを求めているところから、今回のLPは【前向きに学習に取り組める「明るく落ち着いた空間」、人との繋がりを感じる「温かい空間」】をコンセプトに制作しました。


■配色

コンセプトを下記3色で表現しました。

  • 清潔感「白」
  • 親しみやすさ・温かさ「オレンジ」
  • ペルソナの女性を意識した落ち着きのある「暖色系のベージュ」


■レイアウト

ただくつろげるカフェという印象にならないように、レイアウトは崩さず整列を意識し、コンセプトは色・イラスト・写真で表現しました。


■写真

明るい空間というのが伝わるように日中の光が差し込むものを中心選定しています。

→中でもコンセプトの写真はペルソナの女性が前向きに頑張る姿に共感できるよう意識して選定しました。


■あしらい

  • 画面をスクロールする中で飽きないように、アプリの紹介はトーンを揃えながらも、背景やアプリのモックアップを採用する等、他のコンテンツと視覚的差を付けました。


  • 各コンテンツタイトルの背景に透過したオレンジ色の英字(筆記体)を入れることで、学習だけでないホッと一息つけるような抜け感を表現しました。


  • 会員登録等で使用しているボタンは「最も安定した力を発揮する」と言われている六角形を使用しており、ここで学習したことが仕事で発揮できるようにという願いを込めました。


┃制作を通して学んだこと

情報設計の見直しを経てデザインカンプを制作する流れを学びました。何故このデザインにするのか、理由を一つ一つ意識しながら制作することで、より説得力のある物が出来上がると感じました。