週刊Webテク通信

2013年3月第4週号1位は、フラットデザインとメトロUIについての解説と実例、気になるネタは、グーグル、メモ作成サービス「Google Keep」リリース

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

1. Flat Design VS Metro UI Trend Exampleshttp://smashinghub.com/flat-design-vs-metro-ui-trends-examples.htm

フラットデザインとメトロUIについての解説と実例をまとめた記事です。

以下の項目と、実例サイトのギャラリーが紹介されています。

  • フラットデザインのコンセプト
  • フラットデザインのテクニック
  • UI要素とアイコンをシンプルに
  • フラットな階層構造
  • メトロUIのコンセプト
  • メトロUIの肯定的な側面
  • メトロUIの必須条件
  • タイポグラフィ
図1 フラットデザインとメトロUIについて
図1 フラットデザインとメトロUIについて

2. A simple (and very rough) responsive table solution | Max Designhttp://www.maxdesign.com.au/2013/03/22/simple-responsive-table/

レスポンシブに対応したテーブルの作り方の紹介です。横幅が狭い場合は、シンプルに横スクロールさせることで対応しています。

画面に入りきれずスクロールさせる場合に、続きがあることが分かるように端を薄くフェードさせてあるのがポイントですね。CSSのグラデーションで簡単に実装しています。

図2 レスポンシブに対応したテーブルの作り方
図2 レスポンシブに対応したテーブルの作り方

3. 30 Free CSS Libraries and Resourceshttp://smashinghub.com/free-css-libraries-and-resources.htm

CSSライブラリなどのリンク集です。

  • ボタン
  • アイコンフォント
  • グリッドシステム
  • CSSのコードスニペット

などが紹介されています。

図3 CSSライブラリなどのリンク集
図3 CSSライブラリなどのリンク集

4. 30 Websites Featuring a Horizontal Stripe Layouthttp://line25.com/articles/30-websites-featuring-a-horizontal-stripe-layout

コンテンツが水平方向に区切られた、ストライプ状のWebデザインのギャラリーです。

シングルページWebデザインでよく使われているパターンで、要素ごとに色を変えたカラフルなストライプになっているサイトもあります。

図4 ストライプ状のWebデザインのギャラリー
図4 ストライプ状のWebデザインのギャラリー

5. Crafty Multilayerness - Scrapbook Style in Web Design - Designmodohttp://designmodo.com/scrapbook-website-design/

スクラップブックのように、切り貼りしたようなイメージが使われたWebデザインのギャラリーです。

紙の質感が感じられるアナログっぽいデザインが多いですが、意外とフラットな感じにまとめられているものもありました。

図5 スクラップブックスタイルのWebデザインのギャラリー
図5 スクラップブックスタイルのWebデザインのギャラリー

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

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

Chrome World Wide Mazehttp://chrome.com/maze/

Googleが提供する「World Wide Maze」は、任意のWebページの画面を立体化し、玉を転がすゲームを遊べるというサービスです。

パソコンのChromeとモバイルデバイスのChromeとを連動させ、スマートフォンなどをコントローラーとして操作する仕組みになっています。iOSとAndroidに対応しています。

最初やってみたとき、iPhoneを傾けるのに手間取っていると、⁠キーボードでも操作できます」といった表示が出てきて、実際キーボードでも遊べました。しかし、やっぱりスマートフォンを傾けて操作する方が楽しいですね。

モバイル版のChromeアプリをインストールしてもらうためのプロモーションだと思うのですが、それにしても手が込んでいます。

図6 Webページを立体迷路にするゲーム「World Wide Maze」
図6 Webページを立体迷路にするゲーム「World Wide Maze」
図7 GoogleのWebページを迷路にしてプレイしているところ
図7 GoogleのWebページを迷路にしてプレイしているところ

おすすめ記事

記事・ニュース一覧