週刊Webテク通信

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

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

ネットで見かけた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ページを迷路にしてプレイしているところ

今週の気になるWebネタ

グーグル,メモ作成サービス「Google Keep」をリリース - CNET Japanhttp://japan.cnet.com/news/service/35029752/

Google リーダーの終了発表でひと騒動起こしたGoogleが,今度は「Google Keep」というオンラインメモサービスをリリースしました。モバイルデバイスからクラウドにメモするのがメインのツールのようですが,今のところAndroid用アプリとブラウザ版のみで,iOS版がありません。

Evernoteと競合するという声もあるのですが,非常にシンプルな機能しかなく,ちょっと拍子抜けな感じを受けました。Evernoteまでの機能はいらないのでこっちでいいやという人もいると思うのですが,Evernoteと直接競合するようなプロダクトではないですよね。

そこであらためて気づいたのですが,Google KeepやGoogle Docsを含めたGoogle Driveこそが,Evernoteと競合するものなんですね。PDFが登録できたり,画像内の文字はOCR処理されるといったEvernoteの便利な機能は,Google Driveでも実現(OCRは日本語未対応だったはず)しています。あとは,Webページを簡単にクリップして登録する機能もGoogle Driveに欲しいところかな。

著者プロフィール

芦之由(あしのよし)

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

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

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

コメント

コメントの記入