【架空】コワーキングスペース『WORK lounge AOYAMA』Webサイト デザインカンプ

🔹使用ツール：Photoshop、Illustrator

🔹制作時間：ワイヤーフレーム約10時間、デザインカンプ約12時間

🔹目次

　・制作物（PCデザインカンプ、ムードボード）

　・課題要件（今回のお題、ペルソナ）

　・工夫点（情報設計、ビジュアルデザイン、配色）

　・学んだこと

◾制作物

🔸PCデザインカンプ

◾課題要件

🔸今回のお題

【クライアント名】WORK,inc

・働く人々に新しい可能性を提供する事業を複数展開。

・事業のひとつに都内で働くビジネスパーソン向けのコワーキングオフィスを運営。

・会員は30代の女性が多く、キャリアアップのために日々仕事や勉強に励む意欲的な人々が集まるコミュニティとしても機能している。

🔸ペルソナ

今回のペルソナは、クライアント側から掲示されたものです。

◾工夫点

🔸ワイヤーフレームの再考

クライアントから提供されたワイヤーフレームを元に、より情報が伝わりやすくなる構成を考え直しました。

🔸コンセプト・第３の居場所としての「心地よさ」、向上心のある大人を表現する「スマート」「大人っぽさ」をキーワードに設定し、初めての方でもわかりやすいシンプルでわかりやすいサイトを目指しました。

🔸配色

・落ち着きや大人っぽさをイメージした深みのある色を使用しています。

・ベースカラーには薄い灰色をベージュを使用しています。彩度の低い色が多い中で、暗い印象になりすぎないようなカラーを意識しました。

・メインカラーは2色の紺を使用しています。女性利用の多いコワーキングスペースということでしたが、男性ユーザーも想定し、性別差を感じさせないようにしました。

・アクセントカラーには温かい雰囲気をイメージしたオレンジを使用しています。紺と色のトーンを揃えることで、暖かさと大人っぽさの両立ができるようにしました。

🔸ビジュアルデザイン

◾学んだこと

・バナーと一緒で、ワイヤーフレームの段階で情報のメリハリをしっかりつけておくことが大切だと思いました。今回は提示されたワイヤーフレームがありましたが、ペルソナを意識して構成を変更したり、セクションを追加したことで、よりコワーキングスペースの魅力が伝わるデザインになったと感じます。

・ムードボードを作ったことで、「どんな世界観にしたいか」がはっきりしデザインカンプが作りやすくなりました。クライアント側とデザインの方向性に対する共通認識を持つためにも、自身がブレなく制作をしていくためにも、デザインを具現化しておくことが大切だと感じました。

・実際にサーバーアップされた状態をしっかり見越してデザイン制作をすることの大事さを感じました。最初は自分が見やすい拡大率のまま作業を進めてしまい、CTAボタンが大きすぎたり、セクション間の余白が広すぎたりすることがありました。今後は、こまめに実際のサイズ感を確認しながら作業を進めていきたいと思います。