制作期間・・・2週間
使用ツール・・・Photoshop
制作物
- PC版デザインカンプ 幅1440px
- SP版ワイヤーフレーム 幅375px
PC版デザインカンプ
クライアント：Work inc
働く人々に新しい可能性を提供する事業を複数展開。事業のひとつに都内で働くビジネスパーソン向けのコワーキングオフィスを運営。会員は30代の女性が多く、キャリアアップのために日々仕事や勉強に励む意欲的な人々が集まるコミュニティとしても機能している。
目的
WORK lounge AOYAMAの新規会員の獲得
ターゲット
- 都内で働くキャリア志向の強い30代ビジネスパーソン。
- これまでリモート中心だったのに週3-4の出社が求められるようになった
- せっかくの外出や出社の機会を前向きに捉えたい
- 通勤ラッシュの時間帯をずらして時間を有意義に使いたい
ムードボード
工夫したこと
情報設計
- 初めと終わりに利用申込のボタンを設置することで、サイトの訪問者が知りたい情報を見て施設のイメージをつかんだ上で利用申込につながるよう訴求しました。
- 利用方法や利用プランについての情報が視覚的に分かりやすくなるよう図解で表現しました。
ビジュアルデザイン
- ベースカラーに白、メインカラーに青みがかったグレーを使用し、都会的で落ち着いた・洗練された雰囲気を表現しました。
- ご利用プラン
プランが3つあることが視覚的に分かるようカード型にしプランごとに色を変えました。
- 利用申込・見学ボタン
アクセントカラーのオレンジを使用し、重要な要素が目立つ配色にしました。
学んだこと
今回はワイヤーフレームがある状態からデザインカンプを制作することに挑戦しました。 デザイン制作の前にムードボードを作成することで、デザインの方向性を固めたり、イメージを共有する方法を学びました。写真選びやフォント選び、配色選びや余白の設定、トンマナの分析、参考にするサイトやあしらいなど、考えることや分析する・探すことがとても多くWebサイト制作の流れを体験することができました。