2017年5月24日

デザイン

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

目次

  1. はじめに
  2. Atomicとは
  3. Atomicの特徴
  4. Atomicを使って簡単なローディングアニメーションを3つほど作成してみた

はじめに

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

Atomicとは

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

POINT!!

プロトタイピングツールによっては最初はとても使いやすかったのに、バグが出てきたときになかなか対応されず、アップデートも遅いものもありますが、Atomicに関してはカスタマーサービスも充実していて、アップデートも継続的に行われているので、今後の追加機能にも注目です。

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

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

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

POINT!!

特に試用版のあとでも継続して無料で使えるプロトタイピングツールは少ないので、プロトタイピングツールの使用頻度が低い私にとっては良さそうなツールでした。

(注) 本記事の記者は一切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日に追加された新機能の1つが「Learn Atomic 」です。その名の通り、Atomicを勉強することができる機能なのですが、 だいたい5分ほどのレッスンが21個ほどあり、Atomicで使えるできるそれぞれの機能を紹介・解説してくれています。

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

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

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

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

制作したもの:

0

0

AUTHOR

sasakki デザイナー

アメリカの大学を卒業後、日本、シンガポールでデザイナーとして活動。

アプリでもっと便利に!気になる記事をチェック!

記事のお気に入り登録やランキングが表示される昨日に対応!毎日の情報収集や調べ物にもっと身近なメディアになりました。

eishisでは一緒に働く仲間を募集しています

正社員や業務委託、アルバイトやインターンなど雇用形態にこだわらず、
ベテランの方から業界未経験の方まで様々なかたのお力をお借りしたいと考えております。

話を聞いてみたい

運営メンバー

eishis

Eishi Saito 総務

SIerやスタートアップ、フリーランスを経て2016年11月にeishis, Inc.を設立。 マーケター・ディレクター・エンジニアなど何でも屋。 COBOLからReactまで色んなことやります。

sasakki デザイナー

アメリカの大学を卒業後、日本、シンガポールでデザイナーとして活動。

しまだ

しまだ デザイナー

WebAR/VRのデザインと3DCG制作がメインです。 肩書きは「アニメ案件に関わりたいデザイナー」。

Miu マーケター

ドイツでWEBマーケティングしています。

しんのき エンジニア

新しい技術が好きなWebエンジニアです。 元々インフラやPHPをやっていたのですが、最近はReact NativeとFirebaseを使って頑張ってます。

yamakawa

やまかわたかし デザイナー

フロントエンドデザイナー。デザイン・HTML/CSSマークアップ・JSアニメーション実装を担当しています。

furuya エンジニア

サーバーサイド、フロントエンド、Unityと色々手を出してる雑食系エンジニア。ReactNativeが最近のマイブーム。

Sayaka Osanai デザイナー

Sketchだいすきプロダクトデザイナー。シンプルだけどちょっとかわいいデザインが得意。 好きな食べものは生ハムとお寿司とカレーです。

はらた

はらた エンジニア

サーバーサイドエンジニア Ruby on Railsを使った開発を行なっています

うえまつゆい エンジニア

サーバーサイドエンジニアからフロントエンドエンジニアになりました。主にReact Nativeでのアプリ開発をしています。

CONTACT PAGE TOP