UI」のスマホでリンク確認機能が便利2015.05.13ホーム>iPhone関連情報iPhone、Androidに限らずボタンなどのパーツが予め用意されているワイヤーフレームツールはたくさんありますが、今まで試してきたワイヤーフレームはピンと来ませんでした。ワイヤーフレームで画面遷移図を作成したら、後はデザイン、プログラミングとアプリを組み立てていくのですが、ある程度アプリが完成するまで実際の画面遷移は頭のなかでしか描けません。すると実際に動き出した内容を見て、修正したいなんてことも出てきます。なる前にワイヤーフレームのプロトタイプ的なモックアップ段階で簡単なリンク機能で構わないから画面遷移が確認できたらと、常々に思っていました。Chromeアプリとして登録ができます。UI」はリンク機能が備わっており、デザイン及びプログラミング作業に入る前のプロトタイプとしてリンク付きでスマートフォンで画面遷移を確認することができます。これにより、完成イメージの完成度をより高めることができ、プログラミング実装後の修正を減らしてくれます。Phoneのボタンなどのパーツが用意されていますが、自分で作成したパーツや画面をアップロードして使うこともできますので、よりリアルに近いイメージのモックアップが作成出来ます。作成したワイヤーフレームはQRコードが発行されたり、そのワイヤーフレームへのリンクが作成され、共有することができます。UI」は、基本的に無料で利用できますが、下記の制限があります。フリーだと10画面分しか作成できないので、どちらかと言うとこのサービスはビジネス向けと言ったところでしょうか。・モバイルテストプラン詳細はこちら。画面左のライブラリエリアにあるボタンやナビゲーションバーのパーツをドラッグするか、ダブルクリックで画面に配置されますので、それを動かして調整します。8のパーツが予め用意されています。自分で作成したパーツや画面は、一番下にある「Uploads」でアップすることができます。UI」では、画面の事を「ページ」と呼んでいます。ページのサイズを設定することができます。Phoneの画面サイズをせんたくすることはもちろん、自分でサイズをカスタマイズすることもできたり、横画面にすることもできます。レイアウト作成ボタンやナビゲーションバーなどを配置するとこんな感じで表示されていきます。リンク作成は、パーツを選択した状態で「Link」ボタンを押せば、他のページへのリンクができます。パーツは、キーボードの「Delete」ボタンか、パーツを選択した状態でゴミ箱へドラッグなどすることで削除出来ます。ページ(画面)の削除ちなみに、ページ(画面)を削除するには、画面上部にある「ズームアウト」ボタンをクリックして、全体を表示した状態でページを画面右下のゴミ箱へドラッグで削除することができます。ワイヤーフレーム作成時のポイントワイヤーフレームの作成自体は、さほど難しくはありませんが、画面上部にはステータスバーのパーツを入れておくといいです。いうのもiPhoneの実機での検証時に本体のステータスバーが邪魔をしてボタンが見えなかったりしますので、入れておくことをお薦めします。このように画面からパーツがはみ出しても問題ありません。プレビュー時には、このように余分な部分をカットして表示してくれます。スクロール用の縦長の画面も作成可能です。size」の「Height」を長めの画面サイズに設定します。サンプルプレビューサンプルでiPhone向けの3画面分を作成してみました。5で見る時には、Safariで下記のURLにアクセスして「ホーム画面」に登録します。すると、Safariブラウザの画面下のメニューバーを非表示にした状態でプレビューを閲覧することができます。あわせて読みたい記事iPhoneにフォントを追加するアプリAnyFontの使い方(4.4)iPhoneケースを激安で買う方法。