LP制作(PCデザイン・SPワイヤーフレーム)

OVERVIEW

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

YEAR 2021

■クライアント情報

クライアント名:WORK,inc.

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


■要件

目的:WORK lounge Aoyamaについて知ってもらうこと

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

トンマナ:下記ペルソナに沿って制作すること


■WF

クライアントからのWF


上記WFの一部をUIの観点で変更しました


■デザインカンプ(PC)


■デザインカンプ(SP)


■工夫したこと

1.文字のジャンプ率を意識してメニュー作成

文字が多いセクションではありますが、ドリンク名と価格のフォントサイズに差をつけて視覚的に分かりやすくしました。


2.ペルソナに沿ったデザインを意識

『「仕事で成果をあげたい」という熱意を持った意識が高い女性』からシャープなイメージを連想して、三角形をモチーフにしたデザインで女性の成長できる場を表現しました。


3.UIを考えたレスポンシブ対応

アクセスセクションの電話番号表記について、PCでは電話番号をを記載して、SPでは電話をかけるボタンに変更してそのまま架電ができる仕様にしました。

PC


SP


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

セクションのタイトルを全て同じように表記して反復するなどデザインの原則ではありますが、規則に沿って表示するだけでも見やすさは変わり、直感的に分かるUIになると学びました。