Inside BuildIt

株式会社ビルディットのデザイナー・エンジニアによるブログです

第1回 八王子のデザインチームが八王子のGood Designを探す企画

八王子のWeb開発企業 ビルディットのメンバーは、基本的に八王子が好きです。
「八王子からも質の高いサービスは生まれているんだ」ということを世に知らしめるべく、日々業務に励んでいます。

そんな有志の「八王子応援団」は、もちろんビルディットばかりではありません。
見渡すと意外に多い応援団員。八王子にはいろんな活動をしている「イケてる人々」がたくさんいる。八王子で働く・活動する人はことさら「八王子」にこだわりと愛着を持っている━━。
そんなことを、八王子内外の人に広めたいと思い、今回の企画をはじめました。

目次

八王子界隈の「Good Design」を見つけて語り散らかそう!

この企画、「今月見つけた良いデザイン」を題材にして毎月ワイワイやっていきたいと思います!
せっかくの初回なので、八王子のオフィシャルサイト!それと公式ではないものの知名度の高いサイト!にフォーカスしました。

Member紹介

このメンバーでお届け!

  • 🦄イシジマミキ (デザイン顧問)
  • 🐶石崎 (リードデザイナー)
  • 🦊佐野 (エンジニア)
  • 🐧小澤 (デザイナー)
  • 🐷大木 (広報)

🐷大木:一発目は初回にふさわしいチョイスにしましたよ!

八王子市公式シティプロモーションサイト

f:id:miyakmakij:20191220142853p:plain
https://www.city.hachioji.tokyo.jp/citypromotion/index.html

🦄🐶🦊🐧 おお〜!なんだかすてき!

🐷 八王子市役所「都市戦略部都市戦略課」さんが運営しているサイトです。八王子の「良さ」を調べていたとき見つけました。

🦄🐶🦊🐧 都市戦略ぶとしせんりゃk…

🦄 イシジマ:じゃあ、せっかくデザイナーもエンジニアもいるし、それぞれの職種的な観点でレビューしてみましょう!

🦊 佐野:少しコード覗いてみます👀
CSSの命名はlower camel caseで書かれています。
画像にalt属性が設定されていて丁寧ですね!
Google Analyticsも埋め込まれて計測されています。
JavaScriptではjQueryを利用されてますね👀 👀 👀
レスポンシブ対応したり、古いIEに対応してるあたりにも公的なページらしさを感じます。

🐶 石崎:文字を画像で置いていて、ヘッダーメニューのイラストもたぶんゼロから書いていそう、一つ一つの仕事が細かくて更新の手がかかってます。全体を一枚絵として見ても完成度が高い!

マウスを乗せたときのインタラクションもいいですね。
「街のみんなに聞いてみた」のコンテンツは人がモノクロのタブになっていて皆「クリック!」って言ってて、クリックするとタブもカラーになって、「クリック!」も言わなくなって。
あと全体を通して写真が上手!

🐷 「珠玉のPHOTO GALLERY」というコンテンツでは 八王子の絶景写真をオープンデータ集で提供もしているんですよ。いつか使おうと目論んでます(笑)。

🐧 小澤:UIで見ると、インタビュー中心で人の顔がよく出ていて八王子のイメージに繋がりやすいですよね。メインは八王子に引っ越そうかなと思っている家族向けかな?「子育てしやすい」イメージを強く出してます。情報が詰まりすぎていなくて、余白が適度で読みやすいのもいいですね。

f:id:miyakmakij:20191220162726p:plain

🐷 「住む」「子育て」の文脈はすごく伝わってきますよね。
だけど個人的には「働く」の要素が薄い気がしてそこだけちょっと残念だな〜と。

フリーランスや自営で働く人は紹介されているんだけど、会社勤めの人は「市外に勤めている」「都心までのアクセスが良い」っていう文脈。「八王子にある魅力的な会社で働く」っていうイメージを強めていけたらいいなと思います。都市戦略課に投書してみようかな…。

🦄 …あっっ! ここでちょっとした悲報なんですけど。 このサイト、今年度中にリニューアルするみたい?!早く記事にしないと、もしかしたら明日にはリニューアルで変わっているかもしれない!

🐶🦊🐧🐷 ええっっ!!?

f:id:miyakmakij:20191225133315j:plain
ナント…

🦄 でもなるほど、それなら今の八王子のブランドメッセージ・ブランディングと、このサイトのアートディレクションに差分があるのは納得できます。

サイトに書いてる「都会にないもの。田舎にないもの。ここにある」は2016年当時のブランドメッセージ。
今年「あなたのみちを、あるけるまち」の新しいブランドメッセージに変わって、今それに合わせたリニューアルサイトを一生懸命作っているところなんでしょうね。

f:id:miyakmakij:20191220163127p:plain

🦄 ブランドメッセージの変遷も面白いな〜!
以前のはどちらかというと、都会と比較して自然が近くにあることを推してますよね。都会からの転入者に対してアピールしている印象。
新しいほうは、都会とも田舎とも比較していなくて独自の価値を謳っているし、転入してくる外の人だけじゃなく、在住者の満足度へも訴求している印象。

八王子が持っている価値や外に見せたいもの自体はきっとそんなに変わってはいないと思うけど、打ち出し方を転換しています。
今年のブランドメッセージには、八王子でも自分にとって価値ある仕事ができるという文脈も入ってくるんじゃないかな?!

🐷 期待がふくらみます!

>>まとめ
以前のコピーを体現し、しっかりアピールしているサイト。
自然の豊かさとゆったりした印象をアースカラーと明朝体、しっかり書かれたイラストとキレイに撮影された写真を多用し、やさしくまとめ、はじめて見た人にビジュアルの豊かさで八王子という町の好印象を作っている。
細かいギミックやアニメーションに手を抜かずすごく丁寧に作られているなぁ。
あたらしいコピー「あなたのみちを、あるけるまち」になりこれからリニューアルという事で、このコピーをどのように視覚的に表現するか楽しみ!

🦄 自分の住んでいる街がこんな良いコンテンツを持っているのすごくいいですよね。

🐷 そうなんです。八王子は都内だけどイケてない田舎っていうイメージを持たれがちなんですが、イケてることもたくさんあるぞと。イケてる人がたくさんいて、その人たちの八王子愛が強いというのが強みなんだなと確信しましたね!(キリッ。

そういう観点で選んだのが次に紹介するサイトで…。

高尾山マガジン

f:id:miyakmakij:20191220150342p:plain
https://mttakaomagazine.com/

🦄🐶🦊🐧 おおお!!

🐷 いまや登山者数が世界一の山、MT.TAKAOですので、このサイトの存在価値は凄そうですよね。

🦊 ちょ、自分、コードじゃなく元・登山部目線でレビューしたいです。コンテンツがめちゃくちゃしっかり作り込んでいます。登山路ごとの難易度やポイントが丁寧に書かれていて、初心者はもちろん登山部のような経験者にも有益な情報ばかり

最新ニュースやブログの更新頻度も高くて、台風の影響が出ている登山路の状況だったり、整備中で利用できないトイレがあるとかの細かい情報も、ものすごく実用的です。

f:id:miyakmakij:20191225114025p:plain

🐶 フォントがすごく可愛いし、山のデザインも良い! あと最新ニュースでもブログでも、 タイムスタンプがちゃんと出ているのが良いと思います。

🦄 タイムスタンプ重要!! サイトの作りとしては、 デザイン性よりはコンテンツ重視。本当に更新頻度が高いです。「高尾山」の検索でかなり上位だしSEOも強いですね。GAすごいことになっていそう!

🐧 英語版サイトもちゃんとあるみたいです。

🐷 目の付けどころが細かい!
実は高尾山マガジンさんからお聞きしたのですが、英語サイトは現在、公式リリース前の鋭意準備中なのだそうです。
年明け以降に正式にリリース予定とのことでした。

🦊 すごい!確かに外国人観光客すごく多いでしょうから、英語版サイトのニーズもめちゃくちゃ高そうですもんね。
今でも十分コンテンツの価値が確立されているのにさらに進化してるのか…。

>>まとめ
圧倒的なコンテンツ量とその情報の鮮度を意識したデザインをしながらも、グラフィックひとつひとつのクオリティが高くて素晴しい。
レイアウトとしては一般的なカタチながらもそれらが組み合わされる事でより情報の信頼性をデザインにより担保している気がする。
ユーザーが求めるものを敏感に反映させようとする気概が、英語版の用意だったり、下山の時間、記事の更新時間の記載などにかいまみえる。

オンガタマルシェ(クリープストア)

f:id:miyakmakij:20191220150410p:plain
https://www.creap.store/onmaru2019

🐷 オンガタマルシェは、八王子市の中でもだいぶ山の方(雑な説明、、)の地域で、そこで年に1度か2度かな?開催されているお祭りのようなイベントです。

詳しいわけではないんですが、もともとデザイナーの方が恩方の地域が好きでそこにデザイン事務所とアンティーク雑貨のお店を作られて、地域の方々との関わりの中でもっとこの地域を発展させたいということで、オンガタマルシェを企画されたとか…。

🦄 いや〜、その話だけですごいドラマティック! かっこ良い!!モニターに向かっていることが多いデザイナーが地域の課題感を持って地域の人を巻き込んで活動 している。まさに「越境」だし、「コミュニティデザイン」。

🐶 サイトは、たぶんもともと雑誌のような誌面がベースな気がします。
クリエイティブがすごくカッコ良いですよね。Webサイトとしてはそこまで手をかけてはいないのかもしれないですけど、レスポンシブ対応にもなっているし、それでいて「PC推奨ですよ」とも書いてあるのが親切です。

🦄 地図とか俯瞰図もイチからつくってる、これ作るのすごく大変だったろうな。
イベント自体は誰か行ったことありますか?

🐷 最初に語っておいて実は行ったことないです、、前々回で初めてイベントを知って行きたいと思ってたんですが、わたしが場所が不案内なのと運転ヘタなのでちょっと自信がなくて。。
次回は事前確認しておいてゼヒ行きたいと思ってるんです。

🦊 自分もどこかで広告を見たことがあるし、広報活動もしっかりやってるんでしょうね。出店数も70店舗はすごい!

>>まとめ
さながら雑誌のよう。デザイン事務所であり、その視点で雑貨店も経営するcreapさんが開催するオンガタマルシェ。
活動の場が幅広く、地域とのつながり、コミュニケーションをおろそかにしないスタイル、その行動力がデザイナーとしてカッコよくて憧れる。ストーリーとして見てもとてもドラマティック!

🐷 駆け足にお付き合いありがとうございました!
今日は絞りまくって3つのサイトを見ていきました。
今後も八王子界隈のカッコ良いサイト探訪しながらワイワイしたいです。ゆくゆくは八王子界隈のデザインを集めたショーケースを作れたらと思っています!

🦄 内輪の視点でも、他のみんながどこをどういう視点で見ているのかが分かって良い企画でした!良いデザインを見るのもいいし、なによりデザイナー同士でも視点の持ち方が違うというのが気づきでしたね〜。

🐷 なるほど〜。
職種ごとの視点でレビューしたのも面白かったです!
エンジニア🦊さんだけでなく、リードデザイナー🐶さんもかなりコードレビューしてましたよね。
デザイン顧問🦄さんはブランディングからのコメントがさすがの鋭さ、デザイナー🐧さんはユーザー視点のレビューが納得でした。
あ、🦊さんは登山部としてのレビューも…(笑)。
各人の個性や得意分野がこんなに出てくるのがとっても新鮮でした!

次回も珠玉のデザインを集めて挑みたいと思います!!

⭐️最後に宣伝です
八王子の株式会社ビルディットはこんな会社です。
現在、デザイナー・エンジニアを募集しています。
ご興味をお持ちくださった方はお気軽にご連絡ください!

bldt.jp