週刊Webテク通信

2010年3月第3週号1位は、2010年のWebデザイントレンド予想、気になるネタは、図書館の本をネットで一括検索できる「カーリル」

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

1. Web Design Trends: Predictions for 2010 | Creative Opera Design Blog: Creative Advice and Inspiration for Graphic Designers and Web Designershttp://www.creativeopera.com/2010/web-design-trends-predictions-for-2010/

2010年のWebデザインの流行を予想した記事です。

  1. 独創的なインタラクション
  2. 80年代にインスパイアされたデザイン
  3. 動画を使ったサイト
  4. より関心を引くタイポグラフィ
  5. 画面いっぱいの写真
  6. 3Dエレメント&立体感を付けた文字
  7. グリッドにとらわれない有機的なレイアウト
  8. ミニマルなデザイン

といったものが流行ると予想し、その解説と実際のサイト例を紹介しています。

大きな写真、凝ったグラフィック、動画、工夫されたインタラクションなどを使ったリッチなものが増える一方で、必要最小限に絞ったミニマルなサイトも流行するという予想は、今のところ当たっているように思えます。

図1 2010年のWebデザイントレンド予想
図1 2010年のWebデザイントレンド予想

2. 43 Essential Controls for Web Applications | UX Boothhttp://www.uxbooth.com/blog/essential-controls-for-web-applications/

Webアプリケーションに不可欠な43のユーザーインターフェイス(UI)パターンを紹介した記事です。

もちろんWebアプリだけではなく、普通のWebサイトにこういったUIを使うケースもあるでしょう。UIパターンにどういった名称が付けられているのかの参考にもなりますね。

ユーザーインターフェイスデザインのためのライブラリやフレームワークのリンク集も掲載されています。

図2 Webアプリに不可欠なユーザーインターフェイスパターン
図2 Webアプリに不可欠なユーザーインターフェイスパターン

3. Create Social Media Icons in Pure CSS | INSIC DESIGNShttp://blog.insicdesigns.com/2010/03/create-social-media-icons-in-pure-css/

CSS3を使っていろいろなアイコンを作ってみようという実験を紹介した記事です。

CSS3のグラデーションと角丸、ドロップシャドウを使って描いています。

「+」「in」⁠g」などテキストを使っているところは、ブラウザの文字サイズだけを変更するとズレてしまいますね。とはいえ、文字サイズだけを後から変更するユーザーは少ないと思うので、これでも問題はないですね。

同様にCSSだけでOperaのロゴを作ったOpera Logo with CSS ・ David DeSandroという記事もありました。こちらは各ブラウザでの見た目のキャプチャーも掲載されています。

図3 CSSだけで作るソーシャルメディアのアイコン
図3 CSSだけで作るソーシャルメディアのアイコン

4. HTML5 基礎知識 - web探検隊http://d.hatena.ne.jp/hebita164/20100306/1267889468

HTML5の基本をレクチャーする記事です。

  • HTML5の新要素
  • 廃止になった要素
  • 古いブラウザとの互換性を考えた記述方法
  • ブラウザごとの実装レベルを意識してHTML5を記述するためのノウハウ

などが紹介されています。

これからHTML5を始めようという人には大変参考になる内容となっていますね。

図4 HTML5の基礎知識をレクチャー
図4 HTML5の基礎知識をレクチャー

5. Fantastic Content Sliders for your Inspiration | Webdesigner Depothttp://www.webdesignerdepot.com/2010/03/fantastic-content-sliders-for-your-inspiration/

ボタン操作でスライドする領域のあるWebサイトのショーケースです。

スライダーやカルーセルは最近流行のUIのようですね。タブ切り替えほど市民権を得ていないとは思いますが、それほどユーザーを迷わせる心配なく採用できる技術になってきているのではないでしょうか。

図5 コンテンツスライダーを使ったサイトのショーケース
図5 コンテンツスライダーを使ったサイトのショーケース

そのほか先週の記事から、興味深かった記事を3つ紹介します。

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

CSS3 Please! The Cross-Browser CSS3 Rule Generatorhttp://css3please.com/

「CSS3, Please!」は、クロスブラウザ対応のCSS3のコードを簡単に記述するためのジェネレーターです。

あからじめCSSのコードと表示例が用意されています。CSSのコードはサイズや色の指定部分だけが書き換えられるようになっており、変更した状態がリアルタイムにプレビューできます。

できたコードは、プロパティごとに簡単にコピーできるようになっています。

当然CSSの知識がある人向けですが、シンプルながら便利なサービスですね。

図6 CSS3のコードを簡単に作成できるサービス
図6 CSS3のコードを簡単に作成できるサービス

おすすめ記事

記事・ニュース一覧