週刊Webテク通信

2015年6月第2週号1位は、UXデザインの試作にAfterEffectsを使うことのススメ、気になるネタは、GitHubが日本法人「ギットハブ・ジャパン」設立

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

1. Fitting After Effects Into A UX Workflowhttp://www.smashingmagazine.com/2015/06/03/fitting-after-effects-into-a-ux-workflow/

UXデザインのワークフローにおいて、Adobe After Effectsを使うことを推奨した記事です。

実際のユーザーインターフェイス開発に入る前にAfterEffectsで動くサンプルを素早く作ることが、開発チームとクライアントでの確認作業やユーザーテストにおいて役に立つということです。

PhotoshopやIllustrator、またはSketchから書き出したデザインデータを元に、After Effectsに読み込んで動きを付けるワークフローが簡単に紹介されていました。

図1 UXデザインの試作にAfter Effectsを使うことのススメ
図1 UXデザインの試作にAfter Effectsを使うことのススメ

2. Minimalism in Web design: past and futurehttp://thenextweb.com/dd/2015/06/03/minimalism-in-web-design-past-and-future/

Webデザインにおけるミニマリズムの過去と未来について解説した記事です。

ミニマルなWebデザインの基本としては、以下の項目が挙げられます。

  • ホワイトスペース
  • 高精細な写真
  • 劇的なタイポグラフィ
  • 目立つコントラスト
  • シンプルなナビゲーション
  • 見た目のバランス

これらを受けて、Webデザインにおけるミニマリズムの未来は、以下のように進化するだろうということです。

  1. 最低限のテクスチャ
  2. 色の反転
  3. よりインタラクティブな効果
  4. 対称性にこだわらない
  5. 使いやすさの向上
図2 Webデザインにおけるミニマリズムの過去と未来
図2 Webデザインにおけるミニマリズムの過去と未来

3. The PLAY button is not optical alignment - Mediumhttps://medium.com/@erqiudao/the-play-button-is-not-optical-alignment-4cea11bda175

丸い図形の中に三角形が入っているプレイボタンの場合、二つの図形を単純に上下センター揃えしても揃わないよということを解説しています。

では、どう揃えればいいのかということがわかりやすく説明されており、画像を見るだけで理解できると思います。

図3 丸い図形内に要素の入ったボタンの位置揃えについて
図3 丸い図形内に要素の入ったボタンの位置揃えについて

4. Aol.com redesigns mobile-first | Webdesigner Depothttp://www.webdesignerdepot.com/2015/06/aol-com-redesigns-mobile-first/

Aol.comサイトがモバイルファーストのデザインにリニューアルされるということで、そのポイントについて解説した記事です。

実際のサイトを訪れると、まだリニューアルオープンしていないのですが、上部にリニューアル後のサイトへのリンクがありました。リニューアル前もレスポンシブなのですが、リニューアル後は画像とシェアボタンが目立ったレイアウトになっており、テキストが大幅に減っているのが興味深いところです。

図4 Aol.comサイトのモバイルファーストのリニューアルについて
図4 Aol.comサイトのモバイルファーストのリニューアルについて

5. New CSS Tricks And Snippets That You Should Knowhttp://www.designyourway.net/blog/design/new-css-tricks-and-snippets-that-you-should-know/

CSSを使ったテクニックを、コード共有サイトのCodePenからまとめています。メニューやフォームでよく使われそうなユーザーインターフェイスの例が31個紹介されていました。

右上の「Edit on CODEPEN」のところからCodePenに移動して、コードを変更して確認することが可能です。

図5 CSSを使ったUIのコーディング例いろいろ
図5 CSSを使ったUIのコーディング例いろいろ

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

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

The best apps. Better together. - Zapierhttps://zapier.com/

Yahoo! Pipesが9月末で終了するそうです。今でも使っている人がそれなりにいるようで残念に思います。そこで代わりとなりそうなWebサービスを調べていて、見つけたのがZapierです。複数のWebアプリを連携させるIFTTTのようなサービスです。

使用例のムービーは、フォーム作成・管理サービスWUFOOのフォームで入力された日時と予定が、Google カレンダーに自動で登録されるという内容でした。Twitter、Facebook、Evernote、Dropboxといったメジャーなサービスをはじめ、400種類以上のWebアプリに対応しています。

RSSも扱えるのですが、入力と出力に1つのRSSしか扱えませんし、新たにフィードが追加された場合というトリガーしかないようです。ということで、Yahoo! Pipesの使用用途に多かったフィードの合体などはできないと思います。

5つの自動処理(IFTTT風に言うとレシピ)までが無料で、有料プランは4段階用意されています。IFTTTより対応サービスが多く、併用すると便利かもしれません。

図6 複数のWebアプリを連携させるサービス・Zapier
図6 複数のWebアプリを連携させるサービス・Zapier

おすすめ記事

記事・ニュース一覧