

言葉とデザインが「つながった」とき、そこに熱が生まれる――株式会社ジャパンガスエナジー
株式会社ジャパンガスエナジーは、LPガス(液化石油ガス)をはじめとしたエネルギーの輸入・販売・輸送・貯蔵までを一貫して手がけている企業です。国内外からエネルギーを調達し、日本全国へと安定的に届ける役割を担っています。その採用サイトからは、デザインの端々から「エネルギーをつなぐ」という熱い想いがしっかりと伝わってきます。そんな株式会社ジャパンガスエナジーの採用サイトについて、今回も喜八屋の若手社員ふたりが楽しくディスカッションを行いました。最後には、まるでミステリー小説のような伏線回収にふたりが驚愕する場面も……!?
【株式会社ジャパンガスエナジー】
2009年に設立されたエネルギー企業。LPガスを中心に、液化天然ガスや石油製品、石油化学製品などの輸入・販売・輸送・貯蔵を行っている。ENEOS株式会社などを株主に持ち、国内外のネットワークを活かしながら、日本のエネルギーの安定供給を担っている。全国に広がる供給体制を通して日々の暮らしや産業を支え続けており、その社会貢献性は非常に高い。
日本のエネルギー供給を支える会社の採用サイトは、誇りと熱量にあふれていた。
今回喜八屋のふたりが研究したのは、エネルギーをわたしたちのもとへ運んでくれている会社の採用サイト。毎日あたりまえにエネルギーを消費できること、そしてそれを他国から日本へ運んできてくれている人たちがいるということに、あらためて感謝の気持ちが強くなります。URLをクリックすると、画面上に大きく現れる「熱をつなげ」の大きな文字。インフラを支える扇の要としての誇りと、まさに「熱量」がうかがえます。そしてラストには、まさかの発見が!ぜひ、お楽しみください。
言葉とビジュアルが重なったとき、印象は完成する。
その瞬間、サイトはただの情報ではなくなる。
第一印象としてはやっぱり、この大きいタイトル「熱をつなげ」。
下にスクロールしていくとガスを取り扱う会社というのがわかったので、「熱」と「熱量」をかけたのかな?と思いながら見ていました。

私もTOPページの「熱をつなげ」が第一印象として強く残りました。
最初に出てくるこのバトンの写真を見て、なんでバトンなんだろう?って思ったんだけど、「熱をつなげ」の文字が出てきて「つなげ」にかけているのか!って気づいて。それが面白かったです。
面白いですよね!
あとは、人の顔がちゃんと写っている写真が多くて、会社として信頼できそうだなという印象も持ちました。

うんうん。私も岡部さんと同じで、写真が気になりました。
ロケーションが都会的で、きっと都会にある会社なんだろうなって。
高層ビルとか、東京湾っぽい写真とか、新しい感じがいいなと思いました。
うんうん!きっと都心のほうにある会社なんだろうなって思いました。
どこにあるんだろう……あ〜、千代田区、本当に中心だ!(笑)
写真だけでも、ちゃんと伝わりますね。

では、構成で気になったところについて!
私はまず、メニューの部分が気になりました。グローバルナビゲーションを全部隠す形になっているんです。
岡部さんとも、最近この形よく見るよね〜って話していたよね!
ほんとだ!よく話している形ですね!


ね!そして、その一番最初に「採用メッセージ」があるのは珍しいんじゃないかなと思いました。
大体サイトの後ろのほうにありがちだけど、今回は先頭にあるから、アピールしたい項目なのかな?って。
全然気づきませんでした!たしかにこれは珍しいですね。
ね!採用メッセージを見てみたら、新卒採用の経緯が書いてあるのも珍しいし、社長メッセージもボリュームがあるし……
しっかりとしたメッセージがあって、それをちゃんと見てもらえるような構成にしているのがすごいなと思いました。


私が構成で気になったところは、社員どうしの対談のところです。
クリックしてスクロールしていくと、左側に目次があって、サイトの現在地が緑色になるのが見やすいなと思いました。
タイトルがずっとここに表示されているんだね!見やすい。

見やすいですよね!
あとは「JGE早わかり入門」がいいなと思いました。独自のタイトルをつけているのが面白いです。
会社についての情報量も多いので、コーポレートサイトと採用サイトとをいったりきたりする必要がない。ストレスの少ない構成だなと思いました。
点だったものが、ひとつの景色に変わる。
その瞬間、すべての本質が浮かび上がる。
では、全体のデザインについて気がついたところです!
私はまず、白と黒のベースカラーに緑のグラデーションがアクセントになっていて、統一感があるなと思いました。
スクロールして下にいくと、左の目次の色が変わるのも素敵です!
読み進めたくなるデザインだなと思いました。
すごいね!こういうの、どうやって思いつくんだろうね。

どうやってつくっているのか、教えてほしいです!(笑)
私も同じく青から緑のグラデーションが気になったんだけど、これは会社のロゴをイメージしているのかな?って思いました。すごく細かい!
写真に色の加工が入っているのがお洒落で、シンプルだけど統一感が出ていてすごいなと思いました。

では、その他気になったところについて!
私が気になったのは、代表メッセージで使われている社長の写真です。
いい意味で社長っぽくない!(笑)
社員だとこの角度の写真は多いけど、社長の写真って大体正面を向いていることが多いじゃないですか。そんな中で、社員と同じ角度で撮っているのがいいなと思いました。

うんうん!よくある「あの写真」じゃないよね(笑)。
そうなんですよ!(笑)
外で喋っている写真を見ても「きっとフラットな環境の会社なんだな」というのが想像できていいですよね。

それから、写真の加工については私も気になっていました!緑のグラデーションがいいな、って。
でも、全部の写真が加工されているわけじゃないんですよね。
どうやら「熱をつなげ」の質問だけ、写真に加工が入っているみたいなんです。細かいこだわりがありますよね。
すごーい!ほんとだ。全然気づかなかった!
強調している質問なんだね。独自性がある……うまいな〜。


では、まとめに入りましょう!
私は目次とデザインと構成、いずれも参考にしたいなと思いました。項目についても、会社独自のタイトルのつけ方が素敵です!
あとは写真の加工。加工もやりすぎてしまうとチープに見えることがあって、なかなか塩梅が難しいと思うんですが、このサイトの写真はすごく上品でスタイリッシュな質感がありますよね。
私が参考にしたいなと思ったのは「熱をつなげ」というコピー。
最初に出てくるバトンの写真と「つなげ」の言葉の掛け合わせがやっぱりいいですよね。
……あれ?もしかして、この青と緑のグラデーションも「熱をつなげ」の言葉と、つながってる……?青は完全燃焼の青い炎みたいな……

うわ〜!!!
なるほど!!!すごい!気づいちゃいましたね!!!
うわ〜!計算されてるなぁ……
すごい!気づいちゃったね(笑)。
全部つながっていて、まんまと「すごい!」ってなっちゃった(笑)。
デザインも、細かい写真の加工も、言葉えらびも……一貫性がすごい。
まさにこの「つなげていく感じ」を、真似してみたいなと思いました!
