Keynote で モックアップ (ワイヤーフレーム）を作る方法まとめ

www.designwalker.com

■ 作り方（チュートリアル等）

keynoteは【 ①簡単に図形の配置が簡単にできる ②細かい配置の調整が簡単にできる ③できたモックアップの共有が簡単にできる 】ってのがモックアップ作りに向いているところです。実例を以下のサイトで御覧ください。

——————————————————————————————————————–

——————————————————————————————————————–

こちらの動画は、英語ではありますが、おすすめです。keynoteでのボタンの簡単な作り方や、マスターガイドを使ったデザインのこつなどを見ることが出来ます。他のビデオでは、keynoteで他の人にモックアップを公開する方法もみることができます。

keynote用素材

keynoteの基本的な図形だけで、モックアップを作ることもできますが、テンプレート素材を使うほうが簡単につくることが出来ます。有料のものも多いですが、条件付きで無料のものもあります。

——————————————————————————————————————–

▼ 無料

▼有料

Keynote モックアップ作成 TIPS

ワイヤーフレーム作りには、プレゼン用の解像度1024 * 768などは向いていません。1280 * 1024等、作りたいwebサイトにあわせて解像度をかえましょう。

Keynoteで枠組みを作る四角形などは頻繁に呼び出すのでショートカット登録しましょう。
コマンド名は「四角形」 ショートカットは例えば「shift + command + s」とか。

モックアップ用につくる四角形は、できれば地味な色で設定しておきたいところですが、初期設定は何か別の色になってると思います。毎回四角形を作るたびに、色の変更をするのも面倒なので、デフォルトカラーの設定をしておきましょう。

まずは四角形を作成し、デフォルトのカラーに設定したい色に変更してください。四角形を選択した状態で、上のメニュー「フォーマット」＞「詳細」＞「すべてのマスターの図形を定義」を選択。

これで次からは、自動的にその色に変更になります。