週刊Webテク通信

2014年10月第1週号1位は、ユーザー中心のWebデザインのための8つのチェックリスト、気になるネタは、「曲がるiPhone 6 Plus」検証。サムスンGALAXY Note 3やLG G3、HTC Oneと荷重テスト動画

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

1. 8-Point Checklist To Make Your Website Design User-Centeredhttp://www.designzzz.com/8-point-checklist-make-website-design-user-centered/

ユーザー中心のWebデザインのチェックリストです。

  1. 便利なWebサイトか
  2. 使いやすいWebサイトか
  3. ナビゲーションはどう動作するか
  4. コンテンツは読みやすいか
  5. デザインはどのように見えるか
  6. 頻繁に更新しているか
  7. ユーザーと連絡できるようにしているか
  8. 定期的にテストしてバグフィックスしているか

2については、安定したサーバーを使い、読み込み速度を上げて、モバイルでも閲覧しやすくし、シンプルにすることが必要だと解説されていました。

8の、サイトの動作テストは立ち上げ時だけでなく定期的に行わなくてはならないというのは、気をつけたいと思いました。

図1 ユーザー中心のWebデザインのチェックリスト
図1 ユーザー中心のWebデザインのチェックリスト

2. Bootstrap Materialhttp://fezvrasta.github.io/bootstrap-material-design/

Googleが提唱するマテリアルデザインを元にした、Bootstrap3用のテーマです。

ボタン類を押した時の反応として、押した場所から広がるエフェクトがしっかり実現されています。

フォームの要素にもそれぞれエフェクトが付いていて、操作感がよさそうですね。

図2 マテリアルデザインを元にしたBootstrap3用のテーマ
図2 マテリアルデザインを元にしたBootstrap3用のテーマ

3. The Ultimate Guide To iPhone Resolutionshttp://www.paintcodeapp.com/news/ultimate-guide-to-iphone-resolutions

歴代iPhoneの画面サイズと解像度とをまとめています。

Pointsが論理上のピクセルで、Physical Pixelsがデバイスピクセルということですね。

Rendered Pixelsはレンダリング時のピクセル数なのですが、iPhone 6 PlusではPhysical Pixels(デバイスピクセル)と違っています。

iPhone 6 Plusでは、内部的には論理ピクセルの3倍のサイズ
(1242×2208)でレンダリングして、表示する際にデバイスピクセルの1080×1920にリサイズしているというわけです。

なお、この情報を提供しているPaintCodeは、ベクターベースでUIを作成してコードで書き出せるツールを提供しています。

図3 歴代iPhoneの画面サイズと解像度
図3 歴代iPhoneの画面サイズと解像度

4. 24 Promo Video Ideas for Web Designers & Developershttp://designwebkit.com/web-and-trends/promo-video-ideas-web-designers-developers/

WebデザイナーやデベロッパーのためのPR動画のアイデアと実例を紹介した記事です。

実例が豊富に掲載されていますが、モーショングラフィックスやアニメーションを使ったものが多いようでした。

図4 Webデザイナー/デベロッパーのためのPR動画のアイデアと実例
図4 Webデザイナー/デベロッパーのためのPR動画のアイデアと実例

5. 5 Awesome Tools For Website Designers ● Conetixhttp://www.conetix.com.au/blog/5-awesome-tools-website-designers

Webデザイナーのための優れたツールを5つ紹介しています。

ポートフォリオサイトを作れるサービスや、Webサイトで使われているフォントを調べるサービス、フリーの写真素材を探せるサービスなどが紹介されていました。

図5 Webデザイナーのための優れたツールを紹介
図5 Webデザイナーのための優れたツールを紹介

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

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

Qhuery - 3600 Media Queries of Colourhttp://qhuery.com/

Qhueryはブラウザのウィンドウサイズを変更して色を作るだけのサービスです。

横方向が色相、縦方向が彩度となっており、ウィンドウサイズを変えることで色を変更できる仕組みになっています。誰でも操作方法がすぐ分かり、しばらく遊んでいたくなる見事なアイデアだと思いました。

「Media Queries of Colour」と名乗っているだけのことはあり、JavaScriptなどを使わずにCSSのメディアクエリを使って色を変更しています。

ソースからqueries.cssというCSSを見てみると、min-widthとmin-heightを使って細かく背景色を設定しているのが分かります。これは力技で手書きで記述したわけではなく、SCSSを使って式で書いていました。Github上で、元のSCSSのファイルを見ることができます。

図6 ブラウザのウィンドウサイズを変更して色を生成するサービス
図6 ブラウザのウィンドウサイズを変更して色を生成するサービス

おすすめ記事

記事・ニュース一覧