週刊Webテク通信

2011年1月第3週号1位は、2011年のWebデザインのトレンド、気になるネタは、モノとiPhone/iPadアプリを組み合わせた商品が続々登場

ネットで見かけたWebテク(Webテクニック・Webテクノロジー)記事から、Webデザイナーの目で厳選したネタを週刊で紹介するこのコーナー。今回は、2011年1月10日~2011年1月16日の間に見つけた記事のベスト5です。

1. The real design trends for 2011 « Web Design Blog ― WebDesignShockhttp://www.webdesignshock.com/review/design-trends-for-2011/

2011年のWebデザインの流行に関する記事です。先週の1位で紹介した記事と同じテーマですが、29項目もありサンプル画像も多く、かなりボリュームのある記事となっています。

背景画像について触れている項目が多く、無地やめてテクスチャーを使うこと、写真を使うこと、さらに進んだことをやりたいなら、アニメーションにすることを薦めています。

デザイン要素に関しては、大きなアイコン、角丸、縞模様、いろいろな影の付け方、縫い付けたようなバッジやバナーなどが流行すると予想しています。

Twitterの新インターフェイスでは、ページの一番下まで行くと次の項目が読み込まれて延々スクロールしていけます。そういった、ページ分割の代わりにプログレッシブなローディングを使うことも、これからのトレンドのようです。その際には、固定されたスクロールされないボタンなどがあると便利ということにも触れられています。

一方で、以下のものは消えていくだろうと予想されていました。

  • ボケ(bokeh)を使った背景
  • 3Dのインターフェイス
  • レトロな感じのデザイン(レトロなフォントは生き残る)

HTML5とFlashに関しては、HTML5がFlashを消し去ってしまうわけではないと強調した上で、多くの領域でHTML5が使われるようになっていくだろうと予想しています。

図1 2011年のデザイントレンド
図1 2011年のデザイントレンド

2. Webportio | Graphical resource of Adobe Fireworkshttp://www.webportio.com/

Fireworks向けグラフィック素材の無料配布サイトです。Webデザインに使用される、ボタンやメニュー、ダイアログのようなレイアウト要素がダウンロードできます。

Fireworksで編集・加工ができるベクターベースの素材ファイルが用意されています。

全てのファイルは商用/非商用ともにフリーで利用できるとのことです。

Fireworks用のウェブデザインの無料素材がダウンロードできる -Webportio | コリスという記事で紹介されていました。

図2 Fireworks向けグラフィック素材の無料配布サイト
図2 Fireworks向けグラフィック素材の無料配布サイト

3. 29 Free CSS Frameworks and Tools for Web Developers | DesignBeephttp://designbeep.com/2011/01/12/29-free-css-frameworks-and-tools-for-web-developers/

CSSフレームワークを集めたリストです。29種類ものフレームワークを紹介していて、それぞれに細かい解説が付いています。

図3 CSSフレームワークをまとめて紹介
図3 CSSフレームワークをまとめて紹介

4. 10 Ideas for Creating Innovative and Unique Web Designshttp://sixrevisions.com/web_design/10-ideas-for-creating-innovative-and-unique-web-designs/

革新的で独創的なWebデザインを作るヒントを紹介した記事です。

以下の10個のアイデアが挙げられています。

  1. 白紙のキャンパスから始めてみる
  2. グリッドデザインの枠組みを取り払って考える
  3. CMSを使わない
  4. オンラインからのインスピレーションを避ける
  5. 今までやったことのないことを最低一つやってみる
  6. 自分がコーディングする必要がないと想定する
  7. 古きに学ぶ
  8. 新しいことを学ぶ
  9. 変わった制約を与えてみる
  10. 他の人と共同作業する
図4 革新的で独創的なWebデザインを作るための10のアイデア
図4 革新的で独創的なWebデザインを作るための10のアイデア

5. 40 Beautiful Web Page Templates in Photoshop PSDhttp://www.hongkiat.com/blog/really-beautiful-psd-web-templates/

Photoshopファイル形式の、美しいWebデザインのテンプレートを数多く紹介しています。

図5 美しいWebデザインテンプレートいろいろ
図5 美しいWebデザインテンプレートいろいろ

そのほか、先週の記事の中から、デザインのインスピレーションになりそうな画像が数多く紹介されている記事を4つ紹介します。

先週の気になるWebサービス

ずるっこ!http://zurukko.jp/

「ずるっこ!」は、英語の語彙力を強化する手助けとなるWebサービスです。

このサービスを使うと、英文サイトの各単語の上に、ルビ(よみがな)として日本語訳を表示させることができます。自分の覚えた(知っている)単語をクリックすると、その単語はすでに覚えたものとしてルビが表示されなくなります。

覚えた英単語の数が表示されることで学習意欲がかりたてられそうです。ルビが減るほど見た目がすっきりして読みやすくなるという効果もあるようです。

複数のPCやブラウザで、覚えた単語リストを共有化できるようになっています。

図6 英語サイトに日本語のルビを振るサービス
図6 英語サイトに日本語のルビを振るサービス

おすすめ記事

記事・ニュース一覧