アニメーションが表現できる直感的なUIデザイン・プロトタイピングツール「Atomic」

ぺちこ

2015.06.12

こんにちは、デザイナーのぺちこです。

今回はUIデザイン・プロトタイピングツールの「Atomic」をご紹介します。
ブログのネタ探しにネットサーフィンをしていたら偶然見つけたものなのですが、サイトを見ているだけで簡単そう＆すごそう！と思ったので実際に使ってみました。

Atomicとは

Atomic Interface design software for professionals

https://atomic.io/

まずは、思わず使いたくなった紹介動画をご覧ください。

アニメーションまでつけた分かりやすいプロトタイプが、なんともサクサクと簡単に……！しかも無料。（beta版だけかもしれませんが）
これはとりあえず試してみるしかない！

公式サイトの「SIGN UP FOR FREE」から登録ができます。

「Atomic」の特徴

それでは「Atomic」の特徴について、くわしくご紹介します。

ブラウザ上で使える

「Atomic」は、WindowsでもMacでも使えるオンラインツールなので、ユーザー登録をするだけですぐに使えるところが嬉しいです。使ってみると本当にサクサク軽いのですが、導入自体もお手軽なところがポイントです。

プロトタイピングが捗る

紹介動画を見ていただければ分かるように、とにかくプロトタイプ作りが捗ります。
ページ遷移やコンテンツの展開にアニメーションをつけて表現することができ、アニメーションにはイージングも設定できるので（後述）、デザイナーから実装側へ引き渡すときにも分かりやすいです。

言葉で「こういう動きをして欲しいんです」と伝えるのはなかなか難しいですし、サンプルを探してくるのも結構時間がかかってしまうので、ありがたい！

レビューする側としても、動きありきで確認することができるので良いですね。

参照：Prototype examples

UIデザインができる

「Atomic」自体で1からデザインを作ることもできますし、PhotoshopやSketchからコピー＆ペーストすることもできます。
UIデザインに特化しているので、「Atomic」上で画像を加工したり複雑なアイコンを作ったり……ということは2015年6月現在はできません。

ただ、PNG、JPG、GIF、SVGのインポートに対応しているので、ツールを併用すればそのあたりもカバーできるのではないでしょうか。

参照：Importing assets

コメント機能つき

コメント機能がついているので、デザインレビューも捗ります。

共有できる

共有用のURLも発行できます。発行時には、

他のユーザーがコメントを残すことができるか
他のユーザーがデザインをコピーして編集することができるか

を選択することができます。

ユーザー招待ができる

「Atomic」では案件毎にプロジェクトフォルダを作ることができ、そのプロジェクト毎に他ユーザーを招待することができます。
レビューするだけのメンバーには上記の共有機能を使い、他にデザインをするメンバーがいればプロジェクトに招待する、という形で共同編集が可能です。

UIがSketchに似ている

新しいツールとなると、覚えるのが面倒だな～と思ってしまうのですが、「Atomic」はUIがSkecthと似ており、Skecthユーザーであれば難なく使いこなせるかと思います。

Sketchよりもだいぶシンプルですね。

「Atomic」の良いところ

続いて、「Atomic」の良いところです。

サンプルファイルが豊富

「Atomic」の使用を開始すると、はじめから「Sample Project」というフォルダがあり、中には「Music Prototype – Advanced」「Photo prototype – Simple」「Getting started in Atomic」の3つが入っています。

それぞれデザインデータを開き、実際にどのように作っているのかを見ることができるため、右も左も分からない状態でも既存データをいじりながらなんとなく勝手を掴むことができます。

ヘルプ内のPrototype examplesというページにもサンプルが用意されています。
「View it here」よりデザインプレビューを開き、右下の「COPY&EDIT」から自分のプロジェクトに追加することができるので、気になるサンプルは端から追加して、まずは作り方を覗き見するのがオススメです！

スマートフォンでのプレビューもできる

共有URLはスマートフォンからもアクセスでき、フルスクリーンでプレビューすることができます。

参照：Previewing on a mobile device

デザインデータからCSSをコピーできる

オブジェクトに対する効果はCSSをベースとしたものになっているので、CSSをまるっとコピーすることができます。実装時にデザインの見た目と差異が生じにくいのもポイント。
加えて「CustomCSS」というエリアもあり、効果パネル上では操作できないものも、CSSを入力すれば効果を与えられるところも便利です。

「Atomic」の基本的な使い方

サンプルファイルも勉強になりますが、サンプルファイルからだと手順が分かりにくいので、基本的な使い方だけ簡単に紹介します。

1. プロジェクトをつくる

ダッシュボードの「New Project」からプロジェクトをつくります。任意の名前をつけましょう。

2. デザインファイルをつくる

プロジェクトを作るとそのままプロジェクトの中に入るので、「New Desgin」をクリックすれば編集画面へ遷移します。

3. デザインファイル名をつける

編集画面左上、Atomicのロゴの右側にあるのがファイル名です。クリックをすれば変更することができます。

4. アートボードを準備

右カラムの「PAGE SIZE」より変更することができます。任意のサイズを入力しても良いですが、PRESETのプルダウンにさまざまなデバイスサイズが既に登録されているため、そこから選ぶのが手っ取り早いです！

背景色は「BACKGROUND」より変更でき、チェックボックスのチェックを外すと、アートボードを透明にすることができます。

5. ツールについて

Select（選択ツール）
Rectangle（矩形）
Oval（円形）
Line（線）
Text（文字）
Image（画像）
Interaction Hotspot（タップ/クリックの反応領域）

使えるツールはこの7つ。「デザインする」には機能不足な感じがありますが、アプリモックアップやプロトタイプを作るには十分な機能かな、と個人的には思います！

Rectangle＆Oval＆Line

Photoshopなどの一般的なツールと同じような操作感で配置や変形ができます。
細かな位置・サイズの調整は選択ツールを使ってもよいですし、Sketchのように右カラムで数値を入力して調整するのも良いですね。

Text

デバイステキストを基本としているのか、フォントは「Google」「Klim」「Typekit」とWebフォントとして使えるものの中から選ぶ形式になっています。
line-heightをemで指定できて、letter-spacingもpxで指定できるなど、CSSをベースとしているからこその機能はやはり嬉しいですね。コーディング実装も楽ですねー！

「AUTOSIZE」はテキストボックスを、テキストに準じて伸縮させるか、予め幅を指定したボックスにしておくかを選択できる項目です。