週刊Webテク通信

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

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

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

今週の気になるWebネタ

さらば,Google Wavehttp://jp.techcrunch.com/archives/20100804wave-goodbye-to-google-wave/

Google Waveの開発が中止になったそうです。昨年5月に発表され,今年の5月に一般公開されたばかりだったのに,早すぎる終了宣言でした。

しばらくは利用できるそうですが,いまさら新たに使おうという物好きはあまりいないですよね。

わたしもクライアントとのやりとりに便利ではないかと思っていたのですが,今回の発表で使う気は薄れてしまいました。

発売を目前に控えたGoogle Waveの入門書の作者には,ツイッターで同情の声が集まっているそうです。日本で一番がっかりしているのはこの人かもしれませんね。

著者プロフィール

芦之由(あしのよし)

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

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

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

コメント

コメントの記入