2010年3月24日水曜日

上野動物園に行ってきた

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




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

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


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


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


まずは...



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

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


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

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


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



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

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



カメです。





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



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



やっぱり首が長いです。

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



カバの親子




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

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


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










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



トラです。



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


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




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





人気モノのペンギン




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


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





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




白クマ






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




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

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

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



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

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

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



↓地図です。


大きな地図で見る


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

2010年3月18日木曜日

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


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

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

お楽しみに~


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

2010年3月3日水曜日

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)

お楽しみに~