週刊Webテク通信

2015年7月第4週号1位は、文字には3段階の階層構造が必要な理由、気になるネタは、オーディオブックの定額聴き放題サービス「Audible」日本上陸

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

1. Why Every Design Needs Three Levels Of Typographic Hierarchy ? Design Schoolhttps://designschool.canva.com/blog/typeface-fonts/

文字には3段階の階層構造が必要な理由を解説した、デザイン入門記事です。

文字を階層化してデザインを整理する方法について、以下のノウハウも紹介されていました。

  1. フォントサイズを調整する
  2. 対照的な書体の組み合わせを選ぶ
  3. 異なるスタイルや太さを試す
  4. 色を加える
  5. 空白に注意を払う
  6. 近接している要素の空白にも注意を払う
  7. 傾きをつけるなどの処理
図1 文字には3段階の階層構造が必要な理由
図1 文字には3段階の階層構造が必要な理由

2. 12 Little-Known CSS Facts (The Sequel)http://www.sitepoint.com/12-little-known-css-facts-the-sequel/

あまり知られていないCSSの真実をまとめた記事です。

  1. border-radiusの指定にはスラッシュが使える
  2. font-weightには相対的なキーワードが使える
  3. outline-offsetというプロパティがある
  4. table-layoutというプロパティがある
  5. vertical-alignは、table cellsで使われるときとその他では違う
  6. ::first-letter疑似クラスは思ったより便利
  7. classを複数並べて指定するときに区切りに文字を使える
  8. animation-iteration-countに小数値が指定できる
  9. アニメーションをショートハンド(簡略化表記)で記述するとき、アニメーションの名前によっておかしくなるときがある
  10. 範囲を指定して要素を選ぶことができる(⁠⁠7番目から14番目までの子要素」など)
  11. 疑似要素は空要素(img、hrのような単独で完結する要素)に適用できる
  12. 一部の属性値は、セレクタにおいて大文字小文字は区別できない
図2 あまり知られていないCSSの真実
図2 あまり知られていないCSSの真実

3. 5 rules to better design ? Mediumhttps://medium.com/@stothelios/design-philosophy-at-reliefwatch-156aab951e18

よいデザインのための5つのルールをまとめた記事です。

  1. 一貫性がある
  2. わかりやすい
  3. 規則に従う
  4. レスポンシブである
  5. アクセシブルである
  6. 図3 よいデザインのための5つのルール
    図3 よいデザインのための5つのルール

    4. 30+ websites that prove parallax isn’t dead | Webdesigner Depothttp://www.webdesignerdepot.com/2015/07/30-websites-that-prove-parallax-isnt-dead/

    まだまだ視差スクロールのサイトは時代遅れじゃないよということで、魅力的なサンプルを多数紹介しています。

    以下のカテゴリに分けて実例が掲載されていました。

  • ヘッダの視差
  • テキストの視差
  • ごくわずかな視差
  • 固定された箇所のある視差
  • 古典的な視差
図4 視差スクロールのサンプルを多数紹介
図4 視差スクロールのサンプルを多数紹介

5. CodeMyUI.comhttp://codemyui.com/

Webデザインのためのコードスニペットを集めたまとめサイトです。コード共有サイトのCodepenから集めているようです。

UIの動きがアニメーションGIFで掲載されており、Codepenからコードも埋め込まれています。

図5 Webデザインの参考になるコード類いろいろ
図5 Webデザインの参考になるコード類いろいろ

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

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

ちゃんりおメーカー -Chanrio maker-http://chanrio.com/

サンリオが提供するWebサービスで、パーツを選んでオリジナルのサンリオキャラクターが作れます。作ったキャラクターを「ちゃんりお」と呼ぶそうです。パソコンからもモバイルからも使えます。

目や口などの顔のパーツや服装、小物などの組み合わせで人型のキャラクターを作るという、取り立てて新鮮味はないジェネレーターですが、サンリオ公式でサンリオらしいかわいいキャラクターが作れるところが特徴となっています。また、写真をアップロードして自動で作ることも可能です。

AKB48の高橋みなみがメンバーの「ちゃんりお」を作って公開したことも話題となったこの企画、サンリオピューロランドに行くと作ったちゃんりおをバーチャルパレードに参加させたり、限定パーツが入手できたりするなど、なかなか考えられています。

図6 サンリオキャラクターを作れるサービス
図6 サンリオキャラクターを作れるサービス

おすすめ記事

記事・ニュース一覧