【実践課題】コワーキングスペースのLPデザイン
SHElikes MULTI CREATOR CORSEにてコワーキングスペース&カフェのLPデザインに取り組みました。架空クライアントの依頼を受け、PCデザインカンプとSPワイヤーフレームを作成しました。ターゲットにあったビジュアルデザインを落とし込みました。
⚫︎制作要件
・クライアント情報
クライアント名:WORK ,inc
キャリアアップを目的とした女性向けのビジネススクールを展開
20-30代の女性会員が多く、定期的にビジネスコンテストなどのイベントも開催してる
・目的
ワークラウンジAoyamaの認知拡大
ビジネススクールWORKの会員を増やす
・ターゲット
ビジネス感度の高い20-30代の女性
スクールの既存会員様、会員ではないが気になっている方
・ペルソナ
東京在住の30代女性
自身のスキルアップのために積極的に自己投資するビジネス感度の高い女性
・ペルソナのニーズ
仕事の成果を今以上に出したい
社会的にインパクトのある仕事をしていきたい
・提供素材
ワークラウンジAoyamaのロゴ、PCのワイヤーフレーム
⚫︎制作物
⚫︎情報設計
クライアントから提供されたPCのワイヤーフレームを見直し、
下記のように要素を追加しました。
修正後のワイヤーフレーム 各要素の役割
コンセプト
「私らしく、私のための、もう一つの場所。」
・私らしく
会社にいる時とは違う、ありのままの自分になれる空間の提供。居心地の良さなど。
・私のための
スキルアップのゴールへ近づけるような環境の提供。セミナーや交流会など。
・もう一つの場所
私だけの特別な空間。多忙な毎日と一旦切り離して自分との時間が作れる場所。
配色
自然が連想され安らぎや落ち着き、疲労回復の心理的効果を持つ緑をアクセントカラーにおきコンセプトにもある「居心地の良さ」を表現しました。
ペルソナの年齢層から、深みのある緑を使うことでより上品で大人の雰囲気を出しています。あまりフォーマルでパキッとした色味にしすぎると会社にいるような緊張感を感じてしまうため、明度の高いベージュを使うことで優しさや女性らしい丸みが感じられるようになっています。
シンプルなレイアウト あしらい
ペルソナのような「成長意欲の高い人」とはどういった人物なのか、どんな特徴があるのかをまずはじめに考えました。
特徴を洗い出し、分析してみた結果(赤文字)今回のLPはシンプルなデザインにした方がペルソナの価値観や性格に沿っていると判断しました。
⚫︎工夫したところ
ヘッダー
LPを下にスクロールした際、ヘッダーがついてくる仕組みになってます。
ロゴ、メニューのテキストカラーが白のため、背景に少し黒のグラデーションをかけてスクロールしても目立つように工夫しました。
また、上記に記載した「成長意欲の高い人」の分析結果をもとに「お問い合わせ」ボタンは視覚的に目立たせた方がいいと考え、アクセントカラーである黄色を使用しました。
LP全体を通して黄色を使用しているのは唯一この部分のため、より一層視線を惹きつける効果を持っています。
メインビジュアル
メインビジュアルの中央にコンセプトコピーを大きく配置することで、見ている人がより「一体何の施設なのだろうか」と興味を示してくれると考えました。
短くシンプルなコピーなのに加え、文章の最後に句読点をあえてつけることで見ている人へ問いかけている、あなたに向けたLPである。という印象を強く与えています。
フォント
初めはコーディングのことを考え、全てのテキストを「Noto Sans JP」で統一していましたが、最終的には各セクションの見出し部分はテキスト(源ノ明朝)を画像img形式にしてLPに挿入しました。これにより、カフェが持つおしゃれな雰囲気や落ち着きの空間といった世界観をテキストでも表現することができました。
写真・アイコン
情報を簡単に理解することができるように写真やアイコンを多用したデザインにしました。アイコンに関してはシンプルでありつつ丸みもあり、柔らかさが感じられるものを使用しました。
⚫︎制作を通じて学んだところ
クライアントの要望に沿ったデザインを作り上げるには、デザインに落とし込む前の情報設計作りが本当に大切ということを学びました。
ペルソナのニーズをしっかりと理解することで情報の優先度やデザインの方向性が固まり、ブレのないデザインを実装することができました。