週刊Webテク通信

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

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

1. Designer’s Guide to Working With Style Guides & Style Tiles - Hongkiathttp://www.hongkiat.com/blog/style-guides-style-tiles/

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

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

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

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

図1 スタイルガイドとスタイルタイルを使ったWebデザインの案内
図1 スタイルガイドとスタイルタイルを使ったWebデザインの案内

2. 20 Protips For Writing Modern CSS | Tutorialzinehttp://tutorialzine.com/2016/08/20-protips-for-writing-modern-css/

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

  1. マージンの相殺に注意する
  2. レイアウトにFlexboxを使う
  3. CSSをリセットする
  4. 全てのエレメントにborder-boxを設定する
  5. 画像を背景として扱う
  6. より良い表の罫線
  7. より良いコメントの書き方
  8. ハイフン(-)で単語をつなげる
  9. 継承される設定を繰り返さない
  10. transformを使ったCSSアニメーション
  11. 自分で作らずライブラリを使う
  12. セレクタの個別性(優先度の数値)を低く抑える
  13. !importantを使わない
  14. 英単語を全て大文字にする場合HTML上ではなくCSSで行う
  15. EmとRemとPixel
  16. 大きなプロジェクトではSass、LessなどのCSSプリプロセッサを利用する
  17. 互換性を高めるために自動でプリフィックスを付ける
  18. 納品時にはコードを圧縮する
  19. 「caniuse」というサービスを利用する
  20. 検証
図2 最新式のCSSを書くためのプロのテクニック20選
図2 最新式のCSSを書くためのプロのテクニック20選

3. New Web Design Trend: Typography Sharing Space With Other Elementshttp://www.onextrapixel.com/2016/08/29/new-web-design-trend-typography-sharing-space-with-other-elements/

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

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

図3 タイポグラフィが他のエレメントと重なり合っているWebデザイン
図3 タイポグラフィが他のエレメントと重なり合っているWebデザイン

4. btns.css - beautiful button styleshttp://mrmrs.io/btns/

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

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

図4 ボタンデザインに特化した軽量なCSSフレームワーク
図4 ボタンデザインに特化した軽量なCSSフレームワーク

5. 50 Essential Cheatsheets, Guides & Docs for Web Designershttps://envato.com/blog/cheatsheets-web-designers/

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

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

図5 Web技術やツール類のチートシートのリンク集
図5 Web技術やツール類のチートシートのリンク集

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

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

Bounce - Add a bar to your site in secondshttp://bounce.bar/

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

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

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

図6 ページ上部に情報を表示するバーを付けられるサービス
図6 ページ上部に情報を表示するバーを付けられるサービス

おすすめ記事

記事・ニュース一覧