【実践課題】LPデザイン制作（会員限定のカフェ＆コワーキングスペース）

OVERVIEW

SHElikes MULTI CREATOR PROJECT にてLPのPCワイヤーフレームの修正およびデザインカンプの制作、SPワイヤーフレーム制作を行いました。 [制作時間：30H / 使用ツール：Photoshop／Illustrator]

YEAR 2025

１．制作物

２．要件定義

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

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

●ターゲット
・ビジネススクールWORKの会員。

・会員ではないが、WORKが気になっている方。

＜ペルソナ＞

【属性】30代既婚女性東京在住
【背景や行動】仕事が大好きで、スキルアップに投資をしてきた。同じような目標を持った同世代の女性と繋がり、お互いに切磋琢磨しあいたい。会社外での人脈を作りたい。
【ニーズやゴール】仕事での成果をもっと出していきたい。経営への理解も含めてゆくゆくは役員になりたいが、起業も考えている。強いチームをつくるため、マネジメントやコーチングのスキルも学びたい。

３．制作のポイント

（１）情報設計

以下の画像の通り、目的の達成のために、優先順位の変更や新しいセクションの追加などを行いました。

①「News/Event」セクションの追加

「活気のあるコワーキングスペース」という印象を与えるため、冒頭にNews/Eventセ　クションを追加しました。

②コンセプトセクションでの画像の追加／③ボタンの追加

・ペルソナ自身と重ねてもらうために、「30代くらいの女性が未来を見据えている」写真を配置しました。

・まだ会員でないターゲット層にアプローチするため、WORK lounge Aoyamaについて知る別ページへ遷移するボタンを配置しました。

④「サービス内容」セクションの追加

どんなサービスがあるのかを分かりやすく表示する「サービス内容」セクションを追加しました。また、リズムよく読み進められるように、配置を交互にする工夫をしました。

⑤「ドリンクメニュー」セクションの優先順位変更

元のワイヤーフレームではドリンクメニューのセクションがありましたが、目的を踏まえると優先順位は低いと考え、メニューを紹介する別ページに遷移するボタンに変更しました。

⑥「設備」セクションの追加

用意されてある設備が事前に分かれば利用者の荷物を減らせると考え、設備セクションを追加しました。

⑦「ご利用方法」セクションの追加

初めて利用する利用者の「どうしたら使えるのだろう・・」という心理的ハードルを低くするため、ご利用方法セクションを追加しました。

⑧「アプリ紹介」セクションの追加

利用開始するステップのハードルを低くするために、アプリの紹介セクションは幅をとり、画像を挿入して存在感を高める工夫をしました。

また、App storeとGoogle Playページに遷移するボタンを用意して、iphoneユーザーとandroidユーザーが迷わずにアプリをインストールできるようにしました。

（２）デザイン

①トンマナ・配色

■ムードボード

■配色

仕事が好きで、スキルアップに前向きな女性がペルソナであるため、そのペルソナ像から「落ち着いているが、内なる熱気を持つ都会の大人の女性」をイメージするカラーを選択しました。ベースカラーは白の他、青山という都会を表すグレー、メインカラーは落ち着いた女性を表すベージュ系、アクセントカラーに、「内なる熱気」を表す濃いめの赤を使用しました。

アクセントカラーは、一番目立つボタンに使用しました。ベースカラーは、セクションの区切りがわかりやすいようにセクションごとに色を変える工夫をしました。

文字色は、最初は黒（＃333333）にしていましたが、全体の雰囲気と合わなかったため、茶色（#423734）に変更し、世界観の統一に努めました。

■フォント

文章は、基本的にクセがなく中立的な「Noto Sans JP」を用い、読みやすさを重視しました。あしらいとして、適宜欧文フォントの「Cabin」を用い、親しみやすさ・信頼感を与えられるようにし、Lucida Handwriting Italicで大人っぽさを演出しました。