こんにちは。アートディレクター/デザイナーの山口です。
今回は、Keynoteを使ったモックアップを作る際の、初心者向けの注意点を書いてみたいと思います。

KeynoteはApple製のプレゼンテーション用アプリケーションで、従来は主にプレゼンのスライドショー作りや提案書作成に使うことが多いツールでした。平たくいうと「Apple製のパワポ」みたいな立ち位置です。

しかしここ数年、ワイヤーフレームやデザイン画面を実際に触って操作感を確かめるモックアップ作成のツールとしても脚光を浴びています。
モックアップ作成ツールといえばProttやMarvel、Briefsのように専用のサービスも存在していますが、KeynoteはMacユーザーなら比較的簡単に手を出せるところがいいですね。基本的にローカル環境での制作になるのでオフラインでの作業に向いているのも強みです。そのあたりを踏まえて初期設定的なところをいくつか書いてみようと思います。

「書類」>「スライドショー設定」の、「開いたら自動再生する」のチェックを外しておく

自動的に画面が遷移していくことを防ぎます。

「書類」>「プレゼンテーションタイプ」を「リンクのみ」に設定

これでクリッカブルにした箇所以外のエリアを触っても、画面が切り替わることはありません。

「書類」>「スライドのサイズ」>「スライドのカスタムサイズ」で、画面サイズを指定する

デフォルトは「標準（4:3）」ですが、貼り付けるデザインカンプのサイズに合わせましょう。横1280×縦960とかにすることが多いです。

「環境設定」>「スライドショー」の「スライドショーをディスプレイに合わせて拡大／縮小」のチェックを外しておく

大きなディスプレイで再生した時にも、実寸で確認することができます。

「環境設定」>「ルーラ」の「オブジェクトの端でガイドを表示」にチェックを入れておく

オブジェクトをドラッグして配置する時に、端にもガイドが出てくるので、ぐっと操作がしやすくなります。

モックアップを作る際にはデザインカンプにクリッカブルなエリアを指定して、画面と画面をリンクさせていくことが多いと思います。その際の流れが以下になります。（もっと効率のいい方法があるのかもしれませんが、僕はいまのところこのやりかたで作っています）

たとえばこのカンプの右下の矢印ボタンにリンクを設定したい場合…

ボタンのエリアを囲むサイズの長方形オブジェクトを配置します。このとき、オブジェクトは塗りも線ももたない無色透明の状態にします（あくまでクリッカブルな範囲を指定するだけのオブジェクトとして置きます）。

「フォーマット」>「リンクを追加」（もしくは⌘+K）で、リンク可能なエリアになります。この時点で飛び先を選べるオプションが出てきますので、用途に応じて指定します。
※注意：グループにリンクを追加してもクリッカブルにならない！（原因は不明）
グループ要素にリンクを指定すると、スライドショーで表示した際にクリッカブルなエリアとして認識されませんでした…リンクはグループ化されていない単独のオブジェクトに割り当てるのがよさそうです。

リンクを割り当てると、青色の矢印アイコンが現れます。これで画面間の遷移ができるようになりました。

今回はKeynote初心者がモックアップを作る際につまづきそうなポイントをまとめてみました。
マジックムーブの応用や「Keynoteでどこまでリッチな動きが作れるか！？」という試みはまた今度書こうと思います。
使いかた次第でほんとに便利なツールなので、みなさんぜひ試してみてください。

それではまた！