大阪ノマドカフェWork innのサイト制作を通じて感じたこと
こんにちは。最近ジムに週３で通い始めるも背中の筋肉が悲鳴をあげ療養中のりょうたです。
先日、ノマドカフェ「Work inn」のデザイン制作〜システム周りまで全て一貫して行いリリースさせていただきました。
オーナーのゆうこさん（@ymmt825yk）がめちゃめちゃいい人すぎて、初めてWork innにいった時「あ、この人だからできたノマドカフェだな」と正直思いました。
コンセプトは
「働く場所を、もっと自由に」
ゆうこさんの経験やWork innにかける想いを聞いたときは、素直に
「すげぇ...」
と語彙力のかけらもない感想を抱いたのを覚えています。。w
・1日980円で1日使い放題（ドリンクも飲み放題だよ）
・全席電源完備（まじで全席にコンセントあるよ）
・コワーキングみたいな堅苦しさがない（カフェみたいな空間だよ）
もうなんかほんとにすでにすごい...！！（語彙力）
打ち合わせの度に僕が大好きな「たけのこの里」を出してくれて、ほんとこちらもいくつも不手際があったのにも関わらず顔色１つ変えず真摯に向き合っていただいたおかげでこんなのいいサイトに仕上げることができました。
こんないいサービスのサイト制作に携われたのは次に繋がるいい経験になったし、
「人に喜んでもらうことはこんなにも素晴らしいことなのか」
と改めて実感することができました。
ゆうこさん今回は本当にありがとうございました。
これからも宜しくお願いします。
気になる人はここからサイトをチェックしてみてね！
【デザイン】サイト制作で意識した点
さて、唐突ですが僕はまだまだデザイナーとして未熟です。だからこそデザインを制作する時は必ず「何かしら意識する」ことを欠かさず行なっています。
それは、デザイナーとしては当たり前ではあるのですが、それでもふとした瞬間にその基本を忘れてしまうので僕はこうして必ず何か作った時には
「自分フィードバック」
をやっています。
今回意識したのは、
・ゆうこさんが大事にしているコンセプトを絶対に崩さないこと
・コーディング時にコーディングしやすいデザインにすること
┗パディングやマージンの大きさを８の倍数で統一
┗写真の大きさや要素の大きさを統一すること
・デザインに意味を見い出すこと
┗配色やコンテンツの見せ方...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」を使い、記事の読みやすさやサイトとしての統一感を出しました。
デザイン作成時の反省点
デザインを作成する時に、最初に意識した点は概ね守ることはできたのですが、作成した後に「あぁ、こうしておけばよかったなぁ」と思うこともいくつか見つかりました。
・ディティールの詰めが甘かった
・コーディング時のことをあまり考えることができなかった
・スマホ時のデザインカンプを作る時間がなかった
ディティールの詰めが甘かった
これはデザインを作成してコーディングに移った時に実感したのですが、画像やアイコンが変わるとイメージも変わるということを全く念頭に入れてませんでした。
「コーディング時に画像やアイコンを入れましょう」
というのは提案してしまったのはあまりにも愚の骨頂でした。。もちろん時間的な制約もあったので全て対応するのは難しかったのですが、それも言い訳にしかなりません。
スケジュールを明確に決め、それを含めて提案する必要があると実感しました。
コーディング時のことをあまり考えることができなかった
正直これが一番致命的でした。。。
一応デザイン制作時にpaddingやmargin、横幅などは計算していたのですが、コーディング時に計算していたことをすっかり忘れてしまいコーディングの量が増えていきました。
これは大きなロスです。
今回は初めてBEMやFLOCSSを導入したのにも関わらず、実装時には計算したものがどうなっているのかわからなくなってしまいうまくデザインからコーディングへ繋ぐことができませんでした。
主な原因はBEMやFLOCSSの仕組みをうまく理解できてなかったからなのかもしれませんが、少なくともデザインを制作する時からこれを意識できているともう少し時間的に短縮できたかもしれません。。
スマホのデザインカンプを作る時間がなかった
スマホフレンドリーが主流であるのにも関わらず、スマホのカンプが無いのは普通はありえないのに。。
PCのカンプを作る時にスマホのデザインも頭の中で考えながら制作はしていたのですが、それをクライアントに共有できてなかったのが今回の反省点の１つです。。
スケジュールもあるのでタブレットまではいかなくとも、スマホデザインもしっかり共有しお互い納得した上でコーディングに進むべきでしたと反省。。
デザイン的な反省はここまでです。次回サイト制作をするときは同じミスをしないように（どうやってミスしないようにするかは今考え中）しようと思います。
【コーディング】サイト制作で気づいた点と反省
デザインの反省が終わったのでお次はコーディング。久しぶりにマークアップを書くのもあり「覚えてるかなぁ」と正直不安だったのですが、頭で覚えてなくても身体が覚えていました。。w
・SCSSを使うこと
・BEMに従ってクラスの命名を行なっていくこと
・FLOCSSのファイル構造を使うこと
上記を意識しコーディングを行なっていきました。参考にしたサイトは以下です。
上記サイトを参考に僕なりに今回のフォルダ構造と命名規則を決め、マークアップを行なっていきました。
気づいたことを簡単にまとめます。
ページをコーディングするのではなく、Blockをコーディングして貼り付ける
この感覚がコーディングを終えた時に感じた感覚でした。
普通コーディングするとなると、
「TOPをコーディングして、次に下層コーディングして...」
って感覚だと思うのですが、設計をしてコーディングすると出来上がったデザインを俯瞰的に見て、
①同じブロックを探す
②そのブロックに同じクラスをつけてコーディング
③全てのブロックをページに貼り付けていく
おそらくもう少し視野を広く持ち、ページ全体を俯瞰的に見ることができれば上記の流れでもっと効率的にコーディングを進めることができるはずです。
正直これが合ってるかどうかはわかりませんが、次回機会があればトライしてみようと思います。
命名規則があるので時間的なロスが減る
Blockに対してクラスをつけるので、そのBlockが何を表しているのかをそのままクラスにしてしまえば考える時間が比較的少なく済み、ロスを減らすことができました。
これは意識してやったのである程度できたとは思いますが、命名するものが「Block」なのか「Element」なのか判断するのに時間がかかり今回はあまり実感はなかったです。
次回ここは改善ですね。。
【結論】できたけど、できてない。。
上記はコーディングが終わった時に気づいたことで、今回はうまく実装することができませんでした。Block要素をページ単位で見ることができず、同一ページ内でしかBlockを作ることができませんでした。
他のページでも同じようなBlockやElementがあったのにも関わらず、それを無視して作ってしまったのでdiv要素が無駄に多くなってしまったり、細かな部分でクラスを追加したり、命名した名前が何を表してるのかよくわからなかったりと散々でした。。
僕しかきっと触らないのでいいのですが、他の人から見たら
「なんだこれは...」
と思ってしまいそうなコーディングになってしまいました。。
ただ、問題点は自分の中でしっかり明確にできたので次回はもっとコーディング早くなると思っています。
【まとめ】学びと達成感、自分の未熟さを痛感
そんなこんなで「デザイン」と「コーディング」を分けて自分なりにフィードバックしてみました。結果的にゆうこさんにかなり喜んでもらえたので達成感はすごいあります。
最終的にはお客さんに喜んでもらうもの、使ってて楽しいサービスを提供していくのが僕の信念なので良かったと思っていますが、同時にまだまだ未熟な部分があるなぁとも思ったお仕事でした。
次の仕事で絶対に活かすぞ〜٩( 'ω' )و
ではでは。。