Facebook 【課題】サービスサイト デザインカンプ(2024年)
Logo

【課題】サービスサイト デザインカンプ(2024年)

クレジット
Avatar
WEBデザイナー
【課題】サービスサイト デザインカンプ(2024年)-1
シェア
制作ノート
【課題】架空のコワーキングスペースのサービスサイト

スクール(SHElikes MULTI CREATOR COURSE)の課題として、架空のビジネススクールの会員専用コワーキングスペース「WORK lounge Aoyama」のサービスサイトを制作しました(デザインカンプまで)。

使用ツール:Photoshop

制作範囲・時間(合計25:45h/7日)

・ユーザーストーリー(1h)

・ワイヤーフレーム(6:30h)
 *PC版ワイヤーフレーム(クライアント提供)の修正提案(4:15h)
 *スマホ版ワイヤーフレーム(2:15h)

・ムードボード(※後日掲載予定)・コンセプト(2:15h)

・デザインカンプ(16h)

架空クライアント情報(課題要件)

クライアント:WORK, inc.

女性向けのビジネススクール「WORK」を展開している。

WORKの会員は20〜30代の女性が多く、キャリアアップのためにビジネススキルを学べるほか、定期的にビジネスコンテストなどのイベントが開催されている。

近日中にWORKの会員専用のカフェ&コワーキングスペース「WORK lounge Aoyama」のオープンを控えている。

目的(課題要件)

1、WORK lounge Aoyamaの認知拡大

2、(WORK lounge Aoyamaをきっかけに)ビジネススクールWORKの会員を増やすこと

ターゲット(課題要件)

・ビジネススクールWORKの既存会員

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

・20〜30代のビジネス感度の高い女性

工夫した点

【ワイヤーフレーム修正】

●「ABOUT “WORK”(ビジネススクールWORKとは) 」を新たに追加

・サイトの目的に「ビジネススクールWORKの会員を増やすこと」もあるため、スクールについて簡潔に説明した上で公式サイトに詳細を見に行けるセクションも追加しました。

・ファーストビューおよびコンセプトのテキスト内に会員というワードが出てくるため、気になった方がすぐに情報を確認できるよう、これら2セクションの直後に配置しました。

「INFORMATION(ご利用案内)」を新たに追加

・どんな過ごし方が可能かという情報に欠けると感じたため、基本的な情報を網羅したセクションを追加しました。

・あくまでイベントや交流、学習活動を通して成長する場のため、ドリンクメニューは1セクションとして独立させるほど重要な情報ではないと判断し、このセクションの中の1コンテンツとしました。

・元々「アクセス」に含まれていた営業時間は、1時間あたりの利用料金の近くに記載されている方が利用のイメージがしやすいと判断しこちらに移動しました。

「SYSTEM(ご利用方法)」に写真を追加

・テキストだけではややイメージがしづらいと感じたため、各手順を表す写真を追加しました。

「FAQ(よくある質問)」をアコーディオンメニューに

・疑問のある人だけが見る箇所なので、項目別にアコーディオンメニューの形にしました。

「ACCESS(アクセス)」に最寄駅と徒歩分数を追加

・利用者にとって所要時間がより分かりやすいよう、最寄駅と徒歩分数を追加しました。

【デザインカンプ】

◆「CONCEPT(コンセプト) 」:イメージ写真を追加し余白を多めに

・つかみの大切な部分であり、もっと雰囲気を持たせてゆったりと伝えたかったため、「理想の姿に向かって頑張るあなた」をイメージさせる写真を追加し、テキストは改行を増やし行間も広めに取りました。

◆「洗練」「信頼感」→ネイビー

・セグメントは20〜30代女性ですが、ペルソナが部長職とかなり経験豊富な人であるため、かわいらしさや綺麗さよりもビジネス的に洗練されたイメージや信頼感を全面に出すことにしました。

この発想から、アクセントカラーおよび雰囲気を締める色として深いネイビーを採用しました。

◆「若さ」「軽やかさ」「安心感」→緑みのライトブルー

・とはいえ年齢の若い人が多いことから、この年代に親しみを感じてもらえるよう、軽やかな色をメインカラーに使用しました。

・この経験値でこの若さの女性は現状母数が少ないため、そのような人が集まれる場所も少なく、したがってこの場所はとても貴重な場所になるのではと考えました。これを踏まえ、安心感や楽しさも感じてもらいたく、穏やかなイメージのある緑の色味を含んだライトブルーを選びました。

◆光や透明感のイメージ→白(+グラデーション、半透明)

・コンセプトの光のイメージや明るい未来のイメージを持たせるためにグラデーションや半透明の色を多用したかったため、ベースカラーはそれらが活きやすい白としました。

・意志や覚悟がはっきりとあるイメージを持たせるために、前述の2色とのコントラストが際立つ色が良いという意味でも白を選びました。

シェア