週刊Webテク通信

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

この記事を読むのに必要な時間:およそ 3 分

ネットで見かけた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

今週の気になるWebネタ

Mac App Storeがオープン

ついにMac App Storeがオープンしました。オープンして1日でアプリのダウンロード数が100万本を超えたという報道もあります。Macユーザーなら,何かしらダウンロードしてみたんじゃないでしょうか。

App StoreとApple Storeだけでもややこしいのに,Mac App Storeも現れてややこしいですね。カタカナで書くとアップストアとアップルストアなので,ぱっと見どちらか分かりません。たぶん多くの人はアップストアのことをアップルストアと思ってるんじゃないでしょうか。

今さら思うのですが,App Storeを日本語にするときには,⁠アプリストア」としたほうがわかりやすいと思います。Mac App Storeも「Macアプリストア」とするとしっくり来ますよね。

Mac App Storeの登場で,iTunesカードでMacのアプリが買えるようになったことと,Macのアプリへのアフィリエイトリンクができるようになったことが,新たな需要を生みそうです。

しかし,お試し版やアップグレード版が認められないなど,今までもオンラインでアプリを購入していた人には,不便に思える点も少なくないですね。

著者プロフィール

芦之由(あしのよし)

Webデザインやサイト制作に役立つブログ記事やニュースをほぼデイリーでお届けするメルマガ「デイリーWebテク」発行人。フリーのWebデザイナー兼イラストレーター&ライター。シャープMZ-80Bからのパソコンユーザーで,Macintosh IIciからのMacユーザー。嫌いな言葉は「IEで見ると表示が崩れてるよ」。

デイリーWebテクの購読やバックナンバーについては,以下の紹介サイトをご覧ください。

デイリーWebテク - Webテク関連の話題を毎日配信 -
URLhttp://www.rgs680.com/dwt/

コメント

コメントの記入