週刊Webテク通信

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

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

ネットで見かけた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 サンリオキャラクターを作れるサービス

    今週の気になるWebネタ

    オーディオブックの定額聴き放題サービス「Audible」が日本上陸 月額1500円 - ITmedia eBook USERhttp://ebook.itmedia.co.jp/ebook/articles/1507/14/news074.html

    音楽定額聴き放題サービスがやっとでスタートした日本に、今度はオーディオブック聴き放題サービスが上陸しました。Amazonが以前買収したサービスとのことで、Amazonアカウントが使えるところが普及のポイントになりそうです。

    オーディオブックは日本ではあまり普及していないようですが、何かのきっかけで流行る可能性はあると思います。シニア向けにもいいのかもしれません。コンテンツに落語があるのも興味深いですね。

    音楽聴き放題、オーディオブック聴き放題、雑誌読み放題などの「○○放題」サービスが増えていくと、それらが合体した○○放題パックとかも出てきそうです。最終的にはApple放題 vs Google放題 vs Amazon放題の対決になっていくのでしょうか…?

著者プロフィール

芦之由(あしのよし)

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

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

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

コメント

コメントの記入