無料お見積りBLOG
ブログ
デザイナーが選ぶ世界観がすごいサイト5選
グラフィックデザインから私のデザインキャリアがスタートしました。
当時のWEBデザインはまだ黎明期で、部品を組み合わせたような原始的なデザインでしたが、今では「できないことはない」と言えるレベルまできています。
動けばカッコいいとか、動画があればトレンドといった風潮も落ち着き、できることが一通りそろった成熟感と、その先を目指す革新が同時に起こっている印象です。
技術よりも先に「伝えるために何をすべきか」が問われるWEBデザイン。
今回は、個人的に選んだ、「これでもかとこだわりまくった、世界観が細部まで行き届いているサイト」を5つご紹介します。
目次
1.完璧すぎる完成度
https://buttersand.com/
無駄なものが何もありません。
WEBデザインに関わるなら、だれもが一度はやってみたいだろうなというデザインです。ファーストビューからフッターまでで思いつくのはこの2文字しかありません。そう、「完璧」です。見ていて怖くなってきます。見なかったことにしたいくらいです。
油絵で描いた静物画を思わせる写真が流れ、それにつれて背景が変わる。優れたバランス感覚がないとこの見せ方はできません。
そこからスクロールすると商品が数点回りますが、これで商品のサイズや重量を感覚的に理解させています。画面を分割する斜線のエッジがぼかしてあるところに執念すら感じます。
四角に囲まれた動くテキスト部分をさらに下へ行くと….
そこから先はご自身の目で確かめてください。
やっぱり見ていて怖くなりました。
バターサンド専門店 PRESS BUTTER SAND
https://buttersand.com/
2.商品そのままを投影する
https://www.bombaysapphire.jp/
イングランドのボンベイ・スピリッツ社が製造するジンの国内サイトです。
雑誌広告を思わせるちょっとレトロな雰囲気と、“らしさ”を感じさせる色彩が素晴らしい。
日本語でこういうサイト作るのって結構難しいんです。文字サイズを小さくすると繊細になりすぎるし、英語に頼りすぎると肝心なところを読んでもらえない。
日本語って、平仮名と漢字のバランスが本当に難しいんです。
漢字が連続すると場面に対して重さが出たり、少なすぎると軽くなりすぎたり。とにかくバランスがとりづらいことがあります。
英語のみだとそれがないので、おしゃれになるのですが…そこはデザイナー腕の見せ所でもありますね。
不規則に画像を配置して動画も入れて…ごちゃごちゃしちゃうのが普通ですが、緩急を効かせて、時には思い切って余白を作ってまとめています。
豊かな香りとガツンと来るアルコール度数が強くてうまいお酒なので、上品さだけではダメなわけで、パンチが効いてないとサイトとして商品を伝えきったことにならないから、そこはクリアしたいってことで落ち着いたのが今のサイトといったところでしょうか。
ボンベイサファイア国内サイト
https://www.bombaysapphire.jp/
3.迷わず行ける快適さ
https://findmy.vitra.com/f/en-en/gifts
スイスの家具メーカー「ヴィトラ」のギフト紹介のサイトです。
英語、デンマーク語、日本語と選択できます。
画面中央の「Start」から進むと、商品が碁盤の目で整然と並びます。
さらに、大きく「色、用途、価格」別に条件が設定できるメニューが下部につきます。
このサイトの良さは、「スクロールの気持ち良さ」に尽きます。
極端に言うとそれだけです。でもそれだけで素晴らしいです。
商品が一番よく見える術を理解しているので、小さく整然と並べるだけで絵になり商品名やスペックを排除することでサイトの美しさが最大限に生かされています。
そして条件を付けて選んだときは不規則な並びに変わっています。
これは、ユーザーが混乱しないための配慮です。
TOPページの整然さに対する違いをつけることで、「ページが変わった」ことを表現しています。整然→ランダム→1点表示と3段階で変化することで、説明がなくてもページの移動がわかるんですね。
これは恐るべしです。
選べる楽しさと迷わせない快適さが商品の良さ、強いては企業の姿勢すら感じさせてくれます。
ヴィトラ ギフトファインダー
https://findmy.vitra.com/f/en-en/gifts
4.破錠しないバランス感覚
https://rara.ritsumei.ac.jp/
立命館大学の研究者たちが、研究高度化を牽引するために集まったメンバーを紹介するサイトです。
とにかく派手ですが、色を黒と赤の2色でまとめてアクセントで1色入れる程度にすることで、デザインを成立させています。
スクロールすると、画面いっぱいだった要素が中心の赤い円に集まりページが始まります。
こういうコラージュって本当にセンスが問われるデザインで、一歩間違うと雑然として美しさがなくなってしまいます。
質感をそろえて濃淡を調節し、色の強さをどう分散させるか….やるべきことがとにかく多いんです。
うまくいくと要素が反応しあって無限のイメージが伝えられるのですが。
緻密さと大胆さ、知性を感じさせるけどユーモアもある。
色数は限定し、動きとコラージュはしっかりやる。余白をうまくとってページを流れを破錠させない。確固たるデザインコンセプトをつくり貫くことで、唯一の世界観ができているのではと思います。
途中で背景が黒に反転したり、中央への集中がメインだった動きが最後だけ左右だったり。
使うべきところがあるからとっておいたようなニクイ演出があります。
何でもない部分も手を抜かないのが素晴らしい。
立命館先進研究アカデミー
https://rara.ritsumei.ac.jp/
5.商品紹介の最適解
https://www.proof-of-guild.com/
名古屋市にあるジュエリーショップ「プルーフオブギルド」のサイトです。
読み込み時のマルチカラーみたいな画面が現代美術を思わせます。これだけで好きになれます。
トップページが商品一覧のようで、スクロールするたびにマルチカラーみたいな画面が出てきます。ホバーすると角が丸くなったり、透過で「View」が出てきたり…と、とにかく洒落てますね。
「商品は固いのにサイトは柔らかい」みたいなアンバランスにセンスを感じます。
スタイリッシュな中に柔軟な感性と遊び心をイメージさせることで、冷たい印象になりすぎないようコントロールされているんですね。
商品の色はゴールド、シルバー、ブラックが中心ですが、小物や背景にこだわって、ページ全体が単調にならないよう配慮されており、とにかく写真がすばらしい。
商品への想いの強さが表れていてミニマムな表現がとてもマッチしています。
スクロールしていくうちに新しく表示されるものだけ、マルチカラーのエフェクトと一緒に出てくるので、見た商品と追加された商品がわかりやすく工夫されています。
画像サイズの違いと、増えた商品の表示をどうクリアさせるかの最適解でしょう。
素晴らしいです。
プルーフオブギルド
https://www.proof-of-guild.com/
7.まとめ
いかがでしたでしょうか。
個人的な感想も含めてご紹介しましたので、好みがわかれる点があったかもしれません。
テキスト、写真、映像。色、サイズ。ホバー、スクロール。
すべてがあるべき姿で整ったこれらのサイトは憧れでもあり、同時に嫉妬の対象でもあります。
デザインっておもしろいなと思っていただけたら嬉しいです。
PS.かの有名な阿部寛さんのサイトで記事を書いていましたが、記事のトーンに合わずボツにしました。
またの機会に取り上げたいと思います。
愛知県内から名古屋市を中心にホームページ制作を行っている会社
株式会社 WWG（ダブルダブルジー）
愛知県 名古屋市中村区名駅5-16-17 花車ビル南館5F
TEL： 052-890-7007（2021-12/16～変更）
※ ホームページ制作や活用サポートのお問い合わせはコチラから
コジコジ
デザイナー
2020年入社。20年以上に渡りデザイナーとしてWEBはもちろん、パンフレットや、ロゴ、各種広告など幅広いデザインに従事。デザインの記事をメインに楽して役立つブログを心がけております。
おすすめの記事
人気の記事
おすすめ記事
アーカイブ
- 2023年 12月 (13)
- 2023年 11月 (10)
- 2023年 10月 (10)
- 2023年 9月 (9)
- 2023年 8月 (9)
- 2023年 7月 (10)
- 2023年 6月 (9)
- 2023年 5月 (10)
- 2023年 4月 (8)
- 2023年 3月 (9)
- 2023年 2月 (7)
- 2023年 1月 (9)
- 2022年 12月 (10)
- 2022年 11月 (7)
- 2022年 10月 (6)
- 2022年 9月 (6)
- 2022年 8月 (6)
- 2022年 7月 (4)
- 2022年 6月 (4)
- 2022年 5月 (5)
- 2022年 4月 (5)
- 2022年 3月 (10)
- 2022年 2月 (10)
- 2022年 1月 (11)
- 2021年 12月 (12)
- 2021年 11月 (13)
- 2021年 10月 (13)
- 2021年 9月 (13)
- 2021年 8月 (14)
- 2021年 7月 (14)
- 2021年 6月 (14)
- 2021年 5月 (13)
- 2021年 4月 (13)
- 2021年 3月 (18)
- 2021年 2月 (12)
- 2021年 1月 (14)