週刊Webテク通信

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

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

ネットで見かけた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」

今週の気になるWebネタ

4Kよりコッチが欲しいかも:“正方形”ディスプレイという新提案はアリなのか?――「FlexScan EV2730Q」徹底レビュー (1/4) - ITmedia PC USERhttp://www.itmedia.co.jp/pcuser/articles/1502/05/news098.html

EIZOの26.5型液晶ディスプレイがついに発売になったようです。1920×1920ピクセルの表示解像度を持つ正方形画面のディスプレイです。

調べてみると,スクエア液晶ディスプレイと銘打った正方形画面のディスプレイは既存商品でもあったのですが,スペックを見てみると19型で1280×1024ピクセルだったりして,アスペクト比1:1というのが珍しいようでした。

やはりDTPで印刷物のデザインをするときに便利そうですが,Web制作においてもメリットは大きそうです。スマートフォンを使って縦サイズで写真や動画を撮ることも増えているので,そういった素材を大きなサイズで見ることもできてよさそうです。

なお,イラストに描いたほぼ正方形のデジカメは,最近発表されたキヤノンのPowerShot N2というものです。ポラロイドのアクションカメラ「Cube」も正方形ですね。

著者プロフィール

芦之由(あしのよし)

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

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

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

コメント

コメントの記入