週刊Webテク通信

2016年7月第3週号 1位は，Webサイトをデザインリニューアルすべき時，気になるネタは，「Pokemon GO」の影響？ 「キロをマイルに換算」Google検索数が急増

Webテク, Webデザイン, Web広告, モバイル, UXデザイン, フレームワーク

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

ネットで見かけたWebテク（Webテクニック・Webテクノロジー）記事から，Webデザイナーの目で厳選したネタを週刊で紹介するこのコーナー。今回は，2016年7月11日～7月17日の間に見つけた記事のベスト5です。

1. When to redesign your website and when not. Explained with animations.http://blog.froont.com/when-to-redesign-your-website/

Webサイトのデザインリニューアルをすべき時について解説しています。

  1. 今のデザインには柔軟性がない
  2. 作ったときと比べてWebの常識や技術が変わってしまった
  3. 取り扱う商品やサービスが変わった
  4. 何年も更新していない
  5. 競合他社より良いものにしたい

また，以下のような理由ではリニューアルすべきではないとのことでした。

  • 友達が気に入っていない
  • うまくいってるけど何か変えたい
  • 古く見える
  • 競合他社がWebサイトを新しくした
  • デザインを新しくすれば注目を集めるはず

図1　Webサイトのデザインリニューアルをすべき時

図1　Webサイトのデザインリニューアルをすべき時

2. Mobile UX Design: Key Principles — UX Planethttps://uxplanet.org/mobile-ux-design-key-principles-dee1a632f9e6#.dd7icqmgk

モバイルUXデザインの法則として，守るべきことをまとめています。

  1. 乱雑さをなくす
  2. わかりきったものとなっているナビゲーションを使う
  3. モバイル以外の端末とシームレスな体験を提供する
  4. 指で操作しやすいデザインをする
  5. テキストは読みやすくする
  6. インターフェイスの要素ははっきりと見えるようにする
  7. 端末を持つ手の位置を配慮してデザインする
  8. 文字入力を最小限に抑える
  9. デザインをテストする

図2　モバイルUXデザインの法則

図2　モバイルUXデザインの法則

3. 10 CSS Libraries for Better Image Hover Effects - Hongkiathttp://www.hongkiat.com/blog/css-libraries-image-hover-effect/

画像にカーソルが重なったときのロールオーバー効果を適用するCSSライブラリをまとめた記事です。

画像の上にテキストやボタンがアニメーションで表示される効果が，いろいろなパターンで用意されています。

図3　ロールオーバー効果のCSSライブラリいろいろ

図3　ロールオーバー効果のCSSライブラリいろいろ

4. UX Toolshttp://uxtools.co/

UXデザインツールの比較表を提供しています。オンラインツールとデスクトップアプリの両方紹介されており，簡単ですが機能の比較ができるようになっています。

プロトタイピング／コラボレーション／モニタリング／ユーザビリティテストと4つの項目に分かれていますが，現状はプロトタイピングとコラボレーションしか掲載されていませんでした。

図4　UXデザインツールの比較表

図4　UXデザインツールの比較表

5. 850+ Free Icons for Web, iOS and Android UI Design | Icons | Graphic Design Junctionhttp://graphicdesignjunction.com/2016/07/850-free-icons-for-web-ios-and-android-ui-design/

フリーのアイコンセットをダウンロードできるサイトを多数紹介しています。

ほとんどのアイコンはベクター形式で用意されているので，使い勝手がよさそうです。

図5　フリーのアイコンセットを多数紹介

図5　フリーのアイコンセットを多数紹介

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

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

Compare responsive frameworks. Find responsive design snippets, patterns and examples.http://www.codeply.com/

Codeplyはレスポンシブなフロントエンドフレームワークを簡単にテストできるコード共有サービスです。Bootstrap，Foundationなどのフレームワークを簡単に読み込ませることができます。

それぞれのフレームワークで使われるclassやコンポーネントをメニューから選べるところがとても便利です。慣れていないフレームワークでも，実際にプレビューしながら試せるので，理解が早いはずです。

リアルタイムでプレビューでき，ウィンドウサイズを変えてレスポンシブのチェックができるのはもちろん，デスクトップ／ラップトップ／タブレット／スマートフォンの4段階のサイズにボタンひとつで切り替えることも可能です。

図6　レスポンシブなフロントエンドフレームワークを簡単にテストできるコード共有サービス

図6　レスポンシブなフロントエンドフレームワークを簡単にテストできるコード共有サービス

図7　Codeplyのコード編集画面

図7　Codeplyのコード編集画面

今週の気になるWebネタ

「Pokemon GO」の影響？ 「キロをマイルに換算」Google検索数が急増 - ITmedia ニュースhttp://www.itmedia.co.jp/news/articles/1607/12/news158.html

「ポケモンGO」が話題ですが，メートル表記のまま米国でリリースされたためキロメートルをマイルに変換する検索をする人が急増しているという話題が面白いなと思いました。

ローカライズの不備とも言えますが，いい機会だからアメリカ人もメートル法に慣れろよという感想が日本人には多いようです。リオ五輪も近いですが，オリンピックの競技も100メートル走とか200メートル自由形とか，メートルに慣れてるほうが実感がわくはずです。

Ingressにはハマれませんでしたし，ポケモン世代じゃないのでわたしはポケモンGOはやらないと思いますが，楽しそうというのはよく分かります。夏休みに親子で昆虫採集ならぬ親子でポケモンGOという光景も見かけるようになるんでしょうね。

Webテク, Webデザイン, Web広告, モバイル, UXデザイン, フレームワーク

著者プロフィール

芦之由（あしのよし）

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

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

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