2015年Webデザイントレンド

shunichi shiga

Webデザインを制作する時は必ず、インターネットが生み出すあらゆる可能性を考慮しましょう。デザイナーの斬新なアイデアは、人々の交流や想像力の範囲を世界規模へと広げていきます。そうした例は、広告制作会社のWebサイトなど、時代の最先端をいく業界ではよくあることです。

この記事では、2015年に流行しそうな注目のWebデザイントレンドを厳選してご紹介します。これを読めば、真のイノベーションを理解し、新たなチャンスを見い出せるはずです。中には、”モダンなWebサイト”という概念を完全に覆すトレンドもあるかもしれません。

1. 大きく作る

Big_Really_Big

“大きく作る”というのは、今日のWebデザインにおいて最も重要な原則でしょう。とはいえ、この種のホームページに抵抗がある人は多くいます。具体的には、アバブ・ザ・フォールド(スクロールせずに閲覧可能な領域)。このタイプのデザインでは、画像や動画の上に短い言葉を並べたものだけをに表示します。中にはナビゲーションすら取り除いたものや、(少なくとも)小さなアイコンとして隠しているものもあります。

このWebデザインのトレンドは、”映画風”と”ブックカバー”の2種類に分類されます。映画やテレビの広告に着想を得た前者に対し、後者は書籍やカタログの表紙といった昔ながらのコンセプトを進化させたものです。

book

このトレンドを支えているのは、視覚的効果と実用性です。まず、サイトを訪れたユーザに、一瞬にして最大級のインパクトを与えることができます。さらにコーディングがしやすく、モバイル端末でもデスクトップパソコンのモニタでも正常に動作します(表示デバイスの画面サイズによらず、レイアウトは一定に保たれます)。

このような画像の全画面表示がはやり出したのは去年のことです(「2014年のwebデザイントレンド」という記事で紹介しました)。そして、高画質画像や高速化した技術の利用が増えるにつれ、Webサイトは”ブックカバー”のレイアウトから、さらなる進化を遂げようとしています。

Use_of_Java_Script_snow

“映画風”のトレンドで重要なのは、全画面(または、ほぼ全画面)に映し出された動画と、その上に表示される短い言葉や要素です。このスタイルを初めて取り上げたのは「2013年のWebデザイントレンド」という記事ですが、当時はまだ少数の代理店のWebサイトにしか使われていませんでした。

そのトレンドが今、勢いに乗っています。つい昨年、Paypalはホームページをアップデートして、背景に動画を全画面で表示するようにしました。これがきっかけとなり、このコンセプトは主流になっていったのです。

2. マルチメディアを体感させる

jack_daniels

マルチメディアのコンセプトは、かなり古いものです。マルチメディアという言葉自体が使い古され、誤用された結果、もはや本来の意味はほとんど残っていません。それにもかかわらず、デザイナーやプログラマーの多くは、もっと魅力的なマルチメディアを体感してもらおうと日々努力しています。

かつて、こうした手法にはFlashをプラットフォームとして使用していました。それが今ではHTML5のcanvas要素に変わり、いずれはこれでWebサイト上の視覚効果を、ほとんど作り出せるようになるでしょう。

street_view_inspire2

HTMLのcanvasを使って作成したインターフェースの例として、注目のサイトをもう1つ紹介しましょう。こちらはブルックリン在住のミュージシャンJonathan Dagan(j.viewz)が運営する、コミュニティー主導型のDNA projectのサイトです。視覚に訴える背景動画を始め、j.viewzが試作した曲(ユーザがダウンロード可能)や、コラボしている人たちがアップした動画や音楽、フィードバックなどがあり、j.viewzの新アルバムの制作予定が分かるようになっています。

Navigation

Website via Raise the River

さらにもう1つ、すばらしい例を挙げましょう。このRaise The RiverのWebサイトの特長は、最適な視覚的メタファーと、情報の見せ方にあります。程よい速度でアニメーションが進み、スクロールが無効になっていると、ユーザは必然的に一息ついて、このページの進行にペースを合わせることになります。

インターフェース設計においては、ユーザ側ですべて操作できるように設計するのが一般的です。しかし、このWebサイトを見ると、あえて一定時間ユーザ操作を無効にすることで、より良いユーザエクスペリエンスを実現できるケースもあることが分かります。

3. 視差効果で動きを生み出す/h3>

視差効果は、さまざまなアニメーションへと進化を遂げました。そのすべてに共通して言えるのは、「スクロールやマウスの動きに応じて、ページ内の要素やプロパティを動かす」ということです。よく見ると分かると思いますが、この記事で紹介しているWebサイトのほとんどに、この手法が使われています。では、もう少し他の例を挙げましょう。

スクロールイベントと手書きのアニメーション

Use_of_Java_Script

このMint Design Companyのサイトを見ると、昔のCSSスプライトの技術が独創的な手法で使われていることに気付くでしょう。その効果によって、簡素な企業Webサイトが、魅力あふれる個性的なサイトに見えるのです。

斬新なスクロール

quo_s3_opisy

Website via QUO+

QUO+のヘッドセットのページは、縦にも横にもスクロールします。このサイトを見ていると、まるで迷路の中を進んでいるようなワクワクした気分になります。さらにスクロールをすると、製品の色が変わっていく部分も楽しめます。

4. 動き出す絵本

akso3

このタイプのページは上の1つ目の例のように、ユーザが所定の位置までスクロールするとアニメーションのシーケンスが始まります。たいていは、数個の要素がページ内に滑り込んできたり、フェードイン効果で浮かび上がったりします。

BOLDKINGの製品ページ(上のサイト)では軽量化したSVGとJavaScriptを使い、視覚的メタファーを用いて製品の流れを説明しています。そのアイデアやアニメーションもさることながら、これを1.5メガバイト以下のページ容量で実現しているというから驚きです。JavaScriptのライブラリ1つで、そのくらいのサイズになるものもあります。なお、このアニメーションシーケンスの中には、操作できるものも1つあります。

collindewi

Colin and DewiのウェディングWebサイトは、単純ながらも効果的な方法で、ユーザに集中して物語を読んでもらえようにしています。一度に表示されるのは物語の一節のみです。次のパートを読むにはスクロールする必要があります。

普通のスクロール機能と変わらないような気もしますが、実際は3DのCSSアニメーションを使って、テキストの一部を表示したり隠したりすることで、話の続きを読みたいと思わせているのです。

ヘッダーとページに、マウス操作に連動した視差効果を使う

HABITAT

Website via HábitatWeb

この効果を使うと、3次元空間を見ているような錯覚を作り出すことができます。Habitat Web(上のサイト)やArchéologie de la Grande Guerreのページように、視覚から入る情報とマッチした効果を使うと良いでしょう。

この効果をセンス良く使えば、すばらしいサイトに仕上がります。とはいえ、このトレンドは大々的には広まらない気がします。もし大流行するようなことがあれば、すぐに安っぽく、うっとうしいと思われてしまうでしょう。

5. フラットデザイン

Flat_Dsign

Website via Colin and Dewi

ここ3年程、フラットデザインはデザイン界の”王様”として支持されてきました。特にアイコンやメニュー、イラストなどの小さな要素においては今でも大活躍しており、今後も人気は続くでしょう。

フラットデザインの要素は見栄えが良く(数年前まであらゆるWebサイトに使われていた光沢のあるWeb 2.0のアイコンより断然良い)、アイコンフォント技術のおかげで簡単に拡張や管理ができます。こちらのicomoon.ioは、誰でも無料で自由にオリジナルのアイコンフォントを作成できるオンラインサービスの一例です。

しかし、ここで重要なのは、フラットデザインが必ずしもフラットとは限らないということです。デザイナーは見る人をあっと言わせようと、わずかなグラデーション、テクスチャ、写真などを多く取り入れています。フラットデザインの一番のポイントは色のフラット感ではなく、いかに独創的な視覚的メタファーを感じ取ってもらうか、という点だと言えるでしょう。

実物を模倣するスキュアモーフィックデザイン(メモ帳アイコンであれば、紙の束を革表紙でとじた本物のメモ帳に似せる)と違い、フラットデザインでは、あらゆるサイズに対応した、合成的で記憶に残る楽しい画像でメモ帳という概念を伝えようとします。

このトレンドは今後、さらにコラージュ風になり、他のスタイルと一緒に使われるようになると予想しています。例えば、上述のHábitatWebのWebサイトのような感じです。

6. ボックスよ、さようなら

Webデザイナーは常に、「自分は型(ボックス)にとらわれず物事を考えている」と、さまざまな形で示そうとするものです。このトレンドは、「描いたボックスを突き破ってみろ」とでも表現したらいいでしょうか。Webデザインにおいては、フレームは必ず長方形の画面で(いまだに円形のモニタがあるとは聞いたことがありません)、ページ内のHTML要素もすべて長方形です。

しかしデザイナーは、大半の人と同じく制約されるのを嫌います。ではここで、「自分は長方形にはとらわれていない」と証明するための3つ方法を紹介しましょう。どれも今、人気上昇中のレイアウトです。

長方形の存在をかき消したページレイアウトにする

Circles_Hexagons_Iirregular_Shapes

円や六角形、ひし形などの変わった形も使えます。

rectangles

Lorenzo Bocchiのサイトには、不等角投影図法で描かれた歪んだ領域とWebサイトレイアウトのプレビューが表示されていて、広がりや動きが感じられます。

z_lotu_ptaka_realism

レストランRosaのホームページを見ていると目の錯覚が起きて、今にもクッキーの香りが漂ってきそうな感じがします。このページでは、数世紀前から続く騙し絵の最新技術を使って、モニタに表示される実際のデスクトップを再現しています。例えば、木のテーブルを背景にして、その上にすべてのオブジェクトを配置しています。

swiss2

長方形に対抗する究極の方法は、無限に広がる空間へユーザを連れ出すことです。そこでは、スクロールは単に上下する機能ではなく、空を飛べる機能になります。

Swiss Air Linesは、Webサイト操作の認識を覆そうとしています。このページを見ていると、自らの情報空間に対する認識がいかに月並みだったかに気づくでしょう。ここでは画面を上下に移動する代わりに、雲間を縫うように空を飛ぶことができるのです。

7. タイル

Tiles_Windows8

タイルに固執するのはつまらないと感じる方は、縁を不規則にジグザグにしたり、オブジェクトを入れ込んだり、境界線上にテキストを配置したりすると、レイアウトの幅が広がるかもしれません。

8. ナビゲーションウィジェット

dailybeast_s

デザイナーは長年にわたり、いろいろなナビゲーションを試すことに楽しみを見い出してきました。ナビゲーションで”遊ぶ”のが最もはやったのは、WebサイトがすべてFlash設計されていた頃です。その後、Flashの勢いが衰えると、アニメーションや一風変わった双方向性は失われていき、より落ち着いたメニューが使われるようになりました。

ところが最近、最新のナビゲーションが再び盛り上がりを見せています。その背景には、新たなWebデザインに秘められた可能性や、既存のナビゲーションモデルを複数デバイスで使う際の効率低下などがあります。さらにJavaの絶え間ない進化(フレームワークやプラグイン)によりJavaScriptが普及し、すべての主要ブラウザで同じように最新のCSSを解釈するようになってきたことも、この傾向を後押ししています。

では、ナビゲーションの新手法やトレンドをいくつか紹介しましょう。すでに広く使われているアイデアもあれば、これから新しい”モダンな”Webデザインになりそうなものもあります。

スティッキーメニュー

less_s

Less CCのWebサイト。このタイプのメニューは、スクロールの位置に応じて関連項目のサブメニューを展開表示するため、コンテンツの多いシングルページのサイトに使うと効果的。このLESSのマニュアルページは、数ある”マニュアル型”のWebページの中でも格段に使いやすい。

スティッキーメニューとは、スクロールをしても画面の上部や端に固定表示されるタイプのメニューです。好き嫌いはさておき、これはシングルページのデザインにおいて定番になりつつあります。

スティッキーメニューと一緒にscrollspyというスクリプトを使って、ページ内の正確な位置を示すウィジェットを作成する場合もあります。これは、長い階層メニューでは特に役に立ちます。

画面の四隅に固定されたスティッキーナビゲーション

HUM_1

Website via Hum

ストリートビュータイプのナビゲーション

pudelko_w_pudelku_nawigacja

Website via Oh Deer Games

OhDeer Gamesの制作者は、Googleマップの中でも、とりわけストリートビューの影響を受け、まるでGoogleのストリートビューを見ているようなナビゲーションを再現しました。これがトレンドになるかは、時期が来れば分かるでしょう。ストリートビュー風のナビゲーションや、ゲームでお馴染みの不等角投影図法を用いた”上空から見たような”ビューを追求しているページは、他にもあります。

そして、このトレンドは次に紹介する注目トレンドを生み出します。

9. Googleマップを取り入れる

street_view_inspire

これをトレンドとして取り上げた理由は、ずいぶん前から人気が出ている(あらゆるところで目にする)ことに加え、Googleのカスタマイズオプションが盛んに使われた結果、より目を引くデザインに進化したからです。

このトレンドに乗ったWebサイトの中には、マップというコンセプトを軸に、機能性や視覚的なアイデアを形作った非常に面白いサイトがあります。もちろんそこには、ページの外観や雰囲気に合うようカスタマイズしたGoogleマップが使われています。

10. マッシュアップ・インターフェース

その課題の解決策になり得るのが、マッシュアップ・インターフェースと呼ばれるものです。このレイアウトは、必要な機能やコンテンツに合わせて作った多数の”レイヤ”から構成されます。実を言うと、これは新しいコンセプトなどではありません。デスクトップのアプリケーションでは普通に使われていましたが、主流のインターネットでは、あまりはやらなかっただけです。しかし最近になって、このようなインターフェースの人気が上昇し、より上品で機能的にものに進化しています。

NecotransのWebサイトのアバブ・ザ・フォールドには、全画面表示された写真と、その上に表示された1文しかコンテンツがないように見えます。しかし実際は、画面の右側に小さなサイドメニューがあって、そこから同じ画面領域にあるすべての基本機能にアクセスできます。ユーザはこのメニューから、サイト検索ウィジェット(入力内容に応じて結果が表示される)やカスタマイズされたGoogleマップ、ニュースウィジェット、問い合わせフォームを使用できます。

11. 極力シンプルに

maemo_big_video2a

Website via Maemo

有名なKISSの原則(「Keep It Simple, Stupid(シンプルにしておけ!この間抜け)」、「Keep It Short and Simple(簡潔に単純にしておけ)」)は、軍隊やビジネス分野、政府などで1960年代から使われてきました。しかし、いくらシンプルなデザインにしようと努力しても、大概はさらにシンプルにできる余地が残っているものです。

レストランMaemoのサイトでは、極力シンプルな言葉を使い、確かな力強さを持った物語を伝えています。サイトの訪問者が取るべきアクションはたった1つ(”Book a table(席の予約)”)で、レストラン名の背景にはフィヨルドの冷たい霧が渦巻いています。

下にスクロールすると、写真が何枚かあります。レイアウトはカジュアルで、縦横方向に表示位置をそろえている感じはしません。この写真のテーマも、カジュアルな雰囲気です。とはいえ、このページには、見ている人の感覚に強く訴えるものがあります。余計なものをそぎ落としたフォームは写真の質を際立て、ミニマムデザインにすることで、表示されている短い文を、じっくりと格言のように読ませようとしています。

ここでの教訓は、視覚的に落ち着いた(静かな)Webデザインにしても、見栄え良く仕上がるということです。コンテンツやフォーム、色はできるだけ最小限に抑え、大きくリアリティのある動画を使って趣を持たせてみてはいかがでしょうか。

12. World Wide Wait(表示待ち時間)

loading

古いジョークですが、皆さんもWorld Wide Waitという言葉を聞いたことがあるのではないでしょうか。56kモデムでインターネット接続するのが主流だった90年代には、「WWW(World Wide Web)」の頭文字を、冗談で「World Wide Wait」と言っていたものです。しかし高速ネットワークの登場により、この言葉はほとんど忘れ去られてしまいました。

かつてないほどの高速通信が実現した今は、ひと昔前には考えられなかったWebサイトを作成できます。例えば、背景としてHD動画を流すようなサイトです。しかし前進には代償が付き物です。この場合の代償は時間、とりわけ読み込み時間です。

こうした背景があって、見た目の凝ったプリローダーが再流行の兆しを見せています。小規模のゲームに転向していったFlashの全盛期ほどの魅力はありませんが、プリローダーは今でも独立した芸術作品です。

13. デザイナーの自動化

thegrid1_

grid.ioのWebサイトのスクリーンショット。人間ではありえないようなミス(黒背景に黒文字を使っているので読めない)を犯していることが分かる。

この記事をまとめる前に、”The Grid“についてお話ししておかなくてはなりません。The Gridとは“自動化したデザイナー”を利用する興味深いアイデアで、ここ最近話題を呼んでいます。その目的は、プログラマーとデザイナーの代わりに人工知能を使うというものです。では今後、Webデザイナーの需要はなくなってしまうのでしょうか? 今のところはまだ何とも言えません。

現段階では、このシステムをテストできないので、使いやすさを評価するのは難しいでしょう。彼らのWebサイトは、単に自らの力を見せつけているだけにも見えます。全体的に見るとThe Gridは、ほぼすべての解像度で正しく動作していますが、こういった人工的な芸術作品を作ろうとする試みは、まるで今の時代を象徴しているかのようです。例えばThe Painting Foolという創造的なソフトウェアが描いた絵は、今でもアートギャラリーに残っています。

まとめ

ご紹介した13個のWebデザインのトレンドは、この1年でジワジワと人気が出てきたものです。おそらく2015年に登場するWebサイトは、これらに強く影響を受けた作品になるでしょう。とはいえ、今年のポイントをひと言でまとめると、「Webサイトをデザインする時は、”コンテンツファースト”を意識することが最も大事」と言えます。

これは揺るぎない指針です。しかし最近では、Webデザインの美しさを追求するあまり、デザインの準備段階(コンセプト、ナビゲーションフローの検討、ワイヤーフレーム作成など)のミスが露見するケースが多くあります。新たな技術を取り入れて視野を広げる際も、基本は忘れないようにしたいものです。

最新の流行をチェックしたい方は、こちらで2016年のWebデザイントレンド予測をご覧ください。

関連記事

テックスタートアップ向けロゴデザインの5つの方法

テックスタートアップ向けロゴデザインの5つの方法

テックスタートアップが99designsで最も成長著しい顧客層の1つであることをご存知でしたか?テックスタートアップの優れたロゴをデザインする方法を知っていることは、重要なスキルです。 都合の良いことに、大抵のテックスタートアップは、ロゴデザインに対して同じ考えを持っています。99designsのクライアントは皆、オリジナリティを求めながらも、同時に、デザイナーがテックスタートアップの好みを知り尽くしていることを期待しています。例えば、サンセルフ体のフォント、鮮やかな色と刺激などです。 すぐにテックスタートアップの優れたロゴをデザインできる5つの方法を、詳しく見ていきましょう。 1. 社名を描く — これらの企業ロゴは、事業内容を非常に直接的かつ人目を引く方法で表しています。単純である理由:皆忙しく、ロゴを分析する暇などないからです。 大抵のテックスタートアップは、非常に明確で具体的な製品やサービスを提供していて、その製品やサービスがしばしば社名に表れています。CityCliqはオンラインのビジネスページ、Soundcloudは音楽保存、thredUPは、母親をターゲットとした古着を扱っています。 ロゴデザインは、スタートアップの社名を知ってもらえるようなシンボル、あるいはシンボルの組み合わせを考えるところから始めてください。どのような事業を行っているのか、どのようなサービスを提供しているのかが明確でなければなりません。 この特定の方法を使う際、一般的か独創的かは紙一重です。ありきたりなイメージを避けつつ、社名を覚えてもらえるようななじみやすいシンボルを見つけるのが腕の見せ所です。 例えば、上のCityCliqのロゴを考えてみましょう。見慣れた手のカーソルを使っていますが、これはクリックと都市の風景の両方を創造的に表しています。都市の風景の上に手を置いただけでは、ありふれたロゴとなるでしょう。 2. ひねりを利かせる — これらの企業はすべて、ひときわ目立たせるために一ひねり加えたロゴを使っています。キャラクターのようなものをロゴに入れることによって、独自性を出しているものが多いことが分かるでしょう。 各企業は、競合他社から差別化を図ろうとしています。しかし、多くの企業にとって、ひねりを利かせるというのは、選択肢ではありません(一ひねりあるロゴを持つ銀行がどれくらい成功するか、少し考えてみてください)。幸運にも、Web関連企業やスタートアップは、ひねりをよく利用しているか、従来とは異なるサービスを提供しています。 どうすれば製品やサービスを、斬新な方法か奇抜な方法、あるいは予想外の方法で表現できるか、時間をかけてブレインストーミングしましょう。 この戦略の優れた例は、Electric Monkのロゴです。これは、この99designsでデザインされたものです。このロゴコンペの優勝作品は、修道士の格好をしたコンセントでした。 デザイン by Peter Vukovich 99designsでデザインされたElectric Monkのロゴは、”ひねりを利かせる”方法の良い例です。これは、Douglas Adamsの著作に登場した装置に基づいていますが、もしそれを知らなかったとしても、全く問題ありません。何を表しているのかが分かるのは一部の人々だけです。それが、魅力を増す秘訣です。 このようなものを思い付くのは難しいと思うかもしれませんが、これが正攻法です。ひねりの利いたロゴをデザインする一方で、自由に自分にとって面白いデザインを考えれば良いのです。それは、すべての人にとって面白いものではないかもしれませんし、理解できない人もいるかもしれませんが、それが、ひねりというものなのです。そして、多くのテックスタートアップは、単純にこのような発想を好むのです。 3. スーパーヒーローのロゴを創造する — スーパーヒーローのロゴは、テックスタートアップのロゴデザインに取り組むのに優れた方法です。これらの企業は、そのメリットを認識しています。スーパーヒーローのロゴの成功の鍵は何でしょう? もし、ひねりたくないけれども、面白いロゴにしたいと思っているならば、スーパーヒーロースタイルを検討してください。企業の事業内容と、ロゴをスーパーヒーローの象徴に見せる方法を考えるのです。 スーパーマン、バットマン、それともワンダーウーマンのようにしますか? 洗練されたものにしますか? それとも、ヘルボーイのようにはっきりした感じにしますか? こういった思考を通して、優れたロゴのアイデアが出来上がっていくのです。 スーパーヒーローのロゴを創造するには、できるだけシンプルに、頭文字かシンボルを型にはめ込んでデザインします。 ロゴの図は、社名自体を視覚化して、記章のように見えるようにしてください。それが、スーパーヒーローのロゴ特有の特徴です。 4. Twitterに似せる — これらのロゴは、Twitterに影響を受けていながら、見た目と印象が独創的です。ロゴを” Twitterに似せる”なら、これがあなたの目指すべきものでもあります。 時には、単に適当な” Twitterのような”フォントを見つけて、ほんの少し調整するだけで十分なのです。その理由を説明するのは難しいですが、多くのWebスタートアップは、ロゴデザインに関して、Twitterを尊敬しています。 インターネット上で少し検索してみれば、TwitterのロゴがWeb2.0におけるロゴデザインの”代表作”であることが分かるでしょう。この事実を覚えておいて利用すると強みになります。 ロゴをTwitterに似せるための最善の方法は、少し技巧的で、丸味を帯びていて、非常に読みやすい、というTwitterのロゴの特徴を持った、見た目の優れたフォントを見つけ、それで試してみることです。 こういったフォントは、すぐには見つかりません。プロジェクトの重要性によって、Font Squirrelで無償のフォントを探すこともできますし、オンラインフォントライブラリでプロ用のフォントを購入することもできます。もちろん、自分でロゴフォントをデザインするという選択肢もあります。 Font Squirrelは、Twitterのようなフォントを無償で豊富に提供しています。 ロゴをTwitterに似せるのは、Twitterからひらめきを得るためであって、コピーするためではないということを忘れないでください。Twitterの兄弟や姉妹がどのようなものかを想像してみれば、恐らく、似たもの同士でありながらお互い全く違っているでしょう。 5. 3Dにする — 3Dロゴは、見栄えがしますが、それは当然のことです。それらしく見えるデザインができるようになるまでには、数多くの経験が必要です。テック企業は、特に、アイコンやアバタと組み合わせた3Dを好みます。 テックスタートアップのロゴに関しては、これからは3Dの図や文字が一般的です。これは驚くべきことではありません。適切に使えば、3Dロゴは、間違いなく強烈なインパクトを与えます。 しかし、この種のロゴには、精密さと熟練が求められます。光が見た目にどのような影響を与えるのかを理解し、その原理を応用してリアルで美しいロゴを創造する必要があるのです。 優れた3Dアイコンは、明確で、理解しやすく、一ひねりあり、どんな大きさでもはっきり見えるものでなければなりません。このようなものを作るのは容易ではありませんが、参考になるリソースやチュートリアルがたくさんあります。…

3分でわかる!フラットデザインとマテリアルデザインの違い

3分でわかる!フラットデザインとマテリアルデザインの違い

フラットデザインとマテリアルデザインは一見似たようなグラフィックデザイン手法に思えますが、実は根本的な考え方、表現の仕方が異なります。それぞれにメリット・デメリットが存在し、シーンに合わせて使用していくことで、効果的に魅せることができます。ここでは、簡単にフラットデザインとマテリアルデザインの違いについて述べていきます。 フラットデザインのメリット フラットデザインはリッチデザインと呼ばれる立体的でリアル感のあるデザインの流行が後退した頃に注目され始めました。スマートフォンのアイコンやロゴタイプでもフラットデザインを用いるケースが増えています。 フラットデザインのメリットについて考えてみましょう。フラットデザインはさまざまな媒体に浸透しているため、抵抗なく受け入れることができるということ、人の目に優しくストレスを与えにくいデザインであること、そして、無駄な装飾をそぎ落としシンプルに磨きをかけているため洗練された都会的な印象を与えること、これらがフラットデザインの持つメリットと言われています。また、リッチデザインに比べ、ファイルの容量を小さく抑えることができるという点もフラットデザインのメリットと言えます。 フラットデザインのデメリット 一方、フラットデザインのデメリットに挙げられるのが、酷似したグラフィックデザインが生まれやすいという点です。 それはフラットデザインが、限りなくシンプルに仕上がるがゆえに起こる問題で、そういった点に関しては細心の注意が必要になってきます。また、フラットデザインには影という概念がないため、Webでボタンとして使用する場合、クリックできるのかどうかわからないという操作性における課題が生まれる危険性があります。   マテリアルデザインのメリット マテリアルデザインは広義でフラットデザインの一部とも言われますが、大きな違いがあります。 マテリアルデザインは「視覚」ではなく「触覚」に語りかけるようなグラフィックデザインで、実際に操作しているかのような効果を演出するデザインです。フラットにデザインされたものに意味のあるモーションを加えることで、ストレスなく操作方法等をガイドすることに長けています。影を利用するなど多少のリアリティがある表現もマテリアルデザインの範囲内で、Google社より制作ガイドラインが設けられているため、迷うことも少なく制作することができるでしょう。   マテリアルデザインのデメリット 一方、ガイドラインが設けられているということはデメリットとも言えます。マテリアルデザインのガイドラインに沿っての制作となるため、グラフィックデザインとしての差別化を図ることが難しく、オリジナリティの追求という点では苦戦する可能性があります。また、フラットデザインと比べると必要とする容量が大きく、場合によっては工夫しながら制作していく必要があります。 デザイナーは、フラットデザインのメリット・デメリット、マテリアルデザインのメリット・デメリットを理解しながら、上手に活用していく必要があります。   それぞれを効果的に使う参考情報 それぞれを効果的に使うには特徴を理解することが大切です。グラフィックデザイン制作を進めていく中で、フラットデザイン・マテリアルデザインともに、どちらが何に適しているのかを的確に判断しながらデザインを考えていきましょう。 動きがありすぎるとユーザーの視覚に疲れを引き起こしてしまい、動きがなさすぎるとユーザーに飽きをもたらしてしまうかもしれません。両社のデザインの良い面を上手に生かし組み合わせていくスキルが、今後必要になってくるのではないでしょうか。 平面であることを極めたフラットデザインと、平面でありながら立体の要素を取り入れたマテリアルデザイン、これらのデザインにおける違いを理解することで、シーンに合わせてデザインを使い分けることが可能になります。そうしたデザインの知識があなたのグラフィックデザインの幅を広げていくことでしょう。

レスポンシブデザイン:秘策とアプローチ法

レスポンシブデザイン:秘策とアプローチ法

少し前まで、デザイナーは、本の表紙であれ、ポスターであれ、新聞であれ、作っている物の明確な寸法を把握していました。 しかし、スマートフォン、iPad、その他様々なアスペクト比や解像度を持つモニタの出現により、ビジュアルのコントロールが難しくなりました。 レスポンシブデザインが新しく話題になったことは当然でしょう。これはファッションなどのトレンドとは異なります。インターネット閲覧に様々なデバイスが使われるようになったために持ち上がった、ユーザビリティの問題を解決しようとする試みです。 この記事では、様々なデバイスに合わせた、デザインのアプローチ法を紹介します。スクリーンサイズや解像度を含め、レスポンシブデザインはどのように機能するのかをデザイナーの視点から見ていきましょう。 Photo: Brad Frost (via flickr) レスポンシブデザインのアプローチ法 すべてのモニタスクリーンにフィットするウェブサイトを作る場合、最も一般的な方法は標準的なスクリーンの幅と高さの範囲内でデザインすることです。モニタスクリーンの標準サイズは1024 x 760ピクセルなので、Webのセーフエリアはそれ以下、989 x 548ピクセルということになります。 ウェブサイトがそれよりも大きなモニタで表示された場合は、ページレイアウトに占める背景が大きくなります。90%以上のウェブサイトはこの方法で作られていますが、モバイルデバイス向けにデザインする場合は適切ではありません。320 x 2000ピクセルのスクリーンで、同じレイアウトを使うことはできないのです。 複数のデバイスのためにデザインする別の方法をいくつか挙げます。 メディアクエリ:CSSを使って、サイトが表示されるデバイスの特徴によってページのスタイルを変えることができます(コンテンツを隠すことも含む)。 可変グリッド:ページ要素を相対的な(%)ユニットとグリッドカラムの数でサイズ設定すれば、スクリーンの幅によって表示が変わります。 最もよく使われるテクニックは可変グリッドに基づいたものです。これはレスポンシブデザインの動きの原型であり、adobeもサポートしています。Dreamweaverの最新バージョンでは、可変テンプレートを使って自動的にレイアウトを作成、編集できます。 Website: Lancaster University ランカスター大学のウェブサイトでは、コンテンツセクションの幅は960ピクセルより広がることはありませんが、400ピクセル以下まできちんと縮小されます。トップのコンテンツがどのように徐々に小さくなるか、スクローラの動きに注目してください。ページ幅は420ピクセル以下になります。 モバイルデバイススクリーンの解像度(それらをターゲットにする場合の問題点) 世間には多様な解像度のグラフィックディスプレイが出回っています。以下はウェブデザイナーにとって重要な、いくつかのデバイスの解像度一覧です。 見て分かるとおり、解像度(1インチ内のピクセル数)だけでなく寸法にも多くの種類があります。解像度(ppi)は、重要な要素です。例えば、iPhone 5のアイコンはデスクトップモニタで表示した場合、4倍のサイズになります。 コンテンツを小さなサイズに合わせる時に、いくつかの問題にぶつかるはずです。以下のことを覚えておきましょう。 可読性を保つ:2000ピクセル幅のスクリーン上の14ピクセルのフォントは、300ピクセル幅のスクリーンでは2ピクセルまで小さくなります。これでは読めません。逆に、10ピクセルのテキストを7倍にすると、常識を超えた大きさになってしまいます。閲覧しているスクリーンの幅に合わせてレイアウトを調整することで、どのデバイスにおいても、合理的で読みやすいフォント比を保たなければなりません。 閲覧のしやすさを保つ:閲覧者にたくさんスクロールさせるのは絶対に避けましょう。膨大な量のコンテンツを1カラムに押し込むと、ページが長くなり過ぎ、目的のコンテンツにたどり着きにくくなります。 タップのしやすさを保つ: モバイルスクリーンはタッチで動かすことができ、それは大抵、人間の指で行われます。ですから、ボタンは小さ過ぎてはいけません。Appleが提示している、快適にタップできるUI要素の最小サイズは44 x 44ピクセルです。しかし、現実にはこの限りでないことが多く、実際の目安は約25ピクセルとなっています。 可読性があり、閲覧しやすく、快適にタップできるインターフェースを達成する方法が分かりました。次は、レスポンシブデザインの作成に必要なことを見ていきましょう。 レスポンシブデザインを作る秘策 レスポンシブデザインを作る際、いくつか気を配るべきことがあります。特に重要なのは次の点です。 Webデザインは、複数のブラウザ幅に合わせた3つのバージョンを用意する:320-480ピクセル、480-768ピクセル、768ピクセル以上。これらの幅の間でコンテンツが自由に拡大縮小されるようにする、あるいはレイアウトが固定されるようにします。3つ(またはそれ以上)の固定レイアウトに必要に応じてマージンを加える方法は、大抵の場合、可変スケーリングと比べて、デザインと実装が簡単です。しかし、可変スケーリングの方が多くのデバイスでより良いエクスペリエンスを提供できます。 解像度によって、どのコンテンツを表示するかを決める:例えばある記事のリード部分を隠したり、ボックス全体を1つのボタンにまとめたり、コンテンツを完全に隠してしまう、などです。 CSSの制約に注意する:多くのページ要素が純正なCSSの制御下にあるようにデザインしましょう。そうすることで、ページ要素をリサイズする際に柔軟に対応ができ、読み込み時間を減らすことができます。CSSに慣れていない多くのデザイナーにとっては簡単なことではないかもしれませんが、これはつまり「標準」以外のオーバーレイモードの使用を避け(レイヤーを統合できる場合は除く)、単純にシャドウとグラデーションを使うことです。 すべての解像度に、同じコンテンツと全く同じHTMLを使う:同じグラフィック要素をすべてのページバージョンに使い回すべきだということです。多くの場合、最大のスクリーン用のデザインを最初に作り、その後に必要ならば小さい解像度のために要素を減らすことが多いでしょう。 優れたレスポンシブデザインを作るには、これらの秘策とあなたの想像力、そしてコーダーのスキルが必要です。以下の例でレスポンシブデザインを作る様々な方法を紹介します。 レスポンシブデザインの例 Website: Fork Forkは、固定レイアウトに可変スケーリングを組み合わせた驚くべきサンプルです。固定レイアウトは4つ(ピクセル数は、ブロック要素のサイズです)。波のイメージの背景は可変スケーリングで、ページを770ピクセル以上にすると見ることができます。コンテンツが適宜隠れることに注目してください。 Website: Daniel Vane Daniel Vaneの個人サイトは可変の四角モジュラーグリッドをうまく活用しています。これはどんなサイズのスクリーンにも対応します。768ピクセルほどの小さめのスクリーンでは、レイアウトは5カラムから3カラムになります。480ピクセル以下では、1カラムです。 Website:…

最新のデザインコンペ

デザイナーとしてステップアップできるお仕事をご用意しています。
0%