PR
連載 :
  iKnow!の作り方

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

2008年8月11日(月)
Simon Dennett

画像 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デザイン」について紹介します。

Cerego Japan Inc.
Creative Director\\, Cerego Japan. Australian\\, 38 years.
Work History
Web Designer\\, TAC Planning 1998、Senior Web Designer Leo Burnett Sydney 2005\\, Senior Flash Designer\\, Avenue A Razorfish Sydney 2006\\, Current Position since 7/2007.http://www.iknow.co.jp/記事をスラスラ読むためのツールはこちら(http://www.iknow.co.jp/list/12690

Think IT会員サービス無料登録受付中

Think ITでは、より付加価値の高いコンテンツを会員サービスとして提供しています。会員登録を済ませてThink ITのWebサイトにログインすることでさまざまな限定特典を入手できるようになります。

Think IT会員サービスの概要とメリットをチェック

他にもこの記事が読まれています