週刊Webテク通信

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

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

ネットで見かけた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

今週の気になるWebネタ

GitHubが日本法人「ギットハブ・ジャパン」設立 日本語テクニカルサポートで法人向け導入を促進 (1/2) - ITmedia ニュースhttp://www.itmedia.co.jp/news/articles/1506/04/news133.html

GitHubの日本法人「ギットハブ・ジャパン」が設立されました。このニュースのポイントは何といっても,GitHubのカタカナ表記は「ギットハブ」だと広く知らしめたことじゃないかと個人的には思います。

わたしも「ギットハブ」だと知ってはいたのですが,口に出したことはありません。GIFを「ジフ」と呼んでいることもあって,違和感を持っているのも事実でした。GIFを「ジフ」「ギフ」か論争は昔ありましたが,ギフだと岐阜をイメージするところが日本ではなじまない理由ではないでしょうか。

ちなみにわたしはGitHubの有料ユーザーではあるのですが,まったく活用できていません。しかし,GitHubでみなさんが共有しているフレームワークやプラグインなどに助けられているので,GitHubの継続を応援するつもりで課金を続けている面もあります。

著者プロフィール

芦之由(あしのよし)

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

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

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

コメント

コメントの記入