Webサイトやアプリを制作する場合、デザインを作り込む前に触って動くプロトタイプを作ることで、あらかじめ使い勝手の良し悪しなどを検証することができます。今回紹介するTAP(Touch Application Prototypes)を使うと、Fireworksで簡単にモバイル向けのプロトタイプを作成できます。

よくあるWebサイト制作の実装工程について確認しましょう。まず、PhotoshopやFireworksなどのツールを用いてデザインの作業を行います。次に、作成したデザインカンプを元に、パーツをスライスし、コーディングをしてからはじめて「動く」「触れる」ものを作ります。こうした工程の場合、実際に動く状態を見てから問題に気づき、要素の配置や装飾の変更などが発生し、大きな手戻りが生じるというのを経験している人も多いのではないでしょうか。

そうした問題を解決・軽減するために「プロトタイピング」という手法をワークフローに取り入れることがあります。プロトタイピングはスマートフォン/モバイル向けのサイトやアプリ制作においてより効果的だと、筆者は考えています。デザインをデスクトップで作り、デスクトップブラウザーで検証するのと、スマートフォンブラウザーで検証するのとでは、後者の方がデザインを作っている感覚と、ブラウザーで動くときのズレも大きくなるためです。

プロトタイピングの手法には色々あります。1つは「ペーパープロトタイピング」という方法で、紙ベースでプロトタイプを作成します。紙とペンがあれば作成できるので、より短時間・早い段階で検証することができます。

図1 ペーパープロトタイピングの例「Hanmail Paper Prototype」。プロトタイプで下手に装飾すると、その装飾に操作が引っぱられてしまう、誘導されてしまうこともあるので、手書きで簡素な見た目のままが効果的といえます

また、HTMLでプロトタイプを作ってしまう方法も考えられます。とはいえHTMLから手をつけるのは、慣れていなければ逆に時間がかかってしまうかもしれません。そうした場合には、「Skelton」ようなHTML/CSSフレームワークを採用することで素早く構築できるでしょう。

今回紹介する方法は上記の2つと異なり、Fireworksで作成した画像ファイルからプロトタイプを作ることができるツール「Touch Application Prototypes(TAP)」です。Fireworksで設計、ワイヤーフレームを書く人や、デザイナー寄りの人にはおすすめのツールです。

図2 Touch Application Prototypes(TAP)の紹介&ダウンロードページ

TAPは、UNITiDが提供するプロトタイピングツールです(利用は無料です)。このツールを使って作成できるプロトタイプはiOSを対象としていますが、他のOS・端末でも基本的に機能します。まずは、どういったプロトタイプを作ることができるのか、公式ページにあるデモを触ってみましょう。

図2のページの本文中にデモへのリンクがあるので、iPhone/iPad実機、iOSシミュレーター、もしくはデスクトップ版のSafariやGoogle Chromeの最新版で閲覧してください。なお実機およびiOSシミュレータから利用する場合には、ブラウザーでアクセスしてから一度ホームスクリーンにブックマーク(Webクリップ)し、そこから開く必要があります。

図3 iPhone向けのプロトタイプのデモ

見た目ではわかりづらいと思いますが、これらはHTMLで組まれたものではなく、Firerorks上で一枚画像の上にリンクエリア(ホットスポット)を用意し、その箇所をクリック/タップすることで遷移できるようにしています。つまりエディタを開いてHTMLをコーディングすることなく、デザインカンプのまま、ブラウザー上で動くプロトタイプを作成することができます。

もともとFireworksだけの機能でもこうしたインタラクティブなプロトタイプを作成することもできますが、今回紹介するTAPは、モバイル向けに機能を搭載したツールです。例えば、画面遷移時のトランジション(アニメーション)や、タッチジェスチャーによる遷移などもコーディング無しで付加することができるので、プロトタイプとしてより完成度の高いものを作ることができます。

それではFireworksとTAPを使って、このようなプロトタイプを作る手順を解説します。

1:動作環境の確認

TAPを利用するためには、下記の環境が必要です。

  • Fireworks CS3以降
  • PHPが使えるサーバー(フォルダーのパーミッションが変更できる権限も必要)

TAPではFireworksのページ機能とホットスポット機能を利用するため、それらが備わったバージョンのFireworksが必要です。また、PHPが使えるサーバーと、フォルダーへの書き込み権限を変更できることが必要となります。これは専用のサーバーを用意するということではなく、すでに自社サイトやテスト用サイトなどを動かしているサーバーがあれば、そこにディレクトリを用意して設置しても構いません。

なぜサーバーが必要かというと、Fireworksで作成した素材をもとに最終的なプロトタイプへと仕上げる際は、サーバー上のPHPで処理を行うからです。

2:必要なファイルのダウンロード

TAPのファイルは、TAPの紹介&ダウンロードページの右上部「Version」からダウンロードできます。ダウンロードしたファイルの中には、管理画面用のファイルや、アニメーションなどを行うJavaScriptライブラリなどが含まれています。ダウンロード後のファイルは解凍後、ひとまずそのままにしておきます。

また、「Download」からはデモページの素材PNGもダウンロードできるので、こちらを参考にすると良いでしょう。これ以降は、配布されているiPhone用のPNGを用いて解説しています。

※配布されているデモ素材の中で、iPad用のPNGについては、一部のホットスポットが抜けているため、参考にする場合は注意してください。

3:プロトタイプ用のキャンバスサイズ

プロトタイプ用の素材はFireworksで作成します。Fireworks CS3以降のページ機能を利用し、遷移画面を作成していきます。各画面はページ機能を使い、それぞれをページに分けて作成します。作成するページ名は、後述で解説するホットスポットのリンク先となるので、「index」や「page01」「page02」といった任意の名前をつけてください。

キャンバスサイズは、iPhone 3G以前に合わせるならば横幅320px、iPhone 4以降のRetinaDisplayに合わせるならば横幅640pxで作成します。なお、プロトタイプの段階であれば画像の精度もそれほど問う必要も無いと思われるので、横幅320pxで作成してもよいでしょう。

またコンテンツエリアについてですが、プロトタイプページを構築する際にiPhoneのフレームを指定する場合(※詳細は後述のSTEP6にて)、ブラウザーの表示領域の上部にステータスバー(高さ20px)が被さります。そのため上部20pxについては空けておくようにしましょう(RetinaDisplay向けにつくる場合は、40pxを空けましょう)。

4:遷移先/遷移アニメーション/ジェスチャーの指定

遷移先の指定

クリック/タップできるエリアは、ホットスポット機能を利用して選択します。選択したホットスポットのプロパティインスペクタの[リンク]に、遷移先のページ名(「ページ名.html」)を指定します。これにより、プロトタイプ上でクリック/タップしたときに画面が遷移します。

遷移アニメーションの指定

クリック/タップの画面遷移時にアニメーション効果をつけたい場合は、ホットスポットの[ALT テキスト]にアニメーション名を指定します。先ほどの画像の例では「slideleft(左にスライド)」して、次の画面が表示されます。指定できるアニメーションの種類は、公式サンプルの「Transitions」ページを参考にしてください。スライドアニメーション以外にも、フリップ(両面に裏返る)やフェードイン/フェードアウトなども指定できます。

なお、遷移先のページから単純に1画面前に戻る場合の指定方法は、[リンク]を空のままにし、[ALTテキスト]に「back」と指定します。アニメーションによる遷移の場合、その逆の動きで戻るようになります。

ジェスチャーの指定

TAPは、上下左右のスワイプジェスチャーにも対応しています。スワイプ対象となるエリアをホットスポットで作成し、ジェスチャーの指定は[ターゲット]に指定します。指定方法は「swipeleft,page2,slideleft」のように、「ジェスチャー,ページ名,アニメーション」と指定します。複合的に指定する場合は「swipeleft,page2,slideleft,swiperight,page0,slideright」という書き方になります。

もし、ジェスチャーを指定したホットスポットでクリック/タップには反応させたくないという場合は、[リンク]に「#」を指定してください。[リンク]を空のままにすると、ジェスチャーが有効になりません。

また、端末の向きを変えるジェスチャーにも対応しています。Landscape(横向き)状態の見せ方をしたい場合には、該当ページを複製し、ページ名の後ろに「_l」とつけます。そうすると端末を傾けたときに、「_l」の名前がついたページの方が表示されるようになります。

その他の機能

もう1つ特徴的な機能として、ページの上に別ページを重ねて表示することができます。キーボードの表示やアラートダイアログ、その他ポップアップなど、レイヤーが重なる表現も可能です。その場合にはホットスポットの[ターゲット]に「keep」または「clear」と設定してください。

「keep」の場合は後ろのページ(呼び出し元のページ)をそのままにした表現、「clear」の場合には後ろのページを見えなくする表現となります。「keep」の場合は、重なるページの背景は透過にする必要があるので注意してください。また、重ねるページのホットスポットの[ALTテキスト]には 「back」を指定しましょう(元のページに戻れるようにするため)。

5:ファイルの書き出しとアップロード

Fireworksでコンテンツの作成が終了したら、PNGファイルからDreamweaverライブラリ(.lib)形式で書き出します。書き出し先は、STEP2で配布ページからダウンロードしたファイルの中にある「Library」フォルダーを指定してください。この際には画像ファイルをサブディレクトリに展開するようにチェックをつけましょう。

※なお、TAP配布ページ内の注意書きによると、書き出すファイルの合計は6MB以下にすることを推奨されているため、色数を抑えたり、画質を下げるなどファイルサイズが大きくなりすぎないようにしましょう(動作が重くなるなどの不具合が生じるようです)。

.libファイルを書き出したフォルダーを含め、TAP関連ファイルをサーバーにアップロードします。アップロード先のディレクトリは755などのパーミッションに変更してください。

※このパーミッションに関しては、環境によって777などにする必要があるかもしれません。ただしセキュリティ上、777とすることはあまり好ましくありませんので、環境にあったレベルを設定してください。

6:設定画面へのアクセスとページのビルド

アップロードした先の/buildディレクトリにブラウザーからアクセスします。例えば、http://example.com/tap/にアップロードした場合、http://example.com/tap/build/にアクセスします。

この画面では、構築するプロトタイプページの設定を行います。特に重要となる箇所は、[Device Type][Start page]です。[Device Type]はSTEP3で作成した画像(キャンバス)サイズに合わせた端末を指定してください。[Start page]はプロトタイプページにアクセスしたときの初期ページを指定します。これはFireworksで作成したページ名のいずれかを記入してください。

その他の設定項目についてはオプションです。色々と試してみましょう。ページへのアクセスに対し、認証をかけることもできるので、必要があれば認証の設定も行いましょう。

全て完了したら、右上にある[BUILD]ボタンをクリックします。ビルドが完了したら、ファイルをアップロードしたURL(先ほどの例では http://example.com/tap/)にアクセスすると確認できます。なお、画面右上部にあるQRコードが同URLとなるため、QRコードを読み取るアプリでこちらを読み取っても構いません。

※ビルド後、もし問題がある場合には設定画面上に赤字でエラーが表示されますので、それを解消してから再度ビルドしましょう。

おわりに

一通り手順などを紹介しましたが、実際に触ってみないとそのメリットもわかりづらいので、ぜひ試してみてください。早期にテストを行うことによるメリットは、単純に手戻りを減らすということだけではありません。それはつまり制作にかける時間コストを下げ、コンテンツを作るため、または完成後にかけるテストや改善に時間をかけられるということにもなります。作業効率を上げつつ、品質を下げないための仕組みや手法を取り入れていきましょう。