2回目の登場になります、安斎です。今は、技術本部 Advanced Dev. Center(略してADC) というところで、アメーバの開発環境の整備・改善に取り組んでおります。
ADCでは、Github Enterprise・SVN・JIRA・Confluence・Hipchatなどなど、開発のサポートを行うツールの導入・管理を行っております。
中でも今回は、昨年9月に導入したInVisionというツールについて紹介します。
アメーバでは、InVisionのEnterprise版を導入しました。
個人でも1プロジェクトであればフリーで使えるので(http://www.invisionapp.com/plans) 興味のある方は是非使ってみてください。
ところで、モックアップを作るということは、イメージの共有という点で大変優れている開発手順だと思います。今までは、フロントエンジニアやアプリエンジニアがコーディングをして擬似的なページを作ったりして、ある程度の時間を割いて作成していました。
しかしながら、導入のハードルが高いこともあり、モックアップを作成していたのはほんの一部のサービスだけでした。
そんな問題を解決してくれるのがInVisionです！
InVisionはデザイナーひとりで、モックアップの作成と、それに対するメンバーからのフィードバックを簡単に集めることができます。
デザインをアップロードし、次のページを指定していく
というのが、基本的な作業になります。
それでは、モックアップを作っていく過程を説明しましょう。
今回は下図のようなフローのモックアップを作ってみます。
出来上がったデザインをアップロードします。
すると下記のように「スクリーン」が出来上がります。
なお、同じファイル名の画像をアップロードしなおせば、画像の修正が可能です。
アップロードには、png、jpg、gif、psd、sketchに対応しています。
psdやsketchは、レイヤーを決まった命名規則で作成すれば、レイヤーから自動的にスクリーンを生成できます！
http://support.invisionapp.com/hc/en-us/articles/203730535-How-does-Photoshop-layer-syncing-work-
(これはいちいち画像を書き出す必要がないので、大変便利です！)
一つ目の「Mypage」をクリックすると下記のように表示されます。
次の動きを作ります。
「左上のクエストアイコンをタップすると、クエストページに遷移する」
という動きを設置します。
動きをつけるには、Hotspotというものを設置します。
タップさせたい場所に、ドラッグで矩形を描きます。
すると、吹き出しで「Link To」という遷移先を選択する入力フォームがあるので、プルダウンから「Quest」を選択します。そしてSAVEします。
マイページ→クエスト→パズル
と遷移するモックアップが完成です！
なんと数分でモックアップが出来上がるのです！
さきほど作ったモックアップを共有するには、「Share」をクリックします。
それを相手に伝えれば、プレビューをみることができます。
共有を受けた相手は、簡単にコメントを残すことによって、意見や依頼ができます。
InVisionではリアルタイムにチャットや会話をしながらデザインにディスカッションできる、LiveShareという機能もあります。
右のメニューからペンツールを選択すれば、フリーハンドで記入することもできます！
直接顔をあわせなくても意思疎通ができるので、制作の手法が広がりますね。
InVisionを導入することで、デザイン作業の効率化を図れたことは、アメーバの中でも革新的なことだったのではないかと思っています。
InVisionは現状リリースも頻繁で、日に日にバージョンアップを遂げているので、これからもさらに使いやすく便利になることを期待しています。
今後のInVisionの改善に期待しつつ、アメーバのたくさんのプロジェクトでInVisionを使ってもらえるように、工夫していきたいと思っています。
今回のブログで、InVisionについて興味をもっていただけたら幸いです。
アメーバでは、今までデザイナーさんの開発環境ということにあまりフォーカスしてこれなかったのが実状です。InVisionの導入というのは、デザイナーさんの開発環境改善という面で、大きな一歩だったと思います。
これからもADCは、アメーバの開発環境改善にさらに積極的に取り組んで行きたいと考えています。
ADCでは、Github Enterprise・SVN・JIRA・Confluence・Hipchatなどなど、開発のサポートを行うツールの導入・管理を行っております。
中でも今回は、昨年9月に導入したInVisionというツールについて紹介します。
InVisionとは
アメーバでは、InVisionのEnterprise版を導入しました。
個人でも1プロジェクトであればフリーで使えるので(http://www.invisionapp.com/plans) 興味のある方は是非使ってみてください。
ところで、モックアップを作るということは、イメージの共有という点で大変優れている開発手順だと思います。今までは、フロントエンジニアやアプリエンジニアがコーディングをして擬似的なページを作ったりして、ある程度の時間を割いて作成していました。
しかしながら、導入のハードルが高いこともあり、モックアップを作成していたのはほんの一部のサービスだけでした。
そんな問題を解決してくれるのがInVisionです！
InVisionはデザイナーひとりで、モックアップの作成と、それに対するメンバーからのフィードバックを簡単に集めることができます。
InVisionでモックアップを作ってみよう！
InVisionでモックアップをつくるということは簡単にいうと「紙芝居をつくる」という感じです。デザインをアップロードし、次のページを指定していく
というのが、基本的な作業になります。
それでは、モックアップを作っていく過程を説明しましょう。
今回は下図のようなフローのモックアップを作ってみます。
出来上がったデザインをアップロードします。
すると下記のように「スクリーン」が出来上がります。
なお、同じファイル名の画像をアップロードしなおせば、画像の修正が可能です。
アップロードには、png、jpg、gif、psd、sketchに対応しています。
psdやsketchは、レイヤーを決まった命名規則で作成すれば、レイヤーから自動的にスクリーンを生成できます！
http://support.invisionapp.com/hc/en-us/articles/203730535-How-does-Photoshop-layer-syncing-work-
(これはいちいち画像を書き出す必要がないので、大変便利です！)
一つ目の「Mypage」をクリックすると下記のように表示されます。
次の動きを作ります。
「左上のクエストアイコンをタップすると、クエストページに遷移する」
という動きを設置します。
動きをつけるには、Hotspotというものを設置します。
タップさせたい場所に、ドラッグで矩形を描きます。
すると、吹き出しで「Link To」という遷移先を選択する入力フォームがあるので、プルダウンから「Quest」を選択します。そしてSAVEします。
マイページ→クエスト→パズル
と遷移するモックアップが完成です！
なんと数分でモックアップが出来上がるのです！
共有とフィードバック
InVisionの大きな特徴でもあるのが、「共有とフィードバックが簡単」ということです。さきほど作ったモックアップを共有するには、「Share」をクリックします。
それを相手に伝えれば、プレビューをみることができます。
共有を受けた相手は、簡単にコメントを残すことによって、意見や依頼ができます。
今までは、デザインチェックするMTG時間を確保して、面と向かってフィードバックしていたのが、デザインチェックする側もされる側も、時間に縛られずに確認ができるので、開発の効率化につながったと現場からも好評です！
InVisionではリアルタイムにチャットや会話をしながらデザインにディスカッションできる、LiveShareという機能もあります。
右のメニューからペンツールを選択すれば、フリーハンドで記入することもできます！
直接顔をあわせなくても意思疎通ができるので、制作の手法が広がりますね。
導入してよかったところ
InVisionを導入したことで改善したことを現場のメンバーにヒアリングしてみました。- 今までデイリーでデザインチェックの時間を設けていたが、そのMTGを廃止し、自分の好きなタイミングで確認ができて、画面にデザインの指摘を簡単に書き込めるので時間の効率化ができた
- スマホ/PC等のいろんなデバイスでの確認が一貫して行えた
- リテラシーの低い人でも感覚的に使えた事でスムーズに導入できた
InVisionを導入することで、デザイン作業の効率化を図れたことは、アメーバの中でも革新的なことだったのではないかと思っています。
InVisionは現状リリースも頻繁で、日に日にバージョンアップを遂げているので、これからもさらに使いやすく便利になることを期待しています。
InVisionを運用する点で気をつけていること
最後に少し管理者目線から注意点を挙げると- InVisionは米国の企業なので、やりとりもマニュアルも全て英語。 問い合わせするときは少しハードルがあります。(私が英語ができれば問題無いのですが…)
- 細かな機能がたくさんあります。またマニュアルも英語なので、アメーバでは社内用のマニュアル(日本語ver)をConfluenceにまとめています
- アカウントの管理には手間がかかる。 現状のアメーバではアカウント発行時に都度手動で招待メールを送信する運営をしています。→自動化できると素敵
- セキュアな状態(パスワードがかけられたり、無関係なプロジェクトは閲覧できないとか)で共有ができないので、弊社以外の方とは共有はできない
今後のInVisionの改善に期待しつつ、アメーバのたくさんのプロジェクトでInVisionを使ってもらえるように、工夫していきたいと思っています。
最後に
ここまで、InVisionの紹介をしてきました。今回のブログで、InVisionについて興味をもっていただけたら幸いです。
アメーバでは、今までデザイナーさんの開発環境ということにあまりフォーカスしてこれなかったのが実状です。InVisionの導入というのは、デザイナーさんの開発環境改善という面で、大きな一歩だったと思います。
これからもADCは、アメーバの開発環境改善にさらに積極的に取り組んで行きたいと考えています。