目次
「伝える」だけでなく、「感じてもらう」ことも設計する
東邦ガスの新たなコミュニケーションフレーズは「未来の、まんなかへ」
これは、エネルギーを届ける企業から、地域社会を支える企業へと変わろうとする強い意志を込めた言葉です。
この言葉が持つ意味や背景を、きちんと“伝える”ことを目的にデザイン・インタラクションの設計をしました。
Webというメディアの特性を活かし、ノンバーバルな体験として“感じてもらう”ことも合わせて設計する。
これが、今回のコミュニケーションサイトにおける表現方針の核にありました。
コピーや構成による言語的コミュニケーションと、インタラクションや空気感による非言語的な体験。
その両方を組み合わせることで、ブランドの考え方や姿勢がより深く浸透することを目指しています。
ノンバーバルな体験が、ブランド理解をつくる
今回のサイト設計において重視したのは、言葉と同じくらい「動き」や「ふるまい」にも語らせることでした。
スクロール、ホバー、フェード、視差効果…。
これらすべての演出に、情報伝達としての機能だけでなく、
東邦ガスグループが掲げた「未来の、まんなかへ」というメッセージに込めた思いや、
その先にある企業としてのスタンスを、感じ取ってもらう役割を刷新した東邦ガスが、これからどのように変わろうとしているのかを感じ取ってもらう役割を担わせています。
言葉だけでなく、動きや“触れたときの反応”にも、企業の姿勢が滲み出るように設計しました。
ユーザーは操作を通じて“何かを読んだ”というよりも、体験を通じて“気づいた”という感覚を持つような構成が理想だと考えました。
キービジュアルは、未来へのプロトタイプ

冒頭に登場するキービジュアルでは、3Dで構成された未来のまちの姿が描かれています。
これは「東邦ガスがこれから向かおうとしている未来」を、言語よりも先に、感覚的に提示するための設計です。
この段階では、まだブランドの全貌や構想は語られていません。
むしろ語る前に、「こんな未来が待っているかもしれない」と一足先に“体験させる”ことで、サイト全体の認知の地盤をつくる。
それがこのビジュアルの役割です。
静止画ではなく動きのある3Dにしたのも、「未来はすでに動き出している」という印象を醸成するため。
ユーザーが最初に感じるこの体験が、以後のブランド理解に大きく影響すると考えています。
「未来の、まんなかへ」を体験に変える構成
東邦ガスグループの新コミュニケーションフレーズ「未来の、まんなかへ」を具体的な価値観として体現しているのが、「わたしたちの思い」と題されたこのパートです。
ゆるぎない安心と、未来につづく賑わいを創出し、誰もが住みたい地域を、このまちからつくる
この一文と、合わせて展開される図解のUI設計によって、東邦ガスが描く“地域の未来像”が、構造的かつ感覚的に伝わるように設計されています。
ここでは、情報の重なりや関係性をパララックスやホバーインタラクションによって見せています。
- 手前と奥のレイヤーがゆっくりずれて動き
- ホバーすると詳細が滲み出るように浮かび上がる
こうした動きによって、「地域の中でさまざまな価値が重なり合い、つながりながら未来をつくっていく」イメージを、“感覚”的に理解できることを目指しました。
事業紹介:「気配に応える」UI設計
事業領域を紹介するパートでは、要素をすべて一度に表示するのではなく、ホバーして初めて中身が見える設計としました。
これは、「お客さまの期待に応える」という、**東邦ガスの“寄り添うスタンス”**をUIで表現したものです。インフラ企業としての静かで誠実な姿勢を、押し付けがましくなく、でも確かに伝える。
そのために、情報とユーザーの距離を丁寧に設計しています。
映像パート:すべての体験を再統合する場所
ページ後半に配置されたブランドムービーでは、
これまで体験してきたストーリーや空気感を、ひとつの流れとして再提示する構成にしました。最初に見たキービジュアルが再登場し、
視覚的な一貫性がユーザーの中に“納得感”を生み出すよう設計しています。
まとめ:ブランドの“らしさ”を動きで積み重ねる
今回のコミュニケーションサイトで設計したインタラクションは、単なる演出ではありません。
言葉だけでは伝えきれないブランドのスタンスや、これから起こる変化の予兆を、体験を通じて“感じ取ってもらう”ための手段です。
- ブランドの空気を、スクロールで感じる
- 企業の距離感を、ホバーで知る
- 未来の構想を、ビジュアルで体験する
リブランディングのような節目のタイミングでは、こうした非言語的な“らしさ”の体験を意図的に積み重ねることで、ブランドの印象がかたちづくられていきます。
その“感じた記憶”の総量こそが、ブランド浸透の手触りになると信じて、設計を行いまし
🔗 コミュニケーションサイトを見る
🔗 ブランディング全体のまとめを見る(SEVEN DEX 実績紹介)
コミュニケーションにおけるベストなインタラクションを設計する、この記事が少しでも参考になれば幸いです。