ユーザーのためのWebデザイン

画像 vs. テキスト

　グラフィックをテキストとして使う場合について見てみましょう。メニューやロゴ、タイトルにディスプレーフォントを使うと、デザインの独自性をよりコントロールしやすくなる反面、タイトルやヘディングのテキスト変更をする時など余分に仕事が増えてしまいます。iKnow!ではトップレベルのナビゲーションとロゴにグラフィックタイプとアイコンを使っています。

　グラフィックとしてダイナミックなタイトルを実装するにはいくつかの戦略があります。フォントを埋め込んだFlashファイルを使うものと、サーバーサイドのテクノロジーである既定のフォントと背景画を使ってコンテンツマネジメントシステムに打ち込まれたテキストをベースに、ランダムにイメージを生成するものがあります。

　一般的にグラフィックテキスト要素は極力控えめに使います。特に国際化を図る予定であればなおさらです。少なくともこれにより派生する仕事量について理解することを意識しておかねばなりません。また、小規模のチームの場合は、これが重要なポイントになります。これらの決断をデザイン段階で行うことは、後の仕事を軽減することにつながります。

テンプレート作り、レイアウトスタイル

　ここまで、カラースキームや書体のコンビネーション、何をテキストに使い、何をグラフィックに使うかについて学びました。次は、Webサイトのテンプレートレイアウトとナビゲーションスタイルについて考えましょう。最初に決めるべきことの1つに、Webサイトのメインテンプレートの幅もしくはリキッドレイアウト（ウィンドウ幅に合わせて横幅が伸縮する）があります。

　私たちが、iKnow!サイトの開発を始めた時、中央配置のテンプレートレイアウトのセミリキッド幅を採用しました。この決断が、デザインをする上で複雑であることがわかり、すぐに3コラムレイアウトで中央配置センターのテンプレートレイアウトに変更しました。

　新しい機能が導入されるたびに、幅が変化するというデザイン上の問題に直面することにより発生する余計な作業は、それによって得られる画面サイズの拡大の価値に相当しませんでした。これまでの話をベースに理想的ではない決断をしたことを直すのは手遅れではありません。もし今の段階で問題がわかったのであれば、今からでも遅くないので、解決をしておきましょう。

　運よくほぼすべてのテンプレートレイアウトコンビネーションは、すでに問題が解決されたものであり、GNUライセンスのもと、プロフェッショナルのプロジェクトでも利用できます。Google検索で、それらのほとんどは見つけることができます。Yahooを検索すると、ユーザーインターフェースツールやレイアウトグリッドテンプレートの大規模なライブラリがあり、見る価値はあります。

　Yahoo! User Interface Library（YUI）（http://developer.yahoo.com/yui/examples/）は英語なので、もし英語に強くないのであれば、iKnow! bookmarklet（http://www.iknow.co.jp/bookmarklet）を使って読んでみてください。

　また、ユーザーのためのWebデザインチェックリストはこちらからをダウンロード（http://www.thinkit.co.jp/images/article/111/2/11121.zip）できますので、参照ください（11121.zip/10.1 KB）。

　次回は、「ソーシャルサイトのWebデザイン」について紹介します。