週刊Webテク通信

2012年4月第1週号 1位は,デザイナーのためのHTML5の演習,気になるネタは,ハンズフリーでページがめくれる,魔法みたいな電子書籍リーダー

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

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

1. HTML5 Best Practices for Designers | Web Design | instantShifthttp://www.instantshift.com/2012/03/27/html5-best-practices-for-designers/

デザイナーのためのHTML5の演習と題した記事です。

以下の項目で解説されています。

  1. フレームワークを使う
  2. Doctypeを理解する
  3. <header> <section>などの要素を正しく使う
  4. 古いブラウザとの互換性の対策をする
  5. スタイルとコンテンツを分離する
  6. アクセシビリティのためにデザインする
  7. JavaScriptでなくCSSでトランジションなどの効果を与える
  8. マルチメディア要素には代替手段を用意する
  9. フォームのコードを単純化する
  10. 実行速度を考えて制作する

コードの実例や参考リンクも充実しているので,HTML5の勉強に役立つと思います。

図1 デザイナーのためのHTML5の演習

図1 デザイナーのためのHTML5の演習

2. 10 Essential HTML5 Frameworkshttp://smashinghub.com/10-essential-html5-frameworks.htm

HTML5のフレームワークをまとめています。フォームのジェネレーター,WordPress用のフレームワークも掲載されていました。

また,ドラッグ&ドロップで簡単にHTML5のWebサイトが作れる,WixというWebサイトビルダーも紹介されています。

図2 HTML5のフレームワークを各種紹介

図2 HTML5のフレームワークを各種紹介

3. 6 Online Tools for Visual Brainstorminghttp://www.designyourway.net/blog/resources/6-online-tools-for-visual-brainstorming/

ビジュアルを用いたブレインストーミングに役立つツールを集めた記事です。

画像をたくさん貼り付けて,チームでリアルタイムに共有できるようなツールが各種紹介されています。

Pinterestも載っていますが,たしかにビジュアルブレインストーミングに役立ちそうです。ここでもWebサイトビルダーのWixが紹介されていました。

図3 ビジュアルブレインストーミングのツールを各種紹介

図3 ビジュアルブレインストーミングのツールを各種紹介

4. Mobile UI Design Patterns: 10+ Sites for Inspirationhttp://sixrevisions.com/user-interface/mobile-ui-design-patterns-inspiration/

モバイル向けのUIデザインパターンのギャラリーサイトを数多く紹介しています。モバイルサイトやモバイルアプリのインターフェイスの実例を,カテゴリごとに見ることができます。

図4 モバイル向けのUIデザインパターンのギャラリーサイトいろいろ

図4 モバイル向けのUIデザインパターンのギャラリーサイトいろいろ

5. Showcase of Websites Inspired by Apple | REPUBLICOF3http://www.republicof3.com/showcase-of-websites-inspired-by-apple/

Appleの影響を受けているという切り口でのWebデザインのギャラリーです。iPhone,iPad,Macのアプリケーションの紹介サイトばかりなので,Appleっぽいテイストが利用されているのもうなずけます。

図5 Appleの影響を受けているWebサイトのギャラリー

図5 Appleの影響を受けているWebサイトのギャラリー

そのほか,先週の記事の中から,気になるニュース記事を紹介します。

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

WebDesignBlogSearch - Webデザイナーのための検索エンジンhttp://webdesignblog-s.com/

Web制作関連ブログを横断検索できるサービスです。⁠Webクリエイターズボックス」⁠Webデザインレシピ」⁠コリス」⁠かちびと.net」などの厳選されたブログを対象に検索することができます。

Googleカスタム検索を使っているようです。サジェスト(文字の入力途中で出てくる候補)にはWebデザイン関連用語がでてきたり,検索したあと「jQuery」⁠WordPress」などの用語のタブで絞り込みができたりと,なかなかよくできています。

また,ここで検索対象となっているブログのRSSを,まとめてGoogle Readerに登録するためのXMLファイルも提供されていて,こちらも便利です。

図6 Web制作関連ブログを横断検索できるサービス

図6 Web制作関連ブログを横断検索できるサービス

今週の気になるWebネタ

ハンズフリーでページがめくれる,魔法みたいな電子書籍リーダー。使い道は自分で考えよう! - ITmedia ガジェットhttp://gadget.itmedia.co.jp/gg/articles/1204/03/news067.html

手を使わずにページがめくれる電子書籍リーダーが登場しました。⁠MagicReader(マジック・リーダー)⁠というiPad用アプリで,iPadのカメラで顔の動きを認識して,首を振ることでページをめくることができます。

電車の中で首を振りながら読書している人がいたらイヤだなとも思ったのですが,アプリの紹介文でのシチュエーション例を見ると,なるほどと思いました。料理をしながらレシピを見たり,楽器を演奏しながら楽譜をめくるのは確かに便利そうです。赤ちゃんをだっこしながら読書というのも需要はありそうですね。

この顔の動きの認識の技術は,別の用途にも使えそうです。⁠あっちむいてほい」などゲーム分野でも活用されるんじゃないでしょうか。

著者プロフィール

芦之由(あしのよし)

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

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

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

コメント

コメントの記入