週刊Webテク通信

2012年8月第1週号1位は、ユーザーインターフェイスのフリー素材とテクニック、気になるネタは、Yahoo!ブログの「イイね!」ボタンの名称が「ナイス!」変わりました

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

1. Designing Killer Web UI Layouts with Freebies ? Ultimate Guidehttp://www.hongkiat.com/blog/killer-ui-with-freebies/

無料ダウンロードできるユーザーインターフェイス素材と作成のためのテクニックとを、カテゴリーごとにセットで紹介した記事です。

以下のカテゴリーで分けられています。

  • ページ全体のテンプレート
  • メインのナビゲーション
  • 入力フォーム
  • リボンとバナー
  • ボタンのデザイン
  • 木と紙のテクスチャー
図1 ユーザーインターフェイス素材と作成のためのテクニック
図1 ユーザーインターフェイス素材と作成のためのテクニック

2. Common Design Mistakes for Creating a Mobile Websitehttp://naldzgraphics.net/tips/mobile-website-mistakes/

モバイルサイトのデザイン制作でありがちなミスをまとめています。

  1. 画面サイズを考慮していない
  2. 小さなボタンが多すぎる
  3. 画像が多すぎる/重すぎる
  4. コンテンツを簡素化していない
  5. フォームが長い
  6. ユーザビリティが貧弱
  7. 通常のPCサイトへの誘導がない
  8. 折りたたみのナビゲーションを使っていない
  9. レイアウトが複雑
  10. テストをしていない
図2 モバイルサイトデザインでありがちなミス10個
図2 モバイルサイトデザインでありがちなミス10個

3. 25 Examples of Responsive Website | AcrisDesignhttp://acrisdesign.com/2012/08/25-examples-of-responsive-website/

レスポンシブWebデザインを使ったサイトのギャラリーです。

レスポンシブなサイトの画面キャプチャーを掲載する場合、複数サイズを並べて紹介したりするのですが、この記事ではPCサイズの画面の上にモバイルサイズの画面を載せています。これだと一度にキャプチャーを撮ることができて便利かもしれません。

図3 レスポンシブWebデザインのサイトギャラリー
図3 レスポンシブWebデザインのサイトギャラリー

4. jquer.in jquer.in ≫ Search Less,Play More : An extensive and visual collection of jquery plugins listed according to its categoryhttp://jquer.in/

jQueryプラグインをまとめて紹介したサイトで、カテゴリーごとに見ていくことができます。

画面下までスクロールすると、検索窓とカテゴリー一覧があります。

図4 jQueryプラグインをカテゴリー別にまとめたサイト
図4 jQueryプラグインをカテゴリー別にまとめたサイト

5. Sneakpeekit | Sketch sheets for Web Designershttp://sneakpeekit.com/

手書きでWebデザインのスケッチをするための用紙のPDF素材を配布しています。

ブラウザの枠の入った方眼用紙のようなもので、複数のサイズや種類が選べるようになっています。また、タブレット端末用とスマートフォン用のデータもあります。

図5 Webデザインのスケッチ用紙素材いろいろ
図5 Webデザインのスケッチ用紙素材いろいろ

そのほか、最近の記事の中から、気になるニュース記事を紹介します。

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

BBC News - Your Olympic athlete body matchhttp://www.bbc.co.uk/news/uk-19050139

自分と身長・体重の近いオリンピック選手を探すというサービスで、イギリスBBCが提供しています。入力した身長、体重に近い選手を表示してくれるとともに、全選手の分布図の中でどの辺かを確認できます。

この分布図のオレンジの点をクリックすると、その位置の身長・体重の選手が分かります。分布図上でいろいろクリックしていっても面白いですね。身長・体重が一番低いのは、日本の体操女子・寺本明日香選手で136cm/30kgです。

よく見ると、ひとりずば抜けて体重の重い選手がいます。柔道のリカルド・ブラス ジュニアというグアムの選手で、218kgもありますね。もちろん100キロ超級なわけですが、2回戦で敗退したようです。

図6 身長・体重が自分と近いオリンピック選手を探せるサービス
図6 身長・体重が自分と近いオリンピック選手を探せるサービス

おすすめ記事

記事・ニュース一覧