【無料プレゼント】まだホームページは作らないで!このガイドブックを読み終えるまでは。いうテーマで、「ホームページを作る前に読んでおくと得する本」を書きました。無料で読むプロトタイプは「試作品」のことです。Webサイト制作時の準備として、サイトマップやワイヤーフレームだけでなく、完成後の動きを触って試せる『プロトタイプ』も作ってみましょう。プロトタイプサイトマップは、ウェブサイト内におけるコンテンツの配置図。ワイヤーフレームは、画面上における情報の配置図。二つともウェブサイトの設計図にあたる大切なものですが、ウェブサイトの動きを触って確かめられないのが弱点です。それに対して、プロトタイプは「ウェブサイトの模型」として実際に動かせます。クリックしてリンク先のページを開きながら、操作性を体感しサイト全体の構成も追いかけられます。手書きのワイヤーフレームたとえば、こんな手書き(雑...汚くてスミマセン)のワイヤーフレーム。トップページの「メールアイコン」と「contactの文字」をクリックすると「お問い合わせ」のページへ移動する仕様です。これをプロトタイプにしてみます。プロトタイプの見本http://websae.net/wp-content/uploads/2014/05/prototype_20140501_ex2.mp4手書きのワイヤーフレームから作ったプロトタイプの挙動を動画にしました。動画で見られる動きはこんな感じ。トップページが「Flip」で現れるこの一連の流れをブラウザ上で体感できるのがプロトタイプの強みです。「このリンクは思ったよりも目立たないな」「このページはもうひとつ上の階層に配置した方がいいかも」「ページ遷移はFlipにすると面白い」のように、いざ操作してみないと分からない部分の良し悪しを手書きの時点で判断できます。クライアントさんへデザインの提案をするときも役立ちます。デザイナーの意図を動きで伝えられるので理解してもらいやすいですし、逆にクライアントさんからの要望も引き出しやすくなります。Marvelでプロトタイプを作成してみる今回、手書きのワイヤーフレームからプロトタイプを作るのに利用したのは『Marvel』というWebサービスです。無料ですし、操作に専門的な知識がいらないのでオススメ。Marvel使い方は以下に。Dropboxと連携まずDropboxが必要です。ワイヤーフレームを画像化し先にDropboxへ保存しておきます。Project」をクリックして新規のプロジェクトを作成します。Dropbox」をクリック。ワイヤーフレームの画像を読込みます。エディット編集するワイヤーフレームを選択します。リンクを囲むドラッグしてリンクを囲みます。例では「メールアイコン」を囲んでいます。リンク先のコンテンツを選択リンク先として開きたいワイヤーフレームを選びます。「お問い合わせ」のページを選びました。トランジションを選択リンク先のページが表示されるときの動きの効果を「トランジション」と呼びます。スライドやフリップなどを動く方向と一緒に選べます。「Preview」をクリックするとプロトタイプを試せます。リンクの位置や挙動の仕方が適切なのかを見て触って確かめます。iPhoneアプリもあるMarvelには、便利なiPhoneアプリも用意されています。iPhoneアプリでは、カメラで撮影したワイヤーフレームをそのままiPhoneの中でプロトタイプ化できます。スマホサイトやアプリは、如実に操作性がPVやユーザー数の拡大を影響します。リリース前に触って動かしてみるべきですね。PopMarvel以外にもプロトタイプを作成できるアプリがあります。Popもカメラで撮影した写真をそのままプロトタイプにできるアプリです。Android版もありますよ。pentotypepentotypeはスマホサイトやアプリに特化したプロトタイプ作成のためのアプリです。素晴らしすぎて、本当はこのアプリだけで一本の記事を書きたいくらい。プロトタイプだけでなく、その前のワイヤーフレームも画面を指先でなぞって作れます。pentotype以上!ウェブサイトのデザインは見た目の良さだけを追求するのではなく、操作性を高める工夫も必要ですね。プロトタイプを試してみてください。紙を眺めているだけでは気付かない色々な発見を得られるはずです。ほな、ごゆるりと〜ついに再開!ウェブさえのHP作成サービスはこちら@websae2012さんをフォローシェアしてくれると嬉しいです!(コメントも喜ぶよ)Tweetあなたにはこんな記事もおすすめ!無料のホームページ作成ツールを14個も!もう制作会社を頼らない。何ができるの?Jimdoの使い方まとめ。料金プランの違いやテンプレート、評判・口コミなどなど。結局、評判どおりエックスサーバーをおすすめしちゃう理由トップページに戻るん?最新情報を見逃さない方法!?わざわざブログに来なくても、自動的にウェブさえの更新情報を受け取ることができます。休止していたウェブさえマガジンも最近再開しました。メールで受信できます。受信は無料で、いつでも解約できるので気軽に登録してみてください。株式会社ウェブさえの代表者です。フリーランスまで様々な職種業界の方が居て、挙げだすと切りがありません。皆様に本当に感謝しております。詳しい自己紹介はこちらへ。お問い合わせやご質問・ご相談はこちらへ。最近更新した記事ホームページ作成ツールを無料もありで19個も!もう制作会社を頼らない。WordPressのスキルアップに最適。