週刊Webテク通信

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

この記事を読むのに必要な時間:およそ 2.5 分

ネットで見かけた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 ページ上部に情報を表示するバーを付けられるサービス

今週の気になるWebネタ

Instagramがやっと画像,ビデオのズームをサポート―当初はiOS,近くAndroidも | TechCrunch Japanhttp://jp.techcrunch.com/2016/09/01/20160831instagram-now-lets-you-zoom-in-on-photos-on-ios/

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

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

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

著者プロフィール

芦之由(あしのよし)

Webデザインやサイト制作に役立つブログ記事やニュースをほぼデイリーでお届けするメルマガ「デイリーWebテク」発行人。フリーのWebデザイナー兼イラストレーター&ライター。シャープMZ-80Bからのパソコンユーザーで,Macintosh IIciからのMacユーザー。嫌いな言葉は「IEで見ると表示が崩れてるよ」。

デイリーWebテクの購読やバックナンバーについては,以下の紹介サイトをご覧ください。

デイリーWebテク - Webテク関連の話題を毎日配信 -
URLhttp://www.rgs680.com/dwt/

コメント

コメントの記入