ノマドカフェWork innサイト制作

サイト制作で意識した点

・ゆうこさんが大事にしているコンセプトを絶対に崩さないこと
・ディング時にコーディングしやすいデザインにすること
　┗パディングやマージンの大きさを８の倍数で統一
　┗写真の大きさや要素の大きさを統一すること
・デザインに意味を見い出すこと
　┗配色やコンテンツの見せ方...etc

この３つを僕なりに意識してデザインの制作を行いました。

今回のコンセプトは「働く場所を、もっと自由に」です。この想いを形にしていくにはどんなデザインがいいのか。

色んな参考サイトを見たり、僕なりに考えたり、ゆうこさんの話を聞いたり実際にWork innに足を運んだりしながらデザインを起こしていきました。

Work innはコワーキングスペースではなくノマドカフェ

デザインを作っているときに常に念頭にあったのはこれでした。そしてコワーキングスペースとの差別化をデザインに反映させるために、コワーキングとノマドカフェのキーワードを羅列しました。

一般的なコワーキングスペースのイメージキーワード

寒色系（青色や水色等の涼しげな色）、綺麗、高級、凛、スタイリッシュ、かっこいい、スピーディー、スーツ、ビジネス、個人事業主、ビジネスマン、キャリアウーマン、角ばっている、

ノマドカフェのイメージキーワード

暖色系（オレンジや赤色等の暖かみのある色）、ゆったり、可愛い、柔らかい、自由、親しみやすい、ゲストハウス、ノマドワーカー、フリーランス、カフェ、丸みを帯びている

こんな感じでキーワード羅列し、デザインのイメージを形にしていきました。

丸みを帯びた、でも所々締まったデザインへ

元々はDrop inn Osakaというゲストハウスのラウンジを日中解放しているのがWork innの強みでもあったので、Drop inn Osakaのメインカラーにしアクセントカラーとして暖色系のカラーを設定しました。

そうしたカラー設定でデザインを作ることで、海外の方との「交流」であったり、「可愛さ」や「柔らかさ」を表現、全体的にフラットデザインに落とし込むことで、「親しみやすさ」も同時に表現してきました、

また、Drop inn Osakaの「Drop」の文字をアイコン化してデザインに追加することでサイト全体に立体感を与え、フラットデザインでものっぺりしすぎないようにも意識しました。

テンポよくスクロールできるデザインへ

基本的にスマホユーザーがほとんどなので、スマホで見る時のコンテンツ量にも注目しました。あまりに一画面のコンテンツ量が多すぎると鬱陶しくなるので、カード型のデザインでコンテンツをまとめ、テンポよくスクロールできるよう意識しました。

JINのデザインと調和できるように

今回の仕様としてWordPressテーマJINを導入することが予め決まっていたので、JINとのデザインであまりにもデザインがかけ離れないようデザインを調整しました。

幸い今回はJINのデザインとWork innのデザインの方向性が似通っていたので複雑なことを考えることはなかったのですが、フォントに関しては「Noto Sans」と「Montserrat」、アクセントとして「Signatura」を使い、記事の読みやすさやサイトとしての統一感を出しました。