週刊Webテク通信

2014年3月第2週号 1位は，Webデザイナーのためのデザイン素材や情報源のまとめ，気になるネタは，Gunosyアプリが大幅アップデート！

Webテク, Webデザイン, Web広告, GIF, アニメーション, ポートフォリオ, HTML5

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

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

1. 10 Best Design Resources | Jillianastasiahttp://jillianastasia.com/best-design-resources/

Webデザイナーのためのデザイン素材や，インスピレーションを得られる作品や情報などを探せるサイトをまとめた記事です。

ノウハウや情報を与えてくれるブログや，アイコンやベクター素材などが入手できるサイト，デザインの参考になりそうなギャラリーサイトなどが紹介されています。

バナー広告を社名などで探せるMoatというサイトが面白いです。海外のバナー広告は日本のものとはちょっとテイストが違いますが，それでも参考になると思います。

図1　デザイナーのためのデザイン素材や情報源のまとめ

図1　デザイナーのためのデザイン素材や情報源のまとめ

2. Creative Uses of Animated GIFs to Present UI Designshttp://line25.com/articles/creative-uses-animated-gifs-present-ui-designs

UIデザインを見せるために，GIFアニメを利用している事例を紹介しています。

たしかにどれも操作方法がよくわかって，訴求力がある画像ですね。

パソコンやモバイルデバイスの操作画面の動きを見せるものや，写真の一部だけが動くシネマグラフと呼ばれるものなど，最近GIFアニメが使われるケースが増えているようです。

FacebookではGIFアニメを貼っても動かないのですが，Google+では動きます。Pinterestも最近対応しました。Pinterestでは一覧表示のときは動かないのですが，画像上のボタンを押すとアニメーションするようになっています。

図2　UIデザインを見せるために，GIFアニメを利用している事

図2　UIデザインを見せるために，GIFアニメを利用している事

3. Discovering Sketch ? Design / UX ? Mediumhttps://medium.com/design-ux/25545f6cb161

Web制作用のデザインツール「Sketch」を詳しく解説した記事です。

Fireworksの開発終了が話題になったときに，乗り換え候補の筆頭として有名になったSketchについて，細かく解説しています。

ちなみに，この記事はMedium上に投稿された記事です。Mediumには，Webデザインに役立つコレクション（Pinterestのボードのようなもの）もあって，Web Design Technique，Design/UXなどのコレクションをわたしはフォローしています。

図3　Webデザインツール「Sketch」を詳しく解説

図3　Webデザインツール「Sketch」を詳しく解説

4. Showcase of Creative Personal Portfolio Websites | Splashnology.comhttp://www.splashnology.com/article/creative-personal-portfolio-websites/11772/

クリエイティブなポートフォリオサイトのギャラリーです。

最近この手のギャラリー記事は，実際にサイトを訪れてスクロールしてみないと，どんなサイトだか分かりませんね。それだけ，一見してシンプルで，スクロールに合わせてコンテンツが展開するサイトが増えたということでしょう。

図4　クリエイティブなポートフォリオサイトのギャラリー

図4　クリエイティブなポートフォリオサイトのギャラリー

5. Vine: The Visual Amuse-Bouche Helping Brands Build Buzz - Business 2 Communityhttp://www.business2community.com/social-media/vine-visual-amuse-bouche-helping-brands-build-buzz-0796681

Vineに話題となるようなコンテンツを上げて，マーケティングに利用しようといった記事です。

Visa，Intelなど，ビジネス目的でVineを使っている企業の実例が見られて興味深いです。

図5　ビジネスでVineを使っている実例いろいろ

図5　ビジネスでVineを使っている実例いろいろ

そのほか，最近の記事の中から，デザイン素材を紹介した記事を3つ紹介します。

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

Glyphr Studio, the free HTML5 based font editorhttp://glyphrstudio.com/

ブラウザ上で動くフォントエディターです。HTML5ベースで作られています。まだベータ版ですが，ブラウザだけでここまでできるのかと話題になっていますね。

ちょっと使ってみただけですが，ベジェ曲線の調整はストレスなく行えました。しかし，アンカーポイントの追加や削除がボタンからしかできないなど，Illustratorに慣れている人には，まだまだ操作性が発展途上に感じられるでしょう。

作ったフォントはTTXという形式のXMLファイルで保存され，TTXというツールを使ってOpenTypeフォントを生成できるそうです。

図6　ブラウザ上で動くフォントエディター

図6　ブラウザ上で動くフォントエディター

今週の気になるWebネタ

Gunosyアプリが大幅アップデート！ よりニュースアプリらしいUIに変更http://weekly.ascii.jp/elem/000/000/203/203934/

あなたの欲しいニュースを届けるというコンセプトのGunosyですが，そのモバイルアプリが大幅アップデートして話題となっています。

Gunosyは，FacebookやTwitterでのソーシャルのつながりからユーザーの好みを分析し，その人が興味を持ちそうなニュースを提供するところがネットのヘビーユーザーを中心に支持を受けています。しかし，今回のアプリから，いろんなジャンルのニュースが見られるようになり，ユーザーに最適化されたニュースはたくさんあるジャンルの一つみたいな扱いになりました。

より多くのユーザー，特にネットのヘビーユーザーじゃない層をターゲットにしたアップデートなのでしょうが，ネット上では賛否両論というか「否」のほうが目立っています。似たようなアプリが他にあるので，独自性が薄れたところを残念がる声も多いようです。

メールかブラウザで見る朝刊・夕刊は今までどおりですし，朝刊・夕刊を見るのに特化したGunosy LITEというアプリもあるので，ネガティブな方向で騒がれすぎな気もしますが，その分みんなGunosyへの期待が大きいということなのでしょう。

Webテク, Webデザイン, Web広告, GIF, アニメーション, ポートフォリオ, HTML5

著者プロフィール

アシカガコウジ

フリーのWebデザイナー＆ライター。ポッドキャスト「アシカガCAST」でデジタル活用のヒントを発信中。シャープMZ-80Bからのパソコンユーザーで，Macintosh IIciからのMacユーザーでApple好き。Webテク情報やツール（ソフトウェア）の案内，デジタル活用情報をまとめた「アシカガノオト」をNotionで公開しています。

http://bit.ly/ashikaganote