gihyo.jpサイトのロゴ

週刊Webテク通信

2013年5月第1週号1位は、フラットデザインのサイトの効果、気になるネタは、カルピス、写真を“リア充”に加工してくれる期間限定フォトサービス

2013-05-02

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

1. Flat design sites that work | Webdesigner Depothttp://www.webdesignerdepot.com/2013/04/flat-design-sites-that-work/

フラットデザインのサイトの効果について解説しています。

フラットデザインのポイントはシンプルとミニマリズムで、サイトの情報を伝えやすくなります。また、フラットデザインのシンプルさは、モバイル端末など異なるデバイスへの最適化が簡単だという面もあります。

当時は見過ごされていたけれど、2007年のMicrosoft Zuneのビジュアルでもクリーンでタイポグラフィベースのインターフェイスが形作られていたとのことです。そういったフラットデザインの要素を持ったものは以前からあったのですが、2013年になってデザイントレンドの中心となっています。

CSS3でグラデーションやボックスシャドウが使えるようになったのに、フラットデザインの流行でそういった効果がトレンドから外れてしまったのは皮肉だというようなことがこの記事のコメントにあったのですが、まさにわたしもそう感じていました。

図1　フラットデザインに関する記事
図1　フラットデザインに関する記事

2. 20 Incredibly useful tools and resources for Web designers - The Next Webhttp://thenextweb.com/dd/2013/04/12/25-incredibly-useful-tools-for-web-designers/

Webデザイナーのための便利なツールや情報の紹介です。ジェネレーターのようなツールや、役に立つ情報源などが取り上げられています。

プロトタイプを作るにはKeynoteを使うのがおすすめという興味深い記事もあります。

図2　Webデザイナーのための便利なツールや情報
図2　Webデザイナーのための便利なツールや情報

3. 25 Fresh Web Design Resources Toolshttp://smashinghub.com/25-fresh-web-design-resources-tools.htm

Webデザインに役立つツールやフレームワークなどを紹介しています。こちらはjQueryのプラグインなどJavaScript系のものが多めです。

フラットデザインのモックアップキットといったものもありました。フラットデザインのiPhoneやiPadに画面を合成したものを簡単に作れそうです。

図3　Webデザインに役立つツールやフレームワークなど
図3　Webデザインに役立つツールやフレームワークなど

4. Retina Web Design - Info, Tools And Techniqueshttp://www.designresourcebox.com/retina-web-design-info-tools-and-techniques/

Retina対応のWebデザインに関するツールやテクニックなどを解説しています。

HTMLとCSSの記述のサンプルのほか、以下の方法についても説明してあります。

  • JavaScriptを使う方法
  • アイコンフォントを使う方法
  • SVGを使う方法
図4　Retina対応Webデザインのツールやテクニック
図4　Retina対応Webデザインのツールやテクニック

5. 25 Examples of Websites with Transparent Backgrounds : Dezign Matterzhttp://www.dezignmatterz.com/25-examples-of-websites-with-transparent-backgrounds/

透明度を使ったWebデザインのギャラリーです。

昔のWebデザインでは使いにくかった手法ですし、うまく使えば非常に印象的になると思います。

図5　透明度を使ったWebデザインのギャラリー
図5　透明度を使ったWebデザインのギャラリー

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

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

ジンジャー｜無料英文チェックソフト｜ネイティブ表現｜仕事効率http://www.getginger.jp/

Ginger（ジンジャー）は、スペルや文法だけでなく、文脈を解析して正しい英文に直してくれるサービスです。「⁠知らずにやってる恥ずかしい英語のミスまできちんと直せる新しい英文チェッカー」とのことで、オンライン上の大量の英語のフレーズを元に文脈解析するシステムを開発したそうです。

実はこれ、Webサービスとして使えるのは機能のお試し用で、本来はダウンロードして使うものでした。Chrome、Safari、Firefoxの拡張機能版と、Microsoft Office対応版があり、各アプリケーション上での英文入力時に利用することができます。

Gingerを使用するときにはインターネット接続が必要とのことで、英文修正の処理はネット経由で行っているようです。なお、プレミアムプロダクトというのがあって、テキストの読み上げ機能と、Ginger校正機能英語学習機能が追加されるようです。

図6　英文チェックのサービス＆ツール
図6　英文チェックのサービス＆ツール

おすすめ記事

記事・ニュース一覧