OthloBlog - オスロブログ -

名古屋のIT系学生コミュニティOthloTechのブログです。

2018年 無料で使えるプロトタイピングツールまとめ

f:id:yuverna:20180308122828j:plain こんにちは、ちーずです。
今回は、3/11に「プロトタイピングワークショップ@エイチーム OthloEvent#26」があるということで、無料で使えるプロトタイピングツールを3つ紹介していきたいとおもいます!

プロトタイピングツールとは?

プロトタイピングツールって言葉はよく聞くけど、使ったことないしどんなことができるかよくわからない。。。
そんな人もいるとおもうので、まずはプロトタイピングツールってどんなもの?どんなことができるの?ってところを説明します。

そもそもプロトタイプって?

プロトタイプ(prototype)を日本語訳すると試作品です。
完成版を最初に全部つくってしまって、リリース後に欠陥に気付いたら改修するのがとっても大変ですよね?
そうならないためにもプロトタイプを作ることって大切なんです。

ちなみに、プロトタイプのメリットはこちらです。

  • 検証ができる
    プロトタイプをユーザーに使ってもらうことで、早い段階からユーザビリティテストやユーザーテストなどの検証を行うことができる。

  • 欠陥の早期発見 / 改善
    プロトタイプを用いて検証を行うことで、バグや使いづらい面などのサービスの欠陥を早い段階から知ることができ、改善することができる。

  • チーム間での認識のズレ解消
    デザイナーとエンジニア間でも、デザイナーからしてなんかインタラクションが予想してたものと違う?!って感じのズレがよく発生しますよね。他にも営業や企画などチームが大きれば大きいほどそのようなズレが発生すると思います。それをプロトタイプをつくることでプロダクトに対しての共通認識をもつことができます。

プロトタイピングツールはどんなことができるの?

そんなプロトタイプが作れるツール、プロトタイピングツール。
実際何ができるかっていうのは、ツールごとに違います。 インタラクションの表現に力をいれているツールもあれば、UIもプロトタイピングツール上でつくれたり、それこそ簡単さを売りにしているツールもあります。
自分がプロトタイプを作る上での目的を明確化して、ツールを選ぶとよいでしょう。

それではプロトタイピングツールを紹介していきます!
今回は無料でも使えるツールに焦点を絞って紹介しますね。


簡単にプロトタイプが作れる日本製のツール - Prott

f:id:yuverna:20180307162850p:plain

Goodpatchという日本の会社が提供しているプロトタイピングツールです。 おそらく、プロトタイピングツールの中ではAdobe XD、inVisionに並ぶ知名度をもっていると思います。

Prottの特徴

  • 日本製
  • webかスマホアプリで使える
  • 1プロジェクト無料
  • メアドで登録
  • 難易度 低め
  • 紙で書いたデザインを写真で撮ってプロトタイプを作れる
  • コンポーネントも充実しておりデザインができない人でもプロトタイプがつくれる
  • インタラクションも充実
  • URLでプロジェクトをシェアできる

Prottの良いところ

f:id:yuverna:20180307170924p:plain Prottの良いところはとにかく簡単である面であると思います。

UIの設計から、遷移、インタラクションの設定など幅広い機能があるものの、どれもとてもわかりやすく簡単に使えるのが最大の特徴です。

また、簡単にプロトタイプが作れるため、早期にプロトタイプを用いて検証をしたい場合に使うことをオススメします。
インタラクションの細かい設定はできないため、インタラクションの検証を行う場合は他のツールを用いた方が良いかもしれませんね。


webサイトみたいにプロトタイプが作れる日本製のツール - studio

f:id:yuverna:20180307165036p:plain 2016年に設立されたスタートアップの会社、STUDIO株式会社が提供するプロトタイピングツールです。
ちょっと特徴的だけど慣れたら一番早くプロトタイプを作成できそうなツールとなっております。

studioの特徴

  • 日本製
  • web上で使える。
  • facebookまたはメールアドレスで登録ができる。
  • 全部無料
  • コンポーネント充実
  • margin / paddingでレイアウトを調節するが、柔軟なレイアウトはできない。(web製作者向け)
  • 難易度 ちょっと高め
  • インタラクションは充実してない。

studioの良いところ

f:id:yuverna:20180307170453p:plain studioはwebを作っているみたいにプロトタイピングができます。
コンテンツを置きたいところに置くことはできず、webみたいにmargin/paddingでレイアウトを調節します。他にもflexboxみたいな整列のレイアウト方法もできます。

習得するのにちょっと時間がかかるかもしれませんが、このツールはweb製作者にかなりおすすめします! (web制作をやってきた私は、使ってみてかなり感動しました!)


チーム開発に特化しているツール - InVision

f:id:yuverna:20180307171522p:plain プロトタイピングツールの中でもっとも注目を浴びているツールのうちの一つ、InVision。
大人気Sketchプラグインがあるので、馴染みの深いプロトタイピングツールだと思います。

InVisionの特徴

  • 英語
  • web上で使える。
  • 1プロジェクト無料
  • 難易度 普通(英語だから難しくみえるかも)
  • InVision上ではデザインはできない。
  • 共同作成が可能
  • デザインに対してのコメントやログを共有ができる。
  • フリーハンドでもレビューが可能。
  • sketchと仲良し。InVisionのプラグイン「Craft」を使えばSketch上で画面遷移の設定を行えるようになり、プロトタイプ作成できる。

InVisionの良いところ

f:id:yuverna:20180308025553p:plain このサービスの良いところは、まさにチーム開発に特化しているところです。
共同作成が可能であったり、コメントやログが残せたり、プロジェクトの進行を管理できたり...
また、プロトタイピングツールであり、デザインのレビューツールでもあってUIデザイナーからもかなり注目を浴びています。

また、チーム開発に特化した機能がどんどん増えており、進化の早いプロトタイピングツールであります。 下記記事は、最新の機能がまとめられてますので、使ってみたい方はぜひ読んでみてください!
プロトタイピングツール「InVision」はここまで進化した | Web Design Trends

さいごに

以上三つを紹介いたしましたが、自分が使いたいプロトタイピングツールは見つかりましたでしょうか?
他にも、有料ツールであったり、インタラクションを重視したツールなど、挙げきれないほど様々なツールがあるので、色々触ってみて適したタイミングでサービスを使い分けるのも良いと思います。

3/11(日)のイベントでは、一番最初に紹介しましたProttを用いてプロトタイピングワークショップを行います。 プロトタイプの制作やユーザーのレビュー会、プロトタイプの改善など、一人ではできないようなワークショップになっています。 また、現場でのプロトタイピングの活かし方などの話も聞くことができますので、興味のある方は下記リンクから参加申し込みをお願いします!

othlotech.connpass.com