週刊Webテク通信

2012年1月第3週号 1位は,2011年のWebデザインのトレンド振り返り,気になるネタは,Google、検索結果にGoogle+のデータを利用したパーソナライズ機能を追加

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

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

1.The State of Web Design Trends: 2012 Annual Edition | Webdesigntuts+http://webdesign.tutsplus.com/articles/industry-trends/the-state-of-web-design-trends-2012-annual-edition/

2011年のWebデザインのトレンドを振り返った記事です。

  • レスポンシブWebデザイン
  • グリッドシステム
    可変するグリッドシステムの登場がレスポンシブWebデザインの普及を後押しした
  • タイポグラフィ
    Webフォントとそれを提供するサービスにより,Webデザインでもフォントを選べるようになってきた(英語圏の場合)
  • 技術がアートを後押し
    ブラウザの機能が飛躍的に向上し,創造的なことがやりやすくなった
  • スクロール
    部分的なスクロールや視差効果など,スクロールに変化を加えているサイトが増えた
  • 1983年のように
    斜線,照明効果,ベージュ色とブロンズ色など,古い雑誌広告のようなデザインも流行した
  • モジュール化されたインターフェイス
    レスポンシブWebデザインと相性のいい,モジュール化されたレイアウトの人気が再上昇している
  • Themeforestの傾向
    Webデザインのテンプレートやテーマを提供しているThemeforestによると,⁠2011年はミニマルデザインの年だった」とのこと。

記事中,グリッドシステムの各種フレームワークや,スクロールに関するjQueryプラグインも紹介されているので,そちらも要チェックです。

図1 2012年版,Webデザインのトレンド事情

図1 2012年版,Webデザインのトレンド事情

2.10 Cool And Fresh CSS3 Text Effects Tutorialshttp://www.bestfreewebresources.com/2012/01/10-cool-and-fresh-css3-text-effects-tutorials.html

テキストへ効果を与えるCSS3のチュートリアルを各種紹介しています。

英文字なら,WebフォントとCSS3の組み合わせで,かなりのデザインができてしまいそうですね。

図2 CSS3による各種テキスト効果

図2 CSS3による各種テキスト効果

3.50 Excellent CSS3 Techniques and Tutorials for Beautiful Design - DesignModohttp://designmodo.com/css3-techniques-tutorials/

美しくデザインするための,CSS3のテクニックとチュートリアルをまとめています。

複数の背景,画像を使ったボーダー,透明度の調整,影をつけるなど,CSS3による表現力を活かしたテクニックが各種紹介されています。

図3 CSS3のテクニックとチュートリアルいろいろ

図3 CSS3のテクニックとチュートリアルいろいろ

4.Android Design - Welcomehttp://developer.android.com/design/index.html

Googleが提供する,Androidアプリのデザインについて学べるサイトです。開発者向けに,ユーザーインターフェイスデザインの原則やパターンなどが解説されています。

Androidアプリのデザインをもっと洗練されたものにしたいという期待を込めたサイトなのでしょう。このサイト自体も,スタイリッシュなものとなっていますね。

図4 Androidアプリデザインの解説サイト

図4 Androidアプリデザインの解説サイト

5.高品質な UI や Web のデザインが短時間で作れるおススメの Fireworks 拡張機能 4つ (フェンリル | デベロッパーズブログ)http://blog.fenrir-inc.com/jp/2012/01/fw_extensions.html

Webデザイン制作時に役立つ,Fireworksの拡張機能が4つ紹介されています。

Fireworksで角丸図形を縦横比が変わるようにリサイズすると,角丸部分も変形されてしまいます。わたしもこれで余計な手間がかかることが多いのですが,ここで紹介されている拡張機能を使うと,簡単に修正できるようになって便利ですね。

図5 Fireworksの拡張機能の紹介

図5 Fireworksの拡張機能の紹介

そのほか,先週の記事の中から,HTML5のリファレンスを配布している記事を2つ紹介します。

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

Pinteresthttp://pinterest.com/

Pinterestは画像共有サービスなのですが,Web上で見つけた画像をブックマークレットを使って何でも共有できてしまうのが特徴です。自分が撮った写真に限らずどんな画像でも投稿できるInstagramといったところでしょうか。

フォローした人の画像がタイムラインに流れ,RePin(人が投稿した画像を自分も投稿すること)やLikeしていくところは,Tumblrのダッシュボードっぽくもあります。

Pinterestはおしゃれな画像の投稿が目立つので,Pinterestのことを「おしゃれなTumblr」と言っている人もいるようです。

このPinterest,最近アメリカでは大人気らしく,特に若い女性ユーザーの支持を得ているそうです。

壁やコルクボードなどに写真をピンでペタペタ貼り付けて飾ることをバーチャルに置き換えたようで,たしかにアメリカ人が好きそうな感じですね。

人がPin(投稿)した画像をながめているだけでも楽しいですし,デザインのインスピレーションを得るのにも役立ちそうです。カテゴリーごとに画像を見ることができるのですが,ArtやDesign,Print & Postersなどデザイン関連の分野も充実しています。

以下の記事で,Pinterestの人気のほどが分かると思います。

図6 人気急上昇の画像共有サービスPinterest

図6 人気急上昇の画像共有サービスPinterest

今週の気になるWebネタ

Google,検索結果にGoogle+のデータを利用したパーソナライズ機能を追加 - ITmedia ニュースhttp://www.itmedia.co.jp/news/articles/1201/11/news029.html

Google検索からも,Google+の友達(サークルに入れているユーザー)の投稿がヒットするようになるそうです。Google+の「友達」がシェアしたり「+1」した情報が検索結果に反映される「ソーシャル検索」に続き,Google検索とGoogle+との統合がますます進んだ感じです。

ところで,Google+といえばAKB48ですが,AKB48メンバーがシェアしたリンクは,AKB48をフォローしている多くのGoogle+ユーザーの検索上位に来る可能性が高いということですよね。これからは検索エンジン対策よりAKB48対策をしたほうがいいのかもしれません。

検索エンジンがパーソナライズ化されていくことには,反対の声も上がっています。AKB48に限らず,有名ブロガーなどネットの人気者の行う情報共有に別な意味が加わってしまいますし,報酬と引き替えにリンクをお願いするような業者が出てきそうなところも気になるところです。

著者プロフィール

芦之由(あしのよし)

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

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

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

コメント

コメントの記入