週刊Webテク通信

2013年3月第3週号1位は、スキューモーフィックからフラットデザインへのトレンドの変化について、気になるネタは、Google Reader終了ショックの波紋〜代替サービスが続々と名乗りを上げる

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

1. Skeuomorphic vs Digital interfaces and what will 2013 bring us - Designmodohttp://designmodo.com/skeuomorphic-vs-digital-interfaces/

スキューモーフィックデザイン(現実世界のモノを模したデザイン)からフラットデザインにトレンドが移っていることに関する記事です。

なお、以前の記事ではスキューアモーフィズム(skeuomorphism)と呼んでいたのですが、今回は記事に合わせてスキューモーフィック(skeuomorphic)と表記します。記事中「デジタルレプリカ」というフレーズが出てきたのですが、これはスキューモーフィック/スキューアモーフィズムをよく現した言葉だと思いました。

2012年はモバイルアプリやWebアプリが多く生まれ、紙の本を模した電子書籍のようなスキューモーフィックデザインデザインが流行りました。もちろんアップルによるデザインの影響も大きかったようです。

しかし、単にデザイン上の装飾として影やテクスチャーを多用したケースも多く、現実の製品のインターフェイスをデジタルに置き換えることにより制限が生まれてしまうというデメリットもあります。

そこで、2013年はデジタルインターフェイス/フラットデザインの年ということです。スキューモーフィックは、一時的で過ぎ去ったトレンドとの記述もありますが、大事なことはトレンドに流されずに利用されるシーンに合ったインターフェイスを使うということのようです。

図1 スキューモーフィックからフラットデザインへのトレンドの変化
図1 スキューモーフィックからフラットデザインへのトレンドの変化

2. How Designers Use Color to Influence Consumers - You The Designerhttp://www.youthedesigner.com/2013/03/14/how-designers-use-color-to-influence-consumers/

デザイナーの色の選び方についてまとめた記事です。

それぞれの色がどういう用途に適しているか、どういった印象を与えために使われるかが解説してあります。

図2 デザイナーの色の選び方について
図2 デザイナーの色の選び方について

3. 33 Amazing Flat Design Website for Your Inspiration | Crazy Pixelshttp://crazypixels.net/33-amazing-flat-design-websites-for-your-inspiration/

フラットデザインのWebサイトのギャラリーです。

パネルが並んだデザインが多く、三角形や六角形のパネルが並んだレイアウトが目をひきました。

図3 フラットデザインのWebサイトのギャラリー
図3 フラットデザインのWebサイトのギャラリー

4. CSS Front-end Frameworks with comparison - By usabli.cahttp://usablica.github.com/front-end-frameworks/compare.html

CSSフレームワークの比較表です。

対応ブラウザやLESS/SASSの対応状況、対応デバイス(PC/スマートフォン/タブレット⁠⁠、ライセンスなどが簡潔にまとめてあります。

図4 CSSフレームワークの比較表
図4 CSSフレームワークの比較表

5. 25 Most Useful Chrome Extensions for Web Developers | Artatm - Creative Art Magazinehttp://artatm.com/2013/02/25-useful-chrome-extensions-for-web-developers/

Web制作に役立つChromeの拡張機能を各種紹介しています。コーディングに関するものが多いようです。

ページ上の文字の書体やサイズ、色などが調べられる「WhatFont」というのが便利ですね。

図5 Web制作に役立つChromeの拡張機能いろいろ
図5 Web制作に役立つChromeの拡張機能いろいろ

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

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

AP Social Media Image Makerhttp://www.autreplanete.com/ap-social-media-image-maker/

各種ソーシャルメディア用の画像を作成できるWebサービスです。

Facebookのカバー画像/プロフィール画像、Twitterのヘッダー画像/プロフィール画像などを、指定のサイズで作ることができます。いちいちサイズを調べる必要もなく、簡単に画像を作成できるので便利です。

アップロードした画像をリサイズ、クロップするほか、ちょっとした加工などもできるようになっています。何ピクセルのサイズで作るのかが表記されているので、⁠Twitterのアイコンサイズって何ピクセルだっけ?」といったことを調べる際にも利用できそうです。ひとつの画像から複数のソーシャルメディア用画像が一気に作れるのかと思ったのですが、そういう機能はありませんでした。

図6 各種ソーシャルメディア用の画像作成サービス
図6 各種ソーシャルメディア用の画像作成サービス

おすすめ記事

記事・ニュース一覧