「よい」デザインはいつまで経っても「よい」デザイン。
この言葉はウェブデザインの世界においてあまり当てはまらないかもしれません。
CSS3やHTML5、ウェブフォントなどの出現によって、今まで以上にデザインの可能性は広がっておりユニークなウェブサイトも数多く見かけるようになっています。
海外デザインブログWebdesignerDepotで、2010年現在によく見かける21個のウェブデザインのトレンドをまとめたエントリー「Web Design Trends for 2010」が公開されていたので今回はご紹介します。
気に入ったポイントをいくつかまとめて、ウェブデザイン制作のアイデアに使うことができるのではないでしょうか。
同時に紹介されている参考サイトを見ていただくとイメージが湧きやすいですよ。
非常に長いエントリーとなってしまいましたので、よろしかったらブックマーク保存をしてから読んでいただくとよいかもしれません。
詳細は以下から。
2010年のウェブトレンドまとめ
Print Design: プリントデザインによる影響
雑誌などの印刷物はウェブサイトのデザインにおいて常にインスピレーションの参考になります。
そこにウェブだからこそ表現できるデザインテクニックを加えることで、今まで以上の可能性が広がります。
1. セリフ系フォントを利用しよう
タイポグラフィーを選ぶときに重要なポイントのひとつが読みやすさではないでしょうか。
フォントの端に飾りをつけたサンセリフフォントは人目を惹きやすく、見分けがつけやすいこともあり印刷物ではよく利用されています。
サンセリフフォントは画面で読みやすい様にデザインされているのが一般的ですが、インターネットの高速やウェブフォントの開発などによってタイトルテキストとして使われるようになりました。
via Duchy Originals
via Second & Park
2. 巨大なヘッダーをデザインしよう
雑誌などにおいてはヘッダー部分のスペースたっぷりに利用することで注目を惹くように考えられています。
インパクトのあるデザインをうまく利用することで、読む「きっかけ」にもなっています。
この巨大なヘッダーデザインは2009年より続いているウェブトレンドのひとつでもあります。
via Koffie Verkeerd
via Maurivan Luiz
via Trent Walton
3. マルチカラムレイアウトを利用しよう
ウェブサイトやホームページと異なり印刷物はスクロールバーやボタンなど表示することはできないので、通常同じスペースにカラムを利用してコンテンツを掲載します。
スクリーン解像度が広がり、グリッドレイアウトを利用したウェブサイトの出現により多くのコンテンツを簡単にまとめる方法として利用するようになってきています。
via Zaum
via Leiden International Film Festival
via Roger Burkhard
4. 写真を背景につかおう
「百聞は一見にしかず。」
インターネット回線速度が速くなりページの読み込み時間の短縮されたことで、写真集を見たときのインパクトと変わらない高解像度のイメージ写真を利用することが可能となっています。
via Atlantis
via Porsche
via The Touch Agency
5. グラフやチャート、インフォグラフィックスをデザインしよう
印刷物では複雑な情報をわかりやすく説明するためにグラフィックが利用されています。これはマガジンや定期報告書などでもよくみかけます。
グラフやチャートを利用することで文章だけで伝えるとややこしい内容も理解しやすくなります。
またインフォグラフィックスは情報をシンプルにまとめるだけでなく、ビジュアル面においてもデザイン性が高く、多くのデザイナーが利用している傾向です。
via World of Merix
via Francesco Fonte
Simplicity: シンプルを極める
「完成とは追加するものは何もなく、取り除くものも何もないときに達成される」とはアントワーヌ・ド・サン=テグジュペリの言葉だそうです。
シンプルなデザインは使いやすいうえ理解されやすいので伝えたいメッセージを明白に伝えることができます。
6. ミニマル＆グリッドデザインを利用しよう
ミニマルデザインにおいては必要最低限の事項のみを掲載しており、わかりやすさが特徴のひとつです。
不要なパーツをすべて取り除くことで、残っているパーツにさらにインパクトを出します。
ミニマルなウェブサイトでは効果的に情報をまとめるためにグリッドデザインが必要となります。
余白スペースが多くなるので、グリッドレイアウトを利用することで整列されてまとまりが出ます。
via R/GA
via Rich Brown
7. シングルページ完結型レイアウトをつかおう
シンプルなデザインにするにはいくつかの方法がありますが、シングルページのみを使ったレイアウトでは「隠す」と「取り除く」ことで実現しています。
シングルページ完結型レイアウトにおいて優先順位の低いパーツは隠すようにデザインされています。
ユーザーがその隠された情報を見たい場合はクリックすることで、情報が表示されます。
すべてを見せてページがごちゃごちゃするよりも効果的かもしれません。
同様に他のページを必要とせずにシングルページにすべての情報を掲載することもポイントです。
これによってユーザーは何ページもクリックせずに情報をまとめて得ることができ、ユーサビリティの面においても優れいています。
via appear
via Bounty Bev
via Daggerfin
8. 余白スペースを利用しよう
以前はスクリーンの解像度が640x480pxなど小さいこともあり、あまり余白スペースを利用する機会はありませんでした。
現在は高解像スクリーンの登場や、JavaScriptなどでパーツを非表示にしたりすることで用意に余白スペースを利用することができます。
よいデザインに必要不可欠な余白スペースは、目を休ませる場所にもなり自然とデザインのクオリティを高めてくれます。
via Finch
via Fell Swoop
via Vertigo Visual
9. タイポグラフィーをデザインに使おう
Googleがウェブフォントを利用したAPI Fontサービスを開始したようで、可能性がどんどん広がっているウェブサイトにおいてのタイポグラフィー。
多くのデザイナーさんがヘッダーやタイトルなどに利用しています。
via Critical Zero
CSS3 Techniques: CSS3を利用した次世代テクニック
現在ウェブデザインは、旧型のブラウザーにも対応する新しいテクノロジーの世界に突入しようとしています。
CSS3を利用することで、角丸ボックスやテキストやボックスへのシャドウを挿入したりすることが可能となっています。
IE6などの古いフラウザーでも表示することができ、もちろん新しいブラウザーではユニークな仕掛けを見ることができます。
10. CSS3アニメーションをつかおう
ウェブサイトにおけるアニメーションの歴史は長く、最初はGIFアニメーションに始まり、フラッシュなどを利用してきました。
しかし今ではFlashやSilverlight、GIF、JavaScript、そしてCSS3までも利用することができます。
CSS3を利用することで軽量で簡単にアニメーションを実装できます。
via The Particle Lab
via Nat & Simons
11. 角丸ボックスを利用しよう
2005、06年あたりのWeb 2.0スタイルによって、角丸を利用したボックス枠などが有名になりました。
しかしその当時は作成も難しく、完全な丸みをデザインすることはできませんでした。
CSS3はブラウザーから直接角丸ボックス枠を作成することができ、簡単なだけでなく、滑らかなデザインに仕上がります。
2010年より多くのデザイナーが積極的に利用するようになっています。
via All Dev Jobs
12. テキストやボックスにシャドウをつかおう
シャドウをデザインすることで本物のような質感を表現することができます。
CSS3ではシャドウのつけ方も細かいところまでカスタマイズすることができ、ドロップシャドウだけでなくインナーシャドウも可能となっています。
エンボスや型押し風デザインとして利用しているケースが多いようです。
via atebits
via UX London
13. RBGと透過について
これまでは半透明デザインをウェブサイトで利用するには、とても複雑な設定が必要でしたが、CSS3を利用することで自由度はグンとあがります。
via Jonas Lekevicius
via Fuel Brand Inc.
via Tim Van Damme
14. 携帯用デザインを用意しよう
携帯端末を利用したウェブサービスは急速なスピードで成長している分野のひとつで、待ち時間などに気軽に使われています。
現在では多くの革新的な企業を中心にすでに使いやすい、ユーザーフレンドリーな携帯専用ページを提供しています。
via Mail Chimp
via Viget Labs
Creativity: デザインをたのしむ
ソーシャルメディアの爆発的な増加によって、人々は自分の興味のあることについて共有することができるようになりました。
デザインの分野においても同様で、多くの人が作品などを共有、公開することで新しい時代の幕開けを迎えているのかもしれません。
15. クリーンなイラストをデザインしよう
多くのデザイナーが滑らかで色合いの美しいイラストをデザインしており、写真などとは異なるポップな印象を与えることができます。
イラストを利用することで、魅力的でユーザーの興味を誘うデザインに仕上げることができます。
via Foxtie
via Lofts at 136
16. ザラザラしたテクスチャを背景に使ってみよう
テクスチャ素材を利用したウェブサイトは特にめずらしい訳でもありません。
しかしここ数ヶ月によく見かけるテクスチャのひとつが、ザラザラとした質感が特徴です。
これはPhotoshopの「ノイズ」フィルタを利用することで簡単にデザインすることができます。
via Interexpresso
via Midtone Design
via nouincolor
17. サムネイルを表示しよう
サムネイル画像を表示すること自体は特に珍しいトレンドでもないのですが、最近の動向として以下にサムネイルを魅力的に見せることができるのかが重要になってきています。
グリッドを利用することですっきりとシンプルに見せるだけでなく、オリジナリティーが求められるのではないでしょうか。
via Rokkan
via Bunton
via z-index
18. 水彩画カラーをデザインしよう
ウェブデザインはさまざまなアートやメディア、情報からインスピレーションを得ることで制作されているのはもちろんで、絵画における影響も大きいです。
そのひとつが水彩画のような質感を表現したデザインで、落ち着いたエレガントな印象を与えることができます。
via Brizk Design
via The Croquis
19. 手描きデザインを取り入れよう
手描きデザインはアマチュアっぽく見えるなどの理由であまり利用されていませんでしたが、最近ではモックアップをデザインする感覚で、グリッドなどを意識することでパワフルな印象を与えることができます。
via Cutler
via Project 365
via Brandnew
20. ソーシャルメディアを活用しよう
日本での人気はいまひとつですが、世界ではGoogleよりFacebookの滞在時間が長くなっており、ソーシャルメディアは確立された地位を築いています。
デザイナーの中にはソーシャルメディアを通して作品を発表し、ホームページをまとめとして利用するケースが増えています。
これからもまだまだユニークな利用方法が見出されていくのではないでしょうか。
via Boone Oakley
21. ウェブサイトの一部を固定してみよう
多くのブラウザーが[position: fixed]をサポートするようになっていろいろな方法で使われています。
メニュー部分のみを固定することで、ユーザーが迷わずコンテンツを探すことができ、ユーサビリティーにおいても優れています。
via Crush + Lovely
via James Charlick
via Fresh01
参照元サイトにはさらに具体的にウェブトレンドを利用している参考ホームページもたくさんまとめられていますので、こちらもよろしかったら一緒に合わせてどうぞ。
