画面切り替えの効果

パワーポイントにおける画面切り替え表現のメモ。

１．スライドイン　スライドアウト

スライドインは、画面の上にかぶさるようにして次の画面が出現。
スライドアウトは紙芝居のように前の画面を取り除くと次の画面が出現。

２．カット

瞬時に画面が切り替わる、パワーポイントの通常効果。
動画編集の基本となっている効果でもある。
カットに黒や白の背景をはさむと、カットの演出がより強調されます。

３．フェードイン　フェードアウト　クロスフェード

画面をだんだん薄くしていって、だんだんと次の画面を表示。
フェードインは、背景のなかから徐々に次の画面が見えてくる感じ。
フェードアウトはぼかす感じで徐々に背景に溶け込んでいく感じ。
両方の効果を加えたのがクロスフェード。
切り替えをぼやけた印象にする。

４．ワイプ

スライドインとよく似ているが、
画面をふき取る（ワイプ）すると、次の画面が表示されるといった具合で、
前の画面がスライドして現れてくるわけではない。

５．プッシュ

画面を押し出すようにして次の画面が出現。
先日から何度か言っている bookreader.jsがこれ。

画面の切り替え方が与える印象について調べたときの、関連サイトメモ。

DTV Page!

画面の切り替えを快適にする演出

Javascript関連

マウスホイールで横スクロールさせるjavascript

6月25日追記
Coda-Slider

横スライドで項目が入れ替わるナビゲーション

以前、 bookreaderの記事を書いてからすっかりあのインターフェースに惹かれてしまい、
研究もそっちのけで再現しようとがんばっています。
ついこの前までJavascriptが大嫌いで、全くいじろうともしなかった私がここまでのめりこむとは…。
人生何があるか分かりませんね。

今日は、2007年9月号のWebCreators（MDN）の
「スタイルシート＆Javascriptで表現するデザインパーツ62」の特集の、
64ページ「横スライドで項目が入れ替わるナビゲーション」を作成。

WebDesigning（マイコミ）は、かなり前に発行された書籍に関してもサンプルデータが残っていて、
書籍さえあればダウンロードできるようになっているのですが、
WebCreatorsはもう既に海の藻屑と化していたので、
打ち込み＆間違いなおしにとっても時間がかかりました。

64ページの例では、項目のスクロールをリンクボタンでおこなっていたのですが、
bookreaderのようにキーボードでスクロールするようにしたくて
改変に改変を重ねてようやく完成しました。
作例はとてもお見せできるモノではないのでここにはあげませんが…

詳しくはbookreaderっぽいインタフェースのサイト記事へ。

本日とても役に立ったサイト
クロスブラウザでのJavaScriptキーボードイベントの扱い方

好きなことをして働く

「内定者懇親会があった」とか、
「今年の新入社員研修が終わりました」とか、

そういう話を耳にすると、
自分は幸せな人間なんだなと、あらためて思います。

就職活動を始める前から、自分の進むべき進路が明確で、
狭き門だと分かっていながら、きっと私はWeb制作をして生きていくんだと感じていました。
Web制作会社に就職できないと考えたことは一度もありませんでした。

今、私が内定を頂いている会社を知ったのは2年ほど前でした。

就職活動を始める以前からその会社を知っていたこと、
企業理念に深く共感したこと、
取締役の方の名前を２年前に知っていたこと、
一番初めに内定をもらったのがその会社だったこと、
マークアップエンジニアとして自分が成長できそうだったこと、

以上の理由から就職を決めました。

まだ入社式も終わっていないし、配属も決まっていないけれど、
「好きなことをして働く」夢の第一歩、
Web制作会社への就職は、無事成し遂げられました。

きっと楽しいことばかりじゃないけれど、
これからもずっとこの世界で生きていきたい。
そう思います。

Javascript関連リンク

最近Javascriptに関する勉強を始めたので、
便利な＆勉強になるサイトのまとめ。

jQueryリファレンス

jQueryのプロパティリスト。自分でjQueryを書くときに。

jQueryの基礎（All about）

jQuery基礎の基礎。

Javascriptの有無でCSSを振り分けることができそう

本来は、Netscape4代でCSSを適用させない方法を説明した記事。
これを使えば、Javascript無効の環境とのCSSの振り分けを行えるため、
違和感なく表示できるのではないかという仮説

iGoogle風のインターフェースを実現

iGoogleのような、メニューを閉じたり開いたり、メニューをドラッグ＆ドロップしたりできるインターフェースを実現できる。

Vista風の？インターフェース（英語）

Vista風のデザインなのかはよく分からないのだけれど、
リンク先のサイトでは右のメニュー部分がドラッグ＆ドロップで動かせるようになっていて、
ページ移動する際に、移動先のメインコンテンツ部分がフェードインで表示されるようになっています。

MacのDock風インターフェース（英語）

MacのDock（MacOSの画面下にある、みよんみよん拡大縮小するメニューのこと）風のメニューをWeb上で実現。

上記のDock風メニューをCSSだけで実現

Javascriptのようななめらかさはないが、実現はしている。
デフォルトの状態の画像がかなり荒く見えるのが気になる。

jQueryでつくる様々な効果（英語）

英語サイトではあるが、チュートリアルまでついていてとても詳しく説明されている。
実現している効果の例としては、伸縮メニュー、アニメーション、アコーディオンメニュー、hoverでフェードインするふきだしなど。

jQueryでつくるスライドインメニュー

サイト上のボタンを押すと、ブラウザの左側からメニューがスライドインして表示されます。

jQueryでつくるクロスフェード

jQueryを使って、写真をスライドショーのようにフェードイン･フェードアウトで見せる方法。

---

6月28日追記

モーショントゥイーン風Javascriptライブラリ

Flashのモーショントゥイーン風の動きを実現できるようです。

シンプルにドラッグ＆ドロップ可能なメニュー

本家サイトは英語です。

Javascriptでタブ切り替え

---

その他

ToggleとslideToggleの比較、jQueryとMootoolsの比較

Ajaxサイト スタイルクルーズ/イメージソース

Flashサイト Fotologue/アマナ

サイトリニューアルと費用対効果

「作品と商品は違う。
作品は、自分の好きなものを、好きなだけ時間とお金をかけて作るもの。
商品は、決められた予算や時間の中で作ることを必要とされるもの。」

私が作っているのは作品です。私のWebサイト然り、このブログもまた然り。
私は誰かに書くことを強制されているわけではないし、
自分のために、未来の自分のために記事を残しています。

それでは本題。

元記事
「サイト改善案の優先度を4ステップで決めるマトリックス」

１．問題点をリストアップ

サイトリニューアルにあたって、前サイトで問題だった点、
今回のリニューアルで改善を求められている点をリストアップします。

２．問題点の解決方法をリストアップ

どのようにしたら問題が解消されるのか？の回答をリストアップ。

３．問題点＆解決方法ペアに点数をつけて評価する

点数をつける指標は以下の通り。

1. 問題の明確さ
   問題点を把握しやすいか？
2. 問題の深刻さ
   問題を放置した場合に深刻な影響が出るか？
3. 問題の直しやすさ
   問題点の修正は容易か？
4. 問題修正の負荷
   修正するのにかかる時間、費用はどのくらいか？
5. 効果。問題点を修正した場合の利益は大きいか？

１～５までの5段階評価で、
程度がかなり重いものが１、程度がとても軽いものは５として評価します。

４．各問題点＆解決方法の点数を計算する。

点数を計算して、最も点数の多かった問題点から解決していきます。
点数が高い問題を解決するほど、費用対効果が高い、ということです。

詳しくは元記事をご覧下さいませ。