週刊Webテク通信

2012年1月第5週号 1位は，レスポンシブWebデザインのためのテンプレートやフレームワーク，気になるネタは，リアルタイムでカメラのファインダー中に友だちの顔を見つけるiPhoneアプリKLIK

Webテク, Webデザイン, Web広告, レスポンシブウェブデザイン, CSS3, 写真, 顔認識

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

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

1．Web Design Trends: Responsive Web Design Templates and Frameworkshttp://www.latestwebsitedesigns.com/2012/01/responsive-web-design-templates-and.html

レスポンシブWebデザインのための，テンプレートやフレームワークを紹介した記事です。

レスポンシブWebデザインのレイアウトは，複数サイズのデザインを同時に作っていくようで，なかなか面倒なことも多いと思います。そこで，こういったテンプレートやフレームワークを使うというワークフローが，広まってきているようです。

これら海外のものを日本語で使うには，文字のサイズやフォントなどをカスタマイズする必要があったりします。日本発のものも，どんどん登場してほしいですね。

図1　レスポンシブWebデザインのためのテンプレートやフレームワーク

図1　レスポンシブWebデザインのためのテンプレートやフレームワーク

2．30 Mind Blowing Parallax Scrolling Effect Websites | Webdesignersblog - The Best Daily Online Resources for Web and Graphic Designershttp://www.webdesignersblog.net/inspiration/30-mind-blowing-parallax-scrolling-effect-websites/

スクロールすると視差効果が味わえるWebサイトのギャラリーです。スクロールにあわせて面白い効果が楽しめます。

1ページ完結のサイトに，スクロールによる効果を利用するのが最近のトレンドのようです。

図2　視差効果を使ったWebサイトのギャラリー

図2　視差効果を使ったWebサイトのギャラリー

3．CSS3 breadcrumbs - RedTeamDesignhttp://www.red-team-design.com/css3-breadcrumbs

パンくずリストをCSS3でデザインした例を解説した記事です。

4種類のデザインについて，図形の組み合わせ方とコードが紹介されており，とても参考になります。パンくずリスト以外の用途にも使えそうです。

図3　パンくずリストのCSSでのデザイン例

図3　パンくずリストのCSSでのデザイン例

4．Monday Inspiration #10 Light and Minimalist Websites | WPCrown Magazinehttp://magazine.wpcrown.com/light-and-minimalist-websites/

白ベースでミニマルなWebサイトのギャラリーです。

それほど凝った仕掛けもなくシンプルなサイトが多いですが，細部まで作り込まれたデザインが心地よいものばかりです。

図4　ミニマルなWebサイトのギャラリー

図4　ミニマルなWebサイトのギャラリー

5．30 Inspiring Sites with Illustrated Backgrounds ≫ Illustration, Web Design ≫ Design Festivalhttp://designfestival.com/30-sites-with-illustrated-backgrounds/

イラストを背景に使ったWebサイトのギャラリーです。

いろいろなテイストのイラストがありますが，ベクターベースのイラストが使われている例が多いようです。

図5　イラストが背景のWebサイトのギャラリー

図5　イラストが背景のWebサイトのギャラリー

そのほか，先週の記事の中から，チュートリアル記事を2つ紹介します。

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

12 Websites Turn Yourself into a Cartoon - Design Treasure | Design Treasurehttp://www.designtreasure.com/2012/01/12-websites-turn-yourself-into-a-cartoon/

今回は，写真をイラスト風に変換するサービスや似顔絵作成サービスをまとめた記事を紹介します。

TwitterやFacebookのアイコンに似顔絵イラストを使いたいという人にも役立つかもしれません。できあがる絵のテイストが日本人向きじゃないものばかりですが…。

写真からマンガのような絵に変換するのは，やはり現代の技術でも難しいようです。パーツを選んで似顔絵を作成するサービスの方が，ちゃんとしたものが作れるように思います。

図6　写真をイラスト風に変換するサービスと似顔絵作成サービスのまとめ

図6　写真をイラスト風に変換するサービスと似顔絵作成サービスのまとめ

今週の気になるWebネタ

リアルタイムでカメラのファインダー中に友だちの顔を見つけるiPhoneアプリKLIK?顔認識技術のFace.comよりhttp://jp.techcrunch.com/archives/20120127face-com-launches-klik-a-real-time-facial-recognition-camera-app-for-iphone/

以前，顔認識技術のAPIを一般公開したことを取り上げたFace.comですが，今度は顔認識機能を搭載したカメラアプリをリリースしました。カメラに写った顔を認識し，その人の名前を表示するそうです。

Facebookと連携させることで，友達の名前を認識するようになるとのこと。Facebookの顔認識機能もFace.comの技術を使っているので，その応用なのでしょう。その場にいる友達の名前を知らないというのもおかしいので，名前が出ることのメリットはあまりないと思いますが，写真の分類やタグ付けに役立つようになるのでしょう。

前回Face.comを取り上げたときには，顔認識で芸能人の名前が分かるアプリがあったら便利かもといったネタを書きましたが，今回も似たようなネタですみません。余談ながら，わたしはムスメが北川景子にちょっと似てると思っているのですが，妻すら賛同してくれません。

Webテク, Webデザイン, Web広告, レスポンシブウェブデザイン, CSS3, 写真, 顔認識

著者プロフィール

アシカガコウジ

フリーのWebデザイナー＆ライター。ポッドキャスト「アシカガCAST」でデジタル活用のヒントを発信中。シャープMZ-80Bからのパソコンユーザーで，Macintosh IIciからのMacユーザーでApple好き。Webテク情報やツール（ソフトウェア）の案内，デジタル活用情報をまとめた「アシカガノオト」をNotionで公開しています。

http://bit.ly/ashikaganote