今月から、私(大道)が個人的に気になったサイトを紹介していきます。

日々いろいろなウェブサイトを見ていると、「これ、なんかいいな」と立ち止まる瞬間があります。
派手なデザインじゃなくても、つくり方や伝え方に工夫があったり、理由があってこのいろかたちになっているんだろうな、と感じたり。

今月からは、そんな気になったウェブサイトを取り上げて、つくる側の視点で少しずつ言葉にしていくことにしました。自分自身も勉強しながら、これからの制作に活かしていけたらと思っています。

①ANOTHER MILK —もうひとつの牛乳—

まずご紹介するのは、生活クラブ生協による体験型Webコンテンツ 「ANOTHER MILK —もうひとつの牛乳—」 です。

1. これはどんなサイト？

「ANOTHER MILK」は、生活クラブが長年大切にしてきたパスチャライズド製法の牛乳をテーマにした特設サイトです。
一般的な超高温殺菌牛乳とは異なり、72℃15秒という低温で殺菌されるこの牛乳は、風味や口当たりのやさしさが特徴とされています。ただ、その違いは言葉で説明しようとすると、どうしても伝わりにくい。そこでこのサイトでは「味を説明する」のではなく、「飲んだ人の反応を見せる」というアプローチが選ばれています。試飲した人の表情やリアクションを起点に、サイト全体が体験として構成されているのが印象的です。

個人的な気になりポイント

• 情報を詰め込みすぎず、余白がしっかり取られているところが心地いい、リズム感が楽しい！
• 牛乳のサイトなのに、ちょっと実験的でワクワクする入り口なのが好きですね
  

2. 特徴的な機能は？

このサイトの大きな特徴は、感情認識AIを使ったリアクション分析です。
牛乳を飲んだ瞬間の表情をAIで解析し、「驚き」や「喜び」といった感情を独自の指標「WOW値」として数値化しています。技術的にはかなり先進的、奇抜なことをしているのに、UIの見せ方はとてもシンプル。体験の楽しさがちゃんと主役になっているところが好印象です。

個人的な気になりポイント

• 生成される表情の線画が、ほどよくラフでかわいい。それでいてちょっと面白い。
• 「すごい技術です！」と主張しすぎないトーンがちょうどいいです。
  
  

3. WEB制作において参考になりそうなポイントは？

このサイトで特に参考になると感じたのは、体験をまんなかに据えた情報設計です。

商品説明 → 特徴 → メリットという一般的な流れではなく、体験 → 感情 → 理解、という順番で構成されているため、自然と内容が頭に入ってきます。興味のない人でも面白がれる。また、アンケート結果などのデータも、「説得材料」として強く押し出すのではなく、体験を補強する要素としてポップかつ控えめに配置されています。数字やデータがあるのに、どこかやさしく、生活者目線なのも印象的でした。

個人的な気になりポイント

• 数字の見せ方が研究発表っぽくならないのがうまい。
• 技術・デザイン・コピーのバランスが全体的に整っている感じがします、情報の見せ方が上手！
  
  

4. 例えばこんな使い方もできるかも…

このアプローチ方法、他に応用できそうな点がたくさんです。

例えば…

• ブランドサイトで、世界観を説明ではなく体験で伝える
• 採用サイトで、働く人のリアクションや空気感を可視化する
• イベントや展示の体験を、Web上で拡張する

言葉にしにくい価値、体験しないとわからない価値ほど、こうしたアプローチが効いてくる気がします。

個人的な気になりポイント

• 「おいしい」と言い切らず、反応に委ねているところが説得力あります。
• サイトを閉じたあとも、かなり記憶に残るのでは…？

②TATE Lab. — 深く、縦に潜る創造の場 —

二つめは、ちょっと毛色の違うサイトを紹介します。普段の制作案件とはまた違う、“身体感覚”や“内観”を大切にするサイト表現に触れたくて選びました。

つくる／かんじる／深掘りする。
そんな言葉が頭をよぎったサイトです。自分の中の声をすくい上げる体験が、つくり手にもとても響くなと感じています。

TATE Lab.は、様々な創作活動を通して、自分自身の内側を深く探るための制作室／体験の場です。“縦移動”という言葉を使い、SNS的な横のつながりとは違う、内側へ向かう深い体験を促すことを掲げています。 サイトは、まずスクロールした瞬間から独特な空気感、動き。文章や言葉で語られながらも、特徴的な縦スクロールアニメーションと余白によって、呼吸するように読む感覚がありました。

1. これはどんなサイト？

TATE Lab.は、埼玉・横瀬町を拠点にした、クリエイティブの実践と自分の内面体験を組み合わせたプロジェクトです。ものづくりを通して自分の潜在意識にアクセスし、自分が本当に大切にしていることに気づくきっかけをつくることが狙いとされています。

サイト冒頭のコピー「ふかく、たてにもぐろう」という言葉と、一貫して付随する縦スクロールのアニメーションは、情報の受け手にただ読むのではなく、深く自分と向き合ってほしい、潜ってほしいという設計意図のように感じられました。

個人的な気になりポイント

• コピーのリズム感が落ち着いた導入をつくっていて、スクロールする前から世界観に引き込まれます（縦に深く、という表現が面白くてかつその通り）。
• 文字と余白の取り方が、呼吸リズムのように読めて、かなり新鮮な居心地です。

2. 特徴的な機能は？

TATE Lab. のサイトは、特別なインタラクションや派手なアニメーションよりも、コピーや言葉・構成を丁寧に積んでいく表現と縦スクロールアニメーションの噛み合いが魅力的だと思います。

「制作室として何をするのか」は

• ものづくりを通した自分との対峙
• 五感を刺激するワークショップやクリエイティブセラピー
• 地域資源を活かしたプロジェクトとの連携

など多岐にわたっており、サイトのロードマップは体験の入口としての言葉選びや問いかけで成り立っています。
また、NEWSページを見ると、プロジェクトが実際に、展示・出展・雑誌掲載など外部メディアでも取り上げられていることがわかり、クリエイティブ／地域／体験の実践がきちんと外部に開かれているのも好印象でした。

個人的な気になりポイント

• 難しく語らず、問いかけの形ともぐるようなアニメで読む人の内省を促す点がとても深い体験設計だと感じました。
• 写真やプロダクトの見せ方もやさしいトーンで、シンプルなのに人の温かさを感じます。

3. WEB制作において参考になりそうなポイントは？

TATE Lab. のサイトで特に学びがあったのは、言葉の設計と体験設計の統合です。
一般的なコーポレートサイトやブランドサイトでは、メリットや機能をまず説明しがちですが、このサイトは、問いかけ → 内省 → 関与 → 行動という流れを自然につくっています。これをアニメーションがより補強しています。先ほどのANOTHER MILKの設計とも、説明的でないという点で似ているかもしれません。

個人的な気になりポイント

• 情報を伝えるのではなく、受け手の問いを立てにくる設計が、広告でもサイトでもすごく強いなと再認識しました。
• “五感”とか“内観”みたいな抽象的な価値を、言葉とアニメで丁寧に立ち上げていく面白さがあります。

4. 例えばこんな使い方もできるかも

今回のサイトの構造や設計は、形としてはユニークですが、こちらも体験重視の文脈設計として学びがたくさんあります。

例えば…

• 採用サイトだと、数字や経歴よりも入社後の“問い”を見せていく
• ブランドストーリーでは、一方的な説明ではなく、問いかけ＋体験事例で共感を誘う
• 地域プロジェクトでは、地域文化への内省を促すコピーで、参加率を高める

個人的な気になりポイント

• 問いを立てることそのものが、ユーザーとの距離感をぐっと近づけますね。
• 言葉中心の体験設計と、アニメーションのかみ合いが上手くいくと、説得力や面白みが増して
  記憶に残るサイトになりやすいなと…。

さいごに、GEAR8から

GEAR8でも、情報をきれいに整理するだけではなく、どう感じてもらうか、どんな体験として届くかを大切にしながらWebサイトの企画・制作を行っています。

「説明はできているけど、いまひとつ伝わりきっていない」
「もう少し印象に残る見せ方ができないか」

そんな悩みがあれば、今回のサイトのような考え方がヒントになるかもしれません。新しいコンテンツや機能を取り入れたWebサイトづくりについて、まだ輪郭がはっきりしていなくても大丈夫です。雑談ベースでも、アイデアの種レベルでも構いませんので、気になった方は、ぜひ一度お話ししてみてください。