今回のテーマは「サイトデザイン」

Webサイトを作る場合、何らかの画面デザインを作成するだろう。配置する機能を決めるワイヤーフレーム制作、ラフやモックアップなどと呼ばれるサイトデザインを作るわけだ。通常、Webデザイナーの方が画像編集ソフトウェアなどを用いて作るかもしれない。だが、こうした作業は工数がかかる。ちょっとした修正を行うのも大変だ。

そこで使われるのは、サイトイメージを作成するためのソフトウェアだ。あらかじめ決められたパーツなどを組み合わせていくことで、手軽に機能レイアウトやラフなどを作成することができる。そして実際の画面遷移を検討したり画面の配置するパーツを決めたりするのだ。

この手のツールを使えば面倒に感じていたサイトイメージの作成が効率的かつ楽しいものになる。さらにユーザビリティも高いWebサイト構築につながるはずだ。今回はそうしたサイトイメージを作成するためのWebアプリケーション、オープンソース・ソフトウェア(OSS)を紹介しよう。

今回紹介するOSS・Webアプリ
『Lovely Charts』 モックアップ作成もできるドローアプリ
『Jumpchart』 皆でどんどん作るモックアップツール
『Pencil』 Firefoxを使って作成するモックアップ
『DENIM』 手書きで作るモックアップ


モックアップ作成もできるドローアプリ

名称 Lovely Charts
URL http://www.lovelycharts.com/

『Lovely Charts』はFlashベースのWebアプリケーションで、「Microsoft Visio」のような高機能性がウリだ。とくにモックアップ(ラフ)の作成に限定されるわけではなく、フローチャートや組織図なども作成できる。サイトマップのようなものも作成できるので、Lovely Chartsだけあれば大枠から詳細まで一気通貫で作成可能だ。

フォームオブジェクトを配置してサイト内で利用する機能を表現できる

テキストボックスやドロップダウン、ボタンなどのフォームオブジェクトを自由に配置し、テキストを追加してモックアップを作成。各オブジェクトは角丸で、ちょっと可愛らしい仕上がりになる。きっちりとしていないことがむしろ創造性を高めて何度もやり直す気になるだろう。

フローチャートの作成にも利用できる

Webアプリケーションとあって、他のユーザとの共有や公開が可能となっている。プロジェクトメンバー皆で情報を共有するのにも便利なほか、ミーティングでLovely Chartsを使ってモックアップを作成、それから外部のデザイナーに依頼する、なんてフローが組みやすくなるだろう。



皆でどんどん作るモックアップツール

名称 Jumpchart
URL http://jumpchart.com/

モックアップ(ラフ)作りの良いところは失敗を恐れずどんどん試せることだ。担当者が皆でよってたかって色々なパターンを試していく中で、新しいアイディアや形が見つかりやすい。そのためには失敗しても問題にならないくらい、簡単にモックアップを作れることが重要だ。専用のツールや使い慣れるまでに勉強が必要では面倒になってしまうだろう。

『Jumpchart』は、Webサイトをデザインからではなくコンテンツからとらえたモックアップを作成できる。Wikiのようにページを作成し、画像を貼り付けてコンテンツを作り、実際の見た感じを確認することができる。コンテンツはWiki記法のように簡単に書けるようになっている。

新しいページをどんどん追加して書きためることができる

画像のアップロードやページの一覧などコンテンツをサクサクと作成可能。Wiki記法のようになっているのでデザインの柔軟性が高くない点が残念ではあるが、テキスト系サイトであれば十分かもしれない。Ajaxを多用しているので操作がスムーズにできるのも魅力だ。

記法があるために柔軟なデザイン変更には対応できないのが難点


Firefoxを使って作成するモックアップ

名称 Pencil
URL https://addons.mozilla.org/en-US/firefox/addon/8487

『Pencil』は単体のアプリケーションではなく、Firefoxアドオンとしてインストールするタイプのモックアップ(ラフ)作成ソフトウェアだ。ただ、Firefoxで動作するとはいっても、とくにWebサイト向けに特化しているわけではない。Windows用のGUIアプリケーションやGtkオブジェクトなどもパーツとして登録されている。

Firefox上で作成するモックアップ。日本語も利用可能

テキストや画像、各種フォームオブジェクトをドラッグ&ドロップで配置していくだけでどんどん画面ができていく。さらにコメントを追加することで、ボタンやアクションの意味するところを補完できるようになる。タブ機能を備え、複数の画面を同時に作成できる点も便利だ。

できあがったモックアップを画像出力することもできる

各オブジェクトは正確に作られており、キレイにデザインすることが可能。あまりラフな感じがしないのでスクラップ&ビルドで作るという感じがしないが、怖がらずにどんどん作成していこう。できあがったモックアップは専用のファイル形式での保存や画像として出力ができる。



手書きで作るモックアップ

名称 DENIM
URL http://dub.washington.edu:2007/projects/denim/

一般的なモックアップ(ラフ)作成ツールはあらかじめ用意されているフォームやオブジェクトのパーツを組み合わせてイメージを作り上げていく。それに対して『DENIM』はちょっと変わっている。ほぼ手書きでモックアップを作成していくのだ。手書きのため総じてラフなデザインになりやすく、ホワイトボードに書き込んでいるような感覚で作り上げることになる。

手書きで作成するので、タブレットがあるとさらに便利

そして一つひとつのページが終わったら、ボタンなどを配置してそのアクション先を指定する。指定はページとページを線で結んでいく――そんな直感的でわかりやすい操作方法になっている。ページが組み合わさっていくとフローになり、さらにそれが増えるとWebサイトマップへと成長していく仕組みだ。

HTML出力しても実際の動作を確認できる

つなぎ合わせたフローは専用ブラウザを使ってたどることができる。クリックすることで次のアクションに遷移。さらにHTMLとして出力すれば、使い慣れたWebブラウザの中で実際にフローを試せる。表示の配置に関して問題ないか、フローに違和感はないかといったように、一つひとつの画面ではわからなかったアクションによるデザイン性について検討することが可能だ。

いかがでしたか?

Webサイトをやみくもに作っても整ったデザインにはならない。また、デザイン性に優れているからといってユーザビリティが高いとは限らない。Webサイトの成功の鍵はデザインが握っているというのは間違いないが、それは決して"格好よさ"だけを指すのではない。

より良い操作性や使い勝手を求めるには、モックアップ(ラフ)を作ってシミュレートしてみなければわからない。スクラップ&ビルドを繰り返し、その中から確信できるものを見つけ出さなければならない。そのためのツールとして今回紹介した各種Webアプリケーションやオープンソース・ソフトウェアはきっと役に立つはずだ。

デジタルデータであれば遠隔地にいるプロジェクトメンバーに渡すのも容易で、情報も共有しやすく、再利用性が高い。面白いWebサービスを作る上でも、このようなツールをどんどん活用していこう。

著者プロフィール:MOONGIFT 中津川 篤司(なかつがわ あつし)

1978年生まれ。オープンソース紹介サイト「MOONGIFT」管理人。プログラマ、SE、ITマネージャを経て、オープンソースのビジネス活用を推進する。現在は独立し、Webサービスのコンサルティング、プロデュースを行う。