【連載】インタラクションデザインとは? ③ツール編

UX Booth

モノづくりのヒントになるような記事をお届けします。

この記事はThe UX Boothからの翻訳転載です。配信元または著者の許可を得て配信しています。

Complete Beginner’s Guide to Interaction Design (2015-10-27)

この記事は、インタラクションデザインをもっと学びたい人向けの連載です。UX Boothの記事を基にインタラクションデザインに関する様々な情報を全5回に分けてご紹介していきます。

①基礎知識編②手法編③ツール編④著名人編⑤団体・書籍編

第3回はツールについてみていきます。

関連ツール

インタラクションデザイナーは仕事に多種多様なツールを使います。インタラクションをナプキンにスケッチしていようと、クライアントにプロトタイプをプレゼンしていようと目的は同じで、会話によるコミュニケーションです。何にもまして、インタラクションデザイナーはうまくコミュニケートする必要があります。下のリストは会話を促進するのに使われるツールのサンプリングです。Webインターフェースは一般的にCSS/HTMLなどのフロントエンド技術で作られることを覚えておいてください。

Balsamiq Mockups

balsamiq

Balsamiq MockupsはAdobe Airアプリで、インタラクションのワイヤーフレーム作成を容易にしてくれます。Balsamiqのチームは素晴らしい仕事をしており、ユーザーに普遍的なものから近代的なアプリケーションデザインに至るまで多数のインタラクションデザインのパターンを提供しています。更に、Balsamiqは要素に手書きスタイル、フォントにComic sansを使い、インターフェースをシンプルに保持しています。こうして外部のデザイン要素を取り除き、デザイナーと株主は労力(とクライアントのフィードバック)をインタラクションに絞ることができます。オンライン版の紙製プロトタイプ作成と思ってください!

Balsamiq Mockupsについて

InVision

invisionapp

InVisionはMacとWindows用の無料Web & モバイルプロトタイピングツールです。InVisionはコミュニケーションを容易くするためにデザインされており、PhotoshopやSketch、Slack、Jira他多くのアプリケーションと統合することができます。デザイナーはワイヤーフレームをアップロードし、カスタムのhotspotでリンクすることができます。クライアント、株主、同僚などが、デザインに直接コメントを付け加えることもでき、InVisionのリアルタイムプレゼンテーションツールであるLiveShareを使うと、ライブのホワイトボードセッションが可能になります。

InVisionについて

OmniGraffle

omnigraffle

OmniGraffleはMac OS X用の最初のダイアグラミングソフトウェアです。デザインそのものよりもチームがインタラクションに集中するために、インタラクションデザイナーがOmniGraffleのようなダイアグラミングソフトウェアで月並みなルックスをあえて使うところにメリットがあります。OmniGraffleはclick-to-reveal機能(例えばモーダルボックスの動作などを披露)やスケッチング、ベジエ曲線などのたくさんの効果的な機能があります。

OmniGraffleについて

Patternry

patternry

車輪を再発明するなどという時間の無駄は誰もしたくありません。優れたインタラクションライブラリは一般的なインタラクションのデザインやコーディングの時間とエネルギーを節約し、デザインを通じた一貫性を持たせてくれます。Patternryはインタラクションデザイナーのチームがデザインをシェアしたりストアしたり、中心の一箇所(例えばライブラリ)でアイテムのコーディングをしたりできるツールです。Patternryの素晴らしいところは、ただの収納場所ではなく、一般的なインタラクションやモジュールの何十種類ものパターンとともに出発点を提供してくれることです。

Patternryについて

Sketch

sketch

SketchはMac専用のデザインツールで、アイコンや中~高程度の忠実さでのモックアップに最適です。Adobe Photoshopのライトバージョンとして、レイヤー、グリッド、アートボードなどの機能があります。要するに、ワイヤーフレームや追加ビジュアルのモックアップの作成にインタラクションデザイナーが必要とするもの全てが揃っています。Sketchをもっと応用したいなら、チームの共同作業を可能にするプラグインのZeplin(現在はベータ)もチェックしてみてください。

Sketchについて

axure

axure

Axure RPは、議論の余地はあるでしょうが、現マーケット上のインタラクションデザインツールのうちでベストなものと言えるでしょう。Balsamiqよりもはるかに安定した機能性、ビルトイン共同作業とシェアリング、ワイヤーフレームからプロトタイプへの簡単な変換、Axureは何もかもを提供してくれるようです。一つだけ残念なのは、ある意味たくさんありすぎるところでしょうか。そのため、習得に時間がかかるかもしれません。

Axure RPについて

UXPin

UXPin

UXPinは共同作業用のデザインプラットフォームで、ローファイのワイヤーフレーミングからハイファイのアニメーションプロトタイピングまでサポートしています。PhotoshopやSketchを使うデザイナーはレイヤードプロトタイピングに作品をインポートすることができ、チームや株主などからフィードバックをもらうことができます。UXPinは何十個ものビルトインインタラクションとカスタムのアニメーションエディターを使ってインタラクションデザインを容易くしてくれます。ユーザビリティテストやライブプレゼンテーション機能もついています。

UXPinについて