見出し画像

5月。GW時期の気になるサイト、12選。(2024.5)

iDID Magazine

こんにちは、iDID Magazine編集部です。
「今年も、あっという間に半分が過ぎようとしている……。」
この言葉、なかなか重みがあって、口にするだけで怖いですね。毎月、毎日を大切に生きていきたいものです。あ、もちろん、適当な一日を過ごすこともまた、大切な一日のひとつ！

今回は、5月。GW前後、特に注目を集めていた12サイトを振り返ってみたいと思います。旅・食・エンタメ・コーポレート・サービスサイトなど、多岐にわたるジャンルから選んでみました。「あ、こんなサイトもあったな！」と振り返りながら、再発見しながら楽しんでいただけると嬉しいです。早速、見ていきましょう！

心をゆるやかに、更新もゆるやかに。
今回もはじめさせて頂きます。5月公開分です。


1. AFURI Recruiting site

らーめん×モノトーン！

らーめん屋といえば、赤や黒＋シズル感ってイメージがありますが、AFURIの採用サイトはらーめん屋らしからぬ、全面モノクロ仕様。明快なる差別化。また、ここでの「モノクロ」は、モノローグ的であり、「お客さんに見せない"店員の内面性"」を表現している、とも取れます。採用サイトということで、従来は見えない「内なる熱」を伝えることに重きを置いている。

また、全国16店舗のタイポグラフィ＋真剣にらーめんと向き合う店員さんたちの並びがかっこよく壮観です！モノトーンがベースがゆえに、カラーの「熱」が映える。インタビューページでの写真の使われ方も「かっこいい…」とつい口にしてしまいます。

そして「LIVE! YOURSELF」のコピー。シンプルですが削ぎ落とされていて、モノトーンの中で赤く輝きを見せる。メッセージを見る者につきつける力を持っています。

クライアント：AFURI株式会社
アートディレクター：株式会社パラドックス SHAinc.
コピーライター：株式会社パラドックス
デザイナー：此谷内遙介（Supergood）
フロントエンドディベロッパー：長谷川巧 (unshift Inc.)
フォトグラファー：白幡敦弘

2. HUMAN MADE Inc.

🦆🦆🦆🦆🦆🦆🦆←これが文字にかわります

真ん中のロゴ、クリックしたりひっぱったりすると、鳥たちが飛び立っていくんです。それだけでなくもっと引っ張ると……。このちょっとしたインタラクティブ性が絶妙な、HUMAN MADEのサイト。会社の人となりがわかるようなギミックって良いですよね。

もうひとつ印象的なのは、メッセージの伝え方です。見てください、右下の鳥の横に「人間の🦆」。続きが気になりますよね。ボディコピーの要所要所に鳥のアニメーションをひそませることで、自分の目がしっかりメッセージを読んでしまうんです。メニューも鳥の旅立ちを見ているみたいで壮観。COMPANYにもシンプルながら驚きのギミックが。

アニメーションを効果的に使うことで、ユーザーとのコミュニケーションを成立させながら、HUMAN MADEらしさも創出している。そんなサイトです。

CREATIVE DIRECTION : Atsushi Kaneishi (IN FOCUS)
PRODUCE / PROJECT MANAGEMENT : Kento Inada (IN FOCUS)
WEB DIRECTION : Atsushi Kaneishi (IN FOCUS)
WEB DESIGN : Wang Shuqiang (IN FOCUS)
FRONT-END / CMS : Hiroki Goto (IN FOCUS) @hiroki_mmmp
FRONT-END / WEBGL : Taro Yoshimura (baqemono) @ysmrt6
TECHNICAL SUPPORT : Junya Ohara (IN FOCUS) @jun00break
CREATIVE PRODUCE : Tadamasa Iguchi (IN FOCUS) @TadamasaIguchi

3. トラックセッション

動画にグッとくるんです

熊本のプロデューサー集団「トラックセッション」のサイト。「まちに人を、活気を呼び込み、地域に新たな価値を創出する」という彼らの熱意が、サイト全体からビシビシと伝わってきます。その理由は、全面に背景動画を使った、まさに目を引くダイナミックなデザインにあります。サイト全体のモチーフが陸上の「トラック」で、所々に斜め線が使われ、もれなく右上がりのレイアウトが躍動感を感じさせます。特に印象的なのが、マラソントラックと風になびく旗標。その勢いや流れをしっかりと感じ取れるんです。まるで目の前で動き続けているような感覚を味わえるこのサイト。勢いとエネルギーが溢れていて、そのダイナミックな世界に引き込まれていきます。

現在はイベントのみならず幅広い事業展開をしているということで、ランニングの「かける」と未来に駆け抜けていく「かける」がダブルミーニングになっていることと、「ランニングの躍動感」と「未来にかける躍動感」がシームレスにつながっているところが見事なサイトでした。

ディレクション：竹田京司
コピーライター：野口奈津
WEBデザイン：杉村武則
カメラマン：橋本大（@Dai_Hashimoto_）
動画制作：中川典彌（@FumiRoman）
サイト構築・CMS構築：江藤覚

4. エムトラスト株式会社

希望という抽象的な言葉をビジュアルで表現

不動産ビジネスを主軸としているエムトラストのコーポレートサイト。縦長にトリミングされた流体のビジュアルに、英語のコピー。スクロールによってこの流体とコピーが形を変えて動いていくのが面白いですね。「希望は、すべての土地にある」というコピーから、流体は「まだ形になっていない希望」を表現しているのかなと思いました。

スクロール表現が美しいですが、サイトの構成も斬新で好きです。ロゴのダイナミックなモーションからの、コピーの再提示も、エモーショナル。不動産会社のサイトなのですが、不動産実績を出さずに、幻想的なトーンで表現していくのも新鮮に感じました。下層ページのシームレスなコンテンツ移動も軽やかですよね。

Design：Yuto Takahashi
Dev：Yuto Takahashi
Direction：7sense Inc. / Bennu Inc.
Logo (VI）：Kitchesn Sink. Inc.
Copy writing：ハタジルシ

5. OGURO Inc.

部品加工・組立という業態をこう仕上げる！

OGUROは精密機械部品加工・組立の会社なのですが、このウェブサイトのスタイリッシュさに驚きます。ロゴとかけていると思われる「O」をはじめとした部品をモチーフとした見せ方も、こういった象徴的な見せ方をすることで、ひとつひとつの部品が大事なものだということが伝わってきませんか。グロナビが左右に分かれているのが新鮮で、その間をIMAGINATION. QUALITY. HUMANITY.の文字が通り抜けていくところも美しい。

一番ハッとしたのは工場俯瞰のパートです。パララックスを駆使しながら、工場を縦にスクロールしながら見せていくという発想。ここの工場写真が縦に長いのですが、ここの見せ方の「間」が絶妙。TECHNOLOGYの途中に出てくる動画にしても、縦に4つの動画を見せてから、各詳細説明に入っていく流れが、構成の美しさはもちろん、ここでもスクロールの「間」が効いていると思いました。下に伸びる赤いラインもフックになってますね。

制作：OVERA Inc.
Creative Director：Takashi Tomita
Producer：Yusuke Nakajima
Web Producer：Kota Hoshino @kota.hoshino
Web Director：Takeshi Kudo
Web Designer：Yasu Fukuda
Web Develop：Chinami Hagino
Web Adviser：Kazuma Takabayashi
Photo：Takeshi Kudo

6. idea

あえて映像を強く打ち出さないところに企業の想いがある

デザインが斬新。映像制作とフォトグラフィックがメインの会社なのですが、ideaのウェブサイトでは、映像を強く打ち出していません。やわらかな白とグレーをベースに、計算されたデザインの中に映像サムネイルが静かにおさまります。この動画実績エリアの設計や、ヘッダーの見せ方においても、MVにおける見せ方のセオリーを解体して、いちから設計し直されており、そこが新鮮であるにもかかわらず、UIとしても使いやすいんです。

「今⾵の、激しい映像が、すこし苦⼿な私たちです」ということで、だからこのデザインなんですね。あえて映像を強く打ち出さないところに企業のメッセージがある。やわらかで落ち着いたトーンであることが、映像制作会社としての確かな矜持を感じさせます。idea代表の渡邉さんいわく、映像制作にあたって「光」と「空気感」にこだわりを持っているとのことで、随所に見られる木漏れ日のような映像からも「人間の五感に訴えること」を大事にしているideaのメッセージが伝わってきます。PCとSPでの見え方の違いにも注目です。

Client：idea株式会社
Motion Graphics,PM,Assistant Design：内田 茜（QUOITWORKS Inc.）
CG movie,Front-end Develop：今 裕暉（QUOITWORKS Inc.）
Maincopy,Purpose Writing：岩田 秀紀
Photograph：竹林 省悟
Produce,Planning,Direction,Design：ムラマツヒデキ（QUOITWORKS Inc.）

7. EVOWORX

ブロック型のナビゲーションがかわいい

EVOWORKSさんのロゴは、Vに「"」がつくんですね。思わずエヴォワークス、って口にしてしまいました。このロゴに、すでにEVOWORKSのコミカルさが内包されてます。このサイトでは「EVOWORKS」の7つの文字をかわいくタイポグラフィ化し、ナビゲーション化しているんですが、これがブロック遊びのブロックみたいでかわいい。ブロックがナビゲートの役割を担っているところが面白いですね。

メンバーページでは、メンバー自身を象徴するアイテムをサムネイルにしています。こういう顔出ししないケースって見せ方が煩雑な感じになりがちに思うのですが、トーンが統一されていてきれい。こういうところにもEVOWORKS的な「作り方」の端緒がみえました。

制作；EVOWORX

8. TOMOMI SHIBAKUSA

柴草朋美　繋ぐ

「和＋モダン」テイストと「点（円）」のモチーフで有機的な表現が目を引くのですが、画面上には縦書きで草木のような「柴草朋美　繋ぐ」の文字。円から中に入ると「柴草朋美」が「砦英脈義」に変化します。砦英脈義！？調べたところどうも、tote incさんが柴草朋美さんの名前から連想した漢字みたいです。ユニーク…！別タブから戻ると「点と点を繋ぐ」というメッセージが。隠されたテーマなのかもしれません。またこのトップページ、スマホで見るとめちゃかっこいいです。ポートフォリオサイトのようなものかと推察するのですが、ジャングルのような、複雑な何かを体感しているような気分です。まるでアーティストと共同制作をしているかのようで、やはり、toteさんのつくるサイトはアーティストと親和性が高いなと感じます。

制作：tote inc.

9. 星野リゾート公式サイト

ところで、星野社長がスキー好きって知ってました？

このサイト、ただの宿泊提案じゃないんです。新しい旅の提案をしてくれるんです。「オーシャンビュー」「雨の時期だからこその景色」「地域の祭り」「愛犬と一緒の旅」など、一見ニッチと思われるような面白い提案をしています。「みつける」では、写真から自分なりの旅をみつけられるようになっていたり。

私たちの旅行したいニーズって行きたい場所が明確なものもあれば「なんかどこか行きたいな〜」ぐらい曖昧なケースも意外とあります。多様化している旅行者たちの隠されたニーズに対して「旅の提案」をしているところが新しいです。さらに、会社案内の歴史を紹介する画像に隠しコンテンツが仕込まれていて、それが自然に溶け込んでいるんです。わざとらしさがなくて、でもリアルでいい感じです。

旅の可能性を広げて、観光産業をリードする決意がひしひしと伝わってきます。新しい旅の魅力をたっぷりと感じられるサイトでした。

UXUI Design：TWOTONE

10. サントリー伊右衛門「原宿と濃い人生。」展

「濃さ」だけで伊右衛門と原宿をつなげる

モノクロの写真に、長体のかかった明朝体。デザインがかっこよすぎませんか。これは、お茶の伊右衛門がリニューアルプロモーションの一環として行なっている展示のキャンペーンサイトなんですね（展示会場は話題のハラカド）。

一見伊右衛門と原宿は何の関係が？と思ってしまいますが、「原宿で生きる人の濃さ」と「濃く生まれ変わった伊右衛門」に共通するのが「濃さ」であり、その「濃さ」一本でこういう企画をやっているところが面白いですね。

顔の皺まで見える写真たちと「読む」とか「次の人を読む」のリンクなど、ひとつひとつがとことん「濃さ」にのっとって作られています。ハンバーガーメニューはヘッダーの真ん中ですよ。これまた濃い。

CREATIVE DIRECTION : Kazushige Se (ii-inc)
ART DIRECTION : Shinpei Onishi @onishi_chinpei
WEB DESIGN : Shinpei Onishi , Tetsuro Shimura (IN FOCUS) @tetsuroshimura
PROGRAMMING : Kiyoto Ike (IN FOCUS)
PRODUCE : Kento Inada (IN FOCUS)
AGENCY : ii-inc.

11. MEDIA DEPT.

こんな場所に広告を出してみたい

モダンなデザインとスクロールに合わせた動きがとても印象的です。このセリフ体で文字だけをシンプルに見せるというスタイリッシュさ。ホバー時の画像の見せ方がカテゴリごとに違ってたり、クリック時の詳細の見せ方もかっこいい。詳細もlightbox風でありながらスタイリッシュでかつ使いやすい。写真のクオリティが高いのもあるのでしょうか、こんな場所に広告を出せるなんて……というワクワク感をもたらせてくれますね。

サイトの全体構造はシンプルなのに、シンプルに感じないのはダイナミックでスタイリッシュなサイト体験ができているからでしょうか。編集部のおすすめポイントは、サムネイルの上でアニメーションする位置情報。場所が明確であるOOHならではの表現です。

DIRECTION：Mitsuaki Aoyagi / Reika Nagumo
DESIGN：Akari Ito
DEVELOPMENT：Naokazu Shimabukuro / Miku Kinjo

12. codefolio

編集部も参考にしたいサイトです

話題になってました。コーディングパーツ集・ギャラリーサイト「codefolio（コードフォリオ）」。「デザイナーにはデザインリンク集があるのに、コーダーにはコーディングリンク集がないよね。」というモンブランたけたさんが、くまWEBの畑中社長に持ち込んで完成したとか。

スクロール、メインビジュアル、ホバー、画面遷移、グロナビなどがタグで整理されていて、詳細ではサイトのキャプチャ＋コーディング会社視点での説明がついているところも◎。コーダーにとってはもちろん、ディレクターやプロデューサー側としても重宝しそうなサイトです。

思いつきを自社ではなく、コーディングが得意な会社さんに話を持ちかけて形にしているモンブランさんの行動力と、くまWEBさんの実現力にも驚かされました。

■プロデュース・ディレクション 竹田京司
■WEBデザイン＆サイト構築 小林洋平（@_vayasico）
■ロゴデザイン アプアロット
■クライアント くまWEB（@Kuma_Web）

おわりです！

今回も、どのサイトも印象的で楽しく拝見しました。いくつかメモ的にピックアップすると、「モノトーンで内面を表現＋業態とのギャップを見せる」AFURI採用サイト。メッセージの伝え方にコミュニケーションの工夫を感じたHUMAN MADEコーポレートサイト。企業の本質（部品）をとらえ象徴化し、独特の間で魅せたOGUROコーポレートサイト。新しい旅の提案を見せてくれた星野リゾート。サイト全体を「濃さ」というテーマで通した伊右衛門の企画展サイト、などに発見がありました。コーポレートサイトのUIまわりにおいてチャレンジをしているサイトもいくつかありました。とても興味深く拝見させていただきました。

次回はどんなサイトが来るのでしょうか。ウェブサイトのあり方も年々変化を見せているかと思うのですが、この先どうなっていくのか、どういう使われ方としていくのか。引き続き追っていきたいと思います。

毎回が至福。では、また来月お会いしましょう。
iDID Magazine編集部でした。

この記事が参加している募集

#このデザインが好き

7,187件

この記事が気に入ったらサポートをしてみませんか？