週刊Webテク通信

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

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

ネットで見かけた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グラデーションを簡単に作れるサービス

今週の気になるWebネタ

ソニー,1月11日(ワンワンワン)でaiboの販売を開始--オーナーに手渡しも - CNET Japanhttps://japan.cnet.com/article/35113039/

ソニーの新型aiboがついに販売開始されました。発売日の1月11日がワンワンワンだからということらしいですが,発表された昨年の11月1日もワンワンワンですね。

今回のaiboはAIが売りということですが,AIスピーカーと違い実用性があまり必要ないところが面白いところであり難しいところでもある気がします。

ところでaiboといえば初代を持っている黒柳徹子を連想してしまうんですが,なんと今年2018年にテレビで旧AIBOについて語っていたそうです。今でも現役で黒柳徹子のインスタグラムにも登場していました。ということは新型は必要なさそうですね…。

著者プロフィール

芦之由(あしのよし)

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

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

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

コメント

コメントの記入