膨大な数のWebサイトが存在していますが、デザインとユーザビリティの両面を確保しているサイトは意外と少ないのではないでしょうか? デザインはコミュニケーションです。デザインが良いということはユーザーにとっての使い勝手も良いということ。本コラムでは、デザイン性とユーザビリティの高いサイトを解剖し、その秘密を制作という視点から解き明かしていきます。

新しいブログを提案する「INSPIRE」

ブログといえば、HTML/CSSで作成されているものが大多数を占めています。CMSのテンプレートをカスタマイズすることで、Flashベースにすることは出来るものの、開発コストも高く、CMS 自体が Flash との親和性が高くない場合があります。また、多くの利用者・制作者が HTMLをブログテンプレートとして選んでいる理由として、HTMLのもつ柔軟性にあります。テキストの選択はもちろん、ウィンドウサイズによる柔軟なレイアウト調整、テキストの大きさの変更など、利用者が自分にとって読みやすいように調整することが出来ます。HTML のもつ特性を swf 形式のサイトで再現し、新しいブログの読ませ方を提案しているのが、Adobeが運営しているエクスペリエンスデザインに関するウェブマガジン「INSPIRE」です。

Flexが生みだす柔軟性の数々

Adobe のエクスペリエンスデザインに所属するスタッフが執筆するブログと特集記事が組合わさった総合サイトは Flex で開発されています。トッページから INSPIRE のもつ柔軟性を目の当たりにすることが出来ます。

ローディング時間もほとんどないので気軽にアクセスが出来るトップページ。ウィンドウのサイズによって情報量がダイナミックに変化します

ウィンドウの横幅の変化に応じて１行の文字数が調整されるだけでなく、縦幅によって表示される記事数も自動的に調整されます。これにより、異なるウィンドウサイズでもスクロールのない、パッケージング化されたレイアウトを実現しています。

ウィンドウの横幅が十分になく、テキストが途中で切れてしまっている場合も、マウスオーバーをすればすぐテキストが読めるようになっています

記事ページでも同様の柔軟性を保っていますが、ウィンドウサイズだけではありません。記事ページでは、記事本文とコメントリストの2カラム構成ですが、各カラムの横幅の調整を行うことが出来ます。横幅が変わることで１行の文字数が柔軟に変わるだけでなく、掲載されているビデオの横幅もダイナミックに変化します。また、横幅や文字サイズの設定は別のページでも継承さるので、常に自分の好みの設定でコンテンツを読むことが出来ます。

マウスホイールでもスクロール可能な記事リスト。記事毎にスクロールがスナップするようになっており、途中で切れて読み難くなるというアクシデントを妨げています

Flexベースで活かすFlashの特性

HTMLベースのブログにあるようなテキストのコピーや右クリックによるリンクの移動も実装されています。また、マウスホイールによるスクロールやブラウザの戻る/進むボタンも機能しています。こうした HTML で出来ることの再現だけでなく、Flex ベースならではのメリットを示しているのも INSPIRE の特徴です。

記事本文とコメントリストの間にマウスをもっていくと、横幅をドラッグして調整することが出来ます	クリックエリアはタイトルだけでなく、記事概要も含まれているので、選択もしやすいです。概要をマウスオーバーすれば、タイトルの色が変わるので状態の把握も楽

書体や文章のバランスのコントロールがしやすいだけでなく、システム側で文字や画像にエフェクトをかけて掲載することも容易に行えます。動画や画像を含め、サイト全体の見た目を統一しやすいのが Flash サイトのメリットのひとつですが、それに加え HTML ベースの柔軟性が組合わさっているのが INSPIRE といえるでしょう。

フルスクリーンだけでなく、リサイズによりダイナミックにサイズが変わる動画コンテンツ	リンクを右クリックすると、新規ウィンドウで開けるだけでなく、URLのコピーも出来ます

今は ActionScript と JavaScript を組み合わせることによって様々な表現と機能を Flash サイトに実装することが可能ですが、見た目の表現の豊かさが読みやすさ・使いやすさに直結しているとは言えません。技術が読みやすくするための補助を行いつつ、Flashならではの表現の自由も大事にしたいところです。有益な情報を公開すると同時に、Flexの可能性を示している意味でも INSPIRE は好例といえます。

まだサポートされていない機能のひとつに印刷があります。INSPIREに使っているシステムは今後も改良を続けるそうなので、今後に期待したい