インフラエンジニアを募集中です。その1:「InVision」WebサービスWebデザインWeb制作ツールsito2018.04.25こんにちは。一月程前からAmazonプライムで『ドキュメンタル』を見始めたらすっかりはまってしまいました。現在Season4鑑賞中です。Season5も早く見たくてたまりません。XDの記事はいろいろと書いてきましたが、ほかのプロトタイピングツールはどんな感じなのかが気になったのでいろいろと触ってみようと思い至り、今回は、手始めに「InVision」を試してみました。使いこなすまでには至っていませんが、ひとまず現状のXDと比べて便利だった点や、使ってみての所感など書いてみようと思います。「InVision」って?https://www.invisionapp.com/無料で始められるプロトタイピングツールです。無料プランでは1アカウント1プロジェクト作成できます。プロジェクト数を増やしたい場合は有料になるようです。Sketch(私は使ったことがありませんが)との連携が強いようなので、SketchユーザーさんはよくInVisionを使っているイメージです。InVisionでできることInVisionの機能はだいたいこんな感じのようです。進捗管理コーディング情報の確認、CSSの出力、アセットの書き出し外部ソフト(Sketch、Photoshop)との同期InVisionの便利なところ!Sketch、Photoshopと同期できる!プロジェクトを作成すると、デザインデータのアップロード画面が開きます。Sketch、Photoshopのデータを同期するか、jpg、pngなどに書き出したデザインデータをドラック&ドロップでアップロードできます。Sketchは使ったことがないので、普段使っているPhotoshopのデータで同期をためしてみました。同期にはCraftというプラグインを使います。プラグインのインストール、同期についてはこちらを参考にさせていただきました。http://blog.officekoma.co.jp/2018/02/craft-invision-photoshop_16.htmlプラグインを入れたら、こんな感じでPhotoshopから同期してやると、InVisionに読み込まれます。更新がInVisionに反映されます。Sketchと比べてPhotoshopの同期は重いという噂ですが、確かにちょっと重たい感じはありますね。比べたわけではありませんが。プロトタイプの機能が充実ヘッダーやフッターの固定ができるXDでも要望の多いこの機能!InVisionでは出来るのが嬉しい。ページ内遷移ができるちょうど先日、XDでプロトタイプを作成したときに、ページ内遷移もできたらいいのになー...、と思っていたところなのですが、これもInVisionでは可能です!オーバーレイ表示ができるこれも嬉しい機能。ホバーや展開するナビゲーションの表示や、ライトボックスのような部分の見え方も表現できます。ホバー状態からのページ内遷移もしたいなーと思ったのですが、今回はやり方がわかりませんでした。スマホのときですが、設定できるジェスチャーとトランジションが豊富です。フリーハンドでもコメントができるコメント機能はXDにもついていますが、InVisionではフリーハンド(ペンツール)でのコメントができます。バージョン管理ができるHistoryモードには、デザインの変更が履歴として残っています。進捗管理ができる各スクリーンのステータスを管理できます。まとめ英語なので敬遠してしまっていたのですが、XDと比べてプロトタイプ機能が充実しているので、Sketchユーザーでなくても使う価値ありだと思いました。私は基本的にAdobeユーザーなので、個人的にはXDもこれくらい機能が充実してくれると助かるのですが...。案件によりけりで、今のXDで十分な場合もあると思いますが。Studio」がとっても気になります。Accessが可能みたい(登録してから触れるまでに時間かかっているような雰囲気があるのですが、最近はすぐ使えるのかどうなのか...)なので、そっちも触ってみようかと思っています。https://www.invisionapp.com/studio次に試してみたいツール次は国内産のプロトタイピングツールであるProttを試してみようかと思います。https://prottapp.com/ja/参考https://blog.cntlog.net/archives/1802https://webdesign-trends.net/entry/2565https://webdesign-trends.net/entry/4055最後に今回サンプルに使った、弊社、Webソリューション事業部の採用サイトはこちら。XDsito2019.07.30はてブDockerのコンテナ上で作成したファイルを別コンテナに共有する方法DB&サーバyamashita2019.05.07はてブバシャログ。Web制作スタッフによるブログです。「現場で使えるテクニック」をモットーに、Web制作全般についてお届けします。