IT?G???W?j?A???N???G?C?^?[?????????h???E?]?E?E???l?????T?C?g

トップページてくらぼ今すぐ役立つ!ITサービス&ツールズ> Webサイトのモックアップがブラウザ上で作成できる「Mockingbird」

今すぐ役立つ!ITサービス&ツールズ
Webサイトのモックアップがブラウザ上で作成できる
「Mockingbird」

2009.11.19
このエントリーを含むブックマーク livedoorクリップ Yahoo!ブックマークに登録 この記事をChoix!

「Mockingbird」は、Webサイトの設計図となるモックアップ(ワイヤーフレーム)を、ブラウザ上で作成できる便利なツールだ。Webサイトでよく使用されるボタンやプルダウンメニュー、検索ボックスといった部品があらかじめ用意されており、それらをドラッグ&ドロップして画面上に配置していくだけで、Webサイトのモックアップを簡単に作ることができる。

Webサイトの制作にあたって欠かせないモックアップだが、一般的にはPowerPointやIllustratorで描かれることが多いと思われる。本サービスではそれらのソフトを用意しなくても、ブラウザを用いてモックアップが作成できるほか、メンバー登録を行うことで他のメンバーと共有することもできるので、共同作業にも向いている。

ではさっそく利用してみよう。サイトにアクセスし、「Try it now」と書かれたボタンをクリックして、編集画面に移動する。

「Try it now」と書かれたボタンをクリックして、編集画面に移動

編集画面。上部にツールバー、左列にページおよび部品の一覧、右列が作業エリアとなっている。作業エリアに並んでいる「Welcome!」などの文言やダミー画像は、実際に部品を用いて作成されたものだ。

「Mockingbird」の編集画面

各部品はマウスでドラッグして動かしたり、クリックして選択したのちDeleteキーで取り除くことができる。Ajaxにより、速度面でストレスを感じることもなくスムーズに動作する。

Ajaxにより、速度面でストレスを感じることもなくスムーズに動作する

試しに実際にモックアップを作ってみよう。左上の「New」をクリックして新しい作業エリアを表示したのち、左下の一覧から任意の部品を選んで作業エリア内にドラッグ&ドロップする。部品のラベルはすべて英語だが、どれもアイコンが付与されているので問題なく役割が理解できるはずだ。

左下の一覧から任意の部品を選んで作業エリア内にドラッグ&ドロップする

ドラッグ&ドロップした部品は拡大縮小も自由自在。ガイドラインが表示されるので、他の部品との位置合わせも容易だ。グループ化、前面背面表示、上下左右揃えにも対応する。

ドラッグ&ドロップした部品は拡大縮小も自由自在

日本語のテキストを入力することも可能だが、部品によっては日本語のテキストを受け付けなかったり、文字数に制限がある場合も見られた。日本語がうまく入力できない場合、よく似た別の部品で代替したり、日本語が認識できる部品を上から載せて説明を記入するとよいだろう。

日本語のテキストを入力することも可能だが、うまく入力できない場合は、よく似た別の部品や日本語が認識できる部品を上から載せて説明を記入する

作成したモックアップを保存するためにはユーザ登録が必要。メールによるアクティベートを経て、モックアップが保存できるようになる。日本語名を付けることも可能だ。

メールによるアクティベートを経て、作成したモックアップが保存できるようになる

登録ユーザになると、固定リンクを発行することによって他のメンバーとの共有が可能になる。わざわざ印刷したり、PDF化して送らなくとも、URLを知らせるだけで相手に見てもらえる。

登録ユーザになると、固定リンクを発行することによって他のメンバーとの共有が可能になる

固定リンクのURLを表示したところ。この画面では編集は行えず、閲覧だけが行える。外部のクライアントや業者との折衝には非常に便利な機能だ。

固定リンクのURLを表示。この画面では編集は行えず閲覧だけが行える。

本サービスの機能面で難があるとすれば、ロゴファイルなどのアップロード機能がないことだろう。例えばロゴだけは実物を貼り付けたいと思っても、アップロードの手段がないため、イメージの代替枠で我慢するしかない。こうした点はPowerPointやIllustratorにはかなわないだろう。

また、対応ブラウザについても注意が必要だ。FirefoxやSafari、Google Chromeには対応するものの、IEには対応しないのだ。これは共有する相手においてもそうなので、他メンバーと共有する際は、利用ブラウザについて事前に確認しておく必要がある。場合によってはPDFに出力してメールで添付するという方法も併用したほうがよいかもしれない。

ともあれ、ソフトやプラグインのインストールも必要なく、かつ無料で使えてしまう、非常にすぐれたサービスだ。一般的にモックアップを作成する際は、レイアウトをどうするかよりも、部品の作成に手間がかかってしまいがちだが、本サービスではあらかじめ多数の部品が用意されているので、ドラッグ&ドロップで並べていくだけでそれらしいモックアップができてしまう。本来のレイアウト作業に集中できるという点において、利用する価値は高い。モックアップ作成のノウハウがないひとにもおすすめできる。

ソフト名
Mockingbird

作者
GoMockingbird.com

利用料
無料

  • 前回の記事
  • 次回の記事

このレポートに関するご意見・ご感想は下記までお願いします。
project@cs.pasonatech.co.jp

バックナンバー一覧へ

山口真弘プロフィール

テクニカルライター。PC周辺機器メーカー2社を経てコンサルティング会社でユーザビリティ改善業務に携わった経験から、ユーザ視点による製品やサービスの使い勝手の評価が専門分野。Impress Watch、ITmediaなどのWeb媒体を中心に活動中。
ブログはこちら

新着案件情報

 ページトップ


IT派遣・エンジニア派遣の【パソナテック】HOMEへ

© 2006-2013 Pasona Tech,inc.All Rights Reserved.