狛ログ

こんにちは、オフィス狛デザイン部のSatoです。
時代の波に追いつきたいと思い、一時期話題になったあのプロトタイプソフトの記事を書いてみました。（ちょっと遅いか）

先月InVision Studioのearly accessのメールが届いたのですが、SketchもXDも使った事の無い私は、通常の操作もあまりうまくできずに使うのを後回しにしていたのですが、公式の動画を見たり公式のGETTING STARTEDを見たりして、やっとアニメーションをつけたりする所までできるようになりました。


作ったモックアップ（iphoneXサイズ）
気になる部分はありますが！（なぜか色を変えたら一部のオブジェクトがプレビュー時だけ消えてしまった…？バグでしょうか？）InVision Studioで作った動いてるモックアップです！
InVision StudioだとInVisionでお馴染みのリンクでの画面の遷移の再現や固定ヘッダーの再現だけでなくぬるぬるパーツが動きます！言葉で説明するのが難しい動きもこれでエンジニアさんに伝えられますね！


一番手こずったのがアニメーション機能で作る横から出てくるメニューだったので個人的に作り方を解説します。
（UIを載せるとよろしく無いそうなので、詳しいアニメーション機能についてはこちらの公式の説明を読んでみてください！）

横から入ってくるメニューは最初アニメーションのTransitionをPresetに設定し横にずれるような動きに設定してどうにかしようと思ったのですが、なかなかメニューが横から動くようには見えてくれませんでした……。

しかし、元の画面要素をコンポーネントとして登録し、別にコンポーネント化させたメニューを見切れるように配置し、TransitionをMotionにしてあげるといい感じに動いてくれました。
応用すれば色々な表現が可能になりますね！

唯一、使っていて大きな欠点だなと思った点は日本語対応。
InVision Studio内は日本語もきちんと打ち込めますが、右上のプレビューボタンの横のアップロードボタンでInVisionにプロトタイプとしてアップロードできるという機能を使った後にプレビューで見てみると日本語部分が綺麗に消えてしまいました。
InVisionのソフトなのに日本語を使うとInVisionにうまい具合にアップできないのは痛い……。
こんなに素敵なのにクライアントさんにモックアップとして見せるのはまだ無理そうなのが勿体無い気がしますが、early accessだし海外製だから仕方ない。

他にも不具合な気がする不思議な挙動や実装されていない機能などありますが使う価値は大いにあると思います。
何よりearly access版は今の所（2018年5月現在）無料です！ぜひみなさま使ってみてください。

初めまして。オフィス狛 デザイン部です。

プログラム系の記事以外にも、デザイン系の記事も増やしていこう！
・・・と言うミッションがデザイン部に課せられたので、
これからどんどん記事を書いて行こうと思います。よろしくお願いします。

さて、突然ですが、皆様はInvisionをご存知でしょうか？
InVision | Digital Product Design, Workflow & Collaboration

Invision は簡単にモックアップが共有できるとても便利なサービスです。
しかし、ページ数の多いプロトタイプを作る際、
現状は psd 形式のデータを直接アップロードすることは不可能な為、
Photoshop ユーザーの場合、複数のアートボードで作ったモックをわざわざ png などの
形式に書き出してアップロードするのですが、やっぱり少し面倒です……。

Craft というプラグインを利用すれば簡単にプロトタイプが作成でき、更新も１クリックで便利です！
ただ、Photoshop で連携させるのに少し時間がかかってしまったので、今回は連携の手順をご紹介させて頂きます。
慣れてしまえば１分程度で Invision に同期できるようになりますよ！

① Invision上にプロジェクトを作成。

最初にInvisionのマイプロジェクトページの＋ボタンを押します。
プロジェクトタイプを選択する画面に遷移するので「PROTOTYPE」を選択します。


次のページに遷移したらプロジェクト名と表示端末を選択します。
この時点で空のプロトタイプが完成しています。

② 便利なプラグイン、Craft をインストール。

ファイルのアップロード方法を聞かれるので「SYNC YOUR PROJECTS」の下のダウンロードボタンをクリックしてください。Craftのインストーラーのダウンロードが始まります。


Craftのインストーラーは公式サイトからもダウンロードできます。

インストーラーを使い、Craftのインストールが終わるとPCのツールバーにCraftのアイコンが表示されます。

Photoshop版のインストールボタンを押すとインストールが始まります。

インストールが終わったらPhotoshoを起動（起動していた場合は再起動）しましょう。
Photoshopメニューバーの「ウインドウ」から「エクステンション」を選択してください。
「Data」「Duplicate」「Duplicate」「Freehand」「Stock」「Sync」が増えていればインストールは成功です！

③ InVisionと連携させる。

Invisionと同期するのに使用するのは「sync」機能なので今回は「sync」をクリックしてください。
パネルにsyncパネルが追加されます。
パネルが出てこない場合アイコンをクリックするとsyncパネルが出てきます。
ログインを促すメッセージと「Sign in to InVision」というボタンが出てくるので、ボタンを押すとメールアドレスとパスワード入力欄が出てきます。
InVisionに登録したメールアドレスとパスワードを入力しsign inボタンを押せばInvisionとPhotoshopの連携ができました！

④ プロトタイプを完成させる

さあ、プロトタイプにページを追加してみましょう！
プロトタイプに追加したいファイルを Photoshop で開きます。
syncパネルを開き、タブから自分が制作した同期したいプロトタイプを選択します。
アートボード全てを同期するか、選択したアートボードのみ同期するかとサイズ（1xか2x）を選択し、「sync to InVision」ボタンをクリックします。

選択したプロトタイプを確認するとページが更新されているかと思います。
同じ手順でアートボードを最新の状態に更新することもできます。

いかがでしたでしょうか？
今回インストールしたCraftは他にも色々な機能があります。
ダミーのテキストや画像を自動的に挿入してくれたりする機能が代表的ですね。（ちなみに、私は多機能すぎてまだ使いこなせていません）
使いこなせば、さらに時短になると思うので皆さん是非使ってみてください！