Inside BuildIt

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

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

東京で積雪予報の日にいつもフォーカスされる八王子、東京なのに「山」のイメージの強い八王子、何かとちょっとイケてない?イメージがつきまとう八王子。   

「八王子のGood Designを探す企画」は、”あえて”八王子の地で、「作る」手段を目的とした、質の高いサービス開発に取り組んでいる私たちビルディットのメンバーが、八王子にあるイケてるクリエイティブ・イケてる人々を紹介しようと始めました。  

そしてこの企画も4回目となりました。(前回の記事もぜひご覧ください!)  

今回は私たちにとってとても嬉しい出来事が🙌  
社内メンバーだけで続けてきた座談会ですが、今回なんと、社外からお二人のゲストにご参加いただけることになりました😆  

まずはゲストのお二人をご紹介します🎉   

ゲスト紹介(自己紹介いただきました〜)    

相田さん
デザインシンフォニーの相田です。2009年から八王子でWEB制作やってまして、最近はビデオカメラやドローンも使って動画制作もとりいれてます。今年はバーチャル空撮映像制作という新サービスを開始しました。今後Youtuber活動なんかも企画中です。実は八王子市のコピー「あなたのみちをあるけるまち」の市民制作委員みたいなのも参加しておりました。趣味は、旅行、登山、温泉、お酒、スキーです。どうぞよろしくお願いします!  

design-symphony.com

吉住さん
2ヶ月前に個人事業主となりました!
前職はデザイン制作会社でクリエイティブディレクション業務に携わり、10年間突っ走ってきました。(当初はデザイン未経験からの挑戦でした!)
700案件以上(たぶん)のクリエイティブ制作に関わる中でデザインへの理解が深まり、私の心と体がピッタリつながる”私はこれがやりたい!”が少しずつ明確になりました。
現在は、「人間はみんなクリエイティブだ!」を掲げ、デザイン経営に取り組むjoin先企業で、CDO(デザイン責任者)としてデザイン思考を広め中です。  

 

f:id:miyakmakij:20200831095112p:plain
 

お二方どうぞよろしくお願いします!!  
そのほか、社内の参加メンバーは6名。社内からも今回初参加のメンバーが2名います。  
今回は社内メンバーも簡単に紹介してみます〜    

参加者紹介(自己紹介)

あきねん:(ファシリテーター)
前職はフロントエンドエンジニアでしたが、昨年の11月にビルディットに入社し、WebサービスやアプリのUI/UXデザインに携わっています。ファシリテーションは初めてです!

uniq
「うに id:uniq 」です!さいたま在住。ビルディットのシニアデザイナーです。Figma, XD あたりでUIやプロトタイプを作ったり、フロント実装もしたり、メンバーの育成を考えたりの毎日です。最近アニソンのライブに行けなくて寂しいです!

斉藤
今年の6月にビルディットに入社し、座談会は初参加です。経歴の多くはゲーム業界ですが、Webサービスに携わっていた時期もあります。右も左もわかりません!

福田
今年の4月にビルディットに入社、WEB・UIデザインに携わるお仕事をしています。
座談会に初めて参加させていただくので、とてもワクワクしています!

Grape
2018年4月からデザインアルバイトでビルディットに参加しています。中国人留学生です!今は院生2年で人間工学専攻です。ユーザエクスペリエンスの研究に挑んでいます。日本語力がまだ足りないかもしれませんが、頑張ります!

大木
ビルディット採用広報の大木です。デザインやエンジニアリングについては全くの素人ながら、八王子のクリエイティブを日々探しています。  

 

--------------- ⛰ 🍅 🌿⛰ 🍅 🌿⛰ 🍅 🌿 ---------------   

   

あきねん:それではさっそく1つ目のサイトを見ていきましょう〜!  

  

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

f:id:miyakmakij:20200826132451p:plain

(引用元) 八王子市公式プロモーションサイト https://www.city.hachioji.tokyo.jp/citypromotion/(参照 2020-08-25)

大木:こちらのサイト、つい最近リニューアルされていました。元の旧サイトは第1回目の八王子デザイン座談会で、最初に取り上げたサイトでして!八王子市の公式サイトにも、近日リニューアル予定ということを書かれていたので、楽しみにしていたんです。
旧サイトについて語った時のブログはこちらです。  

inside.bldt.jp

あきねん:この八王子市のブランドメッセージ「あなたのみちを、あるけるまち。八王子」は良いコピーですよね。ビルディット入社前にこのコピーを初めて見て、それまで鎌倉に住んでいて八王子にはあまり具体的なイメージを持っていなかったんですが、覚えやすくて意味も素敵なコピーで、良い印象に変わったのを覚えてます。
相田さんはこちらのメッセージの制定に関わられたんですね!  

相田さん:そうなんです!市の職員5名ほどと公募と抽選で選ばれた市民メンバー15名ほどの合わせて20名くらいのチームで、4つのブランドメッセージ候補を作るというプロジェクトでした。数回のミーティングで、まずは八王子から想起するキーワードを付箋を使って貼り出していったりしました。バスで八王子の街を回って見たりもしましたね。

一同:すごい!!

大木:こちらに紹介されている活動のメンバーだったんですね。
1回目の座談会でこのブランドメッセージがかなり話題に上がって、成り立ちにみんな興味持ってました。
(ブランドメッセージができるまで)  

ブランドメッセージ「あなたのみちを、あるけるまち。八王子」|八王子市公式ホームページ

  

あきねん:今回全員オンラインなので、これまでと座談の方法を少し工夫してスプレッドシートを使っていきます!  

  

f:id:miyakmakij:20200826133822p:plain

  
あきねん:それでは上がったポイントごとに見ていきましょう!  

カラフルな色使い🎨  

f:id:miyakmakij:20200826133959p:plain

(引用元) 八王子市公式プロモーションサイトhttps://www.city.hachioji.tokyo.jp/citypromotion/ (参照 2020-08-25)

相田さん:ロゴのカラーに注目しました!
使われているカラーは、水色オレンジグレー
八王子を良く表しているなぁと感じました。

緑は高尾山を代表する緑豊かな自然
水色からは、八王子は実は水が豊富なこと(78か所の湧水など)
オレンジ色は、明るくアクティブに歩いていく
そんな思いがつまっている気がします。  

そしてその色遣いが見出しの色や、アイコンの色など随所につかわれていて、統一感があって良いなと思いました。
フッターをブルーで締めているのも水みずしいイメージで良いですね。  

uniqカラフルだけど、うまくまとまっていますよね!  

Grape:全体的に明るい色で、リラックス感ありますね。  

斉藤:全体的にトンマナが守られていますし、八王子=山というイメージが強くて山を表す緑だけになってしまいがちですけど、他の色の効果がとても効いていますよね!  

動きや形のユニークさ🐒  

f:id:miyakmakij:20200826134914p:plain

(引用元) 八王子市公式プロモーションサイトhttps://www.city.hachioji.tokyo.jp/citypromotion/ (参照 2020-08-25)

吉住さん:動きと写真の鮮やかさが際立って見進めたくなるワクワクさを感じますねー!けっこう動きが多めなんですが、優しい動きで見やすさは守られてますね。
全体的に自然なアニメーションが入っていて触ってて楽しい。あちこち触りたくなります。  

相田さん:全体的にサクサク感があって気持ち良いですよね。  
画像にCSSをつかった「柔らかさ」や「優しさ」の曲線の表現とか、広すぎず狭すぎない空間の使い方とか…イイ感じです!    

斉藤レスポンシブ対応がしっかりされているのも良いと思います。公共のサイトだとされてないものも多いですよね。  

uniq:「みんなの暮らし、きいてみた。」のコンテンツ、正円じゃなくふんわりした楕円形で、あたたかみがありますね〜。  

福田:曲線でもルールのある曲線ではなく、手作り感・手描き感がある曲線で、人にフォーカスされたサイトが表現されているように感じます。  

吉住さん:このコンテンツの記事のページを見ると、見出しが途中途中で内容が分かるように入っていて、程よく読み飛ばせるのもいいですね。 

写真がとても良い📷✨  

f:id:miyakmakij:20200826135451p:plain

(引用元) 八王子市公式プロモーションサイト_フォトギャラリーhttps://www.city.hachioji.tokyo.jp/citypromotion/gallery/index.html (参照 2020-08-25)

斉藤:写真がステキですよね。

Grape:純粋にキレイな写真だし、住んでいる人々のイメージだとか、地元感をたっぷり感じますね!

吉住さんオープンデータとして利用できる写真を置いてくれているのも良いですよね。何度か利用させてもらってます。    

ブランディング💎  

吉住さん:こういった自治体の公式サイト、特に「プロモーションサイト」とありますが、コンバージョンはどういう事と考えられているんでしょうね。プロモーションの相手は、住む人や住みたい人。と思って良いでしょうか。

相田さん:そうだと思います。若い世代の方、特に子供ができて間もない方に、八王子に住んでもらおうということだと思います。
八王子って最近「住みたい街ランキング」で少しずつランクが上がっているんですよね。興味を持って調べてくれた人に「住んだときの擬似体験」ができるような内容になっているのではないでしょうかね。

斉藤:小さな子供がいる親世代がメインターゲットだとすると、親しみやすい雰囲気と真面目な感じがターゲット層にマッチしそうですね。

吉住さん:globalメニューのところ、「ホーム」とかのタイトルの上にロゴで使っている足のイラストがついてるのカワイイですよね〜。こういう遊び心がすごく好き。私も自分の仕事でいつも何かひとつ遊び心を入れたいと思ってます。

uniq:メニューのワードも言葉が優しいですね。

福田:たしかに。全体的に言葉遣いが堅いところがなく、柔らかいですね!

 

あきねんまとめ。
「あなたのみちを、あるけるまち。八王子」という八王子の新しいブランドメッセージをしっかり中心に据えて作られているビジュアルであり、コンテンツだと感じました。
ロゴ・見出し・アイコンと統一されたカラーは、八王子を象徴する色使いでまとめられ、随所に散りばめられた写真画像を際立たせていますね。
全体的にアニメーションを多用しているけれども、優しい動きや曲線の表現、余白の使い方などに工夫で見やすく、かついろいろなリンクを開いてみたくなるようなワクワク感を醸成しているのもさすがです。
前回のサイトで標榜していたメッセージが「都会にないもの。田舎にないもの。ここにある」でしたが、新しいメッセージになったことで、幅広い世代が豊かに生きるための街としての機能は充分に整っていること、そして人の雰囲気は少し田舎のような温かみがあること、自分らしい道を見つけて暮らしている人の姿などが良く現れているなと思いました。

やはり新しいブランドメッセージ「あなたのみちを、あるけるまち。八王子」から、素晴らしいクリエイティブですね!

  

中西ファーム  

f:id:miyakmakij:20200826161617p:plain

(引用元) 中西ファーム公式サイトhttps://nakanishifarm.jp/ (参照 2020-08-25)

大木:こちらも今年に入ってHPをリニューアルしたそうで、私たちビルディットも何度か記事を掲載いただいている八王子ジャーニーさんに紹介されていて知りました。  

8dabe.com

 

制作は弊社もお付き合いさせていただいている八王子の制作会社アットサポートさん、そして西多摩郡のコトリコさんというデザインやブランディングの会社さんとのこと。
コトリコさんのHPは初めて拝見しましたが、多摩地域のお仲間として要チェックや!と思いました。  

  

f:id:miyakmakij:20200826162026p:plain

(引用元) 中西ファーム公式サイト_農園について https://nakanishifarm.jp/about/ (参照 2020-08-25)

あきねん:それではこちらもポイントごとに見ていきましょう!  

  

なんといっても写真👧🏻✌🏻  

f:id:miyakmakij:20200826162206p:plain

(引用元) 中西ファーム公式サイトhttps://nakanishifarm.jp/ (参照 2020-08-25)

吉住さん:画面いっぱいのヒーローイメージは好みです!子供の笑顔というのは誰でもやられちゃいますよね〜。

Grape:フルスクリーンの写真は迫力がありますね!

相田さん:私もまずはメインビジュアルに注目しましたね。
本当に1枚目とてもいい写真もってきてますよね。「個性が主役」というキャッチコピーにぴったりだし。
2枚目もファームの雰囲気とみんなの雰囲気出ていて良いし、あと左上の葉っぱもいいんですよね。写真に入れなくてもいい要素をうまくかくしてます。

uniq:ウェルカムな雰囲気出てますね!
「いいものを作る」だけでなくて「みんな来いよ〜」みたいな感じがします。
たしかに「食べ物」は、どんな人も考えるテーマで、そういった社会的な役割も考えてるのかなと。そんなところまで感じさせるビジュアルですね。  

吉住さんタイルギャラリーにも写真がたくさん載っていますね。通常だと4枚くらい載せてあとはスクロールにしちゃうことが多いけど、たくさん載ってても世界観が伝わってきてとても良い。気にならないですね。  

  

色使いの妙🎨  

f:id:miyakmakij:20200826162438p:plain

(引用元) 中西ファーム公式サイトhttps://nakanishifarm.jp/ (参照 2020-08-25)

相田さん:TOPのカラフルさと、グレーや、ホワイトを背景に使うことで、目立たせたい情報を目立たせてるのも良いです!トンマナをうまく組み合わせていて見やすくしていますね。

福田余白が大きく、全体的にすっきりさせていることで、自然の風景や野菜の緑の鮮やかさがよく目立っていてバランス良く感じました。  

フォントが凝っている🖌  

f:id:miyakmakij:20200826162632p:plain

(引用元) 中西ファーム公式サイト_農園について https://nakanishifarm.jp/about/ (参照 2020-08-25)

uniqフォントが雰囲気に合わせて考えられてますねー。
「農園について」のページの「未来」や「歴史」などの装飾もメッセージとマッチしています。

斉藤:お知らせの部分の『情報』『出店』『旬』などの見せ方やデザインが面白いなと思いました。ハンコみたいなデザインでインパクトがあって良いですよね。「ナカニシファーム」のNFで作られたロゴと合わせているんでしょうね。  

コンテンツ🎁  

f:id:miyakmakij:20200826162922p:plain

(引用元) 中西ファーム公式サイト_日々の記録 https://nakanishifarm.jp/category/blog/ (参照 2020-08-25)

Grape:「日々の記録」というブログのページがあるんですが、こまめに更新されていて、農作業の実感や楽しさ・やりがいが伝わってきていいですね。

斉藤:ブログで日々の情報とか農園の裏側を知れると、安心感があるなと感じましたね。文面からノリが良さそうな方々という印象なので、今後農園で働く人のメッセージ動画なんかもちょっと期待してしまいます(笑)
あと、TOPページで旬の野菜を紹介されているのも良いなと思いますね。

吉住さんGoogle MAPが実際の写真画像なのは珍しいですよね?Googleアースでしょうか。私はあまり他で見たことがないです。  

福田リアルで面白いですよね。

Grape:実際の周囲の風景が分かるから、「なるほど、こういうところなのか!」と思いました。

相田さん:周囲が自然いっぱいのところで作っていることを伝える趣旨で使われているのかもですね。農場の広さだったりも。
背景のモノクロの画像も周辺環境とリンクさせているのかもしれませんね。

ブランディング💎  

uniq「終わりのないドラマを、みんなと、農業で」というメッセージ、みんなを巻き込むというメッセージ性を感じるし、農園を会社として運営されている勢いがあってとても良いなと思いました。

斉藤情報発信を積極的にしている、コンテンツマーケティングに積極的なファームなんですね。

  

あきねんまとめ。
ファームの個性を打ち出し発信することで、農園の作物により興味を持ってもらうようにしているみたいですね。それだけにどのような人たちがどんな野菜を毎日どんな風に作っているかを丁寧に発信しており、日々の記録を読んでいると顔見知りになれたような気がします。

さらに歴史あることを感じさせる年表や写真、農園で作業する人たちの写真などが豊富で、安心感を作っている重要なコンテンツであり、更新頻度の高さとそれを見やすく、かつビジュアルでもキレイに見せられるのは制作者さんがその流れをしっかり把握して作ってるからこそなのだなと思いました。

農園の方々だけでなく、Creditにお名前が上がっている方々の想いの強さも感じ取れますね!

 

大木:今回の「八王子のクリエイティブ」はここまでの予定でしたが、最後に番外編でもう一つご覧いただきたいです!

  
 手作り工房 四季の家    

f:id:miyakmakij:20200827102140p:plain

(引用元) 手作り工房四季の家TOP https://www.okutamas.co.jp/sikinoie/ (参照 2020-08-25)

大木:こちらは奥多摩の名産品を直売するお店のサイトですが、前述のコトリコさんがブランディングから携わられたと書かれていました。まさに「地域×デザイン」だなぁと思ったので一言感想だけいただければと!

相田さん:こちらのサイトも全体的に写真がとても上手に使われていますよね。奥多摩の自然にはぐくまれた名産品・特別感が伝わってきます。

uniq:商品写真に必ず葉っぱを入れているとか、シズル感が演出されていますね。
フォントで使われている色も赤でなく朱色というのも、ハンコのような古来日本ぽさを感じますね。

f:id:miyakmakij:20200827102405p:plain

(引用元) 手作り工房四季の家_商品紹介 https://www.okutamas.co.jp/sikinoie/goods/ (参照 2020-08-25)

吉住さん:この朱赤はとても印象的ですよね。
TOPぺージに人がでてこないという点にも少し意外性を感じました。
あとブログがけっこう頻繁に更新されているんですよね!ブログページのTOPで紹介されているスタッフの皆さまだけで運営されているとしたら本当にすごいと思います!
 

f:id:miyakmakij:20200827102526p:plain

(引用元) 手作り工房四季の家_スタッフブログ https://www.okutamas.co.jp/sikinoie/blog-2/ (参照 2020-08-25)

斉藤:やっぱりロゴのシンプルかつ落ち着きのある感じがステキですね。
商品の写真の装飾の緑は色のバランスが取れていて良いですね。

福田:製品がメインのサイトですね。全体的に暖色が使われていて、緑の自然なイメージもあるので、製品が体に良さそう・美味しそうな感じが伝わります。
白地にグレーシャドウのコピーの書き方なども、素朴な雰囲気に合うと思いました。

Grape:レイアウトが揃っていて、綺麗で洗練された印象を持ちました。
コンテンツの間隔が大きくて読みやすいのも良いですね。  

  

あきねんまとめ。
こちらもサイトも、中西ファームさん同様、土地に根付いているものや、人々の魅力を充分に引き出して表現されているなと感じますね!  

  

--------------- ⛰ 🍅 🌿⛰ 🍅 🌿⛰ 🍅 🌿 ---------------   

  

さて、今回はこちらで終了となります。  
相田さん、吉住さんお付き合いいただきありがとうございました!  
お二方は以前の八王子Good Designブログを読んで下さったり、ゆるはち.itへのご参加をきっかけに、今回の座談会へのご参加に至りました。  
「八王子のイケてるクリエイティブ・人々を紹介したい」というこの企画の当初の目的が、形になってきたようでとても嬉しいです。  

  

今回は初の全員オンラインということで、いつものようなざっくばらんな話の拡がりが十分でなかったかなーという反省点もありました。  
これを改善点に次回も楽しく企画していきたいと思っています。  

 

ちょっとだけ次回の予告ですが、コロナ(COVID-19)禍に、地域の飲食店の力に少しでもなればという有志の方によって新設された八王子界隈のテイクアウト専門サイトが実はたくさんありました。  
それらをいくつか見ながら魅力を見つけていきたいと考えています。  

相田さん、吉住さんにもよろしければぜひご参加いただけたら嬉しいです!  
この記事でまたご興味をもって下さったお近くの方がいらっしゃればぜひお気軽にお問い合わせください!  

 

bldt.jp