How to SketchFlow ? (4)

第 4 回【作った WireFrame をブラウザで確認しよう！】


前回では、[Expression Blend] 内で各ページの
ワイヤーが作成できたかと思います。

忘れてしまった方は、
さぁ、今すぐおさらいを。


今回は前回作ったワイヤーを
Web ブラウザで表示させちゃいましょう！の巻です。


では、早速 [Expression Blend]を立ち上げて、
作成したファイルを開きましょう。

用意はいいですか？



1.ブラウザで表示させる

[SketchFlow] で作成したサイトプロトタイプを
ブラウザで表示させる方法は2通りあります。


(1) [プロジェクト] の [プロジェクトの実行] を選択





(2) キーボードの [F5] をプッシュ




すると、どうでしょう？
Expression Blend の力で、見事にブラウザで表示されたはずです。

実感、湧きませんか？
とうとうここまでやったぜ感、覚えませんか？



ちなみに、これ、
[Silverlight] で作られているのですよ！

ちょっとマウスの右クリックで
確かめてみてください。
下の図のように [Silverlight] と表示されるはずですから。





同じデータをサーバにアップしていますから、
途中からの方もこちらから見てみてください。
http://www.ddf.ne.jp/cl/hiromichi/test_02/TestPage.html




2.プレヴュー画面の機能を知る

さて、
やっとここまで来ました、プレヴュー画面。

ここでプレビュー画面には、
どんな機能が備わっているか、ちょっと紹介しますね。

下の図をクリックして、
拡大して見てみてください。



このプレヴュー画面で一番気になる点は、
“フィードバック”機能ですね。

このフィードバック機能に関しては、
別の章で詳しく紹介するつもりですので、
お楽しみに...！！




4.マップ機能を見る

「ページが大きく表示されるのは便利だけど、
あれ？全体のサイトマップはどうなっていたっけ？」

なんて仕様書を見ながら、
思ったことありませんか？

[SketchFlow] は、当然サイト全体のマップ (ツリー構造) を
表示させることができます！


下のようなイメージですね。




それでは、みなさんも、
上のような表示画面にしてみましょう。

表示方法は極めて簡単。

左カラム、最下部にあるタブを“マップ”にして...




はい、できましたか？

注目してもらいたいところは、
マップの背景にうっすら「プレビュー画面」が見えるところです。

マップの各ページ名はボタンになっており、
クリックすると背景のプレビューも連動して切り替わる。

つまり、
サイトマップを見ながら、
同時にページのワイヤーも確認できる！


便利ですね～



しかし、
まだ [SketchFlow] のプレヴューの真の力は 30 % ！


次回は
ワイヤーフレームのボタンをアクティブにするです。

何のことか、
どんなことができるのか、
すでに予想はついていますね？

お楽しみに～


※ちょっと更新までに時間が要してしまったこと、反省。
次回はもっと早く、近日中に更新を目指します！