TokyoFacebookTwitterHatenaPocketプロトタイピングツールはたくさんありますが、デザイナーなら使い慣れたツールでデザインしたいもの。UIデザインの現場で定番となっているSketchと、プロトタイピングツール「Atomic」を組み合わせたフローを紹介します。Atomicはインタラクションやユーザーフローのプロトタイプを作成するWebアプリです。単純な遷移から分かりやすい動画の作成まで幅広く対応しています。以前、別の記事でAtomicを紹介しましたが、今回はSketchを使ってデザインするときにより効率的なワークフローを提供する機能がAtomicに追加されました。Listから直接レイヤーをドラッグするかSketch用の新しいAtomicプラグインを使うことで、SketchからAtomicへレイヤーをインポートする機能です。この記事では、2つの方法について解説します。AtomicはWebアプリなので、現在多くのアプリでありがちなMacでしか使えないというような制限はありません。利用料はひと月あたり15ドルからですが、記事はチュートリアルが目的なので無料版を使って説明します。SketchとAtomicの連携の準備をする無料のAtomicアカウントを作成したと仮定して説明します。Prototype」を選択します。すると、なにも書かれていないキャンバスが表示されるので、.sketchデザインがインポートされるのを待ちます。Sketch内部で処理されます。ここで左上端の入力フィールドにキャンバスの名前を入力します。AtomicはSketchのワークフローにどのように影響するか動画やユーザーフローのプロトタイプ作成には作成前と作成後の状態(たとえば、インタラクション操作前と後でどう違って見えるか)の制作が含まれます。この作業はすべて完全にAtomicを使ってできます(Atomicは描画やデザイン機能も備えているため)。Sketchはデザインの最適ツールだと思っていますので、プロトタイプ作成のワークフローのほとんどをSketchを使っています。多くのデザイナーが同じ意見だと思います。ユーザーがハンバーガーアイコンをクリックした場合、オフキャンバスメニューがどのように表示されるかを実際に見てください。Sketchでレイヤーをフラットにすると、Artboardの境界線からはみ出した部分はすべて切り取られますので、必ずキャンバス上ですべてのレイヤーが見えるようにします。今回の場合、オフキャンバスメニューはAtomicにエキスポートする前にオンキャンバスになっている必要があります。注意:Atomicを使ってデザインや描画をする場合、キーボードショートカットはSketchとほぼ同じです。メリットとしてはエキスポート時にレイヤーがフラットになることなくベクター画像の性質を保持する点です。フラットにした画面をSketchからAtomicへドラッグするArtboardやPagesに関する注意点:ArtboardをSketchからAtomicへエキスポートする場合、AtomicはエキスポートしたArtboardをPagesと呼びます。SketchもPagesという言葉をつかっているため紛らわしいですが、SketchのArtboardはAtomic上でPageとします。Listから直接Atomicへドラッグします。Content」を選択する必要があります。Pagesに分類します。「簡単そうなのに、そんなこともできないの?」いいえ、できます。残念なことに、この方法を選択するとArtboardがフラットになってしまいます。Artboardをそのまま使わざるをえなくなります。画面上で個々のレイヤーを動画にするのではなく、画面全体を動画にする場合は問題ありません。細かくエキスポートの設定をしたいなら、Sketch用Atomicプラグインこそ最適です。Sketchプラグインによるインポートでより忠実に再現する忠実度の高いデザイン(個々のレイヤーのみがフラットになっている場合)をAtomicにエキスポートするには、Sketch用のAtomicプラグインをインストールする必要があります。このプラグインを使うメリットは、任意で各レイヤー用に異なる種類の動画を選択し、特定のレイヤーを動画にできる点です。Sketch用Atomicプラグインをインストールし(これはとても簡単です)、以前にインポートしたPageを削除します。今度こそArtboardがすべてフラットにならないようにもとの形のままでインポートしたいものです。この作業ができたら、command+option+OですべてのArtboardをAtomicへエキスポートします。解像度(@1/@2x/@3x)を指定できる以外に忠実度の度合いも選択できます。デザインをそのままインポートできます(忠実度が高いので、ネストされている階層に関係なくレイヤーを選択できます)。Groupsだけをフラットにできます(忠実度は低いですが完全にフラットではありません)。「各レイヤー用の個別画像」オプションを使ってインポートします。準備をする「作成後」状態はAtomicにインポートされましたが、ハンバーガーメニューを押した場合に画面全体が切り替わるようにしたいと考えています。そのため、コンテンツの主要部を動かす必要があります。図のように、Pageを適切な名前に直しました。インタラクティブなホットスポットを定義するHを押してHotspotを設定します。長方形を描くようにHotspotをxアイコン上に持ってくることで矩形の反応領域を効果的に定義します。そのあとに、サイドバーのインタラクション設定を確認します。Tap」のままでOKです。この設定は現在のPageの遷移先を表します。Page」を選択すると、すでに作成済みのPageの複製を作れます。複製は定義したHotspotも引き継がれています。ここでは4つのことをする必要があります。Effectsのような、タイムラインを利用してより高度な動画を作成できます。このことは以前の記事で紹介しました。作業が完了したら「Preview」ボタンをタップし、できあがりを見ます。個人的には非常に良くできたと思います。https://app.atomic.io/d/o9Fd2ofdU51i最後にAtomicは連携ツールが組み込まれており、共有やフィードバック機能のオプションがあり、デバイスに依存せずインタラクションをプレビューすることができるので、使ってみる価値があります。好みのデザインツールを使うのもいいでしょう(1つのデザインアプリですべての作業をしたい場合)。個人的にはできるだけSketchで作業したいと考えています。AtomicはSketchにはない(今後もおそらく追加されることのない)必須の機能を提供してくれます。その機能こそプロトタイピングという魔法なのです。これこそ最高のコンビですね。Schwarzフルタイムのデザインライター、デジタルノマドです。Studios」で作業することもあります。ロンドン出身の24歳。