週刊Webテク通信

2015年2月第2週号1位は、マテリアルデザインの原則と実際のアプリにどう適用したかの解説、気になるネタは、“正方形”ディスプレイという新提案はアリなのか?

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

1. An exploration in Material Design by feedly - Mediumhttps://medium.com/@abrodo/an-exploration-in-material-design-by-feedly-8c1a1cbdfdcd

ニュースリーダー「Feedly」のAndroidアプリを、マテリアルデザインにリニューアルした経験を元にまとめられた記事です。

以下の項目に分けて、マテリアルデザインの原則と、それをどうFeedlyのアプリに適用したかを解説しています。

  • 触れられるインターフェイス
  • 印刷物のようなデザイン
  • 意味のある切り替わりの効果(トランジション)
  • アダプティブデザイン

画面の実例も豊富で参考になります。

図1 マテリアルデザインの原則と実際のアプリにどう適用したかの解説
図1 マテリアルデザインの原則と実際のアプリにどう適用したかの解説

2. Daily Material Design Inspiration - MaterialUphttp://www.materialup.com/

マテリアルデザインの参考になるインターフェイスデザインなどのショーケースです。このサイト自体もマテリアルデザインとなっています。

「コンセプト/モバイルアプリ/イラスト/Webサイト」のカテゴリに分けられています。動きのあるものは、アニメーションGIFで紹介されていて分かりやすいです。

図2 マテリアルデザインのショーケース
図2 マテリアルデザインのショーケース

3. 7 simple rules for mobile typography | Webdesigner Depothttp://www.webdesignerdepot.com/2015/02/7-simple-rules-for-mobile-typography/

モバイル向けデザインにおけるタイポグラフィのルールを解説しています。

  1. スペースを与える
  2. 基準を決める
  3. 離し過ぎず詰め過ぎず
  4. ちょうどよい具合を探す
  5. 行頭を揃えて行末を揃えない
  6. コントラストを控え目にする
  7. 場合によってはトラッキング(字送り)を調整する
図3 モバイル向けデザインでのタイポグラフィのルール
図3 モバイル向けデザインでのタイポグラフィのルール

4. 8 Handy Extends and Mixins for Sass - Inspirational Pixelshttp://inspirationalpixels.com/tutorials/extends-and-mixins-for-sass

Sass(CSSを拡張したメタ言語)の初心者向けに、ExtendとMixinの8つのコードを提供しています。

Clearfixやトランジション、グラデーションなどのコードが紹介されていました。

図4 SassのExtendとMixinのコード例
図4 SassのExtendとMixinのコード例

5. 15 Most Creative "About Us" Pageshttp://www.pixel77.com/creative-about-us-pages/

独創的な「About Us」ページを15個紹介しています。⁠会社概要」⁠私たちにについて」といったページですね。

サイトの向こう側にいる人の顔が見える、人がいることを感じさせるという点で、⁠About Us」ページは重要とのことでした。

図5 独創的な「About Us」ページ15選
図5 独創的な「About Us」ページ15選

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

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

CSS Reference | Codropshttp://tympanus.net/codrops/css_reference/

Webデザインのテクニック記事などを数多く提供しているCodropsに、CSSの辞書的なコーナー「CSS Reference」が登場しました。

CSSのプロパティや疑似クラスなどの一覧から、各項目の詳細ページを見ることができます。詳細ページでは、基礎からの解説や豆知識的なもの、サンプル、ブラウザサポート状況など豊富な情報が掲載されています。

Codropsでおなじみの、その場でHTMLやCSSをいじって確認できる「ライブデモ」も埋め込まれており、CSSリファレンスの決定版といえるような充実度です。

図6 CSSの辞書的な「CSS Reference」
図6 CSSの辞書的な「CSS Reference」

おすすめ記事

記事・ニュース一覧