【Atomic】フリープランができたのでプロトタイプツール、Atomicを使ってみた

はじめに

本記事では2017年3月30日に様々な新機能が導入されたプロトタイプツール、Atomicの基本情報や使ってみた感想をご紹介します。

Atomicとは

Atomicはデザインやプロトタイプの作成ができるツールです。
いわゆる、プロトタイピングツールですが、プロトタイプを作るための機能だけでなく、デザイン機能も豊富なので、簡単なデザインを作ることもできます。

Atomic の最大の特長としては画面遷移などの細かなアニメーションやニュアンスを表現することができるということです。

今回、私が様々なプロトタイピングツールの中でAtomicを選んだ理由は3つあります。

• 学習コストが低い
• 細かなアニメーションが表現できる
• 無料プランがある

(注) 本記事の記者は一切Atomicと関係ありません。

Atomicの特徴

アニメーション

プロトタイピングツールというと、シンプルに画面遷移などの確認をするツールもありますが、Atomicでは画面遷移を確認するのはもちろん、ボタンをクリック/タップしたときの細かいアニメーションや画面遷移するときの動き、メニューの開閉の際のモーションなども作成することができます。

また、一つ一つの動きのイージングも変更できるため、加速したり、減速したりする動きなどにも対応できます。

下記図のようにプルダウンでイージングを調整できます。

ブラウザで使用するWebアプリ

Atomicはブラウザ上で動くアプリなので、WindowsでもMacでもお使いいただけます。
また、作成したデータは全てクラウドに保存してあるので、インターネットがあればいつでもどこでも編集することが可能です。

ブラウザ上のアプリというと、動きが遅く、結局はイライラして使わなくなる、という印象をお持ちの方もいらっしゃるかもしれませんが、ブラウザの進化などもあり、びっくりするほどサクサク動きます。

Sketchとの連携

AtomicはSketchとインターフェースが似ており、Sketchユーザーにとっては学習コストは更に低いです。Sketchユーザーではない方にとってもAtomicは直感的に操作可能なので、他のプロトタイピングツールなどに比べると学習コストは低いと思います。また、上級者向けの機能などもきちんと兼ね備えているので、慣れてきたら徐々に細かいアニメーションの機能などを導入することができます。

さらに、AtomicはSketchとショートカットキーがほとんど同じなので r で 長方形ツールに持ち替えたり、 o で楕円ツールに持ち替えたりすることもできます。ショートカットを使ってサクサク作業がしたい、という人にとってはおすすめです。

Sketchのプラグインを使ってSketchで作成したデザインをAtomicにそのままインポートすることもできます。

Sketchで作成したレイヤー、アートボードなどの情報を保持したままインポートすることができるので、デザインはSketchで作りたいけど、そのあとの細かなアニメーションはAtomicで作りたい！という方でも大丈夫です。

制作物をチームで共有／コメントができる

Atomicで作成した全ての制作物には共有リンクを作成することができます。その共有リンクをチームやクライアントに渡すことで制作物を共有することができます。

また、共有したリンク先に飛ぶと、デザインに対して指摘がある箇所にマーカーをたて、コメントすることができます。

Atomic を勉強することができる動画、Learn Atomic

2017年3月30日に追加された新機能の１つが「Learn Atomic 」です。その名の通り、Atomicを勉強することができる機能なのですが、 だいたい5分ほどのレッスンが21個ほどあり、Atomicで使えるできるそれぞれの機能を紹介・解説してくれています。

Atomicを使って簡単なローディングアニメーションを3つほど作成してみた

少し前にローディング画像を無料でダウンロードできる素材を見つけてから、自分で作ってみたいと思っていたので、今回はAtomicを使用してローディングアニメーションを作成してみました。

ちなみに、私が見つけたローディングアニメーション素材は以下です。
https://pixelbuddha.net/freebie/flat-preloaders

作成時間はだいたい1時間半から2時間ほどでした。
0から学びながら作成したので、なかなか短時間でできたと思います。

制作したもの：