週刊Webテク通信

2016年11月第1週号1位は、モバイルユーザー向けにやってはいけない13のこと、気になるネタは、アップル、新MacBook Pro発表--ファンクションキーは変化する「Touch Bar」

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

1. How To Poison The Mobile User – Smashing Magazinehttps://www.smashingmagazine.com/2016/10/how-to-poison-the-mobile-user/

モバイルユーザーに害を与える方法と題し、逆説的にモバイル向けにやってはいけないことを紹介した記事です。

  1. サイトの読み込みを遅くする
  2. カルーセルを不十分なデザインにする
  3. ハンバーガーアイコンの中にメニューを全部隠す
  4. 常にスワイプで操作させる
  5. タップできる領域を厳密にして小さくする
  6. レスポンシブに制作するけど一定の解像度向けに固定する
  7. 電話番号をタップできないようにする
  8. 拡大できなくする
  9. 全ての要素を「user-select: none」で選択できなくする
  10. 間違った読み込み方でWebフォントを使う
  11. ソーシャルメディアボタンでページを混乱させる
  12. デスクトップ版からモバイル版への不完全なリダイレクト
  13. コンテンツを隠す
図1 モバイルユーザーに害を与える13の方法
図1 モバイルユーザーに害を与える13の方法

2. When Illustrations Matter to the Design Processhttps://speckyboy.com/when-illustrations-matter/

デザインにおいてイラストが重要なケースについて解説しています。

  • リアリティを与えることができる
  • ブランドアイデンティティを強化する
  • ユーザー体験を手助けする手引きとなる

ヨーロッパ最大の航空会社での、イラストの使われ方についても紹介していました。

図2 デザインにおいてイラストが重要なとき
図2 デザインにおいてイラストが重要なとき

3. 20 essential CSS tricks every designer should know | Webdesigner Depothttp://www.webdesignerdepot.com/2016/10/20-essential-css-tricks-every-designer-should-know/

全てのデザイナーが知っておくべきCSSテクニックを多数掲載しています。

横方向/縦方向のセンタリングや、意外と使われていない疑似要素など、知っておくと効率化につながりそうなCSSテクニックが満載です。

図3 全てのデザイナーが知っておくべきCSSテクニック
図3 全てのデザイナーが知っておくべきCSSテクニック

4. 4 modern background tricks to try out | Webdesigner Depothttp://www.webdesignerdepot.com/2016/10/4-modern-background-tricks-to-try-out/

背景を使ったWebデザインのテクニックを4つ紹介しています。

カーソルに合わせて背景の要素がアニメーションするものや、視差効果を使った動きなど、凝った背景のWebデザインの例が興味深いです。

図4 背景を使ったWebデザインのテクニック4つ
図4 背景を使ったWebデザインのテクニック4つ

5. Download Blisk - a browser for web developershttps://blisk.io/

現在ベータ版として配布中の開発者向けのWebブラウザです。スマートフォンやタブレットでの見た目をシミュレートできます。

モバイル用画面とデスクトップ用画面とを同時に見られるところが便利だと思います。デベロッパーツールも使用可能です。

図5 デベロッパー向けのWebブラウザ
図5 デベロッパー向けのWebブラウザ

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

おすすめ記事

記事・ニュース一覧