週刊Webテク通信

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

ネットで見かけた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制作関連ブログを横断検索できるサービス

おすすめ記事

記事・ニュース一覧