Webサイトやスマートフォン、ローカルソフトウェアのデザインに使える。ワイヤーフレーム作成ツール×13選|トイロハWebサイトやスマートフォン、ローカルソフトウェアのデザインに使える。Webサイトやスマートフォン、ローカルソフトウェアのデザインに使える。ワイヤーフレーム作成ツール×13選TwitterでシェアFacebookでシェアはてなブックマークGoogle+でシェアこの記事をシェアWebサイトやソフトウェアを開発する際に、いきなりコーディングすることはないと思います。手書きで紙やホワイトボードに全体のデザインを簡単に書いてみるのではないでしょうか。最近ではそれをコンピュータ上で行うツールが多数増えています。今回はそんなワイヤーフレーム、モックアップ、プロトタイプを作成するためのソフトウェアを紹介します。それぞれ特徴がありますので、適したプラットフォームのものを選ぶと良いでしょう。iPhoneであればこれ、Webサイトのモックアップであればこれ、といった具合です。モックアップを作る場合の注意点としてデザインがラフに作れるものを選ぶように心がけることです。優れたUIで綺麗にできるものもありますが、綺麗にできるものは却って細かい部分にこだわってしまうようになります。手書き同様の適当さが重要です。ラフな線、ラフなオブジェクトを適当に重ね合わせて画面を作り上げる方がワイヤーフレーム作成に向いていると言えます。FirefoxでiPhoneアプリのプロトタイプを作成するFirefoxと言えばある意味iPhone(WebKit)のライバルとも言えるソフトウェアです。そんなFirefoxでありながらもiPhonePrototypeはきちんと動作します。独立したウィンドウが開くので、Firefoxは殆ど無関係かも知れません。画面は大きく二分割され、左側にコンポーネント、右側にモックアップを作成するウィンドウが表示されます。左側の部品を右クリックすると左側のウィンドウにドロップされます。後はマウスで移動すれば良く、ラベルなどはテキストが編集できるようになっています。Storeで15ドルで販売されているiPhoneアプリです。全て同じという訳ではなく、オープンソース版は基本的な部分だけを抜き出したものになります。言え画面定義を行い、その画像切り替え時のアクション定義などは同じです。画像を用意し、画面の指定した場所をタップできるようにしたり、切り替えアクションを設定するファイルを作成する必要があります。画像と定義ファイルが用意できれば、専用コマンドでコンパイルしiPhone側からHTTP経由でダウンロードします。cast)を使って容易にダウンロードさせることもできます。Designerはフローチャートが基本になっているようで、オブジェクトやラインが多数登録されています。フォントを変えれば日本語の表示にも対応しています。UML、Windowsのモックアップ、地図、電気図といったステンシルが登録されています。使い方はステンシルから選んでドラッグアンドドロップして配置し、文字を書くだけです。専用のファイル形式で保存されますが、画像でエクスポートすることもできます。利用できる場面の多そうなソフトウェアです。Toolkitは画面や画面を構成するオブジェクトを作成し、PowerPoint2007の形式で提供しています。メニューバーやボタン、画面の枠などがあるので、それらをコピーして貼付ければプロトタイプ(モックアップまたはワイヤーフレームとも)が作成できるという仕組みです。意外と便利なのは、プロトタイプを作成しつつ、その横に説明書きを加えるようなことが容易にできる点です。四角と線を組み合わせただけの貧弱なインタフェースで説明するよりも具体的で利用者にとっても分かりやすいプレゼンテーションができあがるでしょう。OSX、LinuxやSolarisといったマルチプラットフォームに対応したソフトウェアです。若干特殊なインタフェースで、まるでホワイトボードに書いていくかのようにモックアップを作成できます。することは鉛筆ツールで四角を描くことです。これが自動的にページになります。メニューから選んで綺麗な形のページを追加しても良いですが、やはり手書きのが味わいがあります。画面の下にあるラジオボタンやテキストボックスなどを配置していきます。足りない部品は鉛筆で書き込んでいけます。これはすごい!Firefoxを使ってサイトのモックアップを簡単に作成するPencilはちょっと正確な画面を作るのに適しています。PencilはFirefoxアドオンとして動作し、専用のモックアップ作成ウィンドウを立ち上げて利用します。テキストや画像、各種フォームオブジェクトが予め登録されていますので、ドラッグアンドドロップで配置して文字を編集するだけで簡単にモックアップが作成できます。Utilsは幾つかのソフトウェアがセットになっています。Firefoxのプロトタイプ作成ツールであるPencil用のソフトウェアがあります。これをインポートすると、Androidに適したUIコンポーネントが利用できるようになります。これを使えばよりユーザビリティの高いインタフェースを実現できるでしょう。最後にWebベースでアイコンを編集するツールです。自分で好きなアイコンをアップロードしたり、予め用意されているものから選択して、各UIの部分に適したデザインに変更できます。Composerは特にWebシステムに限ったものではないようです。プロトタイプ作成ではタブやテーブル、チェックリストなど様々なオブジェクトが利用できます。最近のリッチなインタフェースのWebアプリケーションでも利用できるでしょう。複数の画面を作成したら、それをつなぐアクションが必要になるます。Composerでは線でつないで表現できます。Webサイトを越えてアクティビティを追加してワークフローを作ることが可能です。GSS対応のUIデザインツールWebサイトのデザインを行う際、最近では手でタグを書いてコーディングするケースが増えています。そんな時にはスタイルシートを書いて、ブラウザをリロードして...を繰り返すかと思います。そんな作業をされている方に使ってみて欲しいのがBindです。Bindはエディタとプレビューが一体化したWebデザインツールです。BindはHTML/スタイルシートの他に、GSSという記法に対応しています。Sheetの略で、マルチデバイスに対応したグリッドデザインを容易にする記法です。Webの技術でスマホアプリのプロトタイプを作成スマートフォンやタブレットのネイティブアプリを開発するのは時間を要しますので、Webの技術を使ってプロトタイピングを作りスクラップ&ビルドで色々試してみるのが良いでしょう。そこで使えるのがClankです。Clankでは多彩なコンポーネントに加えて、各種でバイス向けの枠を表示できるのが特徴です。ステータスバーに表示する時間も指定できるなど細かいカスタマイズが可能です。Clankを使えばスマートフォンアプリのモックアップがさくさく作れるでしょう。想像力を限界まで引き上げろ!フォントを使ったプロトタイプ作成BLOKKは全て塗りつぶしたフォントで、ワイヤーフレームを表現するのに利用できます。BLOKKはフォントですが、単純に真っ黒に塗りつぶしただけのフォントです。言えばどれを入力しても真っ黒な四角が出るだけです。何に使えるのでしょうか。実はBLOKKはWebサイトやアプリのプロトタイプを表現するためのフォントなのです。フォントを並べて、隙間をスペースキーで作ると何となくそれっぽい表示になります。Fontにも対応しています。イメージに合わせてどんどんプロトタイプを作れるフレームワークFramerはデスクトップ、スマートフォンのWebに対応したプロトタイプを作成するためのフレームワークです。インターネット上のサービスはより素早く実装が求められるようになっています。そこで必要になるのがプロトタイプライブラリです。Framerはビューを基本単位として表示設定を行います。どの場所に表示するかを指定し、貼付けていくイメージです。単色の他、画像を入れることもできます。簡単にアニメーションの指定もできたり、CSSのスタイル設定も追加できます。イベントとアニメーションを組み合わせれば、動作が分かりやすく確認できるでしょう。HTMLを使ってiOSアプリのモックアップを手早く作るフレームワークRatchetはHTML/CSS/JavaScriptを使ってiOSアプリのモックアップを素早く作るフレームワークです。iPhoneアプリを開発する際にまずプロトタイプを作ることが多いですが、Xcodeなどを使って作っていては時間がかかると感じるかも知れません。そこでもっと手軽に手早くモックが作れるRatchetを使ってみましょう。Ratchetの利点はHTML/CSS/JavaScriptで構成されているということです。記法に沿ってパーツを組み合わせていくだけでiPhoneアプリのようなUIが出来上がります。HTMLであればちょっとした文言の変更や動作の確認であれば十分かも知れません。Mockupsといった有償サービスを使うことが多いです。どのツールを使うにせよ、モックアップはパーツが数多く揃っていて手早く組み立てられるものを選ぶ必要があります。システムとしての全体像がつかめれば、それを使って色々な議論が交わせるようになるはずです。個人的なプロジェクトであっても目に見える形のものがあれば、画面遷移や画面に必要な情報について掘り下げられるようになります。することでいきなり開発をするのに比べて大幅に手戻りが少なく、高速な開発が可能になるはずです。Web担当者必見】CMS導入、これだけ押さえる!デザイン確認3つのポイントこんにちは、ディレクターFです。皆さんは仕事やプライベートでCMS(コンテンツマネジメントシステム)を使っていますか?CMSを導入したあと、サイトデザインの段階では気づいていなかったけど、いざ更新作業をしてみたら思い通りのレイアウトになっていない・・というご相談をたまに頂きます。今回は、CMS導入の際に見落としがちなデザイン確認のポイントをご紹介します。...Dreamweaver【可変グリッドレイアウト】で作るレスポンシブなワイヤーフレーム前回の記事に、htmlワイヤーフレームの話がありましたが、今回は、ワイヤーフレーム段階からレスポンシブなhtmlで制作した事例を紹介します。11年前、私は小さなデザイン会社に入社しました。Journalで公開された投稿です。...Webアクセシビリティとは?基礎知識と注意点まとめ本記事のテーマは、Webアクセシビリティです。エンジニアやデザイナーを対象に、W...効率的なインプットとアウトプットを行うためにはオンラインには情報が溢れています。数多のWebサイトがあり、その中には日々情報を発信するニュースサイトはもちろん、多くの個人ブログ、ソーシャルサービス、Webアプリケーションと情報が次々と作られていきます。した情報を全て受信していては一気に溢れてしまい、情報の波に飲み込まれてしまうのがオチです。そこで今回は個人的な経験をもとに、いかにして効率的なインプット/アウトプットができるかを考えてみたい...関連するキーワードソフトウェア(766)フォント(186)プロトタイプ(87)オブジェクト(75)Firefox(47)モックアップ(40)インタフェース(22)フローチャート(16)この記事が役に立ったら「いいね!」してね!TwitterでシェアFacebookでシェアはてなブックマークGoogle+でシェアこの記事を書いた会社のPRMOONGIFTサービスMOONGIFTはオープンソース・ソフトウェアを毎日紹介するブログです。運営会社オウンドメディア運営会社の皆様へライター募集お問い合わせ当サービスでは、掲載許諾を受けたオウンドメディアをご紹介しています。記事掲載のご希望、お問い合わせ等はこちらよりご連絡ください。当サービスはSEデザインが運営しており、翔泳社のメディアとは運営元が異なります。JAPANページトップ。