週刊Webテク通信

2013年6月第1週号 1位は,WebデザインのワークフローにおけるIllustratorの役割,気になるネタは,Google Glass では顔認識アプリを当面は認めない方針,プライバシー保護が前提

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

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

1. Adobe Illustrator's Role in a Web Design Workflow - Tuts+http://hub.tutsplus.com/articles/adobe-illustrators-role-in-a-web-design-workflow--vector-12062

Webデザインのワークフローにおける,Adobe Illustratorの役割について解説しています。

パソコン,タブレット,スマートフォンと様々な画面サイズに向けたデザインが求められる今,モジュラー化されたワークフローが必要であり,Illustratorが活躍する場も増えるといった内容でした。

モジュラー化されたワークフローの要素としては,以下の3つが挙げられています。

  • ワイヤーフレーム
  • 見た目の美しさ
  • プロトタイピング

中でも,ワイヤーフレーム作成に,Illustratorはベストマッチとされています。

また,レスポンシブなサイト,Retinaディスプレイへの対応などから,解像度に依存しないベクターベースのIllustratorの重要性は増しているとのことです。

SVG形式のグラフィックスの書き出しや,Webフォント化するためのベクター形式のアイコン作成など,今後のWebデザインにおいてIllustratorの使用頻度は上がりそうです。

図1 WebデザインのワークフローにおけるIllustratorの役割

図1 WebデザインのワークフローにおけるIllustratorの役割

2. Is the New Google Interface Flat? - Designmodohttp://designmodo.com/google-interface-flat/

最近リニューアルしたGoogle+やGoogle マップのデザインを元に,フラットデザインやデザインのトレンドについて考察した記事です。

Googleの最近のデザインは,フラットデザインの要素を多く取り入れつつも,必要に応じてグラデーションやドロップシャドウをわずかに加えた,ほぼフラットデザイン(Almost flat design)とのことです。

ユーザーのクリックやタップに対する反応を分かりやすくするために,フラットでない要素をちょっとだけプラスしているということですね。

図2 Googleの新しいデザインはフラットか?

図2 Googleの新しいデザインはフラットか?

3. Simple Icon Hover Effects | Codropshttp://tympanus.net/codrops/2013/05/30/simple-icon-hover-effects/

アイコンへロールオーバーしたときに,アニメーション効果を加えるチュートリアルです。いろいろなパターンが用意されています。

アイコンフォントを使ったフラットデザインのボタンに,シンプルながら印象的な効果が加わっており,そのまま使いたいようなサンプルばかりです。

図3 シンプルなロールオーバー効果いろいろ

図3 シンプルなロールオーバー効果いろいろ

4. Freebie: 45 Flat UI Design Elements | Freebies | Graphic Design Junctionhttp://graphicdesignjunction.com/2013/05/flat-design-ui-elements/

フラットデザインのフリーのUI素材のリンク集です。

PSDファイル中心で,一部ベクターデータもあります。

図4 フラットデザインのUI素材集

図4 フラットデザインのUI素材集

5. 19 Inspiring Examples of Text Over Images in Web Design | Inspirationhttp://webdesignledger.com/inspiration/19-inspiring-examples-of-text-over-images-in-web-design

画像の上にテキストが載ったイメージを使ったWebデザインのギャラリーです。

文字の可読性を考えて,写真をぼかしたり半透明のオブジェクトを重ねたりといった処理が,参考になりそうです。

図5 画像の上に文字が重なったWebデザインのギャラリー

図5 画像の上に文字が重なったWebデザインのギャラリー

そのほか,最近の記事の中から,気になる記事を紹介します。

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

15 Best Free Online Image Editorshttp://inspiretrends.com/free-online-image-editors/

今回は,画像編集ツールのWebサービスを15個まとめた記事を紹介します。最近はモバイルデバイスの画像編集アプリも充実していますが,パソコンで作業できるこの手のツールもまだまだ需要はありそうです。

WebデザインなどのプロはもちろんPhotoshopなどを使えばいいのですが,普通の人がソーシャルメディアにアップする前にちょっと画像をいじりたいといった場合には,こういったオンラインツールが主流になっていくんじゃないかと思います。

わたしは最近,Fotorを人に薦めています。登録などなくフリーで使え,インターフェイスもシンプルで分かりやすいです。複数の写真を並べた組写真を作れるのも,ソーシャルメディアで利用する画像を作るのに便利です。

図6 オンラインの画像編集ツールのリンク集

図6 オンラインの画像編集ツールのリンク集

今週の気になるWebネタ

Google Glass では顔認識アプリを当面は認めない方針,プライバシー保護が前提 - Engadget Japanesehttp://japanese.engadget.com/2013/06/01/google-glass/

Google Glassでは,プライバシー保護のため当面は顔認識を使えないそうです。⁠あー,この人の名前が思い出せない」という「誰だっけ問題」を解決するのに,Google Glass&顔認識アプリは最適だと期待されただけに残念な気がします。

Facebookの自分の友達限定で名前を出すようにするとかじゃダメですかね。芸能人を顔認識して,公式ブログやグッズ販売サイトに誘導するなんてのは,アリかもしれません。もちろん芸能人をたまたま見かける機会は少ないでしょうが,ポスターや雑誌などからも顔認識できるでしょう。

将来みんながGoogle Glassをしているとしたら,人と会った際には顔認識しなくてもお互いのGoogle Glass同士で情報をやり取りして,名前や近況が分かるような気の利いた機能が付くのかもしれません。

著者プロフィール

芦之由(あしのよし)

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

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

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

コメント

コメントの記入