2016年9月第2週号 1位は、スタイルガイドとスタイルタイルを使ったWebデザイン、気になるネタは、Instagramがやっと画像、ビデオのズームをサポート

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

スタイルガイドとスタイルタイルを使ったWebデザインについて案内しています。

スタイルガイドは、一貫性のあるパターンやUIモジュールを実現するためのガイドラインです。一方スタイルタイルは、デザインの初期段階で使用するデザイン見本として使われます。

スタイルガイドは制作チームのために継続的に使われるリファレンスで、スタイルタイルはデザインのアイデアをクライアントとともに探求するためのものです。

実際のスタイルガイドやスタイルタイルの例も豊富に掲載されていて、参考になります。

最新式のCSSを書くためのプロのテクニックをまとめた記事です。

Webデザインの新しいトレンドとして、タイポグラフィが他のエレメントと空間を共有している事例を多数紹介しています。

文字が画像の上に乗っていたり、逆に文字の上に画像の一部が乗っています。紹介されているサイトの多くは、アニメーション効果などによってタイポグラフィと他のエレメントをうまく組み合わせた作りになっていました。

ボタンデザインに特化した軽量なCSSフレームワークです。レスポンシブなボタンを簡単に実装できます。

最近流行りのゴーストボタンがデフォルトで、サイズや色(白黒、グレー、青とシンプル）もあらかじめバリエーションが用意されています。

Web技術やツール類のチートシート、ガイド、ドキュメントのリンク集です。

CSS、CSSフレームワーク、HTML、JavaScript＆jQueryをはじめ、CMS、ブラウザーデベロッパーツール、ソーシャルメディア、グラフィックツールなどのチートシートがまとまっていて便利です。

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

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

Webページの上部にインフォメーションなどを表示するバーを付けられるサービスです。10個のバーまで無料で作れます。

バーには任意のテキストを入れられますし、テキスト部分をボタンにもできます。バーの色、文字の色をカスタマイズ可能で、バーが現れるアニメーション効果も数種類から選べます。

サイト内の特定のページにだけ別のバーを出したり、ページに訪れた経路に応じて別のバーを出すことも可能です。広告ブロックをしているユーザーには別途インフォメーションを出すなど、意外と機能が豊富でした。

やっとでInstagramのiOSアプリでピンチアウトによる拡大ができるようになりました。画像や動画をズームできます。指を離すと元のサイズに戻ってしまうのが結構不便に感じます。

Instagramのアプリでは、画像長押しでの保存はできませんし、Webブラウザ版でも右クリックやドラッグ＆ドロップで画像の保存ができないように工夫されています。同様に、画像を守るためにこれまで拡大表示も認めていなかったのだと思います。

わたしのように文字の入ったイラストや漫画をInstagramに投稿している人には、特にうれしい仕様変更だと思います。拡大したあと指で押さえ続けながら画像を移動させるのは意外と難しいんですが、指は1本だけ触れていれば大丈夫でした。