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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

KETAKUMA Official | けたくま公式

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

などなど……

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

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

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

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