週刊Webテク通信

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

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

ネットで見かけた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のコードを簡単に作成できるサービス

今週の気になるWebネタ

図書館の本をネットで一括検索できる「カーリル」 - ITmedia Newshttp://www.itmedia.co.jp/news/articles/1003/11/news077.html

全国4300館以上の図書館・図書室の蔵書を横断検索できる「カーリル」というサイトが登場し,かなり話題となっているようです。

Amazonでの検索結果と最寄りの図書館にあるかどうかの情報が一度に検索されるため,図書館公式サイトで検索するより便利です。Amazonのレビューを読んで借りるかどうか判断することもできますね。

読みたい本を自分のライブラリに登録しておく機能もあるようです。

みんなが「カーリル」を使うようになると,返却待ちの人数がどんどん増えて,読みたい本がなかなか借りられなくなってしまうかも。というわけで,自分の住んでる地域の人にはあまり使って欲しくないサービスかもしれませんね。

著者プロフィール

芦之由(あしのよし)

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

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

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

コメント

コメントの記入