ShellWebサービスの会社で働くデザイナーが、デザインやライフハックについてゆるく書き連ねるブログです。2015-09-08プロトタイピングツール「InVision」が使いやすくて楽しい件Web「InVision」というプロトタイピングツールが秀逸だったのでご紹介します。みなさん、Webやアプリを作成する際にプロトタイピングは行っていますか?プロトタイピングは、実装を行う前にUI/UXの検討を行うことができます。そのため、あらかじめプロトタイピングによってUIの整合性が取れているか、快適な操作性を持たせることができているか確かめることで、事前に重大な欠陥が生まれることを防ぎます。やり直しも簡単なので、より良いプロダクトを作るために事前にたくさんの失敗をすることもでき、開発の初期段階からUIを洗練させていくことが可能です。そんなプロトタイピングを行うためのツールは既にたくさん普及していますが、その中でも今回はぜひ「InVision」の簡単さを知っていただきたいと思います。FREE」をクリックすると、ウィンドウが開きます。アカウント開設に必要なものは、メールアドレスとパスワードだけです。FREE」ボタンをクリックしてください。最初にログインすると、既に3つプロジェクトが入っています。これは「こんな感じでプロトタイプ作ってますよ」というサンプルなので、最初に眺めてみたらイメージがつかめるかもしれません。それでは自分用のプロジェクトを作っていきましょう。右上の「+(プラス)」ボタンをクリックします。ウィンドウが開くので、プロジェクト名を入力します。その下のセレクトボックスからは、「Desktop」や「iPhone」などから選ぶことができます。自分用のプロジェクトが作成できました!見ての通り、あとはここにじゃんじゃん画像を放り込んでいくだけです。プロトタイプを作ってみようそれでは、さっそく画像を放り込んでいきましょう!今回は、サンプルとして2枚の画像を放り込んでみます。こんな感じで、放り込んだワイヤーフレーム画像のサムネイルが並んで表示されました。SCENE」と表示されるのでクリックします。すると、先ほど読み込ませたワイヤーフレームが表示されました。このままではただの画像なので、ここからリンクエリアを設定しましょう。MODEのアイコンをクリックして選択した状態で、リンクを設定したい箇所をドラッグします。すると、画像のようにリンク先を設定するウィンドウが表示されます。To」のドロップダウンメニューには、あらかじめ読み込ませていた画像一覧がリストとして表示されており、ここから選ぶことで任意の画像に飛ばせるという仕組みです。MODEに切り替えておきましょう。(目のアイコンです)さて、ここで先ほど設定したリンクをクリックすると...画面が切り替わりました!こんな感じで、じゃんじゃん画像を放り込んでプロトタイプを作っていけます。以上、簡単でしたがInVisionの登録からプロトタイプの作成までを追っていきました!細かい部分はわたしの解説が雑で分かりづらかったかもしれませんが(笑)、なんとなくざーっと眺めていて簡単そうですよね。この機能だけでは他のプロトタイピングツールとの差異は無いように思われるかもしれません。実際には、プラグインを使うことでSketchのアートボードから直接InVisionに自動で画像を書き出してくれたり、細かいアニメーションが指定できたりなど、かなりすごいやつなんです。気になる方は調べてみてくださいね!ちなみに、この本でも「Sketchと連携した便利ツール」ということで少し紹介されてました。見るまとめプロトタイピングツールはいくつか試してはみたのですが、今のところこのInVIsionが一番使いやすいですね。Sketchユーザーであれば、InVisionはいちいち画像を書き出さなくてもアートボードから画面を自動生成してくれるプラグインが死ぬほど便利なのでおすすめです。以上、InVisionの紹介でした!もしプロトタイピングをしたことがない...という方は、ぜひ体験してみてください。去年の年度末頃に、「Figma」というコラボレーションツールを知...2016-02-03Sketchって流行ってるけど、正直どうなの?最近、Sketchを使うデザイナーが増えてきているようですね。Comet」に注目!気になるニュースを発見しました。Reserved.スターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。