こんにちは！ デザイナーのなつです。
先月に引き続き「【テーマ別】Webデザインの参考アイデア集」シリーズです。今回は枠にとらわれずに表現力を爆発させている素敵なWebサイトたちを、注目ポイントとともにゴリゴリとご紹介します！
リンクも貼っておりますので、ぜひ各Webサイトに飛んで見てみてください。
目次
枠にとらわれない表現力豊かなサイト9選
KUBOTA FUTURE CUBE
KUBOTA FUTURE CUBE | 株式会社クボタ
株式会社クボタの新コンテンツ。クボタが思い描く未来の地球と技術を表現した、とんでもなく美しいサイトです。このサイトを初めて見たときは、なんじゃこりゃあ……と圧倒され、うっとり見入ってしまいました。
広大で美しいCG映像・音楽・クリックやスクロールのアニメーションすべてが心地良く、洗練されています。「今っぽい」の、さらに先をいく世界観を感じると同時に、Webサイトの無限の可能性を感じますね！
CLOU architects
CLOU architects
北京や上海に事務所を構えている建築系のデザイン事務所さんのサイトです。
サイトトップの過去事例の見せ方が奇抜で面白いです。こんなにたくさんの事例をWebサイト上でどう見せるか、という点において発想が飛び抜けているなあ…と感じます。
画面左下でStatus、Scope、Year、Scaleごとに表示切り替えもできて、会社としての歴史、成長率、プロジェクトの壮大さを見せるという点でも素敵なサイトだと感じました。
でもこれ、スマホで見たときどうなっちゃうのよ？ って思いますよね。チェックしてみると、ユーザーを裏切らないスマホでの最適な見せ方をしていて……嗚呼……素敵。ぬかりない。ビューティフル。みなさんもぜひ見てみてください！
Made to Be Found | Spotify for Artists
Made to Be Found | Spotify for Artists
ミュージシャンのキャリアにどのように貢献できるかを示す、Spotifyの新しい取り組みのサイトです。
Spotifyと言ったら”あの”グリーンを想像しますが、このサイトではグリーンのカラーは一切使われておりません。ですが、ページ内に出現する角丸のCDジャケットのカードを見るだけで、これがSpotifyのサイトだということがわかります。それだけサービス内のビジュアルデザインが確立しているということですよね。
もちろんロゴの力は絶大ですが、ブランドのキーカラーにとらわれず、これだけサイト内にバチバチのビビッドカラーを多用していながらも、サービスのテイストをしっかり担保できているのって、すごいなぁ……と思います。
gradation, Inc. | Meet New Color.
gradation, Inc. | Meet New Color.
映像・グラフィック・デジタルコンテンツ制作を行う東京の制作会社さんのサイトです。カーソルに合わせてモワモワッと動く、他ではみたことのない奇抜なアニメーションに心惹かれました。
『ロジックと感性によって、彩り、可視化する。』という理念が、ファーストビューだけでもしっかりと表現されています。ダイナミックなアニメーションを使いながらもサイト全体はシンプルに、綺麗に表現されていて、素敵です。
Erin Wesley | Director of Photography
Erin Wesley | Director of Photography
ロサンゼルスを拠点に活動する映像クリエイターErin Wesleyさんのポートフォリオサイトです。映像作品が横スクロールで並ぶ、シンプルで無駄のない綺麗なサイトです。好きです。
クリックで映像が再生されるのですが、再生画面がこれまたいいなあと思いまして。「動画を再生します！」感を一切出さずに滑らかに映像の世界観に移り変わります。再生中、下にスクロールでなんとも自然にインフォメーションが見れて、上に戻ると勝手に映像が途中で止まってくれていて。細かいですがこれも無駄がなくてストレスを感じないスマートな設計で、勉強になります。
株式会社ANDO Imagineering Group | AIG
株式会社ANDO Imagineering Group | AIG
東京の設計事務所さんのサイトです。昨今、サイトトップにあえて映えるビジュアルなどは置かず、タイポグラフィなどのアニメーションで表現するサイトも増えてきていますが、こちらのサイトはまた新しい表現……降ってくる！
TOPファーストビューにインパクトがありますが、さらに下層もこだわりが詰め込まれていますね。おしゃれです。ライン使いや配色、細かいところまで、設計事務所さんならではの構造設計の世界観が見事に表現されているサイトだと思いました。
食文化ミュージアム
食文化ミュージアム
日本の食文化の多様性を発信する、文化庁のバーチャルミュージアムサイトです。
スクロールで奥に進む、おとぎ話に入り込んだかのような、素晴らしいアニメーションが迎えてくれます。かわいらしいイラストの中に突如、タケノコとか大根が出現するあたり、好きです。
こんなに素敵なアニメーションを制作しておきながらも、初回アクセス以降はオープニングアニメーションは見せず（メニュー内の”オープニング”というところからは見れます）。サイトの目的をぶらさない、潔い感じ、ユーザーファーストだなぁ……と感じました。
裏通りのドンダバダ｜ヤッホーブルーイング
裏通りのドンダバダ｜ヤッホーブルーイング
クラフトビール”よなよなエール”のヤッホーブルーイングさんが今年の春に発売された「裏通りのドンダバダ」というビールの特設サイトです。
「ベルトの数より胸の鼓動」って……どういうこと？ っていうコピーに始まり、見ている人の興味をどんどん掻き立て、最終的に「ちょっと一回飲んでみたい」と思わせるサイトって素敵ですよね。両サイドのあしらいが鼓動のようにドン！ ドン！ と押し寄せる感じ、とてもイイです。
BGMは是非オンで！ このシリーズで他にも色々ビールがあるのですが、どれもネーミングからして世界観づくりが最高です。ついついコンセプト資料が見てみたいなぁ……なんて思ってしまいますね！
ほろよい｜サントリー
ほろよい｜サントリー
もしかしてお酒のブランドサイトって結構面白いのかな？ と色々みていたら、ほろよいのサイトがエモかったです。
絶妙なレトロ感。少しだけ酔った時のようなボヤッと感。Film・Musicとセットで魅せる「ほろよい」な世界観。見事に表現していますよね。
ただWebサイトをデザインするだけでなく、映像・音楽など、幅広いクリエイターとタッグを組んでひとつのものを作り上げるって、とっても魅力的ですよね。
さいごに
以上、今月の注目Webサイトをお届けしました！
私の「好き！ 気になる！ 良い！」と思ったサイトを感じたままにご紹介してしまいましたが……。こんな表現方法があるのか…… とハッとさせられるサイトばかりでしたね。
普段からジャンルにとらわれず色々なサイト（サイトに限らずですが）を幅広く見て、感じて、表現方法のアイデアをインプットしておくことは大事ですね。
では！ 最後まで見ていただきありがとうございました。
LIGはWebサイト制作を支援しています。ご興味のある方は事業ぺージをぜひご覧ください。
