ネットで見かけた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. コンテンツを隠す

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

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

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

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

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テクニックが満載です。

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デザインの例が興味深いです。

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

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

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

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

• NTTドコモの初期の絵文字がニューヨーク近代美術館のコレクションに - ITmedia ニュース
  ニューヨークMOMAは1999年の絵文字を「人類の歴史を連綿と引き継ぐ」として展示するそうです
• Twitter，6秒動画アプリ「Vine」の提供を終了へ - CNET Japan
  日本では女子高生の有名人を生んだVineがついに終了。Twitter自体に動画投稿機能も付きましたしね
• Facebookがライブ配信用の拡張現実自撮り機能「Masks」をローンチ | TechCrunch Japan
  日本ではまだのようですが，ライブ配信時に顔にマスクをしたり加工できる機能が追加されました

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

9 Great DataViz & Infographics Tools with Education Discounts - Blog About Infographics and Data Visualization - Cool Infographicshttp://www.coolinfographics.com/blog/2016/10/27/9-great-dataviz-infographics-tools-with-education-discounts.html

今回は，データのビジュアル化やインフォグラフィックス作成に使えるWebサービスをまとめた記事を紹介します。グラフやチャート図，インフォグラフィックスなどをオンラインで簡単に作るためのツール類です。

Vismeはプレゼンテーション，インフォグラフィックス，レポート，Webコンテンツ，ワイヤーフレームと様々なビジュアルが作成でき，無料のプランもあります。作成した画像やプレゼンテーションはオンラインでシェアしたりダウンロードできます。

Infogr.amはグラフやインフォグラフィックス作成サービスとして有名で，CSVから色々なグラフが作れますし，無料のプランもあります。データのビジュアル化に関するツールは，海外の方が進んでいる印象がありますね。

図6　データのビジュアル化やインフォグラフィックス作成のWebサービスいろいろ

今週の気になるWebネタ



アップル，新MacBook Pro発表--ファンクションキーは変化する「Touch Bar」へ - CNET Japanhttp://japan.cnet.com/news/service/35091277/

Appleが新しいMacBook Proを発表し，ファンクションキーの代わりに「Touch Bar」を搭載したモデルが登場しました。Touch Barは状況に応じて表示内容が変化するタッチ操作できるガラスの帯で，Touch IDセンサが組み込まれて指紋認証にも使えます。

アプリケーションのツール部分がTouch Barにボタンとしてあるだけでも便利なのでしょう。HTMLコーディングの効率化に，テキストを選択したあとTouch Barのボタンに表示されたタグで囲むなどの用途にも使えそうです。

Touch Barを使いこなすと手放せなくなってくると思うので，広く利便性が認められるようになれば，次はTouch Barの付いた外付けキーボードの登場となるのでしょう。電子ペーパー搭載でキーの表示をカスタマイズできるキーボードも噂になっていましたが，それにTouch Barが付いての登場を期待したいです。