週刊Webテク通信

2011年1月第2週号1位は、2011年のWebデザインの流行、気になるネタは、Mac App Storeがオープン

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

1. Web Design Trends in 2011 | Tipshttp://webdesignledger.com/tips/web-design-trends-in-2011

2011年のWebデザインの流行に関する記事です。美しさよりも機能、反応するデザイン、常時接続とバーチャルリアリティ、といったポイントが挙げられています。

以下の項目について解説されていました。

  1. CSS3とHTML5がより多く利用される
  2. シンプルな配色
  3. モバイルへの対応
  4. 視差スクロール
    立体的な奥行きを表現するスクロール
  5. タッチスクリーンのためのデザイン(マウスではなく)
  6. 立体感をもったWebデザイン
  7. 大きな写真を使った背景
  8. 目新しいドメインネーム
    ⁠.me」⁠.us」のような変わったドメイン名がより多く使われるようになる
  9. QRコード
  10. サムネイルデザイン
    サムネイルを元にユーザーをリンク先に誘導する手法が増える
  11. 常時接続/ライフストリーム
    TwitterやFoursquareなどで常に発信する

それほど目新しい予測はありませんが、日本ではすでによく知られているQRコードが流行るというのは、ちょっと興味深いですね。

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

2. 32 Javascript Alternatives with Pure CSS ? Updated | Speckyboy Design Magazinehttp://speckyboy.com/2011/01/03/32-javascript-alternatives-with-pure-css-updated/

これまでJavaScriptを使っていた効果を、CSSだけで実現するテクニックを紹介しています。ビジュアル表現や、動きのある効果などが紹介されています。

CSSだけで実装した、イメージマップ、Lightbox、フキダシ、グラフ、ドロップダウンなどが紹介されています。

図2 JavaScriptを使わずCSSだけで実装するテクニックいろいろ
図2 JavaScriptを使わずCSSだけで実装するテクニックいろいろ

3. Showcase of Inspiring Search Box Designs - Noupe Design Bloghttp://www.noupe.com/showcases/showcase-of-inspiring-search-box-designs.html

検索ボックスのデザインショーケースです。

  • 自動で候補を補完
  • 検索結果が即座に表示
  • 検索対象のフィルタリング
  • 省スペース
  • より認識しやすく

といった項目に分けて実例が紹介されています。

検索ボックスをデザインするための関連情報へのリンクも豊富です。

図3 検索ボックスのデザインショーケース
図3 検索ボックスのデザインショーケース

4. HTML5で、オフラインでも使えるiPod/iPhone超簡単アプリっぽいものを作ってみた - Publickeyhttp://www.publickey1.jp/blog/11/html5ipodiphone.html

HTML5のオフラインアプリケーション機能を使ったWebアプリを作るチュートリアル記事です。

キャッシュに保存するファイルを指定するための、manifestの記述方法などが解説されています。

図4 HTML5のオフラインアプリケーション機能の解説記事
図4 HTML5のオフラインアプリケーション機能の解説記事

5. Creative Use Of Video in Web Design: Background Videos - Smashing Magazinehttp://www.smashingmagazine.com/2011/01/06/creative-use-of-background-video-web-design-showcase/

背景に動画を用いたWebデザインについての解説とサンプルの紹介です。

業種によってカテゴリ分けして、大量のサイトが紹介されています。ユニクロのキャンペーンサイトも掲載されていました。

図5 背景に動画を使ったWebデザイン
図5 背景に動画を使ったWebデザイン

そのほか、先週の記事の中から気になるニュースを紹介します。

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

Spritebox - Create CSS from Sprite Imageshttp://www.spritebox.net/

Spriteboxは、CSSスプライトのコードを生成するWebサービスです。

この手のツールは今までもありましたが、デスクトップアプリケーションのようなインターフェイスと操作性を実現しているところが新しいです。Flashではなく、HTML5&CSS3、jQueryで作られています。

画像のURLを指定するかアップロードし、使用したい個所をドラッグして指定するだけでCSSコードが生成されます。

1枚の画像から必要な個所を表示するコードを作る機能しかないので、複数の画像を1枚にまとめる処理は別のソフトで行っておく必要があります。

図6 CSSスプライト作成ツール Spritebox
図6 CSSスプライト作成ツール Spritebox

おすすめ記事

記事・ニュース一覧