2017年11月第1週号 1位は、モバイルでのUXの見栄えを良くするための5つのデザイントリック、気になるネタは、Saying Goodbye to Firebug（さよならFirebug）

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

モバイルでのUXの見栄えを良くするための、5つのデザイントリックを紹介しています。

最近のデザイントレンド3つを実例とともに取り上げた記事です。

2は事例を見ていただくと分かりやすいのですが、文字を遮るように別な要素が配置されているデザインです。読みにくくなる危険はあるものの目を引くデザインに繋がるとのことでした。

マイクロインタラクションをデザインするヒントを紹介しています。マイクロインタラクションは、TwitterやFacebookの「いいね！」ボタンを押した後のアニメーションなど、ちょっとしたフィードバックのことです。

などのマイクロインタラクションを使う上で気をつけることなどがまとめられていました。

HTMLのヘッダ部分に入る要素をまとめた、完全ガイドと言えそうなページです。

<head>内に入るmeta、link、title、style、script、noscriptの記述方法から始まり、Facebook Open Graph、Twitter CardなどSNS用の記述など、ヘッダ部分に入るものをほとんど網羅しています。

関連ドキュメントへのリンクも充実しており、いつでも確認できるようにブックマークしておきたいページです。

CSSのチートシートを17種類まとめた記事です。

メディアクエリ、Flexbox、CSS Grid、CSSアニメーション、と最近のCSS制作では押さえておきたい技術はもちろん、短縮して記述するテクニックやWordPress用CSSのチートシートもあります。

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

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

ページの重さ（読み込みの遅さ）をテストして改善のヒントを与えてくれるサービスです。画像の重さとそれを最適化した場合にどのくらい減るのかを数値とグラフで表示します。

解析結果のレポートページの見せ方やデザインが非常に良くできていて参考になります。デスクトップ向けページとモバイルページとを切り替えてレポートを見ることができ、レポートページのURLをシェアすることも可能です。

オンライン画像処理APIサービスのimgixが提供するツールなので、imgixを使うと画像の最適化が簡単というサンプルにもなっています。なお、imgixは画像のリサイズや切り抜き、ぼかしなどの加工や、テキストやロゴを重ねるなどの処理もできて便利そうです。

ブラウザ上で動く開発ツールの先駆けだったFirebugが、Firefoxの次期リリースでサポート終了になり12年の歴史に幕を閉じるようです。ウェブデザイナーや開発者のほとんどは、過去にこのツールを使っていたんじゃないでしょうか。

ブラウザで見ているページをそのままいじれるというのは当時は画期的で、わたしはFirebugというエクステンションがあるからFirefoxを使っていたといっても過言ではありません。

その後ブラウザが開発ツールを内蔵するようになり、どのブラウザでもFirebugと同じようなことができるようになっていき、Firebugの存在感は薄れていきました。なお、Firebugの機能は現在全てFirefox標準の開発ツールに統合されているとのことです。