週刊Webテク通信

2018年1月第3週号1位は、視覚的階層構造(ビジュアルヒエラルキー)効果的テクニック、気になるネタは、ソニー、1月11日(ワンワンワン)aiboの販売を開始

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

1. 9 Effective Tips on Visual Hierarchy – UX Planethttps://uxplanet.org/9-effective-tips-on-visual-hierarchy-c3b30a7fd0ef

視覚的な階層構造(ビジュアルヒエラルキー)における効果的なテクニックをまとめた記事です。情報の重要度を視覚的表現に落とし込む方法について、以下の9項目に分けて解説しています。

  1. ビジネスの目的を念頭に置く
  2. 目線の動きを考慮する
  3. 機能性を優先する
  4. ホワイトスペースも視覚要素である
  5. 黄金比を適用する
  6. グリッドを使う
  7. 色を加える
  8. フォントに注意を払う
  9. Webは3階層、モバイルは2階層
図1 視覚的階層構造(ビジュアルヒエラルキー)の効果的テクニック
図1 視覚的階層構造(ビジュアルヒエラルキー)の効果的テクニック

2. 8 Best Practices for Perfect CSS Documentationhttps://webdesign.tutsplus.com/articles/css-documentation-best-practices--cms-30139

CSSの取扱説明書を作るためのヒントを紹介しています。

  1. ルールを決める
  2. ファイル構造を説明する
  3. コーディングの基準を確立する
  4. 長いスタイルシートを避ける
  5. スタイルガイドを念頭に置いてCSSを文書化する
  6. スタイルシートをセクションに分割する
  7. スタイルシートの目次を作る
  8. 文書化におけるスイートスポットを見つける
図2 CSSの取扱説明書を作るためのヒント
図2 CSSの取扱説明書を作るためのヒント

3. CSS Arrows From CodePen - Freebie Supplyhttps://freebiesupply.com/blog/css-arrows/

矢印によるナビゲーションのCSSコーディング例を、コード共有サイトCodePenよりまとめています。

ちょっとしたアニメーション効果などを含んだ、いろいろなサンプルが紹介されていました。

図3 矢印のCSSコーディング例いろいろ
図3 矢印のCSSコーディング例いろいろ

4. 30+ Best Line Patterns & Textures | Design Shackhttps://designshack.net/articles/inspiration/best-line-patterns-textures/

線を使ったパターン&テクスチャ素材の配布先をまとめた記事です。

シンプルで使いやすそうなものも多く、フォーマットもビットマップ(JPG、PNG)とベクター(EPS、AI)の両方揃っているものが中心で便利に使えそうです。

図4 線を使ったパターン&テクスチャ素材いろいろ
図4 線を使ったパターン&テクスチャ素材いろいろ

5. The Responsive || Showcasing the finest responsive designhttp://the-responsive.com/

レスポンシブなウェブデザインのギャラリーサイトです。非常にシンプルな作りで、紹介されているサイトもシンプルなものが多い印象を受けます。

ここで紹介されていた「バレンシアガ (Balenciaga)」のオンラインショップが、文字だけというシンプルさで逆にインパクトがありますね。

図5 レスポンシブなウェブデザインのギャラリーサイト
図5 レスポンシブなウェブデザインのギャラリーサイト

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

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

CSS GEARS - Gradients Cardshttps://gradients.cssgears.com/

Gradients CardsはCSSグラデーションを簡単に作れるサービスです。作ったグラデーションはCSSコードをコピーするほか、Adobe XD、Sketch形式で書き出せます。

あらかじめ用意してあるグラデーションのカードを元に、色を変更して好みの配色を作れます。両端の色をドラッグして調整する方法が使いやすいです。両端の色のコードをコピーすることも可能です。

なお、同じ作者によるCSS GEARSでは、CSSボタンを作成できるサービスを提供しています。かなり細かい設定ができるジェネレーターで、ホバー時のアニメーション効果もいろいろ用意されていて便利そうです。

図6 CSSグラデーションを簡単に作れるサービス
図6 CSSグラデーションを簡単に作れるサービス

おすすめ記事

記事・ニュース一覧