Keynoteを選ぶ理由

ChatWorkでは、デザイン部、開発部共に勉強会を頻繁に開催しています。先週はデザイン部のほうで Keynoteでつくるプロトタイプの勉強をしました。講師は、わたくし長谷川です。

最近はプロトタイプをつくるためのツールはたくさんあります。Framerのように PSD や Sketch ファイルと連携できるものもありますし、Briefのような高機能な専用アプリケーションもあります。こうしたなか、Keynote をつかうメリットが幾つかあります。

• 学習のための敷居が低い（コード不要）
• 持っている人が多いので共有しやすい
• メモなど注釈も付けやすい
• iOSアプリとアニメーションが近い

Keynote ユーザーが社内で多く、誰でも直接ファイルに触れて調整できるのも大きなメリットです。詳細まで詰めるとなると、他のツールのほうが適している場合がありますが、アイデアをなるべく本物に近いかたちで早く作りたい場合 Keynote は良い選択肢です。Keynotopia で UI アセットを購入すれば、デザイナー以外でもアイデアを形にすることができます。

伝家の宝刀マジックムーブ

Keynote には iOS アプリにあるような動きがプリセットで入っているのが特徴です。画面を左右へスライドさせたり、フェイドアウト、ポップなど、プルダウンメニューから選択するだけで実装できます。コンパイルや再読み込みという概念がないので、プレビューを見ながら 0.1 秒単位でアニメーションを調整することも容易にできます。

アプリでよく見るアニメーションが豊富に揃っているのが Keynote の魅力ですが、最大の特徴はマジックムーブです。これがなくてはアプリのプロトタイプは不可能といっても過言ではないほど便利な機能です。

マジックムーブは、2枚のスライドを比較して、その差分をアニメーションで埋めてくれる機能です。例えば、２枚のスライドのなかにある図形AのY軸が異なると、スライドの移動時に図形Aが縦へアニメーションしてくれます。

マジックムーブを使いこなすことで、スクロールだけでなく、UI パーツやダイアログボックスの動作などを容易に実装できるようになります。また、マジックムーブはスライドの前後だけに対応しているわけではありません。Keynote では図形などのオブジェクトにリンクを追加してスライドを移動させることができますが、数枚先のスライドにもマジックムーブが適応されます。複製したスライドのみマジックムーブが適応できるという制限がありますが、様々な動作を Keynote で実現することができます。

使いどころを知れば便利な Keynote

コードが書けなくてもアニメーションが作れるという敷居の低さと、共有がしやすいということで Keynote を選びましたが、完璧なツールかというと、そんなことはありません。Keynote でプロトタイプを作る際に気をつけておきたいことが幾つかあります。

• 細かいアニメーションの設定ができない
• タップによるインタラクションしか対応できない
• スマートオブジェクトという概念がないので編集が面倒
• 複雑な画面遷移は管理が大変になる

メリット／デメリットは、どの道具にも存在します。何を目的で作るのかがハッキリしていれば、Keynote をつかったプロトタイプが最も早く手軽な場合があるはずです。次回、プロトタイプを作るときは Keynote も選択肢のひとつに入れてみてはいかがでしょうか。