Webデザイントレンド定点観測 フラットなタッチのイラストレーション
はじめまして。東京都渋谷区でフリーランスWebデザイナーとして働く、黒野明子（くろのあきこ）と申します。今月から毎月1回のペースで、「Webデザイントレンド」と題し、いま気になるWebデザインのトレンドをピックアップしてご紹介していきたいと思います。
初回の今月は、フラットなタッチのイラストレーションを使ったデザインを取りあげてみることにしました。
ここ数年ですっかり耳に馴染んだ「フラットデザイン」というキーワード。「使いやすいユーザーインターフェイスなのか？」などの賛否両論がありつつも、2014年のWebデザイントレンド予測記事に目を通していくと、まだしっかり残っている模様です。
今回はUIよりも、メイングラフィックに使用されて いるイラストレーションのタッチに着目して、気になるサイトを探してみました。こういったフラットなタッチのイラストレーションは「SVG」で作成するの にも向いていますので、様々な画面サイズの端末で拡大縮小表示されても、ぼやけることなく美しく描画されるというメリットも見逃せません。
では早速、ピックアップした10個のサイトをご紹介していきましょう。
Alchemy | Digital Design and Advertising
イギリスのデザイン／広告会社のサイト。基本的に単色べた塗りの色面、単純化されたフォルムで構成され、パースや影のついていない表現がほとんどです。た だよく見ると、フラスコの中の液体に見られる小さな数字、テーブルの木目、背景の薄いドットなど、単調さを防ぐような表現がバランスよく使われています。
Alchemy | Digital Design and Advertising
Lorenzo Verzini
ロンドンに住むイタリア人デザイナーのLorenzo Verzini氏のポートフォリオサイト。「アイコン」という言葉を使ってもいいような、非常にミニマルなイラストレーションが、単色べた塗りのパーツで描かれています。フラットデザインを採用すると「どこが押せるボタンなのか分かりにくい」と指摘されることもあるようですが、このサイトでは、ボタンにフラットな影をつけており、クリックできることを暗示しています。
Abby Putinski | Illustration & Graphic Design
サンフランシスコのイラストレーター／デザイナーのAbby Putinski氏のサイト。カスタマイズしたGoogleマップの上に自作のイラストをマッピングし、クリックするとGIFアニメーションが表示されます。単色べた塗りのパーツで描かれたイラストがアニメーションになっている様子はかわいらしく、FERRY BUILDINGの国旗のはためき方の表現なども参考になります。
Abby Putinski | Illustration & Graphic Design
Full English | eCommerce Support, Magento Development London
レストランのメタファを使ったEコマースサイト制作会社のサイト。このサイトでも、非常にシンプルなフォルムの単色べた塗り表現が使われていますが、それぞれがアニメーションになっており、伝えるべきメッセージが分かりやすく表現されています。
Full English | eCommerce Support, Magento Development London
Lets Yep! Create instant meetings with fun people
ロシア語圏で作られたメッセンジャーアプリのサイト。単色べた塗りながら、比較的小さくて細かなパーツで組み立てられたイラストレーションです。これまで見てきたサイトと表現のアプローチは似ていますが、顔のパーツなどが個性的に見えるバランスで、日本ではあまり見られないようなエキゾチックさを感じました。
Lets Yep! Create instant meetings with fun people
David Hakkert || Grafische Communicatie
オランダのデザイナーのポートフォリオサイト（オランダ語が読めないのですが、自動翻訳で判断する限り、おそらくそのようです）。これまで見てきたサイトと傾向は似ていますが、メイングラフィックの鉛筆部分をよく見ると、木肌のテクスチュアがうっすら入っているなど、少し異なる表現が見受けられます。また最近のプロジェクト一覧のサムネイル部分には、これまた話題になった「ロングシャドウ」的な左下に長く伸びる影の表現が取り入れられています。
David Hakkert || Grafische Communicatie
Alex Araujo
ビジュアル&UI/UXデザイナーのAlex Araujo氏のポートフォリオサイト。このサイトでは、これまで見てきたサイトと同様に単純化されたフォルムのモチーフが使われています。しかし、塗りがグラデーションになっていたり、薄い影が斜めに落ちていたりすることによって、これまでのサイトとは少し違った透明感のあるテイストを見せています。
NEOTOKIO! / italian interactive design studio
イタリアのデザインスタジオ「NEOTOKIO!」の夏期休暇告知ページです。パララックス効果の設定された縦長ページをスクロールしていくと、透明感のあるグラデーションで塗られたシンプルなフォルムのアイスクリームが次々と現れます。
NEOTOKIO! / italian interactive design studio
Adam Mottau – Digital Designer
フリーランスデザイナーAdam Mottau氏のポートフォリオサイト。このサイトで使われているイラストレーションは、これまで見てきたようなシンプルなフォルムではなく、写真を元にしたようなリアルタッチで、パースもついた表現となっています。自然なグラデーションを数段階の等高線状に分割した色面で表現する手法は、90年代に流行した日本のアーティストユニット「Enlightenment」の作品との共通点も感じられます。
Adam Mottau – Digital Designer
TCM Summer Under the Stars 2013
今回ピックアップした中で珍しく、大手企業のサイトとなりました。タイム・ワーナー関連の映画専門チャンネル「Turner Classic Movies」のキャンペーンサイトです。古き良きハリウッド全盛時代のスターのシルエットと、俳優ごとにイメージを変えたフォントを組み合わせ、クラシックで優美な印象に仕上がっています。それぞれの俳優の個別画面でも、シルエットが効果的に使われています。
TCM Summer Under the Stars 2013
この連載では毎月気になる「トレンド」を観察しようとしているので当たり前かもしれませんが、今回ピックアップしたサイト群は「フラットなイラストレーション表現」以外にも「レスポンシブデザイン」「パララックス」「豪華な縦長1ページ表現」など、多くの共通項が見受けられました。
また、全く意図していなかったのですが、結果的にほとんどが制作会社やクリエイターのポートフォリオサイトとなってしまいました。来月は、クライアントワークとして制作されたサイトを中心に観察していきたいと思います。
（了）