How To:Keynoteでアプリケーションのプロトタイプを制作しよう

How To:Keynoteでアプリケーションのプロトタイプを制作しよう

Apple Storeが、 新しいToday at Appleプログラムとして開始した「How To:Keynoteでアプリケーションのプロトタイプを制作しよう」を体験してきました。

iPadシリーズとiPhone/iPadアプリ「Keynote」を使用して、アプリ開発のプロトタイプ作成を学びます。


How To:Keynoteでアプリケーションのプロトタイプを制作しよう

How To:Keynoteでアプリケーションのプロトタイプを制作しよう

Keynoteは、iOSのコアシステムをフル活用したアプリのため、プロトタイプ作成に向いていて、Apple Design Resourcesのテンプレートとして「iOS 12 Templates UI Elements.key」ファイルも配布されています。

最初に、iPhoneで連絡先を開いてスクリーンショットを取り、それをAirDropでiPadに送信します。


How To:Keynoteでアプリケーションのプロトタイプを制作しよう

How To:Keynoteでアプリケーションのプロトタイプを制作しよう

新規プレゼンテーションを作成し、デフォルトのテキストレイアウトを削除してAirDropした写真を配置します。

次に挿入ボタンから図形とテキストタブから四角をタップして配置します。

四角を選択した状態でフォーマットボタンから塗りツールで白で塗りつぶします。


How To:Keynoteでアプリケーションのプロトタイプを制作しよう

How To:Keynoteでアプリケーションのプロトタイプを制作しよう

配置した写真サイズと四角のサイズを合わせるTipsとして、写真を指で押しながら四角図形のサイズ調整するドットを動かすと、指で押しているオブジェクトサイズに自動調整されるそうです。

ワークショップ中にKeynoteのテクニックも色々紹介されるので、それを学習するだけでも参加して良かったと感じました。


Keynote

Keynote

次に、白いオブジェクトに四角図形などを使ってアプリのボタンデザインを行いますが、その場合、四角図形を角にピッタリ配置するために、Keynoteの設定にある「エッジガイド」をオンにすると良いと説明がありました。

このエッジガイドはデフォルトではオフになっているそうです。


Keynote

Keynote

連絡先の写真を参考にしながら四角図形をナビゲーションバーサイズにリサイズします。

連絡先のナビゲーションバーの色と同じにするため、フォーマットボタンからスタイルの塗りつぶしで「スポイト」ボタンをタップし色を抽出して塗りつぶします。


How To:Keynoteでアプリケーションのプロトタイプを制作しよう

How To:Keynoteでアプリケーションのプロトタイプを制作しよう

連絡先の写真をコピーし、プレゼンテーションにペーストします。

写真をリサイズして、iPhone画面上部のステータスバー部分だけを残します。

切り取ったステータスバーをオブジェクトに配置し、iPhoneデザインを行う上でのモックデザインの基本を作ります。


How To:Keynoteでアプリケーションのプロトタイプを制作しよう

How To:Keynoteでアプリケーションのプロトタイプを制作しよう

作成したスライドを複製して2つ目のスライドを追加します。

最初のスライドに戻り、デザインしたボタンを選択して挿入ボタンから次のスライドへのリンクを設定します。

これで、特定のボタンをタップすると次の画面に飛ぶという動作を付けられ、アプリプロトタイプの構造シミュレーションを行う事が出来ます。


計算機

計算機

Appleのユーザインタフェースとユーザーエクスペリエンスの考え方として「自分」と「ユーザー」と「全ての人」の間はノットイコールであると考えだと説明し、計算機アプリを基本例として紹介しました。

計算機は数字が下から上に大きくなる配置がされていて、それは、iPhoneのサイドにあるボリュームボタンを同じで、本体を持った時に下側のボタンを押すと音量が下がり、上のボタンを押すと音量が上がるように、アプリも違和感を感じないルールでデザインするのが望ましいと説明してました。


電話:キーパッド

電話:キーパッド

計算機は数字が下から上に大きくなる配置がされていて、それは、iPhoneのサイドにあるボリュームボタンを同じで、本体を持った時に下側のボタンを押すと音量が下がり、上のボタンを押すと音量が上がるように、アプリも違和感を感じないルールでデザインするのが望ましいと説明してました。

次に電話アプリのキーパッドを表示し、このアプリは数字が上から下に配置されているが、実はそれぞれの数字ボタンに英字が配置されていて、欧米では電話番号を表す場合に英文字で表記することが多く、Appleのサポートセンターのフリーダイヤルは「0120-27753-5」で、それを文字で表すと「0120-APPLEJ」となると説明していました。


How To:Keynoteでアプリケーションのプロトタイプを制作しよう

How To:Keynoteでアプリケーションのプロトタイプを制作しよう

アプリのプロトタイプをデザインするにあたり、Appleの「Apple Store」アプリを参考にしながら、自分ならシンプルで使いやすい機能を追加するかを考えると良いと薦めていました。


ユーザインターフェイスのデザインのヒント

ユーザインターフェイスのデザインのヒント

こうしたユーザインターフェイスのデザインについては、Appleがデベロッパー向けに公開している「ユーザインターフェイスのデザインのヒント」を参照すると良いと紹介していました。

共通デザインコンセプトを考慮に入れることで、アプリケーションの使いやすさや魅力を高めることができるそうです。


PR

Category

Calendar

            1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30            

PR

Profile

danbo

MACお宝鑑定団

会長

danbo

日本語でのMac,iPhone,iPad,iPod,TwitterなどApple関連の情報サイト。MACお宝鑑定団のBlog。Macに捉われず、様々な情報を掲載しています。

問い合わせ先
広告出稿について
カンパ・チップ のお願い
プライバシーポリシー

Link

RSSを取得する