Javascript サンプルはじめてのブログデザイン

このページは Javascript「Smooth scrolling」のサンプルページです。下のボタンをクリックするとページ内をスクロールしながら移動します。

この手の Javascript を幾つか試してみたのですが、個人的にはこの「Smooth scrollng」今のところ１番好きです。

Javascript のライブラリは沢山ありますが、この Smooth scrolling はそう言ったライブラリを読込まなくても単体で動いてくれるので、気軽に導入できるのも使いやすいのではないでしょうか。

しかも、名前の通りスクロールがとても滑らかですし、既存の id 属性をアンカーネームとして利用できる点も分かりやすくお薦めです。

Smooth scrolling (http://www.kryogenix.org/days/)

Smooth scrolling の設置方法は当ブログの記事「ページ内リンクをスクロールで魅せる JavaScript」をご覧ください。

多くのところで謳われていることですが、こうしたページ内の移動を視覚的に分かりやすくユーザーへ伝えることはユーザビリティの向上にも繋がります。

ユーザビリティとは簡単に言うと「使いやすさ」の意です。私などはアクセシビリティなんて言葉といつも混同してしまう言葉なのですが、アクセシビリティには「広汎な人にとっての使いやすさ」なんて意味で使われることが多く、高齢者や障害者にとっての使いやすさを指して使われる事の多い言葉です。

しかしどちらもユーザーへの配慮と言った意味では同じだと感じてしまうので、こうして文章にすると理解できるのですが、しばらくすると、あまり区別せずに使ってしまっている言葉です。

「それがどうしたの？」

サンプルページの文章を読んでる方が居るかどうか怪しいところですが、上記したように感じてしまった方は、もしかしたらアクセシビリティの高いサイトをデザインすることが苦手な方かも知れません。

それは何故でしょうか？

答えはページ制作者の思惑を察し切れていないからです。

これは大切なことです。

世の中にはあなたが想像するよりも多くの人が存在します。そしてその多くの人達の中にはあなたの常識や普通と言った枠から外れている人もいるでしょう。

そうした人達を、そうした人達の思惑を想像する力がアクセシビリティの向上に繋がるのではないでしょうか。

少し上から目線な文章になってしまいましたが、見ず知らずの他人への配慮とは、実はとても難しいことだと思うので、自戒を込め文章にさせて頂いた次第です。

上記した「制作者の思惑」が何か気になっている方いますでしょうか？

答えは、ページにスクロールさせるだけのテキストを与えることが思惑です。JavaScript の知識に乏しいおっさんが、その JavaScript のサンプルページ内をテキストで埋めようとすれば、駄文になるのは当然の成り行きと言えます。

他人の思惑を想像する力をお互い養っていきましょう。

ページ内の移動を視覚化することが、何故ユーザビリティの向上に繋がるかピンと来ない方いますか？

その経験のある方は説明するまでも無いと思いますが、解説的な Web ページなどでページ内にリンクが張り巡らされている時、そのリンクをクリックすると一瞬どこに飛んでしまったのか分からなくなります。

ブラウザのアドレスバーの URL や、ブラウザの横にあるスクロールバーの位置で『あ～、ページ内の下に飛んだのか。』とユーザーに判断させるよりも、多くのユーザーに直感的にページ内を移動したことを伝えられるので、結果ユーザビリティの向上に繋がると言う訳です。

ページの構成を理解している常連さんには『またか・・・』と感じさせてしまう恐れはありますが、はじめての訪問者には親切な設計と断言できるのではないでしょうか。

人気アニメ「ドラえもん」を思いだしてください。

もしも、毎度のことだからと言う理由でタイムマシンでの移動シーンをカットし、突然空間に黒い穴が開き、そこからのび太とドラえもんが飛び出してきたらどうでしょうか。

『毎度のこと』と感じる視聴者は良いですが、その日はじめて「ドラえもん」を見た人にはタイムマシンで移動したことを知る術がありません。

おそらく多くの方は空間を移動したと捉えるのではないでしょうか。

背景に描かれている恐竜や未来都市から時空を移動したと悟るのに時間を要するでしょう。恐竜や未来都市を知らない子供が相手では完全にストーリーを見失ってしまう危険性もあります。

私は子供の頃、タイムマシンの演出が大好きでした。

未来、大昔、どちらに移動するにしても、期待感の高まる演出だったように記憶しています。また、あの時計のトンネルは時空を移動すると言う非現実的行為を、子供だった私に分かりやすく伝えてくれていたように思います。

そうしたことからも「ドラえもん」の道具は非常にユーザビリティの高い道具と言えます。

・・・って、私は何の話をしているのでしょうか。

しかし、こうした一見無駄と思える思考作業が、時にアイデアと発展します。

この Javascript をもっと素敵なものにするのなら、タイムマシンで言う所の「時計のトンネル」に更なる工夫を与えることにより、効果的な演出と昇華させることも可能だと思います。

例えば、デパートの Web サイトを制作するとします。

とてつもなく縦長の Web ページを設計し、今回の Javascript と組み合わせ、クリックした瞬間にエレベーターガールが登場し「上に参ります。」なんて短いアニメーションを与えることで、デパートと言う空間を効果的に演出できるのではないでしょうか。

最後迄駄文にお付き合いしてくれたあなたに感謝です。