繰り返しが印象深い！「ワンパターン・デザイン」７選
Webサイトギャラリーを覗いて感じたのですが、やはり美しい写真やムービー、斬新なレイアウトなどのデザイン要素がふんだんに使われているサイトに目が奪われがちだったりします。
その中で、あえて一つの要素にフォーカスし、うまく繰り返して魅せる手法があることに気づきました。
今回はこれを「ワンパターン・デザイン」と称し、その手法を取り入れたサイトを紹介します。
森山直太朗 オフィシャルWebサイト
シンガーソングライター、森山直太朗氏のオフシャルサイトです。
TOPに配置されている森山さんの画像が背景に指定されており、スクロールしても追従してきます。
写真は変えず、顔の落書きだけを差し替えることで、着せ替え人形のような効果を生み出しています。
本人は至って真面目なのにとてもPOPな雰囲気を生み出しており、お茶目な森山さんの人柄が垣間見えるようです。
メインの写真1枚だけのシンプルサイトながら、スクロールがとても楽しくなる工夫だと思います。
立ち読み女子 by TSUTAYA BOOK STORE TENJIN
TSUTAYAが運営している、おすすめの本を何人もの女の子が紹介してくれるWebサイトです。
背景の本棚がスクロールし、まるで無限に続く本棚をスクロールしているかのような気分になります。
実は同じ背景なので、振り向く女の子以外は全然変わらないのですが、ワンパターンでもとてもインパクトがあり、飽きない演出です。
「The River」特設サイト
演劇「The River」のタイトル通り、流れる川のようなアニメーションが印象的なサイト。
サイトのTOPからフッターまでこの演出一つで完結させています。
大変シンプルで静寂な印象を受けますが、それだけにタイトルが記憶に残ります。
もしこれが美しい川の写真だったり、出演アーティストの写真だったとしても、これほどインパクトはないと思います。アニメーションって偉大です。
線の流れを動かすことで本物の川の様に見せるこの技術自体も、とても参考になります。
「Why juice?」Webサイト
東京のジュースブランド「Why juice?」のサイト。
初見、海外のサイトだと勘違いしてしまいました。
Homeの中盤から流れる、商品の紹介が印象的です。
パッケージの配置はそのままに、背景の食材だけが切り替わることで商品の特徴が分かりやすくなっています。また、商品のデザイン性の高さ、こだわり、美しさも際立ちます。
パッケージは同じでバリエーションの多い商品なら同様の演出ができるので、幅広く使えそうな見せ方ですね。
今回はテーマ通り「ワンパターン・デザイン」を取り上げていますが、その他のページもシンプルながらデザイン性が高く、美しいです。
「Glasses」Webサイト
大阪のアイウェアブランド「Glasses」。トップの写真がスライドする演出自体は珍しくありませんが、商品をより大きく見せることで、強いインパクトを与えます。
ディテールまで自信のある商品であることがわかりますし、ちょっとしたスライドの演出で単調に見えない、斬新なサイトであるように見えます。
スライドも基本的に同じ演出の繰り返しなので、これも一つの「ワンパターン・デザイン」と言えるでしょう。
基本的な演出を少し変えるだけで印象をガラッと変えられる、良い例だと思います。
ikiji project Webサイト
ブランドロゴをふんだんに利用したアパレルWebサイト。
ロゴの形にマスクして商品を見せたり、メッセージを届けたり。
かなり割り切ったデザインでアート寄りの見せ方なので、使いどきは選びそうですが、
ブランドにこだわりが強いことはよくわかりますし、ページを見終わるころにはロゴの形状はすっかり覚えてしましました。
andrew mccarthy ポートフォリオWebサイト
andrew mccarthy氏のポートフォリオサイト。
背景の切り替わるタイミングをうまく合わせ、パラパラ漫画のような演出に。
派手な色使いと、演出で個性の強さを印象付けられます。
英語で内容はよく理解できないながらも、最後までスクロールさせられてしましました。
このパラパラ漫画のような見せ方は、他のサイトにもなんらかの応用ができようです。
ちなみに使用されているフォントは「Orator regular」。http://ufonts.com/にてダウンロードできるフリーフォントです。
総括
違う項目を同じルールで統一させるのはデザインの基本的な手法ですが、そのルールをさらに強調することで、強いインパクトを与えることができます。同じデザインの繰り返しなので基本シンプルになりやすいですが、単調にならない工夫に気づくことができました。また、素材が少ないデザインにおいても応用の効きそうな手法です。
