『このiOSアプリ＊サービスに学ぶ!』は、オープンソース情報ブログ「MOONGIFT」管理人の視点から捉えたiOSアプリや周辺サービスから、ユニークなもの、興味深いものをピックアップし、そのポイントを解説していきます。iOS(iPhone/ iPad/ iPod touch)デバイスの利用者、その環境向けのアプリやサービスを開発している方はぜひお読みください!

新しいアプリやWebサイトを開発する際には、まずはモックアップやワイヤフレームと呼ばれる簡易的なデザインを作る必要がある。それによって作るものの具体的な形が見えてきたり、必要な機能や配置が見えてくる。闇雲に作り始めても途中で詰まってしまったら余計に時間がかかってしまう。一人ではもちろん、複数人で行うとなればさらに意思確認のためにもモックアップが必要だ。

特にiOS向けの場合はPC向けWebサイトと違って小さな画面の中に情報を詰め込むので、うまく配置しないととても使い勝手の悪いものになってしまう。そのため、簡単にモックアップを作ってテストしなければならない。そのためのWebサービスとして『mokk.me』を紹介しよう。

■今回の注目アプリ＊サービス
名称	mokk.me
概要	iPhone向け最適化サイトのモックアップが簡単に作成できるサービス

概要

「mokk.me」はユーザ登録不要で使えるモックアップ作成サービスだ。iPhone向けに最適化されたWebサイトを簡単に作成できる。作成画面は3カラムに分かれていて、中央にiPhone風の筐体、右側にウィジェット、左にプロパティとなっている。作り方は、中央のデバイスの画面に右側にあるウィジェットを配置していくだけでよい。ブロックを組み合わせるようにしてどんどんWebサイトが組み上がっていく。

ウィジェットは「テキストと画像」「フォーム」「ボタン」「マップとブラウザ」の4つに分かれている。それぞれ多様なパターンが用意されているので、作ろうと考えているWebサイトが具体的に再現できるはずだ。すべてのウィジェットにプロパティがある訳ではないが、セレクトの内容を指定したり、マップで最初に表示する場所を指定することができる。

ページは一つではなく、複数設置できる。そしてボタンやリンクには飛び先のURLが指定できるようになっており、その際に予め作成したページの中から飛び先を選ぶことが可能だ。ページ同士をリンクした状態でテストをすると、ボタンやリンクをクリックしたときに実際にそのページに遷移するようになる。実際のWebサイトに近い形での実験が行える。

テスト

作成したモックアップを保存するとテストを行えるようになる。PCのWebブラウザでテストすることもできるが、表示されているURL（QRコードも使える）にスマートフォンからアクセスして試すことも可能だ（筆者環境ではうまく動かず）。

見た目の確認をし、問題があれば修正して再度テストを行うと言った具合に反復的なデザインがごく簡単に実現する。それはやはりデザインがドラッグアンドドロップで手早くできることに起因しているのだろう。

コラボレート

「mokk.me」は認証を使っていないので、URLを人に知らせると皆で編集できるようになる。URLは複雑なキーワードになっているものの、URLさえ分かれば誰でも修正できてしまうので注意が必要だ。とはいえ、モックアップで予め予定されているウィジェットしか使えないので、問題になることは少ないと思われる。

利用する

生成されるモックアップはHTML/JavaScript（jQuery）/CSSで作られている。そのため中のコードをコピーすれば自分のプロジェクトでそのまま使うことができる。モックアップはデザイン的にはとてもシンプルではあるが、背景を変えたりロゴを配置するだけでも十分に使えるものになるはずだ。少なくともベースとして使うことで、一から最適化サイトを作るのに比べて大幅な工数減につながるだろう。

利点

利点は何と言っても最適化サイトを素早く簡単に組み立てられることだろう。モックアップではあるものの、コードを落として再利用することもできる。またメインターゲットはiOSではあるが、スマートフォンでWebKitをWebブラウザにしているAndroidやwebOSといったデバイスに対しても使えるWebサイトが構築できる。

難点

「mokk.me」は今はベータ版であり、動作において不安定な所があるようだ。ページにリンクしたくとも、選択にあがってこない場合もあった。ウィジェットは最低限揃っているが、まだ十分とは言いがたい。もっとパターンが増えれば、「mokk.me」だけで十分Webサイトが作れるようになるのではないだろうか。

まとめ

iPhoneやiPod Touchは筐体の大きさが限られるためにデザインの自由度がそれほど高くなく、ある程度パターンが見いだせるようになっている。そのため「mokk.me」ではウィジェットを配置していくだけで最適化サイトが作成可能だ。「mokk.me」は現状のPC向けWebサイトでiPhoneに最適化されたWebサイトを提供したいと考えたときに必要な画面要素を洗い出したり、その画面遷移を確認するのに便利に利用できる。非開発者、非Webデザイナーであっても容易に操作できるので、プランを具体化していくツールとして活躍するだろう。

■MOONGIFT プレミアムのご案内
「MOONGIFT」では、オープンソースソフト(OSS)情報の先行公開および専用記事をプレミアム(月額500円。1週間の無料お試しあり)として提供しています。いち早く情報を得られれば日々の業務や新しいビジネスの創出に役立ちます。さらにOSSをジャンル別にまとめた記事やエンジニアへの啓蒙記事を読みたい方はぜひご利用ください。