LP制作(コワーキングスペースWebサイトデザイン)

🍨制作概要

【製作期間】２週間
【制作範囲】ワイヤーフレーム、デザインカンプ制作
【使用ソフト】Photoshop
【使用素材】フリー素材サイトの写真、イラスト、公式配布のインストールバッジ

🍨制作要件

【制作目的】WORK lounge Aoyamaについて知ってもらうこと
【クライアント情報】WORK ,inc. 女性向けのビジネススクールを展開している。会員は20~30代の女性が多く、キャリアアップのためにビジネススキルを学び、さらにそのアウトプットの場として定期的にビジネスコンテストなどのイベントも開催されている。
【ターゲット】ビジネススクールWORKの会員様、ビジネススクールWORKの会員ではないがWORKが気になっている方。
【ペルソナ】

【サイズ】PC（横幅1440px）

　　　　　SP（横幅375px）※SPはワイヤーフレーム作成のみ 

🍨完成品

【ワイヤーフレームの修正案】

【PCデザインカンプ】

【提案したコンセプト・テーマ】
大人の女性が惹かれるような、クールかつシンプルな勧誘LP

【設定した配色】
大人のキャリアウーマンということで、ピンクなどの暖色で可愛らしさを強調するよりは、モノクロをメインに、寒色かつシンプルでシックなイメージが合うと思った。参考として、20代後半や30代向けのファッションサイトなどはシンプルなものが多くみられることも挙げられる。尚且つ繋がりが生まれる親しみやすさも感じてほしいため、彩度は明るめの水色っぽい色をアクセントカラーに加えました。

🍨工夫したこと

【情報設計】
・ペルソナが一番知りたいであろう情報案内やコンセプトを優先順に上に設置し、重視されないであろうカフェの情報量を減らして下へと設置し、情報の取捨選択をしました。
・情報を知っている前提で、利用目的で訪れるユーザーに対して、直ぐにアクションを起こせるようにアプリのインストール画面をメインビジュアルに配置しました。
・アプリのDLをしてもらいたいので、スマホの画像を入れ込んで一目で分かるようにしつつ、 強調してアクセントカラーを背景にして強調しました。SPは手順①の段階でインストールボタンを提示することで手早くアクセス可能にしました。
【余白】
ガイドを細部まで設置し、均一かつ適切な余白を意識しました。

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

【ワイヤーフレームの制作理由】
「ユーザーが何を求めているか、どの構成であればスクロールしてくれるのか、“需要”を考える」ことを最優先に考えるということです。細かな装飾や画像、余白を考えるよりも先にそこを考えないと、ユーザーは多くを見てくれない、本質から外れていってしまうので、常に忘れないようにしなければならないと強く思いました。

【余白の役目】
余白の有無や感覚で、全体の雰囲気が大きく変わることがわかりました。可読性だけでなく、サイト全体のイメージの方向性を決められると言っても過言ではないと思います。多めに余白をとることで、シンプルかつすっきりとした大人っぽい印象になりました。