【スクール・課題】LPデザイン制作(会員限定のカフェ&コワーキングスペース)

OVERVIEW

SHElikes MULTI CREATOR COURSEにて、LP制作課題に取り組みました。PC版ワイヤーフレームの修正と、PC版・SP版のデザインカンプ制作を行いました。(制作時間:2週間)

YEAR 2021

目次

①デザイナー視点でのWF修正
② 制作したLP
③ 工夫したこと
④ 制作を通して学んだこと

①デザイナー視点でのWF修正

〈課題で提示された要件〉

  • クライアント情報
    <クライアント名:WORK,inc.>
    女性向けのビジネススクールを展開している。 会員は20~30代の女性が多く、 キャリアアップのためにビジネススキルを学び、 さらにそのアウトプットの場として定期的にビジネスコンテストなどのイベントも開催されている。
  • 目的
    会員様限定のカフェ&コワーキングスペースをオープンすることになったため、WORK rounge Aoyamaについて知ってもらいたい
  • ターゲット
    ビジネススクールWORKの会員様
    ビジネススクールWORKの会員ではないがWORKが気になっている方
  • ペルソナ
    【属性】30代 既婚女性 東京在住
    【背景や行動】仕事が大好きで、スキルアップに多く投資してきた。同じような目標を持った同年代の女性と繋がり、切磋琢磨しあいたい。会社外での人脈を作りたい。
    【ニーズやゴール】仕事での成果をもっと出していきたい。経営への理解も含めてゆくゆくは役員になりたいが、起業も考えている。強いチームを作るためのマネジメントやコーチングのスキルも学びたい。

⬇️

課題内では仮のPC版WFがありましたが、自分で要件に沿って情報設計を練り直し&デザイナー視点での修正を加えました。

(左から:

課題内の仮のPC版WF→自分で修正後のPC版WF自分で追加作成したSP版WF



② 制作したLP(PC版・SP版


③ 工夫したこと

■サイトゴールを再設定し直した

クライアントの要件から「本質的なゴール」は何かを考え、汲み取りながら制作しました。今回、クライアントの当初の目的は「WORK lounge AOYAMAを知ってもらうこと」でしたが、サイトゴールを「アプリダウンロードしてもらう(→結果、施設の実際のご利用に繋げる)」へ再設定しました。それを踏まえた上で情報設計を練り直し、制作しました。

■事業特性を踏まえたWEBブランディングをした

コンセプト「都会の洗練されたキャリアウーマン」

キーワード「モダン・自立・情熱・挑戦」

クライアントの提供サービス(女性向けビジネススクール)やペルソナを踏まえ、キャリアに対して前向きかつ意欲的に勤しむ女性をイメージしました。ビジネスライクな中にも女性らしさを感じるデザインにし、クライアントの事業とWEBサイトでブランディングの方向性が統一されるよう意識して制作しました。

■配色

ベースカラー(白)、メインカラー(赤)、アクセントカラー(黒・茶)

・明度高めの赤→情熱・勢いを表現。ハツラツ・イキイキとした印象を持たせました。

・白黒→モダンを表現。赤は白と組み合わせることで視認性をあげました。

・茶→モダンさを邪魔しないように木の色を採用し、ワンポイントとして使用しました。

自作のムードボードを活用


■UI

⑴情報をコンパクトにまとめ、伝える

「メインビジュアル」〜「HOW TO USE」まで。(会員・非会員さま共通部分)

コワーキングスペースの全体像や詳細を、セクションごとにイメージしながら施設の理解を深めて頂けるように制作しました。加えて、ペルソナに近い女性の写真を随所で使用し、閲覧者さまがご自身に投影頂けるようにしました。

また、サイト離脱を防ぐために写真はスライダーを使用、イラストを加えて飽きない工夫などしました。


⑵取っていただきたいユーザーアクションへ繋げる

打つべきアクションが明確になるセクションを設置し、全閲覧者さまがサービスのご利用に繋がるように設計しました。

【既存会員様のゴール】アプリをダウンロード


【非会員様】今回をきっかけにビジネススクールWORKへ入会


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

WEBデザイナーは要件書を通して

①サイトのゴール(ユーザーアクション)を明確にすること。

②ペルソナに世界観を伝えること。

を汲み取るスキルが必要だと実感しました。クライアント様の実績に貢献するためにも、デザインスキルと合わせてヒアリング力や分析力も高めていこうと思います。