Advertisement

21webtrend2010

 

「よい」デザインはいつまで経っても「よい」デザイン。

この言葉はウェブデザインの世界においてあまり当てはまらないかもしれません。

 

CSS3やHTML5、ウェブフォントなどの出現によって、今まで以上にデザインの可能性は広がっておりユニークなウェブサイトも数多く見かけるようになっています。

海外デザインブログWebdesignerDepotで、2010年現在によく見かける21個のウェブデザインのトレンドをまとめたエントリー「Web Design Trends for 2010」が公開されていたので今回はご紹介します。

 

気に入ったポイントをいくつかまとめて、ウェブデザイン制作のアイデアに使うことができるのではないでしょうか。

同時に紹介されている参考サイトを見ていただくとイメージが湧きやすいですよ。

 

非常に長いエントリーとなってしまいましたので、よろしかったらブックマーク保存をしてから読んでいただくとよいかもしれません。

bookmark

 

 

詳細は以下から。

 

 

 

2010年のウェブトレンドまとめ


 

 

Print Design: プリントデザインによる影響

  

雑誌などの印刷物はウェブサイトのデザインにおいて常にインスピレーションの参考になります。

そこにウェブだからこそ表現できるデザインテクニックを加えることで、今まで以上の可能性が広がります。

  

1. セリフ系フォントを利用しよう

  

タイポグラフィーを選ぶときに重要なポイントのひとつが読みやすさではないでしょうか。

フォントの端に飾りをつけたサンセリフフォントは人目を惹きやすく、見分けがつけやすいこともあり印刷物ではよく利用されています。

  

サンセリフフォントは画面で読みやすい様にデザインされているのが一般的ですが、インターネットの高速やウェブフォントの開発などによってタイトルテキストとして使われるようになりました。

duchyoriginals 

via Duchy Originals

  

forabeautifulweb

via For A Beautiful Web

  

secondandpark.com

via Second & Park

  

  

2. 巨大なヘッダーをデザインしよう

 

雑誌などにおいてはヘッダー部分のスペースたっぷりに利用することで注目を惹くように考えられています。

インパクトのあるデザインをうまく利用することで、読む「きっかけ」にもなっています。

この巨大なヘッダーデザインは2009年より続いているウェブトレンドのひとつでもあります。

koffieverkeerd

via Koffie Verkeerd

  

maurivan

via Maurivan Luiz

  

trentwalton

via Trent Walton

  

  

3. マルチカラムレイアウトを利用しよう

 

 ウェブサイトやホームページと異なり印刷物はスクロールバーやボタンなど表示することはできないので、通常同じスペースにカラムを利用してコンテンツを掲載します。

スクリーン解像度が広がり、グリッドレイアウトを利用したウェブサイトの出現により多くのコンテンツを簡単にまとめる方法として利用するようになってきています。

wwwzaumcouk

via Zaum

  

leidsfilmfestival

via Leiden International Film Festival

  

rogerburkhard

via Roger Burkhard

  

  

4. 写真を背景につかおう

 

 「百聞は一見にしかず。」

インターネット回線速度が速くなりページの読み込み時間の短縮されたことで、写真集を見たときのインパクトと変わらない高解像度のイメージ写真を利用することが可能となっています。

atlantis

via Atlantis

  

porsche

via Porsche

  

thetouchagency

via The Touch Agency

  

  

5. グラフやチャート、インフォグラフィックスをデザインしよう

 

印刷物では複雑な情報をわかりやすく説明するためにグラフィックが利用されています。これはマガジンや定期報告書などでもよくみかけます。

グラフやチャートを利用することで文章だけで伝えるとややこしい内容も理解しやすくなります。

またインフォグラフィックスは情報をシンプルにまとめるだけでなく、ビジュアル面においてもデザイン性が高く、多くのデザイナーが利用している傾向です。

worldofmerix.com

via World of Merix

  

ffranz

via Francesco Fonte

  

digitalpodge

via Digital Podge 2009

  

  

  

Simplicity: シンプルを極める

  

 「完成とは追加するものは何もなく、取り除くものも何もないときに達成される」とはアントワーヌ・ド・サン=テグジュペリの言葉だそうです。

シンプルなデザインは使いやすいうえ理解されやすいので伝えたいメッセージを明白に伝えることができます。

  

6. ミニマル&グリッドデザインを利用しよう

  

ミニマルデザインにおいては必要最低限の事項のみを掲載しており、わかりやすさが特徴のひとつです。

不要なパーツをすべて取り除くことで、残っているパーツにさらにインパクトを出します。

ミニマルなウェブサイトでは効果的に情報をまとめるためにグリッドデザインが必要となります。

余白スペースが多くなるので、グリッドレイアウトを利用することで整列されてまとまりが出ます。

rgacom

via R/GA

 

PrettyProduction

via Pretty Production

 

richbrowninfo

via Rich Brown  

  

 

 

7. シングルページ完結型レイアウトをつかおう

  

 シンプルなデザインにするにはいくつかの方法がありますが、シングルページのみを使ったレイアウトでは「隠す」と「取り除く」ことで実現しています。

シングルページ完結型レイアウトにおいて優先順位の低いパーツは隠すようにデザインされています。

ユーザーがその隠された情報を見たい場合はクリックすることで、情報が表示されます。

すべてを見せてページがごちゃごちゃするよりも効果的かもしれません。

 

同様に他のページを必要とせずにシングルページにすべての情報を掲載することもポイントです。

これによってユーザーは何ページもクリックせずに情報をまとめて得ることができ、ユーサビリティの面においても優れいています。

appear.dk

via appear

 

bountybev

via Bounty Bev

 

daggerfin

via Daggerfin  

 

 

8. 余白スペースを利用しよう

 

 以前はスクリーンの解像度が640x480pxなど小さいこともあり、あまり余白スペースを利用する機会はありませんでした。

現在は高解像スクリーンの登場や、JavaScriptなどでパーツを非表示にしたりすることで用意に余白スペースを利用することができます。

よいデザインに必要不可欠な余白スペースは、目を休ませる場所にもなり自然とデザインのクオリティを高めてくれます。

getfinch

via Finch

 

fellswoop

via Fell Swoop

 

vertigo.com.mk

via Vertigo Visual

 

 

 

 

9. タイポグラフィーをデザインに使おう

  

Googleがウェブフォントを利用したAPI Fontサービスを開始したようで、可能性がどんどん広がっているウェブサイトにおいてのタイポグラフィー。

多くのデザイナーさんがヘッダーやタイトルなどに利用しています。

blakeallendesign.com

via Blacke Allen Design

 

 

criticalzero

via Critical Zero

 

 

futureofwebdesign.com

via Future of Web Design

 

 

 

CSS3 Techniques: CSS3を利用した次世代テクニック

 

現在ウェブデザインは、旧型のブラウザーにも対応する新しいテクノロジーの世界に突入しようとしています。

CSS3を利用することで、角丸ボックスやテキストやボックスへのシャドウを挿入したりすることが可能となっています。

IE6などの古いフラウザーでも表示することができ、もちろん新しいブラウザーではユニークな仕掛けを見ることができます。

 

10. CSS3アニメーションをつかおう

 

ウェブサイトにおけるアニメーションの歴史は長く、最初はGIFアニメーションに始まり、フラッシュなどを利用してきました。

しかし今ではFlashやSilverlight、GIF、JavaScript、そしてCSS3までも利用することができます。

CSS3を利用することで軽量で簡単にアニメーションを実装できます。

neutroncreations.com

via The Particle Lab

  

24ways.org

via Nat & Simons

  

  

11. 角丸ボックスを利用しよう

 

2005、06年あたりのWeb 2.0スタイルによって、角丸を利用したボックス枠などが有名になりました。

しかしその当時は作成も難しく、完全な丸みをデザインすることはできませんでした。

CSS3はブラウザーから直接角丸ボックス枠を作成することができ、簡単なだけでなく、滑らかなデザインに仕上がります。

2010年より多くのデザイナーが積極的に利用するようになっています。

orderedlist.com

via We Make Things Simple

  

alldevjobs.com

via All Dev Jobs

  

  

12. テキストやボックスにシャドウをつかおう

 

シャドウをデザインすることで本物のような質感を表現することができます。

CSS3ではシャドウのつけ方も細かいところまでカスタマイズすることができ、ドロップシャドウだけでなくインナーシャドウも可能となっています。

エンボスや型押し風デザインとして利用しているケースが多いようです。

atebits

via atebits

  

2010uxlondon

via UX London

  

webdesign-sketchbook

via Web Design Sketchbook

  

  

13. RBGと透過について

 

これまでは半透明デザインをウェブサイトで利用するには、とても複雑な設定が必要でしたが、CSS3を利用することで自由度はグンとあがります。

lekevicius

via Jonas Lekevicius

  

fuelbrandinc

via Fuel Brand Inc.

  

timvandamme

via Tim Van Damme

  

  

14. 携帯用デザインを用意しよう

 

携帯端末を利用したウェブサービスは急速なスピードで成長している分野のひとつで、待ち時間などに気軽に使われています。

現在では多くの革新的な企業を中心にすでに使いやすい、ユーザーフレンドリーな携帯専用ページを提供しています。

mailchimp

via Mail Chimp

  

viget

via Viget Labs

  

  

  

Creativity: デザインをたのしむ

 

ソーシャルメディアの爆発的な増加によって、人々は自分の興味のあることについて共有することができるようになりました。

デザインの分野においても同様で、多くの人が作品などを共有、公開することで新しい時代の幕開けを迎えているのかもしれません。

 

15. クリーンなイラストをデザインしよう

 

多くのデザイナーが滑らかで色合いの美しいイラストをデザインしており、写真などとは異なるポップな印象を与えることができます。

イラストを利用することで、魅力的でユーザーの興味を誘うデザインに仕上げることができます。

foxtie

via Foxtie

  

morphix.si

via Morphix Design Studio

  

136lofts

via Lofts at 136

  

  

16. ザラザラしたテクスチャを背景に使ってみよう

 

テクスチャ素材を利用したウェブサイトは特にめずらしい訳でもありません。

しかしここ数ヶ月によく見かけるテクスチャのひとつが、ザラザラとした質感が特徴です。

これはPhotoshopの「ノイズ」フィルタを利用することで簡単にデザインすることができます。

interexpresso

via Interexpresso

  

midtonedesign

via Midtone Design

  

nouincolor

via nouincolor

  

  

17. サムネイルを表示しよう

 

サムネイル画像を表示すること自体は特に珍しいトレンドでもないのですが、最近の動向として以下にサムネイルを魅力的に見せることができるのかが重要になってきています。

グリッドを利用することですっきりとシンプルに見せるだけでなく、オリジナリティーが求められるのではないでしょうか。

rokkan

via Rokkan

  

bunton.com

via Bunton

  

z-index.it

via z-index

  

  

18. 水彩画カラーをデザインしよう

 

ウェブデザインはさまざまなアートやメディア、情報からインスピレーションを得ることで制作されているのはもちろんで、絵画における影響も大きいです。

そのひとつが水彩画のような質感を表現したデザインで、落ち着いたエレガントな印象を与えることができます。

brizk

via Brizk Design

  

ErguavanPlatin

via Erguvan Platin Evleri

  

thecroquis.com

via The Croquis

  

  

19. 手描きデザインを取り入れよう

 

手描きデザインはアマチュアっぽく見えるなどの理由であまり利用されていませんでしたが、最近ではモックアップをデザインする感覚で、グリッドなどを意識することでパワフルな印象を与えることができます。

cutler.it

via Cutler

  

project365

via Project 365

 

thisisbrandnew

via Brandnew 

 

 

20. ソーシャルメディアを活用しよう

 

日本での人気はいまひとつですが、世界ではGoogleよりFacebookの滞在時間が長くなっており、ソーシャルメディアは確立された地位を築いています。

デザイナーの中にはソーシャルメディアを通して作品を発表し、ホームページをまとめとして利用するケースが増えています。

これからもまだまだユニークな利用方法が見出されていくのではないでしょうか。

booneoakley

via Boone Oakley 

 

 

21. ウェブサイトの一部を固定してみよう

 

多くのブラウザーが[position: fixed]をサポートするようになっていろいろな方法で使われています。

メニュー部分のみを固定することで、ユーザーが迷わずコンテンツを探すことができ、ユーサビリティーにおいても優れています。

CrushLovely

via Crush + Lovely

 

jamescharlick

via James Charlick

 

fresh01

via Fresh01

 

参照元サイトにはさらに具体的にウェブトレンドを利用している参考ホームページもたくさんまとめられていますので、こちらもよろしかったら一緒に合わせてどうぞ。

 

[参照元 : Web Design Trends for 2010 – Webdesigner Depot]