【課題】LPデザイン（会員専用カフェ＆コワーキングスペース）

（１）制作情報

制作時期：2024年8月
制作時間：2週間
使用ツール：Photoshop
制作の目的：
・ワイヤーフレームがある状態からデザインカンプを制作することに挑戦する
・イメージを固めるためのムードボード作成に挑戦する
・Webデザインをする際に気をつけるべき点を学ぶ
・前回の課題でインプットしたPCとスマホのレイアウトの変化を自分で考えられるようになる

（２）要件

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

・目的
会員様限定のカフェ＆コワーキングスペース「Work Lounge Aoyama」を新オープン予定。認知拡大のためWebサイトを立ち上げたい。また、Work Lounge AoyamaをきっかけにビジネススクールWorkの会員を増やしていきたい。

・ターゲット
ビジネススクールWORKの会員様
ビジネススクールWORKの会員ではないがWORKが気になっている方
20~30代のビジネス感度の高い女性

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

（３）制作物

▼PCデザインカンプ、SPワイヤーフレーム

（４）情報設計

要件の内容から情報設計をさらに深掘りし、元のWFを見直しました。

・ユーザーストーリー
目的としている「コワーキングスペースの認知拡大」「ビジネススクールWorkの会員数拡大」を達成するために、ユーザーにとってほしい行動とプロセスを組み立てました。

・ムードボード
組み立てたユーザーストーリーから、LPのイメージボードを作成しました。

・ワイヤーフレーム
組み立てたユーザーストーリーから、ワイヤーフレームを見直しコンテンツを追加&変更していきました。

（５）制作にあたって工夫した点

・配色
ターゲット層やペルソナから、「洗練」「誠実」「品や落ち着きのある」をテーマに配色を設計しました。
メインカラーに青みの効いたグリーンを使用し誠実なイメージに、ベースカラーにグレージュやベージュを使用し優しく洗練されたイメージに、全体的に大人の落ち着いた雰囲気が表現できるよう配色を検討しました。また、アクセントにピンクやイエローを使用し、数字やイベントのお知らせ等重要な要素に目が留まるよう工夫しました。

・読まなくても伝わるイラストやアイコンを使用
ページを読み込まなくても直感的に内容が伝わるイラストやアイコンを使用しました。LPのトンマナに合わせてシンプルで分かりやすいデザインにしました。

・ワイヤーフレームの見直し・コンテンツの追加
LPの目的や要件からワイヤーフレームの内容を見直し、他社サイトと比較しながらユーザーが自然に下部までスクロールできるよう、各コンテンツの順番を検討しました。

（６）制作を通して学んだこと

・WEBデザインの基礎
ワイヤーフレームの設計からPC・SPそれぞれのUI/UXを意識した構成を考えること、またコーディングすることを想定して、フォントサイズや余白に規則性を持たせることも大切だと言うことを学びました。

・目的に沿ったデザインを作ること
LP制作の目的を正確に理解し、目的達成のためにクライアントの要件を深掘りし、情報設計をしていくことを学びました。