週刊Webテク通信

2013年2月第2週号 1位は,最近流行しているフラットデザインについて,気になるネタは,スワイプ1つでメールを未来に送れるMailbox

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

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

1. Flat Design: Can You Benefit from the Trend? - Designmodohttp://designmodo.com/flat-design/

最近流行している「フラットデザイン」について解説した記事です。

フラットデザインとは,ドロップシャドウ,ベベル,エンボス,グラデーションなどを極力使わず,現実世界のものを模してリアルに表現したり立体感を出したりしないデザインのことです。余計な装飾を使わずシンプルにメッセージを伝えたり商品を宣伝することができます。

数年前にポピュラーだったものが復権してきており,Webサイトとアプリ両方のデザインで流行の兆しがあります。Windows 8とGoogleのデザインが,フラットデザインの代表的なものでしょう。

Flat Design(フラットデザイン)のほか,Minimal Design(最小限のデザイン)⁠Honest Design(純粋なデザイン)などと呼ばれており,マイクロソフトは,Authentically Digital(本物のデジタル)と呼んでいるそうです。

最近,Yahoo! Japanが検索サービスのビジュアルを変更しましたが,これもフラットデザインの流れに乗っているようです。

図1 フラットデザインについて

図1 フラットデザインについて

2. Crazy Website Layout ? maximum creativity - The DesignPin Bloghttp://designpin.co/crazy-website-layout-maximum-creativity/

「Crazy」と呼ばれるほど,非常にクリエイティブなWebサイトを15個紹介しています。

グラフィックスが作り込まれているのもそうなんですが,動きの部分でも細部までこだわって作ってあり,センスが光るサイトばかりです。

図2 非常にクリエイティブなWebサイトいろいろ

図2 非常にクリエイティブなWebサイトいろいろ

3. 25 Examples Of Responsive Website Design Done Right | Who Design Todayhttp://whodesigntoday.com/25-examples-of-responsive-website-design-done-right/

レスポンシブWebデザインがうまく使われているサイトのギャラリーです。

iOSデバイスごとのメディアクエリの設定方法も紹介されています。

図3 レスポンシブWebデザインのギャラリー

図3 レスポンシブWebデザインのギャラリー

4. CSS3 And HTML5 Snippets You Should Be Aware Ofhttp://www.designyourway.net/blog/resources/css3-and-html5-snippets-you-should-be-aware-of/

CSS3とHTML5のテクニックを数多く紹介しています。

取り上げられているテクニックの多くは,コード共有サイトでシェアされているもので,動作確認やコードの確認が簡単にできます。

図4 CSS3とHTML5のテクニックいろいろ

図4 CSS3とHTML5のテクニックいろいろ

5. jQuery Plugins for Responsive Web Design - The DesignPin Bloghttp://designpin.co/jquery-plugins-for-responsive-web-design/

レスポンシブWebデザイン関連のjQueryプラグインを8個紹介した記事です。レスポンシブ対応の画像スライダーやフォトギャラリーなどが紹介されています。

jQueryのプラグインが探せるサイトも2つ紹介されていました。

図5 レスポンシブWebデザイン関連のjQueryプラグイン集

図5 レスポンシブWebデザイン関連のjQueryプラグイン集

そのほか,最近の記事の中から,じっくり読みたい記事3つを紹介します。

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

Google Driveを利用しているサードパーティアプリケーション専用のストア(のようなもの)ができたhttp://jp.techcrunch.com/archives/20130208google-integrates-third-party-web-apps-more-deeply-into-google-drive/

今回は,Google DriveとサードパーティによるWebアプリケーションの組み合わせについて紹介します。Google Driveの「作成」ボタンから「アプリを追加」というメニューが選べるようになり,対応アプリを簡単に探せるようになりました。

Google Driveに対応しているWebアプリを使うことで,作成したファイルをGoogle Driveに保存したり,Google Drive上のファイルをWebアプリで開くことができて便利です。

たとえば画像編集アプリのPixlr Editorをあらかじめ追加しておくと,Google Drive上で画像を開いた後「ファイル>アプリケーションで開く>Pixlr Editor」を選ぶだけで,その画像をPixlr Editor上で開いて編集できます。もちろん編集した画像はGoogle Drive上に保存できるというわけです。

デスクトップアプリで作ったローカルファイルのクラウドとの同期はDropboxで不満はない人が多いと思いますが,クラウド上で全てを完結させるというGoogle Drive+サードパーティアプリとの組み合わせには可能性を感じますね。

図6 Google Driveに追加できるアプリ一覧画面

図6 Google Driveに追加できるアプリ一覧画面

今週の気になるWebネタ

スワイプ1つでメールを未来に送れるMailbox | Lifehacking.jphttp://lifehacking.jp/2013/02/mailbox/

MailboxというiPhoneアプリがすごくよさそうでインストールしてみたのですが,まだすぐには使えないようで順番待ち状態です。インストールしたときは37万人待ち,現在27万人くらいとなっています。

Mailboxのサイトにあるムービーを見て,メールをToDoリスト的,あるいはGTD(Getting Things Done)的に使えそうで,しかもインターフェイスが洗練されていると感じてぜひ使ってみたいと思いました。しかし,起動したら出てくるのは数字だけで,何が起こったのか理解するのに時間がかかりました(英語ですし)⁠

メールを処理するのにサーバーを使っているので,アクセスが集中してダウンするのを防ぐため,順次利用できるようにしているようです。アプリを起動したら現在自分の前と後に何人待っているのかが表示されるようになっています。現状,順番待ちの人がこのアプリでできるのは数字を確認するだけです。そのままこのアプリをインストールしたことを忘れちゃう人もいそうですね。

著者プロフィール

芦之由(あしのよし)

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

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

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

コメント

コメントの記入