Tr宝asures

Web / App

Aug.2022　　CrossPoint

カフェに合ったメディアとしてのウェブサイト。スプレッドシートで管理、更新できるようにする。

CrossPoint

飲食店にとって、SNSでバズることが必ずしもプラスになるわけではないらしい。常連さんを大切にする店ほどメディア露出を嫌うというのを知った。そこに今ホームページを作る意味があると思った。インターネットに載せられた文章と画像という面ではホームページとSNSは同じであるが、流れている時間が違う。SNS疲れという言葉があるように、カフェでの流れる時間とは対極である。そんなゆったりとした時間は、タイムラインがないホームページでこそ表現できるのではと考えた。

カフェのウェルカムボードを参考に、天気予報APIを使い、気象に応じた文章と写真を表示するほか、時間に合わせてメインビジュアルや、タブのファーストビューを決定する。劣化版SNSを目指すより、同じようだけど日々違うという変化がカフェに合うメディアだと思った。また、ウェブサイトの運用を自分たちで行ってほしいので、スプレッドシートで更新できるようにすることで、サイト運営だけでなく、コンテンツのアーカイブを表で管理することができる。

OUTLINE
概要

設定	カフェのウェブサイト

コンセプト

カフェに合ったメディア。ウェブサイトで寄り添う。

制作時間	4か月(公開日2022年8月23日)

使用算譜	javascript

URL	crosspoint-cd.org

PRODUCTION PROCESS
制作過程

< 見た目提案① >

< 見た目提案② >

構想
メインビジュアル

話をしていく中で、一つのカフェではなく、CrossPointは一つの経済圏の構築を目指しているように感じた。そんなCrossPointを表すには、カフェとしての佇まいよりも、ここが起点であること、繋がりが広がることをアピールしたいと考えた。

意図	点の未来の姿を線だと仮定し（点が線になる等の使用例から引用）、グラフィックに線を使い、ステートメントのリード文をそのまま載せることにした。リード文中の、明朝体からゴシック体への切り替えで、新たな感を引き立てている。

提案①	オブジェクトに点を使い、図と地の関係で余白を線に見立てクロスさせることを考えた。

提案②	メインビジュアルにステートメント文を使い、アンバランスな安定感（構築途中な感じ）を角度をつけて表現した。

< 決め事 >

< スクリーンショット >

構想
UIルール

プリントメディア系のグラフィックデザインをリファレンスとして見た目を決めていき、それらがUIとして機能するようにした。ウェブのトレンドの外側で落ち着けるように願う。

意図

モバイル表示を元に、ある程度多くの端末で印象が揃うようにビューポートごとのコンテンツや、文字、余白などのサイズを決めた。

また、こちらが想定したレイアウトを誰が運用しても常に維持できるように、あらかじめ今後想定される例外的なコンテンツ（季節限定や、セットメニューなど）を洗い出し、レイアウトを全て決めておくことで、更新する人はスプレッドシートへ記入し、アップロードするだけで運用できるようにした。

DELIVERABLES
成果物

< モバイル >

< PC① >

< PC② >

ウェブサイト

特徴	更新ではなく、変化
	営業時間に合わせて、メインビジュアルの写真を変化させたり、気候に合わせたウェルカムボードを表示するなど、今に寄り添った変化。

技術選定	csvファイルに合わせてurlを変えてページを表示（ルーティング）するのに多少苦労したが、やりたいこと的にSPAは必要なかったこともあり、レンタルサーバーの費用を抑えるためにもモダンなライブラリは避けて、素のjavascriptで書いた。