週刊Webテク通信

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

ネットで見かけた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のコード編集画面

おすすめ記事

記事・ニュース一覧