CSS Nite LP, Disk 9「Coder's Higher」フォローアップ（4） | CSS Nite公式サイト

2010年4月17日、ベルサール神田で開催したCSS Nite LP, Disk 9「Coder's Higher」のフォローアップとして、『実例に学ぶ！コーディングから参加するUI設計』（長谷川 広武さん／24-7）セッションのスライドと音声をシェアします。

• スライド（PDF、103ページ、4.1MB）
• 音声（MP3、33:04、31.8MB）

当日はご清聴いただきまして、誠にありがとうございました。今回は失敗談を中心にUI実装時に気を付けることや、ちょっとした工夫の例をご紹介しました。ご意見の中でご指摘もあったのですが、本来であれば、デザインの段階から実装方法やその仕様を（どのタイミングで動作し、どの様な動きをするのか）決めておく必要があります。早期の段階で決めておくことで、その実装についてを、自作するのか、何かプラグインを使うのか、どのような動作をするのか、バグはでないのか・・・などの確認をする時間をとることができます。

「使い易くするために考えることは当たり前のこと《と、すでに様々な工夫もされている方もいるようですが、「ユーザー視点にたって考えずに実装していた《というデザイナー・コーダーもまだまだいるようです。自分もJavaScriptを取り入れる前までは同じで、実装段階に「できる・できない《ばかりでしか考えておりませんでした。しかし、大切なのは、以下にサイトを使うユーザーの立場で考えられるかです。「ちょっとした優しさ・配慮《に心掛けてユーザーにとって使いやすいサイトにできるようにしていきましょう。

タブコンテンツ下にボタンをつけた工夫をご紹介しましたが、その工夫により、コンテンツ下のボタンをどれだけの人がクリックして利用するようになったのかという質問があがっておりました。しかし、残念ながら私の方で実数ご用意できておりません。この件につきましては、必ず入れておいた方がいいということではなく、「縦長になった時にできるちょっとした工夫の一つ《というくらいで今は留めておいていください。

今回お見せした工夫例で、デモをお見せできなかったものがいくつかありました。それらの「実装方法を知りたい！《というご意見もいただきましたので、後々、私のブログにて取り上げていこうと思います。

参照リンク

• その場編集（edit in places）技術評論社の連載にて実装方法をご紹介しております。
• 透明度を利用したロールオーバー
• DOMの読み込みが完了する前にCSSを適用する方法