Web制作やマーケティングの仕事をしていると、参考にするためにサイトを見る機会は多い。
最近は海外のサイトを、漁る様に見ていたりします。
ファーストビューはどう作られているのか。
文字とビジュアルのどちらを中心に伝えているのか。
スクロールした先で、次にどこへ誘導しているのか。
そんなふうにサイトを見てきた。それでも、完成度の高いWebサイトを前にすると、何も考えられなくなることがある。
「すごい！けれど……これを見て、自分は次に何を作ればいいんだろう……」
最近見た「TRIONN」と「Made With GSAP」も、まさにそうだった。
今回はこの2つのサイトを見たあと、参考サイトを見るときの視点が少し変わった話を書こうと思う。
見た目や技術だけでなく、そこでどんな体験を作り、何を伝えようとしているのか。
Webデザインの参考サイトを「すごい」で終わらせず、自分の制作へ持ち帰るために考えたことを残してみます。
この記事で伝えたいこと
この記事で残したいこと
参考サイトを見るときは、色や動きだけでなく、「何をする場所なのか」「どんな体験で伝えているのか」「自分なら何を一つ試せるか」まで見てみる。
すごいサイトと同じものを、丸ごと作る必要はない。
そのサイトが選んだ判断を一つだけ拾えたら、それも十分なサイト研究なのかもしれません。
Webデザインの参考サイトを見ても「すごい」で終わっていた
TRIONNを見て、最初に出た言葉は「何これ！？」
出典：TRIONN公式サイト
TRIONNを開いて、最初に目に入ったのがファーストビューだった。
ロゴに触れると振動する。そのまま触っていると、最後には爆発する。意味はよく分からない。
でも、「何これ！？」という感覚だけは、かなり強く残った。
そのままスクロールすると、文字や画像が滑らかに切り替わっていく。演出は多いのに、動きが引っかかる感じも少ない。
見ていて飽きない。素直に「すげぇ」と思った。
同時に、Web制作で独立を目指すなら、こんなポートフォリオサイトやコンテンツを作れる人にならないといけないのか、とも感じた。
「まぁ、今の自分には無理だよな」
圧倒されたあとに残ったのは、憧れと、自分との差だった。
Made With GSAPは、何のサイトなのか分からなかった
出典：Made With GSAP公式サイト
Made With GSAPも、最初に見たときの印象は強かった。
ファーストビューから、動きのあるコンテンツが次々と流れてくる。
制作会社のポートフォリオだろうか？GSAPを使った作品を集めたギャラリーだろうか？
よく分からないまま見ていると、料金らしい表示も出てきた。
「25€ per month, billed quarterly」
英語が得意ではないこともあり、さらに分からなくなった。
良いサイトだとは感じる。動きもすごい。
でも、何のためのサイトなのかを理解できていなかった。
あとからAIに解説してもらい、作品を見るだけではなく、学んだり、制作に使えるコンテンツを手に入れたりする場所だと分かった。
そこで初めて、見えている画面だけを眺めても、サイトの価値を読み取れないことがあると気づいた。
実務で見ていたのは、主に「画面の作り方」だった
僕は現在、WebデザインとWebマーケティングの仕事に関わっている。そのため、参考サイトを見るときも、何となく眺めていたわけではない。
たとえば、こんなところを見ていた。
- ファーストビューで何を伝えているか
- スクロール型か、ページを移動させる構成か
- 文字とビジュアルのどちらを中心に語っているか
- 余白をどのくらい取っているか
- 次のコンテンツへどう視線をつないでいるか
- 問い合わせや購入までの動線はどうなっているか
どれも、Webサイトを見るうえで必要な視点だと思う。
ただ、今振り返ると、僕が見ていたのは主に画面の作り方だった。
どんな色を使っているか。どんな構図で見せているか。スクロールすると、何が動くのか。
技法を見つけることはできても、完成度が高すぎるサイトを見ると、その先へ進めない。
文字が砂のように消える。スクロールに合わせて映像が切り替わる。マウスの動きに反応して、画面が変化する。
「どうやって作るんだろう？」
それ以前に、似た表現を自分のサイトで使ってもいいのだろうか。考えているうちに、参考サイトを閉じる。
保存だけはした。でも、自分の制作は何も変わっていない。
そしてサイトを見た後、何を持ち帰って自分のアイディアにすればいいのか。それを考える夜が何度もある。
見た目の奥にある「体験」を気にするようになった
最近は、サイトを見るときに「体験」や「ストーリー」を以前より気にするようになった。
きっかけの一つは、フランク・ローズの書籍『のめりこませる技術 誰が物語を操るのか』を読んだことだった。
映画『ジョーカー』のマーケティングについて書かれた部分を読み、作品の内容を説明するだけではなく、見る人を物語の一部へ巻き込む方法があると知った。
それから、Webサイトを見たときにも少し違うことを考えるようになった。
この演出は、何のためにあるのだろう。
何を理解させるために、触れる仕組みを置いているのか。見た人に、どんな感情を残そうとしているのか。
WEB上での動きや演出は、画面を派手にするためだけに使われているわけではない。
その会社の姿勢や、サービスの使い方、そこで得られる体験まで伝えることがある。TRIONNを見直したとき、それが特に分かりやすかった。
TRIONNは、説明せずにAIとの付き合い方を見せていた
TRIONNのサイトには、「MyWorker AI」というカードがある。
カードを押して反応を見ると、この会社がAIをどんなふうに制作へ取り入れているのか、文章を長く読まなくても何となく伝わってきた。
これは、僕にとってかなり新鮮だった。
これまで制作会社やデザイナーのサイトを見ると、AIについてほとんど触れていなかったり、「AIは使っていません」と書かれていたりすることがあった。人の技術だけで作っている。自分はこれだけできるデザイナーだ。
そんな見せ方も、もちろん一つの考え方だと思う。
でもTRIONNは違った。
AIを使っていることを言い訳にも、自慢にもしていない。
AIをどう制作へ取り込んでいるのかを、サイト上の体験として見せていた。
「こんなふうにAIを使い、コンテンツ制作に役立てているんだな」
英語が読めなくても、直感でそう感じられた。演出やレイアウトが、その会社の考え方を語っている。
ロゴが爆発する技術をそのまま真似することはできなくても、この考え方なら持ち帰れるかもしれない。
Webデザインの参考サイトを見る3つの視点
ここまで考えたことで、参考サイトを見るときに確認したいことが三つに整理できた。
- このサイトは何をする場所なのか
- その役割を、どんな体験で伝えているのか
- 自分なら何を一つだけ持ち帰れるか
1．このサイトは何をする場所なのか
最初に見たいのは、色やアニメーションよりも、そのサイトが誰に何をしてもらうための場所なのかということ。
会社を知ってもらい、問い合わせてもらう場所なのか。制作実績を見せて、仕事を依頼してもらう場所なのか。それとも、作品を探したり、学んだり、コンテンツを利用したりする場所なのか。
僕はMade With GSAPを最初に見たとき、制作会社のポートフォリオサイトだと思っていた。
だから、トップページで作品が次々と流れ続けることも、途中で月額料金のような表示が出てくることも、どうつながっているのか分からなかった。
制作会社の実績紹介だと思って見ているのに、急に料金が出てくる。
「結局、ここは何を頼めるサイト？」
そしてAIに解説してもらい、GSAPを使った作品を見たり、学んだり、制作に使えるコンテンツを利用したりする場所だと知った。
そう考えると、作品が次々と表示されるのは、制作実績を自慢するためではなく、利用者に「どんな表現があるか」を探してもらうため。料金表示も、サービスを利用するための案内としてつながってくる。
同じ画面でも、サイトの役割が分かると、なぜその見せ方を選んだのかを考えやすくなる。
当たり前のことだが、参考にしたいサイトを見るときは、まず仮でもいいので、次の形で一文にしてみる。
「このサイトは、〇〇したい人が、〇〇するための場所」
正解を当てる必要はない。
役割を一つ置いてみると、色や動きだけではなく、それぞれの演出が何のために置かれているのかまで見やすくなった。
2．その役割を、どんな体験で伝えているのか
次に見るのは、そのサイトが役割や価値をどう伝えているか。
文章で説明しているのか。写真や実績で見せているのか。実際に触らせて、サービスの感覚を伝えているのか。
TRIONNのMyWorker AIは、説明を体験へ置き換えた例に見えた。
「AIを活用しています」と文章で書くだけなら、よくある紹介で終わる。でも、触って反応を見ることで、AIが制作工程の一部になっていると感じられた。ここで見るのは、アニメーションの難しさではない。
その動きによって、何が伝わったのか。
この問いを持つだけで、参考サイトから拾えるものが少し増える。
3．自分なら何を一つだけ持ち帰れるか
最後は、自分の制作へ戻す。
ただし、サイト全体を再現しようとしない。
「TRIONNと同じポートフォリオを作ろう」
「Made With GSAPのような大量のコンテンツをそろえよう」
そう考えると、たぶん手が止まる。
そもそも会社やチームが作った完成品と、今の自分を丸ごと比べても、差が大きすぎる。
だから、一つだけにする。
- 説明を、小さな体験に置き換えられないか
- 記事だけでなく、触れるコンテンツを置けないか
- 制作物を見せるだけでなく、使える形にできないか
- ユーザー自身が何かを発見できる仕掛けを作れないか
持ち帰るのは、見た目ではなく、そのサイトが選んだ一つの判断でもいい。
それなら、自分の技術や時間に合わせて試せる可能性がある。
すごい演出を、そのまま真似しなくてもいい
参考サイトを見ると、「この表現を使いたい」と思うことがある。
スクロールすると文字が切り替わる。画像が粒子のように消える。マウスに反応して、画面が揺れる。
でも、見た目だけをそのまま持ってくると、自分のサイトでは意味のない演出になるかもしれない。
以前、動きの多いWebサイトについて、「次に何を見ればいいか分からないと疲れる」と書いたことがある。
動きが多いこと自体が悪いわけではない。
その動きに役割があるか？ユーザーが置いていかれないか？今回も、考えたいことはそれに近い。
ただ、今回の主語はサイトを使うユーザーではなく、参考サイトを見る制作者側の視点だ。
「どう作るか」の前に、「なぜこの表現を選んだのか」を考える。
全部は分からなくてもいい。自分なりの仮説を一つ作れたら、ただ眺めていたときよりは先へ進めた気がした。
のりてらブログも「記事を読むだけの場所」から少し自由にしたい
TRIONNとMade With GSAPを見た時期、僕は少し引っかかっていた。
今年に入ってから、のりてらブログの記事は増えた。アクセスも少しずつ伸びているように見える。
その一方で、記事を書くことが優先され、制作する時間が減っていた。
アトリログ15のLP。WebGLを使った表現。自分で触って遊べるコンテンツ。
やりたいと思っていたものはあったのに、ほとんど進められていない。ただ、記事を書かなければ、ブログは読まれない。それも分かっていた。だから記事を優先してきたことが間違いだったとは思っていない。
でも、のりてらブログのテーマは「作る・学ぶ・楽しむ」だ。
記事を書くことだけが「作る」ではないはずだった。
TRIONNやMade With GSAPを見て、サイトはもっと自由でいいのかもしれないと思った。
- 記事を読む
- 制作物に触る
- 小さなツールを使う
- 何かを持ち帰る
- その制作の背景を、また記事で読む
そんなふうにつながる場所にできないだろうか。まだ、何を作るかまでは決まっていないが、
ブログサイトでもは記事を読むだけでなく、制作物に触れたり、小さなツールを使ったりできる場所にもできる。
今回、この発想を持ち帰れたことは大きかった。
おわりに
以前の僕は、参考サイトを見るとき、ファーストビューや余白、動線を中心に見ていた。
今も、それらが大事なことは変わらない。ただ、今回二つのサイトを見たことで、その奥にある体験や役割まで考えるようになった。
すごいサイトを見ても、自分に同じものが作れるわけではない。
たぶん、すぐには無理だ。それでも、「何これ！？」と感じたことや、「なぜこんな見せ方をしたんだろう」と考えた時間は残る。
何を作るかは、まだ決まっていない。
でも、自分のサイトをもう少し自由にしてもいいらしい。
今回持ち帰れたのは、技術ではなく、そんな問いだった。
この記事で残したい4つのこと
今日のまとめ一行
参考サイトは、見た目だけでなく「何を体験させているか」まで見てみる。
今日できる一歩
保存している参考サイトを一つ開き、「このサイトは何をする場所か」を一文で書いてみる。
次に読む一記事
サイトの動きとユーザーの道筋については、「動きの多いWebサイトで本当にしんどいのは、「次に何を見ればいいか分からない」こと」でも書いています。
ブログ案内
のりてらブログでは、Webデザインとマーケティングの実務を通して感じたことや、制作する中で迷ったことを記録しています。
完成した正解を教えるというより、自分で見て、考えて、少しずつ作っていく途中のブログです。
コメント