週刊Webテク通信

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

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

ネットで見かけた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 ブラウザのウィンドウサイズを変更して色を生成するサービス

今週の気になるWebネタ

「曲がるiPhone 6 Plus」を検証。サムスンGALAXY Note 3やLG G3、HTC Oneと荷重テスト動画 - Engadget Japanesehttp://japanese.engadget.com/2014/09/29/iphone-6-plus-galaxy-note-3-lg-g3-htc-one/

iPhone 6 Plusをズボンの前ポケットに入れていただけで曲がった人がいるとか、素手で曲げた人の動画が話題とかで、⁠ベンドゲート」と呼ばれる「曲がるiPhone 6 Plus」騒動が起きているようです。

米国の消費者情報誌コンシューマー・リポートが強度を測定したところ、他社のスマートフォンと同等で一般的な使用には問題ないという結論になったとのこと。

iPhone 6 Plusを曲げるのには40kgほどの力が必要で、鉛筆4本を束ねて折れる力程度だそうです。鉛筆によっても強度が違うような気がしますし、日本の鉛筆の方が質が良くて頑丈なイメージもありますが、どうなんでしょう。

何にせよ、iPhoneだからこそこれだけ話題になるんですね。1万円札と同じくらいの大きさだとか、鉛筆4本と同じくらいの強度だとか、意外な比較対象が出てくるところも面白いですね。

著者プロフィール

芦之由(あしのよし)

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

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

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

コメント

コメントの記入