【課題】Webサイトデザイン制作｜2025.7

＜PCデザインカンプ＞

＜クライアント情報＞

クライアント名：WORK ,inc. 

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

 ＜要件＞

ターゲット：

• ビジネススクールWORKの会員様
• ビジネススクールWORKの会員ではないがWORKが気になっている方 

目的 ：

• WORK lounge Aoyamaについて知ってもらうこと 

＜ペルソナ＞

川上 望美 (32)

• 東京在住
• 某メガベンチャー ゲーム事業部 部長（8年目）
• 既婚で旦那さんと二人暮らし
• 仕事で成果を出したい

背景や行動：

• 仕事が大好きで今までスキルアップには多くの投資をしてきた
• 同じような目標を持った同年代の女性と繋がりお互いに切磋琢磨しあいたい
• 会社外での人脈を作りたい

ニーズやゴール：

• 仕事での成果をもっと出していきたい
• 経営への理解も含めてゆくゆくは役員になりたいが、起業も考えている
• 強いチームを作るためマネジメントやコーチングのスキルも学びたい

＜Webサイトのコンセプト・テーマ＞

青山にあるおしゃれで上質なコワーキングスペースのWebサイト。キャリアアップを目指す女性たちが集まり、切磋琢磨できる場所。落ち着いて集中できる雰囲気を表現。

この雰囲気そのものが気に入れば、ビジネススクールの会員にもなってみようと思える。

＜ワイヤーフレームのブラッシュアップ＞

• 下へスクロールしてもらえるように１ｓｔビューで「コンセプト」のセクションが少し見えるようにした。
• 未入会者にはまず会員登録をしてもらうため、スクールのＨＰへのリンクを追加。コンセプトを読んでスクールのことを知った後、スムーズに会員登録できる導線作り。
• ご利用方法とアプリＤＬをページ上部へ、優先度の高いセクション順に並び替え。
• セクションの並び順とヘッダー、フッターメニューの並び順を統一。
• アプリＤＬ＝ＣＴＡボタンは追従ヘッダーに含めることでクリック率を高める。
• ドリンクメニューはページ下部へ、画像もイメージ１枚のみに。相対的に他のセクションの訴求度を上げる。

＜ムードボード（配色とコンセプト）＞

• メインの紺でビジネスらしさ、大人っぽい雰囲気を表現。
• ベースは薄いグレーで、可読性は落とさず、でも全体的に落ち着いた雰囲気に。
• アクセントカラーはポップすぎずフレッシュなグリーン。アプリＤＬのボタンに、共通してピンポイントで使うことで印象を強くする。

＜工夫した点＞

• 女性がメインターゲットだが、女性をイメージしやすい赤～ピンク系の色は使わず、ビジネスライクで中性的な雰囲気に。コワーキングスペースとして、個々が集中できる場所を表現しつつも、同じようなキャリア志向の人とも交流できる場所として堅苦しくならないようなデザインにした。
• クライアントから頂いたままのワイヤーフレームに縛られすぎず、最初の要件定義・ペルソナを見返して、目指すゴールにつながるデザインになっているかどうか考えながら取り組んだ。
• これまでの課題で学んだ図解説明などのあしらいや、参考サイトを調べていいと思った構成を積極的に取り入れて、シンプルでわかりやすい、行動につながるサイトを目指した。

＜学んだこと＞

• Webサイト制作の流れを学ぶことができた。ワイヤーフレームとデザインカンプ、時にはムードボードも行き来して、より最初の要件定義に沿ったデザインを制作するためにブラッシュアップすることも学んだ。
• コーディングの事を考慮したデザイン制作を学ぶことが出来た。