週刊Webテク通信

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

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

ネットで見かけた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 各種ソーシャルメディア用の画像作成サービス

今週の気になるWebネタ

Google Reader終了ショックの波紋?代替サービスが続々と名乗りを上げる -INTERNET Watchhttp://internet.watch.impress.co.jp/docs/news/20130315_591887.html

いまネット界隈では,Google Reader終了の話題でもちきりです。iGoogleの終了が発表されたとき以上に騒がれているように感じます。iGoogleは今年の11月1日で終了予定なのに対し,Google Readerは7月1日に終了とのことで,ずいぶんと急な発表でした。

Google Readerはフィードを読むためのツールとしてだけでなく,他のニュースリーダー系のサービス/アプリと連携するためのフィードを貯めておく場所としても利用されていました。まさにRSSリーダー界のリーダー(Leader)的存在だっただけに,なくなると困ったことになりそうです。

とはいえ,新しいスタンダードとなる存在が出てくると思うので,Google Reader終了までにはなんとかなるんじゃないかとわたしは楽観しています。Feedlyが他社アプリのAPIアクセス受け入れを表明したというニュースもありました。購読するフィードを整理するいい機会だと思いつつ,移行先をじっくり探しても大丈夫だと思いますよ。

著者プロフィール

芦之由(あしのよし)

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

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

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

コメント

コメントの記入