八王子好きなビルディットのメンバーが八王子に関わるさまざまなイケてるデザイン(主にWebサイトが対象)を探してワイワイと紹介する本企画も、第3回目となりました。
初めての方は、第1回、第2回の記事も、お時間があるときにぜひ見てみてください！
この企画の始まりは、弊社がデザイナー採用を一生懸命がんばっていたとき。
イケてるクリエイターさんは都心に集まりがちだけど、八王子にもなかなかカッコいいクリエイティブがあるよねという雑談の流れで、それらを集めたショーケースを作ってみたい・まずは月1回くらいのペースで、八王子かいわいで見つけたクリエイティブを出し合って語る機会を作ってみよう！という話になり、まずはブログで(勝手に)紹介してみることにしました。
(もちろん、記事を見つけたデザイナーさんが興味を持って連絡してくれるかもしれない？！という思惑もあり…)
それが当たったかどうかはわかりませんが、そこからじわじわとデザインチーム拡大中です😎😎😎
3回目ということで、会の設定に変化をつけてみたくなり、今回は座談会の進行をリードデザイナーの石崎 id:uniqが担当してくれました🥳 
参加メンバーはこちら！
今回取り上げる八王子界隈の「Goodデザイン」はこちら〜👇
TAKAO５９９MUSEUM
TAKAO599 MUSEUMは、高尾山の動植物とか登山ルートなどを紹介したり、カフェがあったりという、高尾山麓にあるステキな観光施設です！施設運営は京王エージェンシーさんとのことです。
スクロールしていくとこんなメニュー表示が出てきますね〜。
リンクボタンがピコピコくるくる動いていてかわいい！サイト全体にアニメーションが多用されていますよね。
とくにすごいと思ったのがこの「高尾山の歩き方」のページです。
山が回転していますね〜。
山のしたにある数字が1号路、2号路という登山ルートを表していて、ホバーすると該当するルートが見える向きまで山がぐるっと回転して止まります。
これは、ゲームでよく使われているテクスチャアトラスと同様の手法ですね。下記のような画像を詰め合わせたアトラス画像を1枚準備していて、css classを変えることによって必要な画像を切り出す → 切り出し位置を変更することでアニメーションしているように見えるといった構造です。
CSSスプライトかな。HTTPのリクエスト数を節約できる技術。
1枚1枚の画像でコマ送りアニメーションを作ると、ページを表示するとき画像数分のHTTPリクエストが走るけど、1枚の画像にすれば、HTTPリクエストが1回で済むので高速になるのですよね。
遊びがある表現で面白いな〜。
距離や所要時間に大小をつけるなどグラフィックデザインの手法である対比を用いて作り込まれていてすごいですねー！
このように細かく作ろうとすると桁数や複数行に渡った場合など、考えることが非常に多くなって見た目以上に時間と苦労があったと思います。
クリエイティブは作りやすさとその煩雑さのトレードオフにいつも悩みますが、発注者、制作者が一体となって目指すクリエイティブに取り組んだという真剣さが伝わってきますね。
余白を丁寧に作りこんでいるので少ない色数でも見やすく表現されていてすごいな！
ルートごとに難易度などしっかり説明が入っていますね。
ワンゲル部だった視点でみると地形図が載っているのは親切だなと思いました。
あと、この「高尾山のルール」が本当に大切な情報だと思います！
たくさん観光客がくる山ってどうしてもゴミの投棄があったりで汚れてしまうので、長い目で高尾山の将来を考えたらこういうモラルの警鐘を目立つところに書いてあるのは重要なことだと思います。
この動物なにかなと思ったら、ムササビですね！すごくカワイイ。
生息しているんですよね。
一瞬タヌキかな？と思ったけど、腕を広げた姿でムササビをちゃんと表現してますね。カワイイ〜。
ムササビといえば、次のページにもイラストがあって…
このページも一つひとつのアイコンが動いているんですが、動物図鑑のムササビのアイコンが、丸めた体から手をパッと広げたときに飛膜の柔らかそうな感じがすごく表現されているんですよ。
このページの「図鑑」として紹介されている動植物の写真、最初はグレーになっていてホバーするとクリアになるようになっていますね。
サイトのカラーというか、モノトーン調の雰囲気作りを大切にしているんでしょうね。
そう感じますね〜。あとフォントも「TAKAO599o」というオリジナルフォントを作っているみたい。すごい！凝ってますね！
ページごとに見どころがたくさんあるサイトですよね！
「高尾山のあるまち"八王子”」というGoogle Mapを使って八王子の名所を紹介するページも面白い動きです。
なるほど！このGoogle Mapのピンを改編するの、作業がけっこう煩雑になりますよね😅
Mapを表示するエリアを絞ることができて、パーンする動きが気持ちいいですね。
一見、ピンのイラストはなにを表しているんだろう？と思ったのですが、すぐ下に「見る・遊ぶ・食べる」の説明がありますね。クチビルは食べるなのか。笑
SHOPで販売されているお土産も、ミニマルで洗練されてますね〜。
昔ながらの観光地土産も味わいがあって好きですが、こんなデザインなら長く日常使いできそう。
全体的に雰囲気づくりを大切にしていますよね。
まとめ
独自のフォントを作ったり、高尾山をオシャレにプロデュースしていて、国際的な観光地として外国人や県外から訪れる人に対してどう見せたいか・なにが求められているのかをブランディングして、ワールドワイドに高尾の魅力を伝えているサイトであり、施設だと感じました。
それでは次のサイトにいきますよ〜！
にちにち寫眞
八王子・多磨地域を拠点として活動されているフォトグラファーさんのサイトだそうです。
八王子にある会社さんのコーポレートサイトをいろいろ見ていたところ、ある会社さんのヘッダーに使われている写真がとってもステキで✨
たまたまその写真を撮影されたフォトグラファーさんが紹介されていたので、調べてみたらこちらのサイトを見つけました！
TOPの画像とキャプションがストーリーのように何枚も展開されて、どの写真もすごく引き込まれますね。どれも本当に日常の一コマを切り取った風景で、個性があって何枚見ても飽きないです。
サイト自体はシンプルなつくりで、WordPressで作られてますね。
やはりトップの写真のインパクトが大きいですよね。
ご自身で全部作られているんじゃないかなと想像しました。
特徴である写真の良さを最大限に伝えられるように、写真周辺の文字入れは本気でやっているのが伝わってきます。
それ以外の部分はWordPressのテンプレートをうまく使って最小限で作られているのかもしれないですね。
このAboutに書かれている文章など、写真だけじゃなくライティングが的確ですごく良いなと！
「家族の日常を愛おしく記録する」という言葉通り、本当に毎日の日常的な風景をそのまま切り取るのがすごく好きなんだろうなというのが写真からも伝わってきますね。
「プライベートドキュメンタリー専門の出張写真館」と書いてあり、この プライベートドキュメンタリー というのはたぶん写真のカテゴリーとしては造語なのかなと思うんですが、その言葉と「写真館」というあえて昔ながらの言葉を選んでご自身をブランディングしていますよね。
出張”フォトグラファー”というほうがたぶん一般的かと思うんですが、あえて「写真館」と書かれているのは写真館の持つ歴史や地域性などのキメ細やかさを持ちたかったのかもしれないなと感じました。
このタグクラウドをみると、「日常」や「なんでもない日」「晴天・曇天」などが大きく上がっていて、他のスタジオ型といわれるようなフォトスタジオが、いわば非日常的に素敵な空間での写真を売りにしているのに対して、独自の価値を持っているのを感じますね。
これはお願いしたくなっちゃいますね！
まとめ
そのブランディングに基づいた丁寧な文章と、それらの価値が見事に現れている写真が、強い説得力となって見る人の心を動かすなぁと思いました。
⛰ 📸 ⛰ 📸 ⛰ 📸 ⛰ 📸 ⛰
第3回目もお付き合いいただきありがとうございました！
今回は社内メンバーの大部分が参加、しかも半数がリモート参加というファシリテーター泣かせの開催でしたが、 石崎 id:uniqさんファシ役お疲れさまでした！
(※当座談会は、3月2週目に実施いたしました)
4月現時点では全員が在宅勤務となり、この状況がいつまで続くのかなかなか見通しがきかない現状ですが、全員がリモート参加でも！また次回座談会は企画したいと思っています🔥🔥🔥
八王子かいわいのデザインを集めたショーケースを作れる日まで、ワイワイとサイト探訪していきます！
⭐️最後に宣伝です
八王子の株式会社ビルディットでは、一緒に学び成長する仲間を募集しています。
ご興味をお持ちくださった方はお気軽にご連絡ください！
