【プロが愛用する！】どのシーンでも役立つ7つのデザインツール

TechAcademy

連載 :

TechAcademyマガジン

2017年7月21日(金)

TechAcademy

本稿は、Erminesoft社のブログ記事を了解を得て日本語翻訳し掲載した記事になります。

本記事は、UI/UXデザイナーであるSimon氏によって投稿されました。

人間の想像力は、想像上の世界を生み出したり、宇宙船を設計することができる、強力な力です。しかし、推論には言語が必要であるのと同じように、アートを生み出すにはその表現ツールが必要です。

新しい手法とツールが誕生して進化する度に、人々はそれらを最大限に活用する方法を習得してきました。そのことはモバイルアプリのデザインツールについても同じです。

UI / UX分野での集中的な作業をこなす中で、ベストデザインを生み出すために、また実験と模索によって革新（イノベーション）を起こすために、私たちのチームは数多くの異なるツールを試しました。

私たちの現在の選択は、特定のプロジェクトの目的とニーズに最もよくマッチする特定のツール群であり、試行錯誤の期間に耐えたものです。

それらのほとんどは部分的に交換可能なので、このレビュー記事では、それぞれ異なる作業に最適な機能性を備えた「モバイルアプリケーションの設計に最適なツール」を紹介します。

1. 鉛筆と紙

デザイナーのためのNo.1のツールが紙と鉛筆であることに、「騙されている」と思うかもしれませんが、それは早計です。どこの家にもあり、すべての人が使うことができる唯一のツールは、「鉛筆」です。

そして鉛筆は、最初のスコープ決定から汎用目的のスケッチの描画に至るまで、デザインのすべての段階で使える唯一のツールです。鉛筆による描画には特に学習段階を要しませんが（他のツールと異なり）、制約もあります。

「シンプルさ」が求められるとき、鉛筆による描画は、モバイルアプリのUI設計ツールとして最も役立つものの1つと考えていいでしょう。さらに、「このような手を動かす活動は、創造性を刺激する効果がある」と数々の研究者が主張しています。

2. OmniGraffle

次に、より本格的なツールを紹介します。

OmniGraffle（オムニグラフ）は、Mac、iPhone、iPad、iPod touchで動作する図表やデジタル画像を作成するツールとして、The Omni Groupが開発した業務用アプリケーションです。このプログラムは、単独でもWebアプリケーションとしても使用できます。

開発者用のツールがいくつか含まれています。マウスでオブジェクトをドラッグしたり、「ノート」を挿入してプロトタイプやモデルの仕様書を作成する機能もあります。このアプリケーションは、iPhoneとiPadで作業するときには、理想的なツールです。

OmniGraffleは、画面レイアウトを作成するのに効果的なツールであり、Webサイトの基本の骨組み、プロセスグラフ、図表、ページのアウトラインを瞬時に組み合わせることができます。

プロジェクトの「タイプ」を選択すると、関連する複数の要素のつながりが自動的に作成され、グラフの形で線でつなぎ、形と要素はレイアウトまたはページ上で揃えられます。OmniGraffleを使用すると、iPadとApple Pencilの使用などを含めさまざまな方法で、Webサイトの主要なフレームを作成できます。

ドラッグ＆ドロップツールを使用するよりもデザインを描くことを好む人のために、図形認識（Shape Recognition）の機能もあります。

3. Sketch

便利で直感的なインターフェースを備えた柔軟で機能的なツールは、あなたが素晴らしいデザインを作成することを可能にするでしょう。なぜなら、デザインの作成が、単なるルーチンではなく楽しいものになるからです。

Sketchは使いやすく、多くのデザイナーは2つの問題を解決するために使用しています。（1）最初の段階のプロトタイピングのツールとしてワイヤーフレーム作成に使用し、（2）インターフェースの最終段階のビジュアルデザイン作成にも使用します。

すべてのデザイナーに必要な多くの機能を備えています。Photoshopは複雑でUI/UXへの不適応性があるため、SketchはUIデザイナーにとってPhotoshopの代替ツールの1つになるだろうとも言われています。Sketchには次のような機能があります。

SketchはインターフェイスとWebサイトの設計に最適です。Sketchは、ラスターオブジェクトではなくベクターオブジェクトを作成します。そのため、キャンバスのサイズを変更してもデザインの品質が低下することはありません。
「built-in grid（組み込みグリッド）」などの機能は、オブジェクトの配置やWebサイトのレイアウトを整理するのに役立ちます。
Webkitが表示するものと似たフォントを（おそらくWebkitを使うChrome、Opera、Safariで）表示します。そのため、オリジナルのテキストとブラウザ上のテキストに表示上の誤差が生じる心配がありません。
レイヤー内の各要素にCSSをエクスポートできます。

Sketchの使い方

4. InVision

InVisionは、モバイルアプリを設計し、アプリのプロトタイプを開発するための最も一般的なツールの1つです。 Twitter、Nike、Sonyなどの有名企業でも利用されています。このソフトウェアは、簡単なドラッグ＆ドロップのツールから構成されており、UX設計は大いに簡素化されます。プロトタイプを、ブラウザ、スマートフォン、さらにリアルタイムでテストできます。

InVisionは、Dropbox、Google Drive、Slackなどのクラウドストレージと連携し、これらをサポートするように設計されています。

InVisionアプリケーションは、共同作業で準備段階のプロジェクトを進行するとき、同僚や顧客と情報をやり取りするのに理想的です。

InVisionを使用すれば、静的なモバイルプロジェクトやWebプロジェクトも、インタラクティブなプロトタイプにすばやく変換できます。またリアルタイムモデリングを可能にします。

InVisionの使い方

5. Principle

マイクロアニメーションとは、独立したユーザーインタラクションの1つであり、特定のタスクを実行することが目的です。たとえば、ユーザーが「いいね！ボタン」を押したとき、それはカウンターの数に反映されるなどです。

マイクロインタラクションとマイクロアニメーションを強力な基盤として構築すれば、製品に、魅力、機能性、操作性という成功するための鍵を与えることができるのです。Principleはそのためのベストツールです。

Principleはインターフェースのプロトタイプ作成用ツールであり、アニメーションに重点が置かれています。Sketch、Keynote、Flash、After Effectsを賢く組み合わせたようなツールです。

Principleは、Sketchと非常によく似ているので、現在どちらのツールを使っているか分からないときは、メニューバーから確認する必要があります。デザイナーの中にはPrincipleとSketchを同時に使う人もいます。

Mac用のFlintoと異なり、PrincipleにはSketch用のプラグインがありません。つまり、ソースデータをPrincipleで手動で再設計する必要があります。

しかし、Principleには大きな潜在的可能性があり、幸いなことにドキュメントとデザインコミュニティのサポートは増え続けています。

Principleには次のようなメリットがあります。

Principleは簡単に習得できます
Mac OSXインターフェイスにネイティブな要素が使用されているため、インターフェイスが直感的
高度に視覚化されたプロトタイピング方法
変形をタイムラインで表示可能
デスクトップアプリケーションにプレビュー機能があります

6. Flinto for Mac

Flintoは、アニメーションのプロトタイプを作成したり、モバイルアプリケーションとWebアプリケーションのインタラクションを組み合わせるのに最適です。

通常、アニメーションと完全な機能を備えたプロトタイプを、すばやく作成するために選択されるツールです。プロトタイプは組み込みのプリセットから構築することができ、プリセットを開始するにはFlintoにインポートします。

もしSketchを使用していれば、そのプラグインはFlintoでも使用できます。プラグインを使用すると、1回クリックするだけで作業ファイルをインポートできます。

Flintoを使うことでエンジニアは、モバイル、スタンドアロン、Webアプリケーション用のインタラクティブなプロトタイプ、レイアウトをすばやく作成できます。

Flintoには、トランジションアニメーションを作成ために必要なすべてのツール、多数のアプリケーション画面を扱うための画面管理システムが装備されています。iOSで実行するアプリケーションのプロトタイプが必要な場合、Flintoが良い選択です。

7. Zeplin

Zeplin.ioはデスクトップアプリで、デザイナーとエンジニアが、チームで共同作業するのをサポートして両者の時間を効率化します。

Zeplinはデザインを含むファイルを受け取ると、エンジニアが必要とするスタイルガイド、ソースコード、仕様書を生成します。

ソースコードのエクスポート機能があり、前述のSketchとの統合が可能なので、ソースコードを手動で準備する必要はなく、エクスポートする容量について考える必要もありません。

エンジニアはワンクリックするだけで、すべての必要なソースにオンラインで直接アクセスできます。

Zeplinは、Webプロジェクトとモバイルプロジェクトの両方をサポートしているため、ほとんどのプロジェクトに利用できます。Sketchと組み合わせると、ライブ状態でレイアウトを便利に管理できます。膨大な数のレイヤー、複数のレイヤーグループを持つプロジェクトでも、デザイナーは簡単かつ短時間で編集作業を行うことができ、他のプロジェクト参加者もすぐにそれを見ることができます。

Zeplinのもう一つの素晴らしい点は、キャンバス上の任意のベクターオブジェクトをクリックすると、その情報をすべて見ることができることです。

キャンバスの正確なサイズ、各要素の正確なサイズ、インデント、シャドウ、線の太さ、透明度、CSSのエフェクトのコードの正確な値などです。

また、Zeplinにはプレビュー機能があるため、仕様に関する時間を大幅に短縮し、アプリの全体的な仕様デザインのプロセスを改善します。