ページ

2010年12月14日火曜日

拾い読み:Webデザイン最新トレンド ~イマドキUIのつくりかた


連載:Webデザイン最新トレンド ~イマドキUIのつくりかた |gihyo.jp … 技術評論社

「イマドキ」が必ずしもいいものとは限りませんが(いいものは年を経ても使い続けられるものです)、知っておくことは重要かと思うので、ひと通り目を通しておきます。できること、やっていいこと、無理なこと、はちゃんと区別できないと困りますからね。


アフォーダンスについては、イメージメニューの必然性は少ないと思いますが、インタラクティブ、カレント表示については通常のテキストリンクでは表現できない部分ですね。特に、まあ、私の環境の所為なのですが、負荷が増大してくると、リンクをクリックしたかどうかが、反応の遅さによって判らなくなってくることがあります。そのような場合にローカル側で反応を示す、という機能は重要になってくると思います。

ただ、ナビゲーションがイメージ化されると逆に人によっては見難くなるのですよね。このあたりユニバーサルデザインからの観点からはどうなのでしょう。


テーブルの(余白部分の)背景色と前景色で立体感を与えるというのは凝ってますね。CSSレベルで実現できるという点(変に余分なものを使わない)が特にいいです。ただ、ここで出ている住所入力なんかでは、郵便番号でとかいうより、SSOあたりと組み合わせた補完機能なんかの方が嬉しいですけどね。基本、視点がページデザイナーなのですかね。SSOと組み合わせるとかになるシステム化視点までは立ち入っていないようです。


個人的には嫌いなデコレーションの最たるものですが。じゃまにならない位置に、ひっそりと、ならいいのですが、トップページを埋め尽くしていると腹が立ってきます。限られたスペースの有効利用であってほしいものです。しかし、jQuery Cycle Plugin、綺麗なものですね。


いわゆる lightbox 系の画像表示テクニックの解説でした。おまけでAppleの「HTML5 and web standards.」ページが紹介されています。Safariでしか、となっていますが、ChromeでもVR以外のものは見えます(開発版ならVRもいけるのかも、レンダリングエンジン共通だし)。


デメリットとして挙げられているもの、どこがデメリットなのか悩んでしまいましたが、WEBページ開発を業務としていると、この点デメリット扱いされてしまうのでしょうね。ページ評価にページでの滞在時間とかそこでの操作量とかといった評価基準がないと、この手の技法無駄になりかねませんね。

パニック・ジャパンのサイト、なるほど綺麗です。スマートフォン等の小型デバイスが多く使われてくるようになると、画面サイズの制約から、このような手法が多く使われるようになってきそうです。いままでは画面の大きさに依存しきったようなページが多かったのですが、これからは小さな画面でもストレス無しに読めるという点が重要になってきますね。


「裁ち落ち」って何?GoogleIMEで一発変換できないので、それほど一般化されていない用語なのでしょう。要は一枚絵の背景画面の伸縮処理ですか。これも小型デバイスへの対処になるのでしょうね。


なるほど、こういうので表示制御が出来るのですね。モバイル系ではどうしても回線速度的に不利ですので、このような工夫で違和感なく表示できるように制御することも重要になってくるのでしょう。このあたり、PC向けにはただの装飾ですが、モバイル端末向けには小型、低性能を補うための良い技法になりそうです。


ToolsTipsの実装方法解説でした。イメージメニューでもToolsTipsと組み合わせればユニバーサルデザイン的にはOKになるでしょう。しかし、このライブラリ、多言語対応するとなると(文字メトリクスが大きく変わる)調整が難しそうですね。


うーん、このあたりはどう評価すべきものなのでしょうね。ビジュアル的には美しいのですが、情報提供するものとしては評価が難しいものがあります。例に出ていた多田屋サイトなんかですと、どうしても立ち上がりが遅くなりますよね。情報提供者としては速度も重要な指標になります(Googleもページランクに表示速度を入れるそうですし)。

これが案内図なんかの表示で使われるとすごく嬉しいと思いますが、トップページというのはちょっとどうかと。まあ、どのような機能でも使うべき状況、使ってもいい状況、使ってはいけない状況、がありますから、そのあたりが熟れてくれば、評価も変わって来るかも知れません。


これもどうかな、といった感じです。何が嬉しいのか判りません。人と違っていればいいというものでもないでしょう。CSS3で表現力が拡がるのは解りますが、どう使っていくかはこれからの課題でしょうね。


本当にアニメーションメニューの話だけでした。CSS3先行しての紹介といったレベルで。


色を変えるというか、透過性を変える手法ですね。このあたりは有難味が判りません。

連載継続中

0 件のコメント:

コメントを投稿