週刊Webテク通信

2010年8月第2週号1位は、SEOの向上にもつながる最先端のWebデザインのトレンド、気になるネタは、さらば、Google Wave

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

1. SEOmoz | 7 Cutting Edge Web Design Trends (that Can Actually Improve SEO)http://www.seomoz.org/blog/7-cutting-edge-web-design-trends

SEOの向上にもつながる最先端のWebデザインのトレンドを紹介しています。

昔はWebデザインを良くするための手法と、SEO効果を上げるための手法とは全くの別物でした。どちらかを犠牲にすることも多かったですよね。今ではCSSによるデザインが主流になり、WebデザインとSEO効果の両方を同時に向上させる手法も多くなりました。

この記事では、SEO効果のアップにもつながる、7つのWebデザインのトレンドを解説しています。

  1. 感情に訴えるデザイン
  2. スクロールをきっかけに起こるアクション
  3. ユーザーバッジ
  4. アニメーションして切り替わるヘッダ
  5. 埋め込まれたインフォグラフィック
  6. イラストに囲まれたデザイン(CSSを使って)
  7. 独創的なコンテンツの見せ方

3のユーザーバッジとは、会員制サイトの階級章といった意味のようです。ライフレシピ共有サイトの「nanapi」では貢献度に対してユーザーに称号が付くようになっていますが、そういったもののことでしょう。

図1 7つの最先端のWebデザインのトレンド
図1 7つの最先端のWebデザインのトレンド

2. 27 Utilities for Saving and Sharing Code Snippets | Design Shackhttp://designshack.co.uk/articles/css/27-utilities-for-saving-and-sharing-code-snippets

よく使うコードの断片(Code Snippet)を保存/共有できるツールを紹介しています。

WebサービスとMac向けアプリケーションがあわせて27個も掲載されています。

図2 コードスニペットを保存/共有するサービスいろいろ
図2 コードスニペットを保存/共有するサービスいろいろ

3. 12 Useful CSS3 Tutorials And Techniques For Web Designershttp://www.webdesignish.com/12-useful-css3-tutorials-and-techniques-for-web-designers.html

CSS3のチュートリアルとテクニックの記事を12個紹介しています。

図3 CS3のチュートリアルとテクニックのリンク集
図3 CS3のチュートリアルとテクニックのリンク集

4. 30+ Brand New jQuery Plugins To Change the Look and Feel of Your Website | AEXT.NET MAGAZINEhttp://aext.net/2010/08/jquery-plugins-to-change-the-look-and-feel-of-your-website/

サイトの見た目と操作感を変えるjQueryプラグインの新作を多数紹介しています。この手のまとめ記事であまり見かけないものが多いようです。

この記事にもフォームのバリデーション(値チェック)のプラグインが紹介されていますが、日本人によるどんなフォームにも使えるjQueryのフォームバリデーション exValidationというプラグインも先週公開されていました。

図4 サイトのルック&フィールを変えるjQueryプラグイン
図4 サイトのルック&フィールを変えるjQueryプラグイン

5. 40 Minimalist Icon, Symbol & Pictogram Sets | SpyreStudioshttp://spyrestudios.com/minimalist-icon-symbol-pictogram-sets/

ミニマルなアイコン、シンボル、ピクトグラムのセットをたくさん紹介しています。シンプルな単色のもので、Webデザインに取り入れやすそうなものが多いですね。

図5 ミニマルなアイコンセットいろいろ
図5 ミニマルなアイコンセットいろいろ

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

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

Zoom.ithttp://www.zoom.it/

「Zoom.it」はMicrosoftが提供する、高解像度画像を閲覧・共有できる無料のサービスです。

Googleマップのように、画像をズームさせたりドラッグしたりできるビューワーが用意されています。Photoshopから書き出すこともできるZoomifyと競合しそうなものですね。

ビューワーはシンプルでわかりやすく、操作感も軽快です。ブラウザのウィンドウいっぱいに画像を表示することもできます。

作り方も簡単で、画像のURLを指定するだけです。人に見てもらうには、固有のURLを教えるほか、自分のサイトに埋め込むことも可能です。

パスワードをかけて見られる人を限定することができないことと、自分のサーバーに「Zoom.it」の形式の画像ファイルを置けないことがちょっと残念ですが、かなり面白いサービスだと思います。Microsoftが提供していることからの安心感もありますね。

Microsoft Live Labs、⁠Seadragon」を応用した画像共有サービス「Zoom.it」を提供 - CNET Japanという記事でも紹介されていました。

図6 高解像度画像を閲覧・共有できる無料サービスZoom.it
図6 高解像度画像を閲覧・共有できる無料サービスZoom.it

おすすめ記事

記事・ニュース一覧