柔軟なWebサイトを作る -読めるFlex製ブログのひとつのかたち

膨大な数の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 といえるでしょう。

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