TechAcademy（テックアカデミー） UX/UIデザインコース スマートフォンアプリ開発 アプリデザイン 【アプリ開発にも役立つ！】プロトタイプを作成できるツール5選
オーダーメイドコース
icon
icon
アプリデザイン

【アプリ開発にも役立つ！】プロトタイプを作成できるツール5選

プロトタイプを作成できるツールを紹介しています。Webサイトやアプリを開発する前にプロトタイピングを行う人は多いでしょう。今回は誰でも手軽に利用できるツールをまとめているので、ぜひ利用してみてください。

テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社　調査期間：2021年8月12日～8月16日　 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名　 調査手法：インターネット調査

プロトタイプとはWebデザインにおいて、動作を確認するための試作品を指します。モックアップがレイアウトやデザインを見るものであるのに対して、プロトタイプは機能のついた骨組みの形になっています。

ここではプロトタイプを作成するサービスを紹介していきます。

 

なお本記事は、TechAcademyのオンラインブートキャンプ UI/UXデザインコースのカリキュラムをもとに執筆しています。

 

Prott

pt5_1

作成も問い合わせも全て日本語で行うことができるプロトタイプ作成サービスです。
実際に作業しながらの丁寧なチュートリアルがあり、サポートも非常に充実しているのが特徴です。
画面遷移のエフェクトなども自由に選ぶことができます。
共有設定があり複数のメンバーでの作業が可能になっており、SlackやHipChatとの外部連携も備わっています。

Prott

 

ViewFlux

pt5_2

操作・サポートともに英語ですがQuick Tourメニューから一通りの作業の解説を見ることができます。
画像からリンクを設定する範囲を選ぶと、リンク先の候補がドロップダウンリストで一覧表示されるようになっています。
チームでの作成やDropbox等との連携も可能です。

ViewFlux

 

[PR] Webデザインで副業する方法とは

Marvel

pt5_3

他のユーザーが作成した作品をお気に入りにしたり共有したりすることができます。共同での作業も可能です。
英語サイトですが解説動画で操作方法を確認することができるようになっています。作業画面はポップで見やすいですが機能は豊富で本格的な制作が可能です。
使用する画像はDropboxやGoogle Driveから直接アップロードすることもできます。

Marvel

 

POP

pt5_4

スマートフォン向けの日本語対応プロトタイプ作成ツールです。
メモ用紙などアイデアを紙に描いたものを撮影し、アプリ内でそれらを繋ぐことができます。リンク箇所なども簡単に設定可能です。
PCでの作業も可能ですが、新規ユーザー登録にはiOSあるいはAndroidでのインストールが必要になります。

POPの使い方

 

Atomic

pt5_5

画像から範囲を選択し動作を行う条件・リンク先・アニメーション効果をドロップダウンリストから選択してプロトタイプを作成します。
スワイプを条件にする時にその距離の判定を決めるなど、詳細な設定が可能なのが特徴です。
英語サイトですがサンプルが一通り用意されており、動画での解説も見ることができます。

Atomic

 

プロトタイプが作成できるツールを5つ紹介してきました。

最近では、国内のサービスも多く日本語対応しているので言語の壁を感じずに利用することができそうです。一部有料のツールもありますが、ぜひ利用してみてください。

[お知らせ]TechAcademyではプロトタイプのツールを使って実践的にUI/UXデザインを学ぶオンラインブートキャンプ UI/UXデザインコースを開催しています。現役UI/UXデザイナーのサポートで学びたい場合はご参加ください。

記事を検索

関連するキーワード

関連する記事

心理学から学ぶ！心地よいUXデザインを作る方法

本稿は、Design School Canvaのブログ記事を、Design School Canvaより了解を得て日本語翻訳し掲載した記事になります。 過去1...
アプリデザイン

私もあなたも実は「UXデザイナー」ではない！

本稿は、Webdesigner Depotのブログ記事を、了解を得て日本語翻訳し掲載した記事になります。本記事はBen Moss氏によって投稿されました。 ...
アプリデザイン

【初心者でも分かる！】デザインツールJustinmindの使い方

初心者の方でも分かるようにJustinmindの使い方について解説している記事です。 サイトのワイヤーフレームやプロトタイプを作成する上で非常に便利なツー...
アプリデザイン

【未来のUIデザイナーへ！】初心者のためのプロトタイピングガイド

本稿は、本稿は、Web Designerdepotのブログ記事を、Web Designerdepotより了解を得て日本語翻訳し掲載した記事になります。 &...
アプリデザイン

UI/UXのテンプレートを購入できるプラットフォーム「uiuxassets」が登場！

UIキット、ワイヤーフレーム、テンプレート、アイコン等デザインをする上で必要なアセットを購入できるマーケットプレイス「uiuxassets」が登場しています。 ...
アプリデザイン

【あの有名アプリから学ぶ！】アプリのアイコンデザインを改善する3つの施策

本稿は、Babich.bizのブログ記事を了解を得て日本語翻訳し掲載した記事になります。 本記事は、Nick Babich氏によって投稿されました。 ...
アプリデザイン

あわせてよく読まれている記事

【未来のUIデザイナーへ！】初心者のためのプロトタイピングガイド

本稿は、本稿は、Web Designerdepotのブログ記事を、Web Designerdepotより了解を得て日本語翻訳し掲載した記事になります。   プロトタイピングの概念そのものは、インターネットの成立以前から存在していました。典型的な例として、新しい製品を開発をする人々は最初に製品を組み立て、次に製品が期待した通りに作動するか試します。 最初のバージョンで特許を取得して、潜在的な投資家に製品を見せることもあるかもしれません。もし投資家が独自の生産ラインの設備を利用できるとしたら(例えば既存の会社で働いているなどの理由から)、製造可能なレベルのモデルが完成するまで、製品の開発が進められて、バグの修正も行われます。   昔のデモディスクを覚えていますか？ 機能の制限されたプログラムが入っていたり、ゲームの初歩レベルあるいはゲームが2つだけ入っているようなディスクのことです。プロトタイプはデモディスクと似ている点が多くありますが、よりシンプルでさえあります。 Webサイトやアプリのプロトタイプを作成するのは、期待した通りに作動するか確かめるためです。 プロトタイプの目的は、将来の顧客の獲得というよりも、より良い製品を作るのに役立てることです。 Webサイトやアプリのプロトタイプは、製品が期待通りに作動するか確かめるために作成します。またクライアントや潜在的な投資家に製品の作動を示すこともできます。   最近では、Webとモバイルアプリ用のプロトタイプ作成アプリが多数登場しています。 最近リリースされたデザインツールのAdobe Experience Designerは、Webとモバイルに対応したデザインアプリとしての機能と、プロトタイプ作成用のアプリとしての機能が融合されています。 Adobe社の知名度とプロ向け製品における市場シェアを考えれば、多くの人々が今まで以上にプロトタイプを実践し始めているのも当然かもしれません。   今回の記事は初心者向けのガイドです。デザイン業界でどのような経験を積んできたかにかかわらず(あるいは未経験でも)、プロトタイプを日常的に使い始めた方向けに書いています。 このガイドでは何よりもまず基本的な原則を説明します。もちろんその後に発展的な情報として、役立つツールやアプリをリンクとともにご案内します。   ワイヤーフレーム＆モックアップ VS. プロトタイプ デザイナーとしての経験が豊富な方は、すでにワイヤーフレームやモックアップを編集で利用しているかもしれません。ただ、これらは必ずしもプロトタイプとはいえません。 ワイヤーフレームやモックアップで問題なのは静的なことです。製品の機能についての多くの情報を伝えることができないのです。このため、製品の動作性についてクライアントやデベロッパーに誤解を与えるおそれもあります。こうした理由から、プロトタイプとは一般的に、何かインタラクティブな要素を持つものと定義できます。 ただし、例外的に静的なものにもプロトタイプと見なせるものもあります。 例えば、概念的なプロトタイプや、詳細に作成された設計書などです。重要なのは単にインタラクティブであることよりも、製品に期待される機能について情報を伝えられることだからです。 それでもやはり、ワイヤーフレームやモックアップは単にプロトタイプの作成によく使われているという理由だけで、誰も捨てようとはしません。   いつプロトタイプが必要になるのか？ 何かがどのように作動するかを示す必要があるときにはいつでも、プロトタイプが必要です。 わかりやすい例は、Webアプリやモバイルアプリです。アプリは、モックアップでは簡単に見たり予測したりできない機能を数多く持っている傾向があります。コンテンツ中心型の静的なWebサイトでさえプロトタイプを必要とするかもしれません。 1つの理由として例を挙げると、私は以前クライアントにシンプルなビジネスサイトのモックアップを見せたときに、クライアントから「トップページにある「概要」や「サービス」などをクリックしたら別のページに移行するのか？」、「コンタクトフォームでユーザーが「送信」をクリックしたら、私はメールを受信することになるのか？」と聞かれたことがあります。 シンプルなタスクでさえ不確実性を伴うことがあり、プロトタイプは当て推量を解消するのに役立ちます。 また、簡単なブラウジングの操作さえ、ユーザーやクライアントによってはわかりづらくて大変な作業となりえます。プロトタイプがあればネットワークからサインオフするときにも、当て推量する手間を省くことができます。 加えて、プロトタイプはユーザーテストに役立ちます。ユーザーテストを行うときには、初期段階からプロジェクトのシミュレーションを始めるのがベストです。作業がほとんど完了した後に大きな変更をしなければならない事態は避けたいところです。   [PR] Webデザインで副業する方法とは4種類のプロトタイプ プロトタイピングを始める前に、どの種類を使うか決めます。ほとんどのデザイナーたちが実践しているように、どのようなプロジェクトでも複数の種類を組み合わせて使うことができます。   1. 概念的プロトタイプ このプロトタイプは、形の上では完成した製品と全く似ていません。ここでインターフェースのディテールとレイアウトは重要ではありません。インタラクションとプロセスだけに集中します。 全てのプロトタイプの目的は製品の動作性を示すことです。その意味で、このプロトタイピングは原始的な形だといえます。機能性だけがテーマであり、形は問題となりません。 この段階では、フローチャート、ポストイットのメモ、PowerPointのプレゼンテーション、アイコンでプロセスを説明するビデオを使ったり、身振り手振りを加えてカメラに向かって録音してもいいでしょう。要点を伝えることができれば何でもいいのです。 概念的プロトタイプはプロジェクトの初期段階で使われます。プロジェクトにはまだ名前がないかもしれません。アプリやWebサイトもアイデアの段階なので、「こんな感じで作動すると思う。」と話しているかもしれません。   2. ローファイプロトタイプ ローファイプロトタイプでは、レイアウトやスクリーンのサイズなど具体的な対象を扱うようになります。このプロトタイプは、作られるのも破棄されるのもサイクルが速いです。 ローファイプロトタイプの目的は、あなたとクライアントが基本的な部分に満足できるまで、試行錯誤を最速で繰り返すためのものです。だからプロトタイプに愛着を持つべきではありません。ほとんどのプロトタイプは使い捨てであり、それこそが長所です。 「ローファイプロトタイプ」は「ワイヤーフレーム」とよく置き換えることができます。この段階では紙に書いて行うこともよくあります。 アプリでローファイプロトタイプを作成するときには、他のスクリーンへのリンクやコメントの機能など、基本的なプロトタイピングの機能を備えているものを使うことがおすすめです。ワイヤーフレームのアプリはインターネットとの連携が容易であるというメリットがありますが、やや動きが遅いことも多いです。 概念的プロトタイプと同じくプロジェクトの初期段階で使われますが、ビジネスモデルやプロジェクト名はすでに存在している段階でしょう。上手くいくと確信できるものが持てるまで、頭の中で思いつく無数のアイデアをえり分ける時です。   3. ミディアムファイプロトタイプ 段階によっては、ローファイプロトタイプでは要点を把握しにくい一方、ハイファイプロトタイプでは十分過ぎることがあります。スタイルガイドを完全には作成していなかったり、まだグラフィカルアセットを全て作り終えていない段階です。 ミディアムファイプロトタイプは、このようなデザインの初期～中間の段階で使うことができます。インタラクションのシミュレーション機能を持つプロトタイピング作成アプリによって作られることも多いです。CSSのフレームワークを利用して、HTMLとCSSによって構築することもできます。 BootstrapとFoundationが、現在存在しているプロトタイピングのツールの中ではおそらく主流です。 有名ブランドのイメージがあればそれを使うべきですが、ストックイメージでも足りるでしょう。ストックタイプのUIエレメントは、模作のインターフェイスをより速く構築するために使われます。プロトタイピング作成アプリの多くは、これらのUIエレメントのライブラリを持つことが多く、作業の高速化に役立ちます。 ミディアムファイプロトタイプは、リテラル思考型(Literal thinker:全体的なイメージよりも、具体的なステップや言葉の定義から考えるような人)で外観や動作の近似を見たいと思うような人に向いています。彼らにとっては、「未完成」のヘッダーの方が、Webサイトのヘッダーに全く見えないようなスケッチ風の代物よりも、まだ耐えられます。 リテラル思考のクライアントには、ワイヤーフレームで素早く考えた初期のアイデアを見せる必要はないでしょう。ミディアムファイプロトタイプの段階で見せる方が、彼らに方向性を分かってもらいやすいです。   4. ハイファイプロトタイプ この段階までプロジェクトが進むと、全てのスクリーンのモックアップが完成していて、全てが立派なものになっているでしょう。製品をバックエンドのコードと統合して、人々に製品の動作性を見てもらう時です。 ハイファイプロトタイプは通常、デザインに関する最終的な合意をクライアントと結ぶために使われます。ただのPSDファイルを送るだけれはなく、インタラクティブなものを提示しなければなりません。 2つの方法のうちいずれかによって行われます。1つの方法では、静的なHTMLとCSSを利用して、一部をインタラクティブな外観に仕上げます。もう1つの方法では、画像やPSDのファイル形式をインポートできるアプリを利用して、擬似インタラクティブな特性を加えることで完成品のアプリ（製品）の機能を模倣します。 アプリによっては、プロトタイプのデモをWeb上(またはモバイルデバイス上)で行うことも可能です。   プロトタイピングのメソッド プロトタイプの主な種類を見たところで、次にプロトタイプを実際に作るためのツールをご紹介します。基本的な使い方も含めてすでにほとんどご紹介していますが、さらに詳細を見てみましょう。 あなた自身とクライアント双方にとって適合するメソッドを選びましょう。   ビデオまたはプレゼンテーションのプロトタイプ これらは具体的な作業がなされる前に、アイデアを売るためによく使われます。そのため通常は、潜在的な投資家を意識したものです。 クライアント向けにも使えますが、他の代替手段の方が効率的なコミュニケーションを図るには優れていることも多いです。アドバンテージは人によって異なるでしょう。 ビデオとプレゼンテーションのプロトタイプで、利益率を上げるために作られたものは商業型の公式に従います。 聴き手が共感できる問題を提示する。 あなたの製品によってその問題がどのように解決されるかデモを示す。 (オプションとして)会社のマスコットをデジタル形式で表現して、キャッチフレーズを叫ばせながら楽しそうにダンスさせる。 これらのプロトタイプの中にはアイコン、テキスト、イラストレーションを使うだけで完成するものもあります。他にはアニメーションを利用して、要点を説明するのに動きを使うこともあるでしょう。あなたのアイデアを売ることができれば、正しく使いこなせているといえます。 ビデオのプロトタイプと紙のプロトタイピングを組み合わせた良い例をご紹介します。Video Prototype for Mobile Cooking App : Youtube動画より   ワイヤーフレーム ワイヤーフレームは紙面上かアプリにおいて作成できます。ワイヤーフレームは通常ローファイプロトタイプと見なされていますが、時間をかければミディアムファイプロトタイプにアップグレードすることも可能です。もっとも労力をかけるだけの価値はほとんどありませんが。 ワイヤーフレームは、作成されるのも破棄されるのも速いです。紙面上でワイヤーフレームを作成することが魅力的である理由の1つです。アプリでワイヤーフレームを作ると、より正確なデザインが可能となり、既存のワイヤーフレームから簡単に編集することもできます。しかし、あなた自身以外には誰も見ないであろうスケッチを速く作成できるという点が、やはりワイヤーフレームの長所として一番優れています。 しかし、すで述べたようにアプリでワイヤーフレームを作成すると、より簡単にインターフェースの機能を模倣できるというメリットもあります。紙面上に作成したワイヤーフレームをタップしたところでトントン音が鳴るだけですから、面白いかもしれませんが、あなたの意図するところを伝えることはできません。   紙のプロトタイプ これはただのスケッチではないという点で、紙面上のワイヤーフレームとは異なります。紙を利用するのは、物理的でフラットな素材でインターフェースのモデルを作るためです。先にご紹介したビデオのプロトタイプにもその例を見ることができます。 インターフェースの要素は、紙にスケッチして、カットして作ります。コピーして予備を作ることもあります。そして作ったピースを他の紙の上に集めます。 ある要素のサイズが間違っていれば、他の要素の並びを変えたり、新しいサイズの要素を紙をカットして作るなどの方法があります。 またワイヤーフレームより「本物」らしいといえます。特に面白さはないとしても、クライアントは紙のモデルを触ることができます。この触覚に訴える方法はクライアントに多くを説明できるので、他のどんな方法より優れていることもあります。 誰でも対象をより深く理解するためには、物理的なコンタクトが必要です。UXデザインの半分は、物理的なインタラクションの使い心地を、デジタルのインターフェースで作り直す作業であるといえます。   アプリで作成するミディアムファイおよびハイファイプロトタイプ これらは紙のプロトタイプとの共通点が多いです。以下でご紹介するInvisionなどのアプリで作成するプロトタイプは、あらかじめデザインしたインターフェースの要素をもとに作り始め、これらのピースを集めて完成品を模倣します。 異なる点は、全ての作業がスクリーン上でなされることです。完成製品のグラフィック作成やブランド化も可能であり、プロトタイプであっても完成製品のように作成することができます。その次はすでに述べたことですが、アプリによって製品のデモをブラウザやモバイルデバイス上で行うこともできます。 また手で触れて感じることも可能になります。クライアントの触覚に訴えることで、もし気に入ってもらえれば、最終的な承認を得たも同然です。   コード もちろんインタラクションを必要とする場合には、インターフェースのプロトタイプをコードで作るのがいい方法です。その理由もご紹介します。 あなたのワークフローによく合う(とにかくブラウザ上でデザインするような場合)。 作成するサイトやアプリに、ボタンなどのインタラクティブな要素が多数存在している。 製品作成の最終段階でプロトタイプのコードを利用すると、時間の節約になる。 インターフェースの機能性のデモを、アプリを使わずにブラウザ上で実行したい。 あなたがキーを押すのが好きで、クリックするのは嫌いである。 ブラウザ上でプロトタイピングを行うと、特に修正版を作成中はやや時間がかかります。製品の初期段階ではおすすめしません。ミディアム～ハイファイプロトタイプで使うのがベストです。 すでにHTMLやCSSで作業を進める方法を好んでいるとしたら、完成間近のプロジェクトを提示するには最良の方法の1つです。   フレームワークによるプロトタイピング フレームワークを利用すると、コードを使ったプロトタイピングのスピードを相当上げてくれます。さらに、完成製品用のフレームワークを利用するとしたら、コーディングの量も少なくて済みます。 補足として、BootstrapやFoundationのような人気の高いフレームワークを利用して構築された、ドラッグ＆ドロップ形式のWebページ用エディタもあります。これらを使うことで、ローファイプロトタイプからコードを加えた完成製品まで全て作ることができます。 または、これらをプロトタイプを速く作る目的だけに使い、プロジェクトの最終段階ではカスタマイズしたコードを使う方法もあります。どちらの方法でも上手くいくでしょう。   プロトタイピングのツールとアプリ 理論を理解したところで、プロトタイプの作成に進みましょう。紙のプロトタイプやコードだけに限定せず、アプリをどこかで使うと仮定します。 良くも悪くも、多数の優良なアプリから選ぶことになります。 繰り返しになりますが、結局はあなたに合うものを選ぶことが大切です。モバイルアプリのデモを実行する機能が必要か？Google DriveやDropboxなどのサービスとファイルの同期が必要か？Githubと統合させるか？ローファイ、ミディアムファイ、ハイファイのどのタイプか？アドバンストスクリプト言語(Advanced scripting)か？などから考えましょう。 以下にリストアップするアプリは、これらのニーズに対応しています。何に着目すべきか分かりやすいように、アプリごとに最も関連性の高い機能をご紹介します。 これらアプリの多くは主にワイヤーフレームのためのツールとして知られています。ワイヤーフレームのソフトウェアは、インタラクティブなプロトタイプに必要な機能を備えていることが一般的です。人によってこれらのアプリを使うことで得られるアドバンテージも異なります。   AdobeのExperience Design CC 現時点では最新のアプリです。このアプリの登場により、今まで飽和状態だった市場に競争を巻き起こすことになりそうです。単にワイヤーフレームのアプリまたはプロトタイピングのアプリというよりも、デザインアプリです。Sketchや開発終了したFireworksと似ていますが、デザインした全てのものからプロトタイプを作り出すことが可能な点が斬新です。 今のところMacのプレビューにのみ対応していますが、2016年末までにはWindows版もリリースされる予定です。 プレリリース版は無料ですが、完成版のリリース後にはAdobe Creative Cloudのプランに組み込まれます。   プレゼンテーションのソフトウェア MicrosoftのPowerPoint、AppleのKeynote、LibreOfficeのImpress、GoogleのSlidesは全てプロトタイプの作成に使えます。プロトタイプについてのコンセプトはそれぞれ異なっています。スライドにリンク機能を加えるだけで、インタラクティビティを模倣できます。 コンテンツ中心型のWebサイト用のプロトタイプにも向いています。またこの中のソフトの少なくとも1つは使った経験のある人も多いでしょう。もし使ったことがなければ、ImpressとSlidesは無料で使えます。   InVision InVisionも有名なアプリの1つで、ハイファイプロトタイピング向きです。バージョン管理を特色としていて、リアルタイムの連携機能やフィードバック機能を売りとしています。Marvelのアプリのように、アニメーション、プロトタイプの組込み、デバイス上でのデモ、などの機能もあります。 無料プランではプロトタイプ1つまで作成できますが、それ以降は有料プランで月額15USドルかかります。 InVision   Justinmind Justinmindはアプリケーションのハイファイプロトタイプを作成するのに向いているように思えます。JustinmindのサイトではレスポンシブデザインのWebサイトのプロトタイプについても言及されています。アプリ上でのデモ機能もあります。 今のところ1年間の有料契約(月額換算で19USドル)からスタートできます。 Justinmind   Marvel Marvel Appは有名なプロトタイプのアプリです。基本的に無料プランで、アップデートの価格も全てリーズナブルです。注目の機能は、PhotoShipとSketchのサポート、DriveとDropboxとの同期、Webページ上での組込み型プロトタイプです。これらの機能によって、プロトタイプをアニメーション付きのプレゼンテーションに仕上げることもできます。ハイファイプロトタイプの作成に向いています。 Marvel   Proto.io Proto.ioはハイファイプロトタイプ向きのアプリです。複合的なインタラクション、アニメーション、ファイル形式のエクスポート、印刷、組込み、デバイスのデモンストレーションなどの機能が全てビルトインされています。15日の無料お試し期間と、月額24USドルのプランから始められます。 Proto.io   POP POPが他のアプリと異なっているのは、ワイヤーフレームのスケッチとデジタル形式のプロトタイプのハイブリッドを作成できる点です。 iPhone、Androidフォン、Windowsフォンなどのカメラでスケッチの画像を取り込み、これらをインタラクティブなプロトタイプに変換します。 主に紙で作業を進めるタイプの人には、データを共有するのにいいアプリです。プロジェクト2つまでは無料で利用可能で、以降は月額10USドルの有料プランになります。 POP   Flairbuilder Flairbuilderはデスクトップアプリですが、プロジェクトにオンラインのビューア(閲覧用ソフトウェア)機能を利用できます。ミディアムファイのワイヤーフレームとプロトタイプに向いています。インタラクションを追加したり、デバイス上でのデモを行うことが可能で、グリッドベースのデザインにも特色があります。 ワンタイム料金で99USドルと高額ですが、Axureよりも安いです。 Flairbuilder   Flinto Flintoには、Macアプリ版とWeb用ライト版の2つのバージョンがあります。違いはというと、Macのバージョンの方がより複雑なアニメーション、インタラクションなどの機能をテーブル(表)に加えることができます。またSketchからファイル形式をインポートできるのも、Web用ライト版にはない機能です。 ワンタイムの購入価格で99USドルかかります。ライト版(月額20USドル)だとデスクトップバージョンのライセンスも含まれるので、両方の良い部分を利用できます。 Flinto   [お知らせ]TechAcademyでは初心者でもUI/UXデザインができるようになるUI/UXデザインオンラインブートキャンプを開催しています。現役UI/UXデザイナーのサポートで学びたい場合はご参加ください。
アプリデザイン

目的を見失わないために！プロトタイピングの間違った手法とは

本稿は、Studio by UXPinのブログ記事を、了解を得て日本語翻訳し掲載した記事になります。また本記事はUXPinのUXデザイナーであるMarcin Treder氏によって投稿されました。 プロトタイピングの間違ったやり方は、あなたが思っている以上にUXデザインを損ないます。 そして、プロトタイピングを実行する段階が早すぎることがなぜ危険なのか、私の経験を基に説明します。   急成長するUXデザイン 10年前にはUXデザインは、デジタル製品の開発プロセスの一部で使われているだけでした。それが2000年代以降に広まり始め、今や全ての製品開発においてUXデザインは重要な役割を果たしています。 次のGoogleトレンドによる分析グラフも、UXデザインの急成長を示しています。   リーン開発、アジャイル開発、ウォーターフォールモデル（上流から下流への開発工程）などの数々のシステム開発のタイプの実例を見たところ、多くの会社ではプロジェクトの時間節約のために、プロトタイピングを早すぎる段階で実行していることに気づいたのです。 その結果、短期的にはチームにとって時間節約になるかもしれませんが、長期的には修正や故障が数多く起こるために、かえって時間がかかるのです。 これでは、デザインの間違いを修正する過程で正しいアイデアを見つけるという、UXの真の価値が失われてしまいます。   間違ったプロトタイピングの危険性 私は、プロトタイプはその良さが生かされないまま、いわば現実離れしたおもちゃになりつつあるのではと思っています。 実際にプロトタイピングは、ものを良く見せるためだけに使われることも多くなっています。その結果としてデザインプロセスは、高い費用がかかり、肥大化し、バラバラに分離した、混乱するようなものになってしまうのです。 私が過去に、ビジュアルデザインのバックグラウンドを持つUXデザイナーと一緒に、eコマースのデザインの仕事をしたときに、まさにこの罠に陥っていました。Photoshopに慣れている彼らは、いきなり実際のサービスをイメージしたモックアップからデザインを始めました。 デザインに問題があれば、サービス責任者からフィードバックを受けたり、インタラクションモデル（ターゲットとするユーザーと共同でデザインを考える手法）においてユーザーから問題を指摘されることもあります。 もちろん、実際のサービスに寄せたプロトタイピングから始める方法が役立つこともあるのですが、それをデフォルトにするのは良くありません。 製品のデザインに、PhotoshopやSketchなどを使うのは、デザインプロセスのもっと後の段階でいいのです。 何よりもまず、そもそものプロトタイプの存在意義について考えてみましょう。   [PR] Webデザインで副業する方法とはプロトタイピングの3つのコスト削減効果 プロトタイピングは実は古くからある概念であり、またインタラクションデザインにおける唯一の手法ではありません。 Michael Guggenheim氏の記事『The Long History of Prototypes』によると、 「プロトタイピングは開発における「原型」として理解されるべきものではなく、またインダストリアルデザインにおけるベータ版（サンプル製品のソフトウェア）のようなものでもありません。プロトタイピングは開発を進めるための手法です。つまり、仮のモデルであり、ブリコラージュ（使えるものを何でも利用して作ること）や、ユーザーの参加、製品の修正などの「オープンな革新」を可能とするものです。決して見知らぬユーザーのために、閉鎖的な実験室で完成度の高い製品を作るための手法ではありません。」 プロトタイピングは、ユーザーに製品への最短経路を提供するものであるべきです。プロトタイプは製品開発の初期において、製品のアイデアをそれを受け取る人（顧客）に示すことができます。これこそプロトタイピングの真の価値です。 プロトタイピングを効果的に使うと、次のようなメリットがあります。 製品のアイデアを検証する 製品の詳細を修正する 製品のアイデアを拡張する デザインの検証、修正、拡張をプロトタイピングで実行すれば、製品開発のコストを大幅に削減できます。 またエンドユーザーにプロトタイプを試用してもらう時期が早いほど、後々高いコストがかかるエラーが発生する可能性も低くできます。これこそプロトタイプを初期から作成するべき理由です。 初めに最もコストのかからないプロトタイプを作成し（ファイデリティを柔軟に変更できて、一応使える代物であれば、プロトタイプとしては完璧です！）、ユーザーのフィードバックを受けた後でイテレーション（反復型の短期の開発サイクル）を行えばいいのです。 外観のデザインの完成度を高めるために多くの時間を費やしたり、プロトタイピングで使うためだけにスクリプト言語でアニメーションを作成するとしたら、時間とエネルギーの無駄です。ユーザーに最初に製品を紹介したときに、良く評価されないリスクが高くなります。 多くのケースにおいて、わざわざグラフィックデザインのツールを使って作成したモックアップから、プロトタイプを作るメリットはありません。最初に完成度の高いデザインに陶酔してしまったら、ユーザーに製品のアイデアを検討してもらうのも、製品を改良するのも難しくなるというデメリットがあるだけです。 つまり、イテレーション（反復型の短期の開発サイクル）の精神が失われてしまうのです。 プロトタイプを最大限活用するには、素早く実践し、チームで共同作業を行い、ユーザー調査に基づいてイテレーション（反復型の短期の開発サイクル）を行うべきです。   プロトタイピングが役立つケース しかしながら、モックアップのプロトタイピングが非常に役立つケースも存在します。   既存のアセットを変更するケース 既存のアセットに小さな変更を加えるだけであれば、効率的です。 グラフィックやコードから小さな操作（要素の再配置など）をするだけで十分なので、わざわざデザインし直すメリットはありません。   顧客向けのプレゼンテーションを行うケース グラフィックで作られたプロトタイプは、顧客向けのプレゼンテーションを行う場合に役立ちます。逆に、完成度の低いプロトタイプをプレゼンテーションで使っても、顧客の関心を引くことはできないでしょう。 すでにユーザーに製品を試用してもらっていて、製品の最終的なインターフェースに自信を持てるとしたら、顧客向けに完成度の高いプロトタイプを作成してもいい段階です。 優れたプロトタイプを顧客に示すことで、より契約獲得の可能性が高まると思います。   複雑なプロジェクトのケース 現実世界のシミュレーションをプロトタイプに反映しなければならないような場合を考えてみてください。 このような複雑なプロジェクト（または「重要度」は高いが「緊急度」は低いプロジェクト）では、現実の変動するデータにアクセスできるプロトタイプを作るのが有効です。 コストは高くつくかもしれませんが、目的を達成するには必要です。しかし他のケースでは、プロトタイプに時間を投資する価値があるかどうか考えましょう。   実際のイテレーションの例 UXPinの方針では、プロトタイピングは迅速に共同作業で行われるべきであるとしています。そして私たちはすでに述べた基準も実践しています。 最近の事例（デザインエディターのインターフェースの再設計）を紹介します。   全体のプロセス カスタマーサポートに寄せられたユーザーからのフィードバックを検討した後、チームでデザインの原則を考えました。例えば、「気を散らすものの排除」、「予測できるアーキテクチャ」、「一貫性のある外観」などです。 次に、2日間かけてアイデアをまとめ、最終的にUIのプロトタイプを作成しました。そしてプロトタイプを20人のユーザーに試用してもらった後に、イテレーション（反復型の短期の開発サイクル）を行い、ここでやっと最終的な製品をデザインするための準備が完了しました。 以上は外観デザインだけのプロセスです。全体ではユーザーテストを含めて2週間近くかかりました。 新しいUIを再設計するために作成した、初期のプロトタイプの例を次にご紹介します。   プロトタイプの3つのバージョン例 バージョン1 インターフェースの主要な構成部品（ナビゲーション要素など）の、一番良い配置位置を考えるために、多数の可能性を試してみました。上の画像は、試したUIデザインの1つです。サイトマップは右下に置いています。これらのテストを行う中で、幸運なことに私たちは、元々の要素の配置はユーザーのニーズと一致していないことに気づきました。 バージョン2 デザインエディタをデザインする上で大変なのは、高機能を搭載しながら、インターフェースはシンプルにわかりやすい設計にしなければならないことです。 上の画像は、編集モードごとに切り替えができる、タブのようなシステムです。すっきりした外観で、ユーザーからも「切り替えをしやすい。」というフィードバックをもらえましたが、欠点も見つかりました。 アイコンの名前の表示がないため、各機能を見つけにくい。 小さな画面上では、約80pxの余白部分を見つけにくい。 このバージョン2は、バージョン1を基にして30分ほどで作成したものですが、テストを一巡させた後に破棄しました。 バージョン3 このプロトタイプの最終的なバージョンは、実際に製品化したサービスのデザインに近いものです。バージョン1とバージョン2での反省を生かしています。 もしバージョン1 のプロトタイプを作成していたら、ユーザーにとってサイトマップが見つけにくいデザインのままだったと思います。また、私たちがバージョン2で満足していたら、さらに悪い事態になっていたかもしれません―ユーザーはエディタの機能のアイコンを見つけるのが難しいままだったと思います。 どちらのケースでも、後々の修正に高いコストがかかるだけではなく、粗悪な製品を売り出すことになっていたでしょう。   最後に UXデザインも他のデザインと同様に、プロトタイピングが必要です。 車のデザインから建築に至るまで、プロトタイピングなしには良いデザインを生むことはできません。しかし、プロトタイピングを全体のデザインプロセスから独立したものと考えるべきではありません。 プロトタイピングはその本来の目的―製品のアイデアの検証、製品の修正、製品開発の拡張などに役立てるべきです。そして製品を使うユーザーを中心として、チームでデザインの共同作業を進めるべきです。 正しい段階で、正しい理由で、正しいプロセスを実行しましょう！ [お知らせ]TechAcademyでは初心者でもUI/UXデザインができるようになるUI/UXデザインオンラインブートキャンプを開催しています。現役UI/UXデザイナーのサポートを受けながら学びたい場合はご参加ください。
アプリデザイン

Goodpatchのプロダクトマネージャーに聞く！プロトタイピングツール「Prott」を使ったプロトタイピングの重要性とは

今日では、ソフトウェアやサービス、アプリ開発の現場において、必須プロセスとなっているプロトタイピング。IT業界ではこの1、2年でプロトタイピングのカルチャーが浸透し、多くの開発現場でプロトタイピングツールが導入されています。 今回は、今大注目のプロトタイプを誰でも簡単に作ることができるツール「Prott（プロット）」を開発している株式会社グッドパッチのプロダクトマネージャー、岡田麻里さんにお話を伺ってきました。 2016年7月20日に画面遷移図機能がリリースされたProttを中心に、チームでのコラボレーションやプロトタイピングの重要性など、デザインの魅力満載のインタビューとなっています。   お話を伺った方 岡田 麻里さん 株式会社グッドパッチ、Product Divisionのプロダクトマネージャー。 学生時代からインターンとしてプロトタイピングツール「Prott」のカスタマーサポートの業務を担当。 2015年に株式会社グッドパッチに新卒として入社と同時にプロダクトマネージャーとなり、新機能の企画開発を始め、改善の進行管理など、幅広い業務に携わっている。   以下、インタビューです。   Prottの新機能「画面遷移図機能」とは ――まずは、Prottの新しい機能に関してお伺いしてもよろしいでしょうか？ Prottでプロトタイプを作るだけで自動的に画面遷移図が生成される機能です。 「クライアントワークをしているとプロトタイプと合わせて画面遷移図を納品しないといけない。プロトタイプと一緒に画面遷移図もProttで作れないか」という要望を数多くいただいていました。 画面遷移図は、全体を俯瞰するために使うものですが、寄りの視点をプロトタイプで確認しながら、かつ画面遷移図を出力して、引きの視点を見てプロダクト自体のデザインを確認できる、寄りと引きの視点をもってプロダクトを改善できる機能になっています。 画面遷移図を最新の状態で保つのって結構面倒な作業なのですが、それが自動的にできるため、大幅な時間の削減にもなりますね。 ――具体的に作っていた期間はどのくらいでしょうか。 2016年3月頃から着手したので、リリースまでは約3ヶ月ぐらいですね。   ――何人ぐらいで実装されていたんですか。 実装はエンジニア1人です。グッドパッチにはエンジニアが多く在籍していますが、開発は小さなチームで行うのが主流なんです。   [PR] Webデザインで副業する方法とはプロトタイピングが作業を効率化させる ――プロトタイピングの重要性について教えていただけますか？  プロトタイピングという手法を用いることで、アイデアを素早く形にし、それを共有してアイデアが実際にユーザーにとって受け入れられるかどうかを検証することができます。 一般的な開発現場で多い、ディレクターからデザイナー、エンジニアへと直線的に依頼する方法ではなく、設定されたゴールに向かって、それぞれの職種がプロトタイプを中心に議論を行い、チームとして一緒に進んでいくことができます。 直線的なコミュニケーションで起きていた「これ実際できないよね？」のような議論や手戻りを削減し、作業を効率化させることができるんです。   ――そもそもProttを開発したきっかけはなんだったんでしょうか。 今から約2年ほど前、Prottがリリースされた当初はIT業界ではプロトタイピングというカルチャーは浸透していませんでした。 リリース当時は、プロトタイピングというカルチャーと合わせてProttを知っていただくことから始めました。 実際に、グッドパッチでも当時国産のプロトタイピングツールがなかったので、海外のプロトタイピングツールを使用してプロトタイプを作成していたことがあるのですが、チームで使うには最適化されておらず、口頭や資料でいろんなことを説明したはずなのに、実装されたアプリを確認すると、意図したことと異なっていたり、非常に使いづらい仕上がりになっていることが頻繁に起こりました。 最適なものがないのであれば、自分たちで使いやすいものを作ろう！となったのがきっかけですね。   ――開発のプロセスはどのようなものだったんでしょうか。 開発当初は、エンジニアがいない状態からスタートしました。 代表の土屋とデザイナーとで議論をしながら進め、開発から2か月後にエンジニアが入社するという、まさにスタートアップらしい始まりです。 当時はノウハウなどは全くない状態でしたが、いいプロダクトをつくるために誰でも簡単い使えるプロトタイピングツールが絶対に必要だという確信があったのだそうです。 代表の土屋と開発メンバーで、作ったばかりのプロトタイプを持ってユーザーの要望を聞いて回り、改善を重ねていきました。Prottを開発しているプロセスがまさにプロトタイピングそのものなんです。   一人でできることが限られているからこそ、チームでのコラボレーションを   ――チームでのコラボレーションの重要性に関して、どうお考えですか？ やっぱり一人でできることってすごく限られているなと思っています。チームメンバーひとりひとりがプロ意識を持っているからこそ、皆それぞれの視点でぶつかり合って、意見を出し合って、結果的にそれぞれの職種の視点が取り込まれたいいものができるんです。 色んな人の視点を入れてコラボレーションするっていうことがプロダクト作りにおいて本当に大切だなと思っています。   ――Prott導入後、チーム内で変化する点はどういうところにあるのでしょうか？ チームでProttを使うことで、プロトタイピングのマインドがついてくるので、無駄な議論が減りやすくなりますね。 プロトタイピングでは、動くものを共有できるので、言葉や絵で共有するよりも伝えられることが多いんです。そのためメンバー間での認識齟齬が減り、チームでは論点が明確な議論ができるようになった、という話もたくさん聞いています。   ――実際どういった方々がどういう場面でProttを使われているのでしょうか。 現在は、日本国内のIT企業で多く導入していただいています。 多くの場合は現場のデザイナーさんが主導でProttを導入を希望してくださり、そこからProttを使って共有することでエンジニアの方もプロトタイプを通してコミュニケーションをするといったケースが多いですね。 最近では、営業の方が提案資料をより魅力的なものにするために、アイデアを形にするためにProttを使用していただくことも増えてきました。職種を超え、誰でも簡単に使えて、アイデアを形にして議論できるというのがProttの良いところだと思います。   ――個人で使用されている方々の使用用途はどういうものがあるのでしょうか。 最近増えているフリーランスの方がクライアントと共有するために使用するケースも多いようです。 あとは、UIデザインの勉強のために使っていただくことが多く、多摩美術大学の学生さんにも授業で使っていただいています。 先日は、女子大生社長として有名な椎木里佳さんが好きなアプリとして取り上げてくださっていましたね。授業中に思いついたアイデアスケッチを写真に撮り、Prottにアップロードしてメンバーに共有しているそうです。   とにかく自分でやってみることが大切 ――ちなみに岡田さんは、プロジェクトマネージャーということですが、デザインにはどのように携わっているのですか？ 広義の意味でのデザイン、ユーザーの体験部分のデザインから、それを実際にプロダクトに落としていくフェーズの細かい設計までを携わっています。 ものづくりに憧れがあるので、ビジュアルデザインにもチャレンジしてみたくて、プライベートでスマートウォッチのデザインは自分で作ったりしましたね。   ――デザインしたいと思ったときに、どういったところを入り口として進めていかれるのでしょうか？ デザインをするためには、どのように作られているかっていうのをまず知らなきゃいけないと思っているので、最初はエンジニアリングの仕組みの部分を結構勉強しました。 そうすると、こうできるからこういう表現ができるんだっていう導線が分かったので、じゃあこういう風にデザインしようっていうのが自然と分かるようになりました。   ――未経験の方がデザイナーになりたいって思ったとき、意識すべき点などはありますか？ アプリをたくさん触ると良いと思います。 アプリを触ってみて、いちユーザーとして良いと思ったところや悪いと思ったところを研究していくと見えてくるものがあるのではないでしょうか。その次のステージでは、デザインのガイドライン、マテリアルデザインガイドラインをしっかり読み込んで、思想を知ると良いですね。 あとは自分がよく使っているアプリを模写することで、どうやって情報設計されているのか、どうやって作られているのか知るところから初めてみるのはオススメです。すぐに実行できると思いますよ。   ――最後に、デザインの重要性が高まっていく中で、デザインをこれから勉強したいと思っている人にアドバイスがあれば教えていただけますか？ 私は元々、デザインを学校で学ぶ機会もありませんでしたし、一度もアプリを作ったことなかったのですが、実際に会社に入ってみて、現場でやってみることが凄く大事だと感じました。 学生時代からデザインに興味があったのでずっと挑戦したいなと思っていたんですが、自分では何も進められなかったので、とにかくやらざるを得ない環境に自分を置くっていうことがすごく大切だと思っています。 そういう環境に身を置いたことで、自分自身もデザインにもっと詳しくなれたし勉強できたので、とにかくやってみることが大切ですね。   インタビューは以上になります。 岡田さん、貴重なお話をありがとうございました。 これからますます必要性が高まってくるデザイン。プロトタイピングから皆さんもぜひ、始めてみてはいかがでしょうか。 初心者でも分かるProttの使い方についても合わせてご覧ください。 [お知らせ]TechAcademyでは初心者でもUI/UXデザインができるようになるUI/UXデザインオンラインブートキャンプを開催しています。現役UI/UXデザイナーのサポートで学びたい場合はご参加ください。
インタビュー

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

本稿は、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）の機能もあります。   [PR] Webデザインで副業する方法とは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にはプレビュー機能があるため、仕様に関する時間を大幅に短縮し、アプリの全体的な仕様デザインのプロセスを改善します。   （要約）モバイルアプリケーションデザインツールとしてどれを使用するべきか？ プロジェクトにどのようなツールを選択するとしても、あなたがデザインするすべてのものを魅力的にするということを忘れないでください。 今日では模倣やコピーが多すぎるために創造性が無視されがちであるからこそ、自由に実験してください。 紹介した7つのトップツールは、あなたのデザインがユニークなものになることを保証するわけではありませんが、UI / UXデザインで新鮮なアイデアの基盤を築くのに役立ちます。   また、TechAcademyでは初心者でもUI/UXデザインができるようになるUI/UXデザインオンラインブートキャンプを開催しています。 現役のUI/UXデザイナーがパーソナルメンターとして受講生に1人ずつつき、マンツーマンのメンタリングで学習をサポートし、効率的にスキルを習得することができます。 独学に限界を感じている場合はご検討ください。
アプリデザイン

【無料版OK】ChatGPTで効率化！製品プロトタイプ設計と市場テスト計画の完全ガイド

製品プロトタイプ設計および市場テスト計画は、新商品開発において重要なプロセスです。特に、ターゲット層を変更する場合には慎重な計画が必要となります。今回は、老舗スーツケースメーカーが20代女性向けの新製品を開発するケースを例に、効果的な設計と計画の方法を解説します。 生成AIの実務活用スキルを磨きたい方は、無料の生成AIコミュニティ『テックアカデミーGAIナレッジベース』をご活用ください。今すぐ無料登録 製品プロトタイプ設計の重要性 製品プロトタイプ設計は、新商品開発の初期段階で行われる重要なステップです。この段階で、製品のコンセプト、機能、デザインなどを具体化し、実際に形にすることで、開発チームや潜在的な顧客からフィードバックを得ることができます。 20代女性向けのスーツケース開発では、以下のような点に注目してプロトタイプを設計することが重要です。 1. デザイン重視のアプローチ ファッションやデザインに敏感な20代女性をターゲットにする場合、見た目の魅力は非常に重要です。スリムで洗練されたデザインを基本としつつ、カラーバリエーションや装飾的な要素を取り入れることで、若い女性の心を掴むことができるでしょう。 2. 機能性とスタイルの融合 旅行やコンサート移動など、様々なシーンで使用されることを想定し、機能性も重視する必要があります。例えば、スマートデバイス用の収納ポケットやUSB充電ポートなど、テクノロジーを取り入れた機能は、若い世代に特に魅力的に映るでしょう。 3. 軽量化と耐久性の両立 頻繁に移動する20代女性にとって、スーツケースの重さは重要な要素です。ポリカーボネート素材の使用など、軽量化と耐久性を両立させる工夫が必要です。 これらの要素を踏まえて、具体的なプロトタイプ設計を行います。生成AIを活用することで、より効率的かつ創造的な設計が可能になります。以下は、生成AIを使用してプロトタイプ設計を行うためのプロンプト例です。 #命令 以下の要件を踏まえて、20代女性向けの新しいスーツケースのプロトタイプを設計し、その後の市場テストを計画してください。 #役割 あなたはトップデザイナーであり、製品開発チームのリーダーです。 #目的 20代女性の旅行やビジネスシーンに合わせて、機能的かつスタイリッシュなスーツケースを開発する。 #背景と課題 ・当社は、60年以上の歴史を持つ老舗のスーツケースメーカーである。 ・これまでの主なターゲットは40代以上のビジネスパーソンであり、堅実なデザインのスーツケースを提供してきた。 ・市場調査の結果、20代女性の旅行需要や推し活での移動があることが分かった。 ・新たな市場として20代女性をターゲットに設定し、そのニーズに合ったスーツケースの開発を計画している。 #ターゲット ・20代女性 ・コンサートでの移動、短期旅行を頻繁に行う。 ・ファッションやデザインに敏感。 ・機能性とスタイリッシュさを求める。 ・スマートデバイスの収納や充電機能などのテクノロジーを取り入れた製品を好む。 #製品情報 ・製品名：モダンジャーニースーツケース ・製品詳細： 　　・スリムで洗練されたデザイン。 　　・耐久性のあるポリカーボねいと素材を使用。 　　・独自のスマートデバイス収納ポケットおよびUSB充電ポートを装備。 　　・360度回転する滑らかなキャスターと伸縮式のハンドル。 　　・内部には仕切りやポケットを多数配置、整理整頓が容易。 #市場テストの条件 ・テストは都内のショッピングモールのポップアップストアで2週間行う。 ・20代女性を対象にアンケートを実施し、製品の魅力や改善点を収集する。   このプロンプトを使用することで、生成AIは具体的なプロトタイプ設計と市場テスト計画を提案してくれます。以下は、生成AIによる出力例です。 プロトタイプ設計および市場テスト計画 プロトタイプ設計 デザイン方針 1.カラースキーム: 鮮やかな色合いとパステルカラーを組み合わせたデザインで、ファッション感覚を引き立てる。 2.パターンとデコレーション: 花柄や抽象的なパターンを取り入れ、スタイリッシュさを強調する。 3.ハンドルとキャスター: ローズゴールドのアクセントを使用し、高級感を演出する。 4.ブランドロゴ: シンプルで洗練されたロゴをデザインし、製品にブランドアイデンティティを付与する。 機能と仕様 1.ポケットと収納: 内部に化粧品、衣類、靴、およびスマートデバイス用の専用ポケットを設け、整理整頓がしやすくする。 2.USB充電ポート: スマートフォンやタブレットを充電できるUSBポートを装備し、便益を提供する。 3.軽量かつ耐久性: ポリカーボネート素材を使用して軽量化と耐久性を確保する。 4.セキュリティ: TSAロックシステムを組み込み、旅行中のセキュリティを向上させる。 市場テスト計画 前提条件 ・テストは都内のショッピングモール内のポップアップストアで行う。 ・テスト期間は2週間とし、週末を含む。 テスト対象者の選定 ・20代の女性を対象にする。 ・都内在住または近郊に住む人々を優先的に招待し、外部からの訪問者も受け入れる。 テスト内容 1.製品展示: モダンジャーニースーツケースの展示を行う。デザイン、機能、収納などの特徴を強調する。 2.アンケート調査: 訪問者に対して製品に関するアンケートを実施する。以下の項目を評価してもらう： ・デザインの魅力 ・機能の有用性 ・ポリカーボネート素材の評価 ・スマートデバイス収納ポケットとUSB充電ポートの便益 ・価格に関する意見 ・その他のコメントや提案 3.デモンストレーション: 製品の機能をデモンストレーションし、テスト対象者に直接体験させる。 4.セールスプロモーション: 特別価格や特典を提供し、実際に製品を購入してもらう機会を提供する。 テスト結果の分析 ・アンケート結果と顧客のフィードバックを集計し、製品の強みと改善点を特定する。 ・デザインや機能に対する肯定的な反応を強調し、改善点に対するアクションプランを策定する。 ・価格設定に関する情報を収集し、競合製品との比較を行う。 アクションプラン ・テスト結果に基づいてデザインや機能を調整し、市場への投入準備を進める。 ・ターゲット市場への製品紹介と販売戦略を開始し、広告キャンペーンを展開する。 以上の設計と計画に基づいて、20代女性向けの新しいスーツケースのプロトタイプを開発し、市場テストを成功させることができるでしょう。市場テストの結果を慎重に分析し、最終製品の成功に向けた戦略を立てることが重要です。   市場テスト計画の重要性 プロトタイプが完成したら、次は市場テストの計画を立てます。市場テストは、実際のターゲット層に製品を試してもらい、フィードバックを得る重要なプロセスです。 1. テスト環境の設定 都内のショッピングモールでのポップアップストアという設定は、20代女性が頻繁に訪れる場所であり、適切なテスト環境といえます。2週間という期間設定も、十分なデータを収集するのに適しています。 2. フィードバック収集方法 アンケート調査やデモンストレーションを通じて、製品の各側面（デザイン、機能性、価格など）に関する詳細なフィードバックを収集します。これにより、製品の強みや改善点を明確に把握することができます。 3. データ分析と改善計画 収集したデータを分析し、製品の改善点や市場戦略の調整に活用します。ターゲット層のニーズに合わせて製品を微調整することで、市場投入時の成功確率を高めることができます。 [PR] Webデザインで副業する方法とはまとめ 製品プロトタイプ設計および市場テスト計画は、新商品開発の成功に不可欠なプロセスです。20代女性向けのスーツケース開発という具体的なケースを通じて、以下のポイントが重要であることがわかりました。 1. ターゲット層のニーズと好みを深く理解し、それに合わせたデザインと機能を設計する 2. プロトタイプを通じて、製品コンセプトを具体化し、初期フィードバックを得る 3. 適切な環境で市場テストを実施し、実際のターゲット層からの反応を収集する 4. テスト結果を詳細に分析し、製品改善と市場戦略に活かす これらのステップを丁寧に実行することで、新市場への参入を成功させる可能性が高まります。 なお、このプロセスにおいて生成AIの活用は非常に効果的です。無料版のChatGPTでも十分な品質の出力が得られますが、有料版を使用することでより高速かつ高品質な結果を得ることができます。製品開発チームは、AIの提案を基に議論を深め、より洗練された設計と計画を立てることができるでしょう。 生成AIの実務活用で悩んでいる方へ ChatGPTなどの生成AIを業務に取り入れてみたものの、思うような結果が得られない。あるいは、ビジネスでの活用に限界を感じている。そんな方々にお勧めしたいのが、『テックアカデミーGAIナレッジベース』です。 このコミュニティは、生成AIの実務活用に特化した知識と経験の宝庫です。以下のような特徴があります。 500件以上の実務で即活用できるプロンプト集 プロのエンジニアに生成AIについて直接質問可能 同じ関心を持つビジネスパーソンとの交流の場 通常、このレベルの生成AIコミュニティには10万円程度の費用がかかります。しかし、『テックアカデミーGAIナレッジベース』は完全無料でご利用いただけます。 生成AIの可能性を最大限に引き出し、ビジネスの競争力を高めたい方にとって、このチャンスを逃す手はありません。今すぐ登録して、生成AIの実務活用スキルを飛躍的に向上させましょう。 今すぐ無料登録
生成AI・ChatGPT

「Sketch vs. Figma」デザインツールとして優れているのはどちらか

本稿は、Smashing Magazineのブログ記事を了解を得て日本語翻訳し掲載した記事になります。 本記事は、WebデザイナーであるChristian Krammer氏によって投稿されました。   UIデザインツールはこれまでにおいてかなりの人気を集めてきました。Affinity Designerや、Gravit、Sketch等の素晴らしいアプリケーションが大きく進化した一方でAdobe XD （Adobe Experience Designの略）やFigma のようなプレイヤーもこのフィールドに参入してきました。 個人的には後者に最も魅力を感じます。Sketchとの類似性から、Figmaも最初の段階から簡単に正しく理解できました。更にFigmaは簡単なファイルの共有やvector networks、「constraints」(レスポンシブデザイン向け）、リアルタイムコラボレーションのような他の使い易い競合相手とは明確に違う独自の個性があります。 この記事ではSketchとFigma 両方のアプリケーションを細部に渡り比較し、それぞれの長所がどのような点かに焦点を当てていきます。   Sketchの最大の弱点は常にAppleのエコシステムにロックインされている事です。設計するだけではなく、ファイルを開きチェックするのにもMacが必要です。WindowsやLinux上では全く機能しません。 その為しばらく経つとSketchファイルのスペックを持つ有料のサービスが現れた訳ですが、それにしても厄介で余分な手順です。 上：Sketch  下：Figma   これが恐らくFigmaが最初の段階から一線を画す理由の1つです。 すなわち、世界中基本的にどのデバイスでもFigmaはWebブラウザで使うことができます。どのインストールも一切不要です。ただChrome（又はFirefox）を開いてアカウントを作成して設計を開始するだけでいいのです。 私は以前からずっとブラウザベースのツールを躊躇していましたが、Figmaは一瞬で私の懸念を仏拭しました。Figmaは多数の要素を含みながらもSketchと同様高性能です（もし同様でなければFigmaの方がより高性能です）。 WindowsやMac用のFigmaのスタンドアローンデスクトップアプリも入手可能ですが、基本的にそれらはただのブラウザバージョンのラッパーにすぎません。それらはキーボードショートカットにより優れた一方で、常にオンライン上にいなければなりません。 勝者：Figma 理由：プラットフォームに依存しないため   ユーザビリティ（特徴的機能とユーザーインターフェース） 基本的に、FigmaはSketchのインブラウザ版と呼ぶのが最も相応しいでしょう。機能はほぼ同じ、インターフェースも似ている、キーボードショートカットでさえもほぼSketchから受け継いでいる。 もし既にSketchを知っていれば、Figmaが2016年の始めにリリースされた時にすぐに簡単に使いこなせるようになったでしょう。   Figmaはリリース当初から様々な点において改善され、いくつかの部分ではSketchを上回ってきました。 しかし、プラグインやサードパーティ・ツールとの統合、リアルデータを利用できる機能（Craft Pluginも使用して）など、欠けている機能が未だにいくつかあります。それにも関わらず、この調子で改善が進むとFigmaがSketchに肩を並べるのはもはや時間の問題でしょう。 勝者：引き分け 理由：現時点では大差はありません。しかしSketchの方があなたの仕事を効率化させる要素を持ち合わせています。   価格 Sketchは元々新しいバージョーンごとに約99USドルの初回手数料のみで発売されました。しかしやがてこのビジネスモデルは維持不可能だと判明されます。Bohemian Coding社は最近価格を定期購入が必要なモデルに変更しました。99USドルで1年間の無料アップデートが入手できます。 その後はそのまま使い続けることができるか、更に同額を支払うことでまた別の1年アップデートが行えます。 この値上がりは当初不適切なように見受けられましたが、デザイナーとしてあなたのメインツールへの99ドルの価値とは何でしょうか？そうです、大した額ではありません。 Adobe’s Creative Cloud の定期購入よりはまだ安いのです。（又、Sketchは何の問題もなく使い続けることができる一方、Creative Cloud の定期購入を辞めたらどのAdobe CC アプリも使い続けることができなくなります。）   当分の間は、Figmaは全ての人が無料で使えるようになっていますが、今年後半には変わってくるでしょう。 きっと定期購入制になり、月額10~15USドルになるでしょう（あくまで私個人の見解ですが）。確かな事は1つあります。それは、Figmaは学生に対して常に無料でしょう。（Sketchが教師と学生に対しリーズナブルなディスカウントを提供しているのと似ています。） 勝者：引き分け 理由：Figmaの価格に関する発表はまだない為   [PR] Webデザインで副業する方法とはコラボレーション機能 Figmaの主な差別化要因は恐らく「マルチプレイヤー」と呼ばれるリアルタイムコラボレーション機能でしょう。その機能を使って他のユーザーと同時に1つのファイルを編集することができるだけでなく、他のユーザーがデザインをいじっているのを見たり、内蔵型のコメント機能を使って変更を知らせることができます。 1つの例として、この同時編集はプレゼンテーションやリモートチームにとって素晴らしく、また関わっている全てユーザーが同じ状態を確認し、意図していなかった上書きを防ぐことができます。   Sketchには（プラグインを使用してですら）そのようなコラボレーション機能はありませんし、多分そのような機能がない方がSketchにとってはよいのかもしれません。 なぜなら「このボタンをもっと大きくしよう。ちょっと待てよ、勝手にやっちゃえ！」というような結末をもたらすかもしれないからです。もちろんこれは少し大げさな例です。この機能は多少価値はありますが、事前に特定のルールを決めておかないとリスクがあります。 勝者：Figma 理由：同時に同じファイルを複数の人で共同編集できる為   ファイル共有とスペック リアルタイムコラボレーション機能に幾らか関連しているのは設計ファイルの共有です。なぜならFigmaではすべての事がブラウザで行われるため、全てのファイルが必然的にURLを持っていて、それを同僚や上司に送ることができます（閲覧専用モードでも可能です）。 このブラウザベースのアプローチの別の大きな利点は、開発者をはじめ全ての人がサードパーティツールの必要性なしにすぐにデザインを開き検証できることです。 Figmaでは簡単に他のユーザーとデザインを共有できます。   これはまさに、1つのファイルにおいて必要不可欠な全ての情報（例えばフォントサイズや色、寸法、アセットなど）を他の共同制作者に提供するためにSketchに求められているものです。 しかしながら、前にも述べたように、ここであなたを手助けするZeplinやSimpli、InVisionの Inspect、Avocode、Marklyなどの有料のツールが必要です。公平な立場からみて、最初の3つは1つのプロジェクトでは無料ですが、より複雑なものに取り組む際にはそれだけでは十分ではないでしょう。   更に何らかのツールを必要としている場合や、そのような（正直なところ基本的な）機能にお金をかけたくないというのであれば、MarketchやSketch Measureという無料のプラグインもあります。多くの有料のアプリではコメントを追加したり自動的にスタイルガイドを作成することができます。 あるいは、FigmaはSketchのファイルフォーマットをサポートしているので、SketchのファイルをFigmaにインポートしてチェックすることさえできます。 左上から右下順に:Avocode、Zeplin、Simpli、Markly。これら全てにおいて様々な方法でSketchのデザインの閲覧、共有可能。   もし共同編集者とデザインをちょっと見たいだけであれば、内蔵されているSketch Cloudが正にその役割を果たしてくれます。iOSデバイスでデザインを見るには、Sketch MirrorやFigma Mirrorを使って、Androidのデバイスであれば、MiraやCrystalを使用することができます。 FigmaはAndroidベースのアプリを提供しないのですが、（デスクトップコンピューター上で）フレームかコンポーネントを選択後、デバイス上で「www.figma.com/mobile-app」を開くと、1種のプレビューが見れるでしょう。 勝者：Figma 理由：サードパーティツールの必要性なしにブラウザ上で簡単にファイルの共有が可能な為   ファイルの整理 Sketchには、ページを提供するという組織能力があるため1つのファイルでアプリやWebサイト全体を作ることができ、ページ同士のスイッチも即座に可能です。Figmaはこの点において後れをとっています。 Figmaはページを提供しませんが少なくとも複数のファイルを1つのプロジェクトに結合することは可能です。 左：Sketchでは1つのファイルを複数のページに整理でき簡単にスイッチ可能 右：Figmaのプロジェクトは未発達   アートボードというSketchのもう1つ重要なコンセプトも適応され強化されました。Figmaでは塗りつぶしやボーダー、エフェクトを簡単にアートボードに適用でき、またそれらをネストしたりグループから簡単に作成することもできます。1つの例として、これにより組み合わされた範囲より大きな要素のコンテナも許容され、「constraints」機能の手助けになりうるでしょう。 更には、各アートボードには独自のネストされたレイアウトグリッドがあり、それによりレスポンシブデザインに役立つのです。 Sketchでもアートボードをネストすることが可能ですがそのインプリメンテーションはFigmaと比べると全く有効的ではありません。 勝者：引き分け 理由：Sketchにはページがあるが、Figmaのアートボード（フレーム）はより有効的な為   レスポンシブデザイン Figmaが導入した（Sketchにも何ヶ月か経ってから導入された）機能はレスポンシブデザイン、すなわち、どのように要素が異なるアートボードやデバイスのサイズに対応するかを設定した機能です。 Sketchでそのような機能を提供するプラグインが以前からありますが、ちょっと使いにくい感じがありました。「group resizing」という特有の機能だけはFigmaの「Constrains」機能に匹敵して簡単に使用できます。 左：Sketchの「group resizing」機能は1つのドロップダウンメニューで設定され慣れるまで少し時間がかかります。 右：Figmaの「constraints」機能はより目で見てわかるようになっています。   両者とも基本的に同じような動作ですがその見栄えは一目瞭然。Sketchでは4つのオプション付きのドロップダウンメニューしかなく、操作中に一体どんなふうになるなるのかがイメージしずらいです。Figmaはよりビジュアル化した方法でこれらのプロパティを明確にします。 例えば、ある要素をアートボードの端に固定するか、それと均一にリサイズする事などができます。 Figmaの大きな利点はこれらの制約がレイアウトグリッドと一緒に組み合わせることで機能することです。要素は、例えばある列（又は行）に固定されるか、それらの幅に一致します。更には、各軸にこれらの設定を個別に変更することができ、グループだけではなくアートボードにも機能します。Sketchではあり得ない機能です。 勝者：Figma 理由：その制約機能は遥かに進化していてより多くのオプションがある為   ベクトル　マニピュレーション Figmaが発売された時の1つの大きな特徴は「vector networks」でした。もはやベクトルはただ一連の繋がった点（ノード）ではありません。今や、新しい線でどのノードからも分岐する事ができます。例えば、矢印を作るのなんて朝飯前です。 Figmaのvector networksはベクトルのどの点にもセグメントを追加することができます。 しかしそれよりも遥かに勝っているものがあります。ベクトルのパーツはPaint Bucketツールで簡単に塗りつぶされる（又は削除される）事ができます。ベンドツールを使ってセグメント全体を動かす（又は曲げる）事も可能です。そして1つのベクトルから別のベクトルへ線点も同様に）をコピーするのは一瞬でできます。 Figmaのvector networksでセグメントを簡単に動かしたり曲げたりする事ができます。   この特殊な機能1つでFigmaはSketchと一線を画しており、アイコンデザインに適したものになっています。 それに比べ、Sketchで利用可能なツールはほぼ時代遅れな感じを受けます。Sketchではベクトルオブジェクトを作成し操作するために必要なすべてのものが揃っているかもしれませんが、より複雑なベクトル操作が必要になってくるとすぐに扱いにくくなるでしょう。 はじめの図：Figmaでは、ペイント塗りつぶしツールを使って2つの重複した円の塗りつぶされた部分を削除し1つの輪をつくる。 2番目の図：Sketchではブール演算を用い従来の手法を使っている。(ちなみにこの方法はFigmaでも可能)   ほとんどの場合、Sketchではある特定のタイプの形を作るのにブール演算を使用しなければいけませんが、その多くはFigmaのvector networksではより簡単に作成可能です。Sketchでは2つのベクトルオブジェクトを繋げたり、またはブール演算が適用された後に形を平らにすることさえしばしば難しいという事実がさらに物事を悪化させます。このアプリはこの点において問題が山積みなのは確かです。 勝者：Figma 理由：vector networksは全く新しい次元をベクトルマニピュレーションにもたらします。Sketchにおいてはまだそれと匹敵するものはありません。   サポートされているファイルの種類 新しいアプリケーションが出るたびに、もしプロジェクトを移行したければ全てをやり直さなければいけないという問題によく直面するでしょう。Figmaではそうではないのです。見事なほどに正確な方法でSketchのファイルを開くことができ、この時点で既にFigmaが優位です。 残念なことに逆パターンでは機能しません。1度Figmaでデザインをスタートしたらもうそれを使い続けるしかないのです。SketchにエクスポートすることもPDFファイルを作成すること（またはインポートすること）もできません。SVGにエクスポートするオプションもありますが、デザインアプリケーション間で複雑なファイルをエクスチェンジするのに理想的なフォーマットではありません。 エクスポートオプションは一見似ていますがSketchにはより多くのオプションがあります。 左：Sketch 右：Fiigma   もう1つの制限要因はJPG画像をFigmaでエクスポートしたときにその品質水準を設定できないことです。なので画像を最適化する他のアプリケーションが必要になるかもしれません。Sketchの最新版ではさらにもっとエクスポートのオプションが改善しています。 現在ではファイル名に接頭辞と接尾辞の両方を設定できると同様、Androidへのエクスポートをはるかに簡単にさせるエクスポートプリセット機能があります。 各アプリケーションがサポートするエクスポートファイル形式を見てみましょう。 Sketch PNG JPG TIFF WebP PDF EPS SVG   Figma PNG JPG SVG 勝者：Sketch 理由：より多くのファイル形式とより良い保存、エクスポートのオプションがある為   アクセシビリティ FigmaにはSketchで使用できる多くのショートカットキーがありますが、そのアクセシビリティのレベルは同じではありません。Sketchではほぼ全ての事がキープレスで行うことができます。 もし気に入らないショートカットキーの組み合わせがあればあなた独自のやり方をシステム環境設定で登録することが可能です（デフォルトによって割り当てられないショートカットコマンドが主になる傾向があります）。 macOSのシステム環境設定でSketchのあなた独自のショートカットキー設定が可能   Figmaはブラウザ上に存在しているためそのようなことは一切不可能です。デスクトップアプリでその点を補うことができますが、特定のメニューバーコマンドが無いせいである特定の機能を単純にキーボードに割り当てることは不可能です。 勝者：Sketch 理由：そのアプリケーションのほぼ全ての機能がショートカットキーでアクセスすることができ、更にはカスタマイズできる為   シンボル（コンポーネント） 1つの重要な機能がちょうどFigmaに導入されました。それはシンボル、又はここではコンポーネントと呼びます。コンポーネントを使用すると、「instances」の形式で簡単に再利用できる1つの複合オブジェクトにいくつかの要素をを組み合わせることができます。主要なコンポーネントが変更されるとすぐに、全てのインスタンスがその変更点を受け継ぎます。（しかしながら、その同じコンポーネントのバリエーションを考慮して特定のプロパティは個別に修正されます。） 最近では、Figmaではファイル間や複数のユーザーと一緒に共有できるコンポーネントのライブラリを作成することさえ可能です。これは確固たるデザインシステムへの大きなステップです。 Sketchでは、個々のインスタンスの修正がインスペクタパネル上でオーバーライドの形で処理されるので、各インスタンスごとにテキスト値や画像の塗りつぶし、ネストされたシンボルの変更が可能です。 Figmaでは、塗りつぶし、ボーダー、効果（影やぼかし）を含め、キャンバスで直に1つの要素のプロパティをアップデートすることができます。 上：Sketchではインスペクタパネル上でオーバーライドを使用してシンボルインスタンスの内容を変更します。 下：Figmaではテキストの色を含め直接キャンバスキャンバスでコンポーネントのインスタンスをカスタマイズできます。   シンボル（コンポーネント）の真の強みはレスポンシブデザインで発揮されます。どちらのアプリでも、親のサイズが変更された時にどの様に要素がシンボル内で反応するか定義することができ、異なる場所や画面のサイズでシンボルを使うこともできます。 Figmaが未だに後れを取っている領域はレイヤーやテキストスタイルです。形やテキストレイヤーのスタイリングを保存することができなく、他の要素と同期することも不可能です。しかしながら、1つの要素から別の要素にスタイリングをコピーして貼り付けることはできます。 勝者：引き分け 理由：インプリメンテーションは極めて同じレベルですが、Figmaはその共有可能なコンポーネントでわずかに有利です。   プラグイン Sketchは並外れて素晴らしい機能を兼ね備えていますが、それを決定打にしているのはSketchを強化させたり足りない機能を補うサードパーティプラグインの存在でしょう。 1度に複数のレイヤーの名前を変更したり、ダイナミックボタンを作成したり、カラーパレットを保存し読み込んだり、Unsplashから簡単に画像を挿入したり、Git機能を有効化したり、Sketchの中でアニメーションを創り出すことができたりなど、使用目的は様々です。プラグインの全リストは公式ディレクトリやGitHub上で見ることができます。 公式WebサイトとGitHubの両方で、Sketchの膨大なプラグインのセレクションを閲覧可能です。 では、Figmaですが、現段階では全くそのような機能はありません。公平に言うと、Sketchは恐らく開発の初期段階ではこれらの多くの機能はありませんでした。そして将来的にはFigmaにもプラグインエコシステムが導入されるのは確実でしょう。 注意したいこと：プラグインがSketchに大きな利点を与えた一方で、それらが何かしらの落とし穴にもなりえます。それらは新しいリリースの度に正常に機能しない傾向があり、Sketchチームは将来の開発者たちを遠ざけないためにも細心の注意を払う必要があります。 勝者：Sketch 理由：単純に、Figmaにはプラグインが全くない為   プロトタイピング AdobeXDと違ってSketchもFigmaもプロトタイピング機能が備わっていません。今のところFigmaには導入される予定はありませんが、Sketchには少なくとも基本的なプロトタイピング機能をもたらすCraft Pluginがあります。更にその人気でSketchは他のプロトタイピングツールとの幅広く統合することが可能です。 例をいくつか挙げると、InVision、 Marvel、Proto.io、Flinto、Framerなどがあります。これらを一緒に使うことによって簡単にデザインをインポートしてアプリを同期することができます。   現時点でFigmaと動作する唯一のアプリケーションはFramerです。似たようなツールのサポートが将来どのようになっているか述べるのは難しいですが、そのようなインターフェースが既に製作段階かもしれません。 勝者：Sketch 理由：Craft Pluginには説得力のあるプロトタイピング機能がありませんが、Sketchは多くのプロトタイピングサービスと統合している為   実データでの作成 Sketchが提供する数あるプラグインの中でいわゆる「content generators」というものを見つけるでしょう。その一例として、ダミーコンテンツでデザインを埋めることができます。 しかし、より興味深いことはこれらのちょっとした機能が様々な情報源から実データを引き出すことを可能にし、またJSONファイルの形で内容を挿入することさえ可能です。 これにより設計の初期段階でより情報に基づいた判断ができ、エッジケースも明らかにできます。   このカテゴリーで最も優れているのはInVisionのCraft Pluginです。 それを使ってある要素に内容を追加するとすぐに、1つのステップで簡単にその内容を複製・変更する事ができます。Craftではデザインのアセットを保存し、チーム内で共有したり又は自動的にスタイルガイドの作成も可能です。 他の機能やオプションの中でも、SketchのCraft Pluginでは要素を複製し、同時に他の内容を追加することができます。   Craftよりは優れてはいませんが、似たような機能を持つプラグインがもう数個あります。Sketch Data Populator、Content Generator 、 Day Playerがそうです。 Figmaにはまだそのような機能はありませんが、時間の問題だと思います。Adobe XDが少し前に適応したようにアプリにその機能を統合するのか、もしくはプラグインシステムに依存するのか、どちらの手段をとるか興味深いところです。 勝者：Sketch 理由：Sketchでは様々なプラグインで備え付きの機能の不足を補い、簡単に実データを使用できる為   バージョニング 私がいつも行っていることの1つは、始めの頃のデザインがどのような感じだったか見るためにCommand+Zを使って変更点を1つ1つ元に戻すことです。評価の基準を持つか、新しいイテレーションをベースとして複製するかのどちらかです。Figmaはブラウザ上の限られたリソースのためここで行止まりと思うかもしれませんが、実際はSketchに劣ってはなんかいません。 どちらのアプリでも古いバージョンをブラウズして復元する事ができ、自動的に保存されます。しかしながら、Sketchのインプリメンテーションは理想とはかけ離れていて、どこから始めるかもわかりません。何といっても時間がかかるのです。   実際に閲覧できる前にバージョンを復元しなければいけなかったり、ハードドライブ上でスペースを無駄にする結果になるかもしれません。さらに言えば、クラウド上で(Dropboxを介してなど)複数の人が同じファイルで作業している時に簡単にダメになってしまう可能性があります。 Figmaでは瞬時に前のバージョンを復元する事ができ、複数の人が同じファイルを編集している時はそれぞれの人の変更を分離できるので役に立ちます。それから前の状態に戻ったり、新しいアイデアの出発点としてバージョンを復元することができます。 勝者：Figma 理由：Sketchのバージョニングは不完全過ぎて勝敗は明らかです。   テキスト機能 他の点と同様に、どちらのアプリケーションでもテキスト操作はかなり似ていますが、いくつかの違いは言及する価値があります。デフォルトによってFigmaではGoogle Fontsからでしか選択できないのですが、単純にインストーラーでシステムォントにもアクセスできます。 私が常にSketchに物足りなさを感じる部分はテキストレイヤーのボーダーの位置の変更機能です。ここでは「中心」だけが唯一の選択しです。Figmaにはその他にもシェイプレイヤー用であるかのごとく「内側」と「外側」が選択できます。 左：Figmaでは、テキスト枠内の垂直の位置（上）が設定でき、さらにボーダーの位置のオプションがある（下） 右：SketchではOpenType機能が適用される   さらにFigmaではテキストを垂直に配列する設定ができる為、枠内で垂直に中央揃えすることが容易です。対照的にSketchではより多くのタイポグラフィのオプションがあり、スモールキャップス、古い形式の図形、スタイルの選択肢や合字（フォントでサポートされていれば）等のOpenType機能が適用できます。 勝者：引き分け 理由：どちらのアプリケーションもそれぞれ違った利点があります。Sketchの方がその進化したタイポグラフィオプションで少しリードしていますが、完全な勝利にはまだ不十分です。   結論 簡単に各アプリの長所をおさらいしましょう。 Sketchの良い点 キーボードのアクセシビリティがより良くサポートされている プラグインとプラグインエコシステムがある サードパーティツールとサービスを統合可能 ファイルタイプとエクスポートオプションが豊富 複雑なプロジェクトを1つのファイル（ページ付き）にまとめることが可能 Sketchでは簡単に実データを使える より洗練されている   Figmaの良い点 ブラウザベースなので、世界中どの場所からどのプラットフォームでも使用可能 リアルタイムで共同作業できる ファイルの共有が簡単 ベクトルマニピュレーションが優秀（vector networksを介して） レスポンシブデザインオプションがより優れている（constraint機能により） コンポーネントのライブラリを作成しチームのメンバーと共有可能 アートボードがより強力   今後の展望 2013年のAdobe Fireworksの廃止はUIデザインツール界に大きな空白を残しましたが、Sketchがすぐにその空白を埋めてくれました。 Sketchが大成功を収め、その人気は主なライバルであるPhotoshopに徐々に迫り、ついには昨年インターフェースデザイナーのユーザー間における調査「the tool of choice」でトップの座に輝きました。 Sketchは恐らくWindows版があればより成功したでしょうが、他のツールにも問題はあります。Affinity
アプリデザイン

あなたの目的に合わせて学べるコース

副業したい方

Web制作の力を身につけ
副業までサポート

はじめての副業コース

転職したい方

未経験から
Webエンジニアに

Webエンジニア転職保証コース

スキルアップしたい方

AIも統計解析もできる
Pythonを学ぶ

Pythonコース

※ 経済産業省の行うリスキリングを通じたキャリアアップ支援事業の補助金対象コースです。条件を満たすことで支払った受講料の最大70％がキャッシュバックされます。詳しくは こちら のページをご確認ください。

TechAcademyから
現役エンジニアの方へ
お知らせ

オーダーメイドコース
TechAcademy（テックアカデミー） UX/UIデザインコース スマートフォンアプリ開発 アプリデザイン 【アプリ開発にも役立つ！】プロトタイプを作成できるツール5選