How to SketchFlow？ (2)

第 2 回【とりあえずサイトフローを作ってみよう！】


前回では【Expression Blend SketchFlow】の
アプリケーションを開くことを学べたかと思います。

次なる課題は！
「とりあえず、サイトフローを作ってみよう！」です。
とはいえ、この回で全て作るわけではありませんよ。

ゆっくり、まったり、ほんのり丁寧に行きますので、
ご安心を。



1.前回保存したデータを立ち上げる

前回作りましたデータの保存場所からフォルダを開いてください。
その中の [●●●.sln] がExpression Blend を再度開くファイルです。





2.Expression Blend 画面紹介

Expression Blend を立ち上げると、
前回の画面が表示されるかと思います。

ここでは
このツールさえ分かっていれば、SketchFlow が使える！
というものだけを紹介しますね。


※上図はデフォルト画面で番号を記してありますが、場合によっては異なることがございますので、参考レベルとしてご確認ください。
---------------------------------
１) キャンバス
言葉のまま、キャンバス。

２) アセット
道具の集合。
絵を描く時でいうと [筆] や [パレット]のようなもので、
何をする時にここから道具を選びことが多いです。

３) ツール
アセットと同様。

４) オブジェクトとタイムライン
キャンバスにどんな“モノ”を並べているのかが、
ここで分かります。

５) プロパティ
各道具に対しての状態を確認、編集することができます。

６) SketchFlow マップ
Web で言うならばツリー図。
言葉のまま、画面の流れが地図ですね。

７) SketchFlow アニメーション
キャンバスに配置した“モノ”に動きをつけるときに使います。
---------------------------------

いかがでしょうか？
「んな、言葉で言われても分からんよ」という方、もちろんです！
実際に使って、一緒に学んでいきましょう！



3.Expression Blend の画面を自由にレイアウトする

デフォルトで用意された画面はどうも使いにくい。
と思う方、「正解」です！

ユーザーは千差万別。
ディスプレイが小さいユーザーにとっては、
定められたレイアウトは、反って使いにくい場合があります。

という方に朗報！！
Expression Blend はツールを自由に配置できるようになっています。

さぁ、
あなただけのレイアウトを組んでください。


レイアウト方法は簡単。
各ツールのタブをドラッグして、
配置したい箇所に持っていくと「赤いライン」が表示されます。
そこにドロップするだけで配置することができます。



もちろん、
ツールの縦横の幅も調整することができますので、
是非試してください。



4.サイトのフロー図を作る

Expression Blend の画面環境も整った。
では、サイトフローを作っていきましょう！

と、と、と、と...
サイトフローを作るといっても、
どんなサイトにするのかをまず考えなければなりませんね。

そうですね。
では、今回はお試しなので単純な会員などの「アカウント作成」する
ページの構成を想定してつくりましょう！

----------------
個人情報入力 → (エラー表記) → 確認画面 → 完了画面
----------------
このような流れです。


まずは画面の [SketchFlow マップ] を見てください。
[画面 1] と表記されているものがあるかと思います。

このページをサイトの一番始めの画面 (ページ) とすると、
[画面 1] は“個人情報入力”ページですね。

次に必要な画面は“確認画面”なので、
ページを作成しなければなりません。


ここではページの作成の方法を
お教えしますね。



いかがですか？
上図のようにやると [画面 2] が生まれたかと思います。
これで“確認画面”ページを作ることができました。



5.SketchFlow マップの各画面の名前を変更する

上記のようにして画面を増やしていくと、
すべて [画面 ●] なので、
何が何のページなのか、分からなくなってしまいます。

そんなときのために、
名前を変更しておきましょう。


[SketchFlow マップ] の [画面 ●] にポインタを合わせて、
右クリックするとプロパティが表示されます。

ここに [名前の変更] がありますので、
クリックすればオーケーです。



変更できるのは名前だけではありません。
[画面 ●] の色も変更できますので、
例えばエラー画面なんかは“赤色”にしてみてはいかがでしょうか？

※矢印も同じようにして色を変えられますよ。




6.画面を増やしていこう
、
上の 4 と 5 と繰り返して、
必要な画面を作っていきましょう。

ここで注目してほしい点は、
画面を増やすと、[キャンバス] のタブが増えていることです。



確認できましたか？
[SketchFlow マップ] で作られた画面は、
自然とファイルとしてデータが生み出されている、
ということです。

つまり、
ページがあるということですね。


さぁ、つくった [SketchFlow マップ] を見てみてください。
単純ながら、立派なサイトフローができたでしょう！

おめでとうございます。


ですが！
SketchFlow の魅力はこれでは、まだ、
引き出したとは言えません。


次回は、生成したページにテキストやボタンを配置していきます。

近日中にはアップしますね。
お楽しみに～！