RYDEN

伝える力を爆発させた印象的なウェブサイト事例

2022.04.08
デザイン
上野 澪

どうもみなさまおはようございます。あるいはこんにちは。あるいはこんばんは。
ライデンでデザイナーをしています上野です。


私はデザイナーという職業柄、業種業界問わずあらゆるウェブサイトを日頃から収集しています。

というか実は私、デザイナーになる前にエンジニアやってたんですけど、その時から誰にも頼まれてないのにやたらとウェブサイトを見まくっていたので、デザイナーさんに「こういうサイトってなんかないかな?」と聞かれたことがある上に、頼まれてないのに「あ!!この表現ならですね、このサイト!!!めっちゃ!!!おすすめっす!!」という感じでデザイナーさんやディレクターさんにウェブサイトの布教活動を行なっていたことも......すみません2文目にして早速嘘をついておりました。このように職業とか関係なしにウェブサイトを日頃から見ている人間がこの記事をお届けしております。

ウェブサイトにおける演出の役割

そういう感じで(狂ったように)たくさんのサイトを見ていくと、様々な表現に出会います。特にアニメーションやギミックなどの演出表現は、みなさん印象に残るところではないでしょうか。

個人的に、ウェブにおける演出表現の役割は、すごくざっくりと大きく3つに分類できるかなと考えています(あくまで個人的な分類です)。

 

  1. ユーザーの操作体験を向上させるためのもの(マイクロインタラクションなど)
  2. デザインをモーショングラフィック並みの臨場感を持たせるためのもの
  3. コピーやコンセプトの存在感を際立たせるためのもの

 

1については、例えばボタンを押したときや何かを触った時などに変化する、といったユーザーへのフィードバック的な役割です。

これ、文章にすると単純なことなのですが、人間の行動心理の部分とかUXの話とかにもつながってくる話なので、突き詰めると結構奥が深いのです。

ただこちらは今回は話の本筋ではないので割愛します。

 

2については、いわばデザインの強調・拡張的な役割です。

奥行きや速度、臨場感を持たせることで、演出を導入しない場合とは違う印象を与えることができます。もちろん、サイトの種類によってはこの手のアニメーションを省く場合もありますが、何かしら動きを持たせることでより独自性を醸造する効果も期待できます。

ただこちらも今回は話の本筋ではないので割愛します。

 

おそらく、1と2は多くのサイトで見られるかと思います。

あと、色々なサイトを見ている方々からすると、上記の説明だけで「ああこういう感じのやつね」と納得できるかと思います。

 

ただ、3については「?」となってるのではないかと思います。

そして、今回の話の本筋、もとい私がどうしてもこの記事で話したいことは、この3番目です。

 

 

コンセプトを伝えている演出の実例を見てみる

世の中には、デザインを通じてそのブランドのコンセプトを伝えている素敵なサイトがたくさんあります。

ただ、そのコンセプトをウェブならではの演出で説得力を持たせることをやってのけてるサイトは、前述の1や2よりもそんなに数多くないかもしれないなと思っています。

(いうて私もまだ今まで見たサイトの数は1万未満な人間なので、もしかしたらそれなりにあるのかもしれませんが……)

 

具体的に、「コンセプトの存在感を際立たせるための演出」とはどういうものなのか。これは百聞は一見にしかずということで早速事例を見ていきましょう。

 

 

「私らしい就活スーツ」×「スクロールで変わる背景演出」

「私らしい就活スーツ」×「スクロールで変わる背景演出」

自分のために、着よう。|株式会社三越伊勢丹

 

まずは三越伊勢丹のリクルートファッションサイト。どちらかといえばブランドステートメントを伝えるためのサイトです。

 

画一的で没個性と言われるリクルートスーツを、「自分のために、着よう」というコンセプトのもと、個性豊かなものにする。その理念をコピーに加えて「スクロールするとさまざまな柄に変化するスーツ」という仕掛けで強調しています。

 

ステートメントを読み進めていくうちに、文章だけでなくサイトからもそのコンセプトが伝わってくる。この演出とコピーエリア以外は情報をシンプルに見せることで、三越伊勢丹がやりたいこと、伝えたいこと、変えたいことを伝えることに成功しています。

 

 

「ウルトラワイドなプロジェクタ」×「文字が横にのびーる演出」

ウルトラワイド超短焦点プロジェクタ「ワイード」

ウルトラワイド超短焦点プロジェクタ「ワイード」

 

続いてはプロジェクタの商品サイトです。

 

もうこれは商品名がそもそもキャッチコピーとしても強いため十分に他のプロジェクタとの差別化ができてしまっています。そうなったらこの商品名の強さを強調しよう!ということで音楽に合わせて文字が伸びてます。

 

伸ばし棒や母音などで伸ばせるところは伸ばしてます。ツイートボタンや(なつかしの)Facebookのいいねボタンも伸びています。伸びるのか。そんなにこのプロジェクタは横に伸びるのか。見てるうちに妙にどれくらい伸びるか見てみたい気持ちが浮かんでくるのは私だけでしょうか。

 

ウェブのアニメーションをうまく使って特徴を表現させつつ、アニメーション過多にならないように読むときのバランスもとってるのも印象的です。

 

 

「激しく動くキャラクター」×「絶妙にうるさいアニメーション演出」

KETAKUMA Official | けたくま公式

KETAKUMA Official | けたくま公式

 

けたたましく動くくまこと「けたくま」のオフィシャルサイトです。

 

このキャラクターの持つシュールさと、ほんとにずっと激しく動いているというイメージを裏切ることなく、このサイトも絶妙にシュールでうるさいです(褒めてます)。

 

全体的に動いてない要素の方がほぼないのに加えて、時折けたくまが踊りながら横切るのも、ニュースエリアに行った時にニュースの一部をけたくまがぶっ飛ばしていくのも、ウェブサイトを読み物として見る場合のUXとしてはあり得ないでしょう。

 

ですが、このサイトが「けたくまのオフィシャルサイトである」と立ち返ると、コンセプトを示す最適な演出なのです。

 

 

「一度で2社選考」×「2種類に切り替えられるシーケンスバー」

一石二鳥採用|面白法人カヤックと株式会社人間に同時面接

一石二鳥採用|面白法人カヤックと株式会社人間に同時面接

 

一度で2社分の採用面接を受けられる!採用企画としてはなかなかにユニークな「一石二鳥採用」のLPサイトです。

 

そしてその採用企画のユニークさに劣らず、サイトの作りもユニークです。真ん中にあるシーケンスバーを左右に動かすことで、それぞれの会社の概要や募集要項を、同じ画面の面積で知ることができます。

 

このUIが部分的に使用されている例は見たことがある方はいらっしゃるかもしれませんが、サイトのメインに据えて制作してる例は珍しいと思います。

 

また、このつくりを採用することによって、本来だと2社分の採用情報を載っけたことでLPが長くなる!情報が小さくなる!などの問題も起きることなく、1社分の分量で情報を載せることに成功しています。

 

採用企画のコンセプトを視覚的なインパクトを持って伝えるとともに、情報整理の問題も解決しているという、とても優秀なLPサイトです。

 

 

「つづく」× 「無限スクロール&無限に増えるプロフィール」

クリエーティブ・ディレクター・コレクティブ (つづく)

クリエーティブ・ディレクター・コレクティブ (つづく)

 

クリエイティブディレクターたちが独立してチームを組んだ、そのチームのサイトです。

 

このサイトも、チームの名称が「つづく」という、端的ながらも明快なネーミングの力を遺憾無く発揮できるように、トップページは無限スクロールで繰り返し周回する構造となっています。

また、チームメンバーのプロフィールに関しても、メンバーの名称が永遠に増え続ける仕組みからも、「つづく」という意味合いを強調しています。

(全ての画像を分析できていませんが、トップのメインビジュアルも「つづく」の言葉を連想させる画像を用いているようです)

 

上記以外にも、よく解析したり繰り返し見ていくと「ここにはこういう思いが託されてるんだ……!!!!」と感じられるような表現が潜んでいましたので、ぜひ一度みなさんの目で探してみてください。

 

ちなみに暴露すると、今回の記事はこのサイトを紹介したいがために書きました。

 

 

「ウェブならではのメッセージ」を作るために必要なこととは

今回5つサイトをご紹介しましたが、どのサイトも共通して

 

  1. 明快なコンセプトコピーとなる言葉があること(誰が聞いてもパッと理解できるくらいな言葉)
  2. コンセプトコピーを明快に連想させるような、ウェブならではのギミックやアニメーション表現があること(誰が見ても納得できるくらいな表現)

 

の2つがあったと感じられたのではないでしょうか。

 

逆にいうと、唯一無二な、伝える力を爆発させた印象的なサイトを制作したいときには、上記を押さえた上で制作するのがポイントなのではないか、ともいえます。

 

とはいえ、この2つを抑えたサイトを作るためにはいくつか必要な要素があります。

 

・よく練られたコピーやネーミング

・さまざまなサイトのギミックの知識や技術力

・コンセプトやコピーなどの「言葉」を「ウェブ表現」で表すと?を発想できるアイディア力

・クライアントと実際にサイトを作る制作者との密なコミュニケーション

 

などなど……

今回の事例から伝える力が強いサイトの条件が分析できたとしても、実制作で再現するにはさまざまなスキルが必要となってきます。

 

 

私個人としては、中学生の時に個性的なたくさんの個人ウェブサイトを見て

 

「ウェブって楽しいんだ!」

 

と思いこの道に辿り着いた人間なので、せっかく作るのであれば、今回事例として挙げたような「唯一無二な、伝える力を爆発させた印象的なサイト」を目指して制作に臨みたい所存です。

この記事を書いた人

デザイナー
上野 澪
この人が筆述した他の記事
筆述目録へ

ライデンへのご相談

「エンドユーザーとのエンゲージメントを⾼めたい」「コミュニケーションに⼀貫性を持たせたい」、
「⾼品質なビジュアルデザインを求めている」など、御社の課題をぜひご相談ください。
御社のブランドパートナーとしてご縁が繋がることを、私たちも楽しみにしています。