先日、「2009年の Web デザイントレンド」 というエントリーで紹介した Smashing Magazine の記事、「Web Design Trends For 2009」 ですが、予告通り続きが公開されていたので紹介します。
前回のエントリーよりレイアウト手法などにすこし範囲広げて、21のトレンドが紹介されています。
This post is the second part of our review. It presents design trends for 2009 in terms of layouts, visual approaches and design elements. Please notice that this post showcases trends and developments that were extensively covered in our previous articles (e.g. handwriting, retro and vintage etc.) and therefore weren't covered in this post (they are all linked in the overview, so feel free to explore these single posts as well).
前回同様、まずは一覧。それぞれ日本語にしていますが、直訳ではなくわかりやすい言葉に置き換えてます。
- Out-of-the-box layouts ： 型にとらわれない独創的なレイアウト
- One-page layouts ： 1ページで見せるレイアウト
- Multi-column layouts ： マルチカラムレイアウト
- Huge illustrations and vibrant graphics ： でかいイラストと刺激的なグラフィック
- More white space than ever ： 大きめの余白
- Social design elements ： ソーシャルメディアを入れ込んだデザイン
- "Speaking" navigation ： 語るナビゲーション
- Dynamic tabs ： 表示を切り替えられるタブ
- Still large search boxes ： でかい検索ボックス
- Category visuals ： カテゴリーの表示
- Author icons ： 執筆者のアイコン
- Icons and visual clues ： アイコンと視覚的な目印
- Tag index (instead of tag clouds) ： 整理されたタグの一覧
- Illustrations in blog posts ： 記事の中にワンポイントのイラスト
- Watercolor ： 水彩画っぽいデザイン
- Handwriting ： 手書きっぽいデザイン
- Retro and vintage ： レトロでちょっと懐かしい感じ
- Organic textures, tiles and photographic backgrounds ： 有機的な素材や写真を背景に使う）
- Badges ： バッジのようなデザイン
- Price tags ： 値札のようなデザイン
- Ribbons ： リボンを取り入れたデザイン
前回同様、それぞれの詳しい説明やサンプルとなるサイトは元記事で紹介されていますのでそちらをご覧ください。以下はそれぞれの項目に関して個人的な見解とか。
1. Out-of-the-box layouts ： 型にとらわれない独創的なレイアウト
グリッドにとらわれない、自由な発想でレイアウトしてみるのもいいですね。しかし、既成の概念を闇雲に無視すればそれがすべて独創的というわけではありません。自由に発想しながらも読みやすく、使いやすいレイアウトを創造してこそですね。
2. One-page layouts ： 1ページで見せるレイアウト
JavaScript が積極的に利用されるようになったことで、1ページ内に複数のコンテンツを入れて、ページ遷移させずに見せるようなレイアウトも増えています。ページ内リンクに CSS と JavaScript を組み合わせて実現するのが一般的ですね。個々のコンテンツに対するパーマリンクが存在して他のリソースからの参照が問題なく行えることと、JavaScript 無効時や印刷時の表示に気をつければなかなか魅力的なページが作れます。
3. Multi-column layouts ： マルチカラムレイアウト
2カラム、3カラムだけでなく、もっと多くのカラムを組み合わせたレイアウトは画面の横幅を有効に使うという意味でもうまく使えば情報を見やすく配置することができます。CSS3 のマルチカラムレイアウト関連が普通に使用できるようになればより使い勝手はよくなると思いますが。
4. Huge illustrations and vibrant graphics ： でかいイラストと刺激的なグラフィック
画面上部などに作り込んだグラフィックを配置するデザインはよく見かけますね。こういうグラフィックを作れる人はいいなぁと思います。
5. More white space than ever ： 大きめの余白
余白の使い方ってセンス出ますね。簡単そうに見えてすごく奥が深いところだと思いますし、よいデザイナーさんは余白の使い方がうまい気がします。
6. Social design elements ： ソーシャルメディアを入れ込んだデザイン
当サイトでもそうですが、Twitter のタイムラインや Flicker、Last.fm 等、ソーシャルメディアを組み込んでデザインするサイトは多いと思います。企業サイトでもソーシャルブックマークのアイコン等を設置するところも増えていますね。
7. "Speaking" navigation ： 語るナビゲーション
語るナビゲーションといってもしゃべるわけはなく、補足説明を入れてわかりやすくしたナビゲーションという意味です。ナビゲーションのラベルに簡単な説明も加え、リンク先のページやそのナビゲーションを操作することで何が起こるのかをわかりやすく伝えることができます。
8. Dynamic tabs ： 表示を切り替えられるタブ
タブによる同一ページ内でのコンテンツの切り替えもここ最近よく見ますね。jQuery をはじめとした Javascript ライブラリが充実したおかげで実装は簡単になりましたね。
9. Still large search boxes ： でかい検索ボックス
検索ボックス自体もデザインのアクセントにしてしまう感じでしょうか。
10. Category visuals ： カテゴリーの表示
コンテンツをカテゴリー分けしてそれを表示してあげることで情報探索が素早く行えることもあります。
11. Author icons ： 執筆者のアイコン
記事を書いている人の写真等をアイコンにして表示。当サイトでもやってますね。
12. Icons and visual clues ： アイコンと視覚的な目印
アイコンをうまく使うことで、情報探索の目印や手がかりを提供することもできます。
13. Tag index (instead of tag clouds) ： 整理されたタグの一覧
タグクラウドはよく知られていますが、さらにそれを分類、整理して情報を見つけやすくしたものが Tag index です。
14. Illustrations in blog posts ： 記事の中にワンポイントのイラスト
記事ごとにワンポイントとなるイラストを掲載するいわゆる GIGAZINE メソッドってやつですか。
15. Watercolor ： 水彩画っぽいデザイン
下の手書きもそうですが、アナログっぽい要素がポイントになることもあります。
16. Handwriting ： 手書きっぽいデザイン
水彩画っぽいのと同じですね。デザインのアクセントに。
17. Retro and vintage ： レトロでちょっと懐かしい感じ
ちょっと昔っぽいデザインを取り込むことで逆に斬新な感じに。
18. Organic textures, tiles and photographic backgrounds ： 有機的な素材や写真を背景に使う）
紙とか、布とか、色々と使ってみると面白いかもしれませんね。無造作に紙を破って写真にとり、その破れた感じをデザインに取り入れたりとかね。
19. Badges ： バッジのようなデザイン
バッジとかワッペンとかそんな感じのデザイン。
20. Price tags ： 値札のようなデザイン
値札っぽいデザインにタイトル入れてみたりとか。
21. Ribbons ： リボンを取り入れたデザイン
リボンっぽい装飾を取り入れてみたりとか。
さて、さすがにすべてを取り入れるわけにはいかないと思いますが、この辺を押さえておくと今っぽいデザインができるかもしれませんよ。
