How to SketchFlow ? (5)

第 5 回【ワイヤーフレームのボタンをアクティブにしよう】


前回で [Expression Blend] で作成したワイヤーフレームを
ブラウザ上で表示させることができたかと思います。


下のURLのようにですね。
http://www.ddf.ne.jp/cl/hiromichi/test_02/TestPage.html



例えば、
ブラウザ上で表示させたワイヤーフレームが、
実際のサイトの様に、
ページ上のボタンをクリックしてページ遷移ができたら....

便利だと思いませんか？



なんと！
SketchFlowならできちゃんです！



例えば、
下の画像のような感じですね。

---------------------
１）“アカウント作成ページ”の【確認する】ボタンをクリックして...
↓

２）“エラーページ”が表示される。
---------------------





はい。
では、今まで作成した SketchFlow ファイルに反映してみましょう！



やり方は非常に簡単です。


(1) 次のページに移行させるエレメント(ボタンやテキストなど)上で右クリック





(2) 表示されたメニューから画面遷移を設定





どうです！
たったこれだけで画面遷移が設定されるんですよ！


さぁ、同じように他のページも反映しちゃいましょう！！



では、前回同様【F5】をクリックして、
ブラウザ上で確認してみましょう。





いかがですか？
ページ移行がワイヤーフレーム上で遷移できているでしょうか？



同じものをアップしていますので、
下記 URL から確認してください。


http://www.ddf.ne.jp/cl/hiromichi/test_03/TestPage.html



さて、次回で超初心者編 SketchFlow 最終回！！
作成したワイヤーフレームをサーバーにアップするです。


次回もよろしくお願いします！

上野動物園に行ってきた

先週の3連休はお天気に恵まれたこともあって、
早起きをして上野動物園に行ってきました。




初めに断っておきますが、
今回は新しい情報などございません。

すいすいスクロールして
写真をお楽しみくださいね。
愛くるしい動物たちに癒されるお時間です。


※写真もそれほど撮りませんでしたが...


ちなみに上野動物園は入館料が600円!!と
コストパフォーマンスはよく、この半年で4回も足を運んでしまっています。


まずは...



はい、ワニです。
やっぱり恐竜を思わせますよね。

僕、初めてワニをここで見た (しかも半年前を) のですが、
思わず「ワニだ！」と叫んでしまいました。


そういえば、ワニを実物として見たのは初めてだって、
気がついたのですよ。

そういうことって、
何気にあったりしませんか？


ちなみに、ちっちゃいワニもいました。



これなら自宅で飼えそうです。

そうそう、
最近ではワニの免疫力を評価されて、
血液から HIV の治療が研究されているようですよ。



カメです。





まったく動きません。
呼吸をしているかも分かりません。



キリンです。
隣のお部屋 (おり) の草を食べていました。



やっぱり首が長いです。

ちなみに...
多摩動物園では、もっと首が長くなる研究がされていますよ。



カバの親子。




気がつきました？
親子なのに、お部屋が別々にされていること。

コレ、親離れさせるために
お部屋を別々にしているんですって！


それにしても、
この愛情には感動します。










なんなのでしょうか？
愛って、人間だけじゃないんですか？



トラです。



僕のへっぽこカメラでは光量が足りず、ブレブレですが...
トラはトラ柄でした。


背中がいと可愛らしゅう。




これは...！
やはり可愛いだけじゃないのですね。





人気モノのペンギン。




ペンギンはいつ見てもペンギンなので、
今回はここからで満足しました。


そういえば、空を飛ぶペンギンもいましたね。





最後に...
さて、どこでしょう？




白クマ。






しかし、すごい人気でした。
一番の人気なのではないでしょうか？




多分、上から覗き込むタイプというは、
ガラス越しよりも現実的だし、ある程度近くで見ることもできるから、
よりエンタテイメント性を感じられるんでしょうね。

【見せ方】の重要性を考えさせられますね。

見られる方はどう思っているかは、分かりませんが...



そうそう、昔、
岐阜の「奥飛騨クマ牧場」に行ったことがありますが、
ここは面白い！！

道に迷ってたまたま見つけたところなのですが、
クマさんのショーなんかもあったり...

お時間がある時にでも
行ってみてはいかがでしょう？



↓地図です。


大きな地図で見る


休みだから、ゆっくり寝ていたい、という気持ちもいいですが、
たまには早起きして、ちょっと変わったところに行くのは刺激になりますよ～。

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 % ！


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

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

お楽しみに～


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

How to SketchFlow？ (3)

第 3 回【ページにテキストやボタンを入れよう！】


前回では【SketchFlow マップ】上で、
サイトの全体フローを作成できたかと思います。

また同時に【SketchFlow マップ】で作成すると、
ページまでが生成されたことが確認できましたね。


今回は生成された各ページに、
「テキスト」や「ボタン」、さらに WireFrame に欠かせない「四角形」を配置していきましょう！



1.テキストをいれる方法

Expression Blend 3 を使っているからって、
怖がる必要はありません。
どんなソフトウェアでも操作方法は基本的には同じです。

ましては PowerPoint を使ったことがあれば、
すぐにマスターできてしまいますよ。

さぁ、
下の手順に沿って、進めて見てください。

まずは、テキストアイコンをクリックして...



なお、上の図の青枠でも説明していますが、
ここのテキストアイコンには、3 種類の機能があります。

自分に必要なテキストツールを選んで、
効率よく作成していきましょう！



次はキャンバスに、
テキストを配置したい場所にドラッグ & ドロップすると、
テキストエリアが生成されます。




最後に、
生成されたテキストエリアに文字を入力するだけです。






2.テキストを拡大させる方法

次は、
入力した文字が非常に小さいので、
文字を拡大させてみましょう！



いいですか？
逆に文字を小さくしたい場合も
方法は同じですよ。




3.ボタンを配置させる方法

Web サイトには、
次のページに移行させるために
ボタンの存在は必須です。


SketchFlow では、
ボタンのセッティングも非常に簡単です。

ツールバーの【ボタンアイコン】をクリックして、
キャンバスにドラッグ & ドロップするだけです。




しかし、
このままでは“Button”と書かれているだけで、
何のボタンなのか分かりにくいかと思います。


そこでボタン内のテキストを変更してみましょう。



上の図の方法で、
ボタン内のテキストが変更できたことが確認できたかと思います。

他にも、
ツールバー内の【選択ツール】を使い、
ボタンをダブルクリックする方法などもあります。

自分が一番簡単な方法を
是非見つけてください。




4.背景に四角形を敷く方法

これでテキストやボタンが配置できるようになりましたね。
しかし、テキストとボタンだけでは折角の WireFrame も見えにくい。

では、
背景に四角形を敷いてカテゴライズが
簡単に分かるようにしましょう！

まずは
【ツールバー】の【四角形】ツールを使うことで、
簡単に四角形を作ることができます。



どうですか？
できましたか？


ですが、見ての通り、
このままでは四角形がテキストなどの前に配置されてしまっています。


四角形をテキストの後ろ、
最背面に配置しましょう！



すると...



見事に最背面に配置されましたね。



では...さらに！
先ほど作った四角形に色をつけて、
さらにカテゴライズの視認性を強めましょう！




ばっちり！




5.他のページもつくっちゃおう！

では、
これらの方法を使って、
全部のページを一気に作っちゃいましょう！！


サンプル画像をアップしましたので、
参考にしてください。


(アカウント生成画面)



(エラー画面)



(確認画面)



(完了画面)




はーい！
お疲れ様です。

もう SketchFlow ゴール目前ですよ！
頑張りましょう！



次回は SketchFlow 超初心者ノ巻 最終回！！
作った WireFrame をブラウザで確認しよう！です。


※やはり最終回ではありませんでした。
すみません。(2010.03.17)

お楽しみに～

電通開発 ザッピングエンジン 【ぐるりん】を試してみた

こんにちは。
2月26日。今日はオリンピック女子フィギュアスケートの日です。
東京は小雨。ほのかに暖かい気温です。

電通がプロデュースしたザッピングエンジン【ぐるりん】から招待コードが
届いていたので、試してみました。




ぐるりんって、何？


そうですね。
よくH.I.S.など旅行代理店が企画している
ミステリーツアーのイメージがぴったり。


旅行代理店が
今話題になっている観光スポットを選別しして、
様々な場所に連れってくれるんですね。


さらに、
このミステリーツアーの最大の“ウリ”は、
あなたが興味を持ったスポットでは、
同じ趣向の場所へ連れてってくれるところ。


ガイドさんがこうつぶやきます。

「あら、この温泉、気になったの？」
「うん」
「じゃ、他の温泉も入ってみる？」
「入りたい！」
「なら、こちらへいらっしゃい。」


というのを、
ザッピングエンジンという名で、
Web 内で誘導してる感じです。


うん。
分かるようで、分かりませんね。


機能面の詳しくは...


※【MarkeZine】より画像を参照


以下サイトを参考にしてください。
-------------
■ぐるりんについて (オフィシャルサイト)
http://gururin.com/guide/about

■MarkeZine「検索に疲れたあなたに、テレビみたいにサイトをザッピング」
http://markezine.jp/article/detail/9543
-------------




長くなってしまいましたが、
ぐるりんを実際に試してみた、個人的な感想を言いたいと思います。

あくまで個人的な感想だから(自信ないですよ)、
コメントも頂けると嬉しいです。

↓↓↓↓↓↓

全体的に誰が何の目的に使うのかが、
今のところ、分かりにくいことが感じた。

今話題になっていることは何なのか、
などは例えば Newsing などのサイトを見ればよい。

ましては、ブラウザによっては向き不向きだけの問題か、
非常に重く感じた。
※IE 7 や Firefox で検証


また インターフェースに関しては、
親切とは言えない。
単純に矢印の向きが並んでいるだけで、
ポインタのロールオーバーでテキストが表示されるだけだ。

以下、ロールオーバーした時のテキストだが、
---------------------
・矢印が左向きなら「１つ戻る」(しかも何が？)
・矢印が右向きなら「オートプレイ」(オートプレイ？)
・矢印が下向きなら「深堀る」(関連ページを見るじゃダメなの？)
---------------------
と、説明にも不十分すぎる印象がある。


↓インターフェース(部分)




まだ試験的な段階だから、
という見解もあるが、
この状態でローンチしたら、
リピーターの獲得は難しいだろう。


しかし、
今広告の主流となっている SNS 的な面からのアプローチは
感じることができる。

それは【深堀る】という機能。

例えばニュース一つに関しても、
様々な意見が飛び交う。

2ch を見れば一目瞭然。

様々な意見が飛び交うからこそ、
みんな面白がって書き込む。

また一時期、話題になった各新聞報道を読み比べる
「あらたにす」も同じテーマだろう。
しかし、新聞媒体と言う点では面白さが半減してしまうことが
どうしても否めないように思える。

僕たちが知りたいのは、
匿名を装っている報道ではなく、
自分の名前を出しているような人の話を聞きたいんだ！
※なんちて。


まだ試験的な段階だからだろうか、
【深掘る】にも1つしか関連サイトへの誘導がなかった。


しかし、実際にこのサービスが広まった時に、
興味がある情報に関連するページを
ぞくぞくと自動的に検出して
(しかも、ある程度信用できる！)
誘導してくれるのであれば、
オモシロイ。

様々な意見が飛び交う世界に
簡単に飛び込むことができるのだからね。



以上、個人的な感想でした。

公開されたら、
是非お試しくださいね！



そうそう。
やっぱりミステリーツアーって興味があります。
M 属なのでしょうかね？

たまに H.I.S でミステリーツアーなんてやっているけど...
飛行機ですよ！

飛行機まで使って、
どこに行くか教えられないって、
まぁ、なんて贅沢なんざんしょ！


キャビンアテンダントなんかで、
行き先ばれないのかなぁ～とは疑問ですが...


ちなみに H.I.S. では
今、こんなミステリーツアーがあるようです。
------------------
海外ミステリーツアー4・6日間
34,800円～99,800円
http://www.his-j.com/tyo/tour/9xxx/o-mystery11-a.htm
------------------

行きたいなぁ～

六本木ヒルズの屋上 SKY DECK に行ってきた

こんにちは。
Web ディレクターのほにゃららです。

前回、六本木ヒルズの森美術館で開催されている
「医学と芸術展」の紹介をしましたが...

本音をいいますと、
六本木ヒルズの屋上に行きたかったんです。

知ってました？
屋上に行けること。



どこ？
ここです。



わ～お！エクセレント！！
心、踊り出しますねー。

例えばシチュエーション。

彼女「こわーい」
彼氏「俺につかまってな」
彼女「離さないでね」
彼氏「離すもんか。一生...」

　：
　：
　：



わ、わ～お。


というわけで行ってきました。



森美術館がある 53 階 から 300円追加して、
(美術館は招待券だったので、通常は分かりません...)
さらにエレベーターに乗り込むと...


ちん！(エレベーターの音)




この矢印の向こうは、
大パノラマが...！


その通りです。
見てください、この解放感！

ひゃほ～！


手が逆ですね。



すごく寒いです。
寒いから、人もいません。

今がシーズンですよ～。



ちなみに屋上の中心はヘリポートになっていました。





見渡すと...




ん？




これなんでしょう？
なんだと思います？





はい、タイム制限 10 秒。

チっチっど～ん！


答えは...




そうです！
答えはスベリ台です！！


ちゃんと滑れるようになっており、
大人でも...



無理でした。
体重が原因のようです。


しかも、ケガしないように、
柔らかくふにゃふにゃ。

安心。




ちなみに、
情報を与えてくれたのは、
優しい警備員さんでした。




是非、
あなたも六本木ヒルズの屋上 SKY DECK に行って、
優しそうな警備員さんに聞いてくださいね。


次は「アート」とか、
言ってくれるかもしれませんよ！



もちろん、
東京大パノラマも忘れずに...