FC2ブログ
お気に入り商品の紹介、ホームページ制作に関する徒然
TK-ウェブログ
スポンサーサイト
-----------  CATEGORY: スポンサー広告
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
ページトップへ
XHTML+CSSレイアウト-その3
2008-07-30-Wed  CATEGORY: ホームページ製作

XHTML+CSSデザインは新しいステージへ

トレンドはシンプルコーディング
  Web制作者は技術標準に沿って作業をしなければなりませんが、プロジェクトの指針を守り、納期やコストのことを考えながら全体像を把握した上で「何を優先するか」を決めなくてはなりません。W3Cの技術標準は強制力が無く、あくまで「勧告」という形をとっていますが、業界はこれを事実上の標準規格として受け止め、可能な限り準処し、実践しようとしています。標準に準処するメリットは「特定の環境(ブラウザ、デバイス)に依存しない柔軟性の高いWebサイト作りが可能になる」、「実績のある仕様を採用することで作業を効率化しやすい」、「ノウハウや知識の共有化促進、教育継続性の利点」などが挙げられます。

  今までは、この標準準処が「目的」になっていたので、様々な解釈が生まれ、Webデザインの手法も試行錯誤が続きました。特にブラウザ対策とCSSハックについては模索の時代でした。現在は、情報も整理され余計なコードを含まないシンプルな作りが主流になりつつあります。標準準処が目的達成の「手段」として定着してきたと言えるでしょう。

アクセシブルなデザインは常識
  1999年、W3CでWCAG(Web Content Accessibility Guidelines)が勧告されました。これは誰でも等しく情報にアクセスできるWebサイトを作るためのガイドラインです。日本ではJIS X 8341-3(日本工業規格)が公示された2004年から注目されてきました。官公庁や自治体などの公的なWebサイトの場合は必須条件の要件ですが、中小問わず企業サイトなどでも採用されるようになっており、アクセシビリティに配慮したWebデザインはもはや特別な作業ではありません。

  Web制作者に人気のある「456 Berea Street」(www.456bereastreet.com/)では、ハイコントラストのページに切り替える仕組みが備わっています。ページの左上に表示されている「Swich to high contrast layout」をクリックするとハイコントラストのページに切り替わります。背景と前景のコントラストが高いページは、色覚障害のある閲覧者にとってアクセシブルになるわけです。さらに、ページ最上部には「Skip to main content」や「Skip to secondary content」のリンクも用意されていて、音声読み上げソフトのユーザーにも配慮されています。どこまで対応するかはプロジェクトの指針で決まりますが、アクセシビリティの取り組みは無視できないものになりました。

つづきを表示
スポンサーサイト
ページトップへ  トラックバック0 コメント0
XHTML+CSSレイアウト-その2
2008-07-29-Tue  CATEGORY: ホームページ製作

XHTML、CSSの基礎を再確認しておく

構造化とスタイルの適用
  まずはHTMLの「構造化」について確認していきましょう。対象とするWebサイトにXHTML1.0Strictを採用した場合、HTML文書の<body>~</body>内に「ブロック要素」が入り、ブロック要素内にインライン要素が入る構造になります。ブロック要素とは、見出しや本文、箇条書き(リスト)、引用文、表組み、入力フォーム、著作情報および連絡先などです。
  このブロック要素の中にイメージ(画像)や強調、改行、リンク指定などのインライン要素が挿入されます。HTML文書をブラウザで開くと見出しや本文のスタイル、余白などがスタイル指定されている状態で表示されますが、これはブラウザが持っているデフォルトのスタイルが適用されているからです。

  読みやすさ、見やすさ、使いやすさ、そして美しさ、かっこよさなどを表現するには、ブラウザのデフォルトCSSを必要に応じて上書きしていくことになります。ブラウザ上に表示されるスタイルには「デフォルトCSS」、「デフォルトCSS+Web制作者のCSS」、「デフォルトCSS+Web制作者のCSS+ユーザーのCSS」など、複数の形態があることを理解しておきましょう。

スタイル指定のセオリー
  ある程度の規模のWebサイトなら通常外部ファイルとして扱われ、HTMLファイルに読み込まれる。CSSをHTMLから切り離し、外部ファイルとして管理することでモジュラリティ(管理のしやすさ)が向上するからです。CSSファイルを読み込むには<link>要素が使われますが、@importもよく利用されます。これで、CSSファイル内から外部CSSファイルを読み込むことが可能になるのです。バージョン4以下の古いブラウザにCSSを適用させないテクニックとしても採用されていましたが、現在は減少傾向にあります。HTML文書内にCSSを記述する場合は、<head>~</head>に「<style type="text/css">~</style>」と記述しましょう。また、直接コンテンツ内にスタイルを記述する場合は、<body>~</body>に「<h1 style="スタイル指定">大見出し</h1>」のように記述していきます。

  これらの記述方法はページが多くなるほどモジュラリティが低下します。特にハンドコーディング中心の場合は影響が大きい。CSSにはデフォルトCSS、Web制作者のCSS、ユーザーのCSSと3つあり、同時に適用されて時は、上位のCSSで上書きされます。「!important」を使ったユーザーのCSSが最優先されるようになっています。

つづきを表示
ページトップへ  トラックバック0 コメント0
XHTML+CSSレイアウト
2008-07-28-Mon  CATEGORY: ホームページ製作

HTMLとCSSはどう変わってきたのか?

Web標準というスローガンの広まり
  HTML(HyperText Markup Language)は、Webの標準化を進めている国際組織W3C(World Wide Web Consortium)によって策定されています。現在、多くのWebサイトはXHTML1.0を採用していますが、絶対的なものではありません。互換性を重視して、HTML 4.01を採用するWebサイトもあります。仕様に従うことは「目的」ではなく「手段」だということを認識しておいてほしいところです。

  Webサイト構築の方針によって、採用するHTMLが決定されるべきなのです。ただし、W3Cが策定する技術標準を積極的に採用することがインターネット全体、そして利用者の利便性を高めることも理解していく必要があります。2004年あたりから、国内でも「Web標準」というスローガンが本格的に広まり、Web制作者の意識も変わっていったと思います。「構造と見栄えの分離」という解釈も盛んに取り上げられ、HTMLデザインからCSSレイアウトへとWebクリエイターの作業にも変化が出てきます。Dreamweaverなどのオーサリングソフトの仕様がWeb標準の考え方に沿ったものに変わるのも、このあたりです。(ハンドコーディングをしないWebクリエイターにとっては影響が大きかったと言えるでしょう)

  「構造化」という言葉が頻繁に使われ、「マークアップ」という作業に注目が集まりました。構造化されたHTML文書は、機械(コンピュータープログラム)に正しい情報が伝えられるので検索エンジン最適化が可能になったり、音声読み上げソフトなどのアクセシビリティーツールにも対応可能になります。Web標準的な考え方を重視する事で結果的に、情報提供する側、そして利用者にとっても大きなメリットがあるということがわかってきたのです。

つづきを表示
ページトップへ  トラックバック0 コメント0
Webデザインのアウトラインを考える-その2
2008-07-17-Thu  CATEGORY: ホームページ製作

技術特性で使い分けるレイアウト

XHTML+CSSのネイティブレイアウト
  CSSレイアウトについては2000年あたりから試行錯誤が繰り返され、様々なテクニックが使われてきました。大別すると、「ボックス浮動化による表現」と「絶対配置による表現」です。もちろん、二つの表現を組み合わせる方法もあります。ボックス浮動化は、幅の値を指定したボックスfloatプロパティで浮動化して、左右に寄せます。3段組みの場合は、上下のボックスを左右に寄せ、一番下のボックスに左右marginを指定して中央に配置する方法がもっとも簡単です。

  ABCという順に記述されているHTML文書を例にするなら、AとBの要素を左右にしてCの要素を中央に配置して3段組みを表現するのです。もし、Cの要素を左右どちらかに配置したい場合は、BとCを<div>要素グループ化して、Aを左、「B+C」を右に寄せて、さらにBを左、Cを右に寄せます。その他、ネガティブマージン(マイナス側のmargin)を組み合わせたテクニックもあります。ボックス浮動化で注意しなければならないのは、(ボックスモデルの解釈が異なる)IE5.x以下の対応です。

Flashで構築されたページレイアウト
  日本ではブロードバンドの環境が急速に普及しており、すでに料金の安さでは世界トップクラスです。2005年4月、無料で視聴できるPCテレビサイト「Gyao」がスタートして話題になりましたが、その後ブロードバンド環境が前提のサービスが次々登場。Webサイトのリッチ化も急速に進みました。特にFlashを使ったダイナミックなページデザインは企業サイトでも積極的に採用されて、Webサイトのトップページで展開しています。中には、XHTML+CSSのページと見分けがつかない体裁で作られているフルFlashページもあります。Flashページは、CSSデザインにおけるブラウザ対策のような作業はほとんど必要ありません。

  しかも、タイポグラフィの見た目をどの環境でも等しく表現できるため、ビジュアル重視のWebサイトでは欠くことのできない重要な表現技術になっています。視覚表現の制約はほとんどないため、雑誌フォーマットを使った縦組みレイアウトも可能です。自治体などの公的なWebサイトでは広告・プロモーションやキャンペーンなど積極的に使用されています。

Ajaxによる動的なレイアウトを表現
  昨年からAjax(Asynchronous JjavaScript+XML)を採用したWebページが増えています。それまではFlashが圧倒的でしたが、GoogleMapsがJavaScriptを採用したことで、再び注目が集まりました。2007年にはリリースされたAdobe Dreamweaver CS3には、Ajaxフレームワーク「Spry」が搭載されて、コーディングなしで簡単に実装できるようになりました。ページの基本レイアウトはCSSで構築されますが、ナビゲーションや入力フォーム、タブの切り替えで表示を変える仕組みなど、Webページ内の操作系パーツの多くにAjaxが使われています。

  ページ遷移がなく、動的な効果を出せるところはFalshと同じですが、JavaScriptが機能しなくても、最低限の情報が閲覧できるように設計することが可能です。(Flashの場合はプラグインがインストールされていないと真っ白になってしまうため、代替画像などを用意しておく必要があります)ブログサービスや「YouTube」、「Flicker」、livedoorReaderなど、ブラウザ上で利用できるWebサービスの多くはAjaxを駆使しており、アプリケーションソフトと変わらない操作性と柔軟なレイアウトを提供しています。

ページトップへ  トラックバック0 コメント0
Webデザインのアウトラインを考える
2008-07-16-Wed  CATEGORY: ホームページ製作

レイアウト技法の移り変わり

HTMLとCSSが混在していたレイアウト
  Adobe Dreamweaver CS3の環境設定ダイアログのカテゴリから「一般」を選択すると、<b>と<i>の代わりに<strong>と<em>を使用、HTMLタグの代わりにCSSを使用という項目があります。デフォルトでチェックされているので、CSSによるデザインが優先されるようになっています。実は、Dreamweaver MXまではHTMLによるページデザインがデフォルトだったのです。例えば、文字を強調したい場合は<strong>要素や<em>要素ではなく、太字スタイルの<b>要素、斜体スタイル<i>要素でマークアップされていました。<table>要素を使った「テーブルレイアウト」でつくられます。

  CSSレイアウトがデフォルトになったのは、Dreamwever MX2004からです。このころのWebデザインはテーブルレイアウトでページを固定して、テキストまわりのスタイルのみCSSを適用するハイブリッドなWebページが多かった。現在もHTMLで見栄えを整えているWebサイトは存在しますが、明らかに減少してきていてCSSレイアウトに移行しつつあります(一般の利用者が多いブログサービスの大半はCSSレイアウトで構築されています)。Webクリエイターにとって、CSSレイアウトはすでに当然のことで、テーブルレイアウトの話題は聞かれなくなりました。

洗練されてきたCSSデザイン
  CSSデザインの習得・実践に欠かせないのは、CSSの仕様に関する知識だけではありません。ブラウザがCSSの仕様をどのくらいサポートしているかを正確に把握しておく必要があります。仕様書に定義されているブラウザが採用していなければ、使うことができません。例えば、:before疑似要素やcontentプロパティは文章(テキスト)の中に入れたくない装飾記号などをCSSで生成できるなど、クリーンなコーディングには欠かせないものですが、Internet Explorer(以下、IE)はサポートしていません。FirefoxやSafari、Operaでは活用できますが、普及率の高いIE6、7では使えないので、制作者側としては面倒な作業を避けるため消極的になっていました。さらにIEは、バグ等も含めて様々な問題を抱えていたので、IE対策のトリッキーなテクニック(CSSハック)が多数公開されて、世界中に広まりました。

  IE対策に時間を費やしていた時期が長く続きましたが、昨年あたりから少しづつ変わって来ました。IE7の自動アップデートが進むにつれて、IE5.x以下についてはそれほど神経質にならず、緩やかな対応に変わってきたのです。現在はCSSハックをできるだけ使用しないシンプルなコーディングが増えつつあります。

ページトップへ  トラックバック0 コメント0
WEBデザインの基本を振り返る-その2
2008-07-15-Tue  CATEGORY: ホームページ製作

素材を最適化して見せる

カラーコントラストのポイント
  Webページ上の見やすさは、プロポーションの最適化以上に色のコントラストが担っているケースが多いです。コントラストとは、背面の色と前面に置いた素材の明るさの差のことを指します。明るさというのは、相対的な明度差のことです。黄色や赤といった色層の印象がもつ明るさとは違うので注意しましょう。

  文字情報の場合、コントラストが高いほど良いとされます。しかしながら、読む要素が大部分である紙媒体とは異なり、Webページは操作する部分と読む部分が一画面同居するメディアです。そのため、文字要素すべてが均一に目立ってしまうのも最良の状態とは言えません。最終的には箱に割り当てた機能の違いに配慮して、それぞれの箱に合ったコントラストを設定する作業が必要となります。

  ナビゲーションのような優先的に目立たせない個所は、画面上もっとも高いコントラストを与えつつ、本文の文字色は、ややコントラストを下げた色合いにして、機能の差を示すといった具合です。

  また、コントラストは機器の特性や閲覧環境によっても考え方を変える必要があります。例えば昼間、太陽光が差し込む部屋で閲覧する事が多い情報なら背景は白が妥当です。極端な話、晴天の野外で携帯電話のコンテンツを閲覧する際、黒い背景に白い文字の情報では文字がまったく読めません。その一方、夜光量の少ないリビングに置いた大画面PCで白い背景の情報を閲覧すると、画面そのものの光が強調されて眩しくなり、目が疲れてしまいます。コントラストの最適化は閲覧条件に配慮した上で行うことが鉄則です。

マジックナンバーを知る
  もう一つWebページのレイアウトで押えるべき基本は、人間の認知力に配慮した機能の配置方法でしょう。操作性の配置には「マジックナンバー」という認知学的なセオリーがあります。平均的な人間の脳が、短期記憶に留め置ける物事の数の限界を示す考え方です。4ないし5という説と7程度という説があり、どちらも一画面に配置できる機能の最大数に置き換えられます。

  これは単に「ボタンの数を4つ以内に収める」ということではありません。あくまで「パッと見た時に4つ程度のセクションにわかれて見える」ことを目指す考え方です。数字の羅列を例にするとわかりやすいかもしれません。例えば「256979433」という書き方から受け取る印象は「9個の数字の羅列」です。ところが、「256-979-433」とハイフンを加えるだけで「3個の数字のグループ」となり、印象が単純になるのです。

  Webページで同じ状況を作り出すには、選択肢の多いナビゲーションを目的別に三色で塗り分けたり、グループの間に余白を設けて差別化すればいいのです。色でグループを分ける事がもっとも単純な方法ですが、その場合ナビゲーションも含めた配色計画を綿密に立てておかないと、審美的に問題が発生するおそれもあります。

  そこで、別の方法としてグラデーションや罫線、背景と文字色の反転といった手法も検討してみてほしいのです。いずれも面を区切る方法ですが、色数を増やしてセクションを区切るよりもまとまりやすいと思います。例えば、ナビゲーションの部分は青い背景に白抜きの文字を合わせたデザインを基本として、ひと固まりの面に見せます。その下のスペースは色で面を作らず、罫線で区切ることによって項目を区別します。その下はナビゲーションの面と同系色ながら、やや薄い背景色にした面をつくります。これで3つのセクションを示す「モジュールのような情報の入れ物」ができます。このモジュールを繰り返し使うだけでも、項目がまとまって見えるので複雑さは抑えられます。

  操作は単純な方が良いと分かっていても、一画面に掲載する情報の量が減らせないことがあります。そんなときは、前述のような方法で分かりやすくデザインしていきましょう。もちろん、検討段階で一度に出す選択肢を極力減らすという方針を固められれば、それに越したことはありません。その場合、またマジックナンバーのセオリーを引き合いに出しつつ、単純な操作性を提案するのも一考です。

ページトップへ  トラックバック0 コメント0
Webデザインの基礎を振り返る
2008-07-14-Mon  CATEGORY: ホームページ製作

画面の分割方法を考える

ルート2/黄金分割とは
  Webページはコンテンツを入れた複数の箱の組み合わせで出来ています。Webページのビジュアルデザインを検討するときは、この箱をどのように画面上へ配置するのか最初に決める事が多いです。具体的には箱の幅や高さを決める作業になるわけですが、モックアップ上ではいくつかの囲みスペースを作る作業になります。最終的に囲みの部分へ文字や写真を入れるのですが、囲みの大きさを決めるのはなかなか手間のかかる作業です。

  そのようなときデザインのプロポーションに関するセオリーを活用すると、きれいに画面が分割できます。プロポーションは、モノの部位がもつ大きさの比率のことです。「美人の条件は八頭身」という言葉を聞きますが、この場合は「身長が頭部の8倍」というプロポーションを示している。
  プロポーションに関するセオリーはいくつかありますが、有名どころはやはり黄金分割です。黄金分割は「1:1.618」という比率を使ったプロポーションの決定方法で、建築物の設計などに使われています。この比率で作られた四角形は理想的な美しさがあると言われることから、ビジュアルデザインにも活用されます。

  しかし、黄金分割よりも使い勝手が良い比率があります。ルート2は、A4やB5といった用紙のサイズ規格が採用している比率です。こちらは比が「1:1.414」と、黄金分割にかなり近いです。黄金比と違うのは、A3横の用紙を半分に切るとA4縦が出来るように、ルート2が自己同型を形作ることが可能なところです。よってルート2はモジュール化しやすい比率であり、Webページのように同一サイズの四角形を限られた平面上に繰り返し使うタイプの表現形式では、より使い勝手のよいプロポーションだと言えるでしょう。

グリッドデザインを考える
  プロポーションを考慮して分割した箱の中で、素材の位置を最適化する方法が「グリッドデザイン」です。グリッドデザインは紙媒体をデザインする目的で生まれたセオリーで、「グリッドシステム」とも呼ばれます。まず、決められた範囲を細かく区切る最小の単位に基づいて格子を作成。格子のグループは「ユニット」として扱う。Webページの場合、ユニットが箱の幅になります。ユニットのプロポーションをルート2などのセオリーに当てはめて指定すると、より使い勝手がよくなります。

  紙媒体の場合、グリッドの最小単位には組み入れる本文の文字サイズが使われます。本文サイズが10ポイントで1行当たり20文字なら、1段の幅(ユニット)はおよそ200ポイントになるという具合です。Webの場合、文字の表示サイズは固定できないので、ユニットのサイズはレイアウト用の面積を等分する大きさを割り出して使うことになります。
  例えば、見出しと段落のグループに対応する写真の位置を決める際、写真の上辺を見出しの上部に合わせるのか、段落の上辺にそろえるのかといった検討はグリッドを意識しながら行う流れになります。

  しかし、箱を繰り返し配置するようなレイアウトでは、グリッドを意識しなくても画面分割のプロポーションを決定して後は、余白サイズを決めるだけで済むことも考えられます。それよりも、ホワイトスペースを生かしながら余裕のあるデザインを実現するときに活用できるテクニックでしょう。

ページトップへ  トラックバック0 コメント0
海外のサイトからデザインセンスを学ぶ-その2
2008-07-11-Fri  CATEGORY: ホームページ製作

最新のデザイントレンドを味わいつくす

ディテールに凝ったモダンCSSデザイン
  2007年から引き続きしばらくはモダンなCSSデザインとでも呼ぶべきテイストのWebサイトが主流を占めそうです。OSのアイコンデザインが進化を遂げているせいもあり、Webサイトのアイコンも影響を受けていると言えます。
  また、Hot CSS Web Design Search(www.searchcss.com/)のような、大きなインプットフォームも流行しています。デザイン的な流行というだけでなく、ユーザビリティを高めるという効果もあります。
  Alex Bugaのような、水平方向の分離もCSSデザインにおけるひとつのデザイントレンドと言えると思います。

Flashを使ったWebサイトの現状
  昨年ブレイクしたFlash3Dを利用したWebサイトが増えてきています。M4(nike.com/jumpman23/m4/)はPapervision3DというFlash用の3Dライブラリを利用しています。
  また、ビデオも2007年あたりからかなりの数のWebサイトで使われています。例えば、KiT10designs(www.kit10designs.com/)のように、背景画像としてさりげなくビデオを使うというタイプも出現しています。

アーティスト色が強いデザインもぜひ見ておこう
  明確なコンセプトをもったビジュアルデザインだけでなく、アーティスト色が濃く出たデザインもきちんと見ておきましょう。様々なテイストや思想が詰まったデザインを見ておくと、発想の幅が広がります。
  UNDERSPRAY(www.underspray.com/)は、ストリートテイストをもったCSSデザインで、他のサービスのロゴやアイコンまできっちりとデザインされています。
  memoi cloud hoouse(www.meomi.com/)は、Webサイトを家に見立て、サイト自体がひとつのアート作品であり、ポートフェリオのひとつとして機能しています。
  Future of Apps(futureofwebapps.com/2008/miami/)では、ちょっと先のデザインを先取りしていることが多い。前のバージョンは、ダルトーンを使った落ち着いた色調ですが、今のバージョンは前回の色調を引き継ぎながらもポップな色調になっています。

  また、前述のFlash関連のWebサイトとも関連しますが、 elroy.fr(www.elroy.fr/)のように、Flashのフルスクリーンで世界観を大切にし、より洗練の度合いが増しているWebサイトも増加してきています。

ページトップへ  トラックバック0 コメント0
海外のサイトからデザインセンスを学ぶ
2008-07-09-Wed  CATEGORY: ホームページ製作

海外のWebからデザインセンスを吸収するには

日本と海外のWebのデザインの差
  海外のWebサイトが美しく感じられる理由のひとつに文字の違いがある。ブラウザのフォント環境における和文書体が欧文書体に比べて美しくないと言われることもありますが、和文の書体は読解可能なサイズが欧文の書体に比べて大きいという点が大きいのです。特に漢字は構成している線の数が多くて、小さいポイント数では可読性が低くなってしまうため、ボタンのラベルテキストひとつとっても大きく設定する必要があります。英語圏のWebサイトと同じ文字サイズで日本語版のWebサイトを作ると、文字が読みづらくなるのがわかります。

海外のWebデザインはどう鑑賞したらいいのか
通常、海外のWebサイトを見る機会というのは、何か面白い記事や、日本語で手に入らない情報などがあるケースが多いですが、仮に英語が苦手でもデザインを見る際に支障はありません。英語が苦手な人が見る英語圏のWebサイトは、視覚情報としてページを把握することになるため、コンテンツとデザインを分離して見る事が可能というメリットがあります。英語が堪能な人はロシアやドイツ、北欧といった言語圏のWebサイトを見ると同様の効果を得る事が出来るでしょう。
  全体的な鑑賞の他に、ディテールの鑑賞として、部分的なビジュアル鑑賞をオススメします。部分的なビジュアルの分析には、Firefoxのアドオン「Web Developer」を使って画面の一部分を拡大表示してみるのがオススメです。

Webのビジュアルデザインの分析方法
  心に引っかかるデザインを見つけたらそのページのデザインをとことん分析してみるのも良いと思います。気に入ったWebサイトの画面キャプチャの撮影をして、キャプチャ画像をFirefoxやPhotoshopなどの画像編集ソフトウェアでガイドラインを引いてみると、そのページに使われているデザインルールを探ることが出来ます。
  キャプチャ用ソフトウェアの「CrenaHtml2jpg(dip.picolix.jp/disp5.html)」を使えば、PHPと連動させたキャプチャの自動化も可能なので、より多くのWebサイトをチェック出来ます。

  また、スポイトツールなどを使って実際に色を抜き出してみることで、ページを印象付けている色彩がどういった構成になっているかを理解できます。同じ領域を塗りつぶしてみるのも良い方法です。
  もちろんデザインを複製してはいけません。そのため分析用のファイルの流用は避けるべきです。デザイン分析の際に用いたガイドラインは新規デザインを作る際は使用してはいけません。取得したカラーパレットなども同様です。HTMLソースの解析を行った場合でも、解析したソースを絶対にひな形とせずに、新規に制作しましょう。

ページトップへ  トラックバック0 コメント0
Web以外のところからデザイン力を身につける-その5
2008-07-08-Tue  CATEGORY: ホームページ製作

映画に見る今後のWebデザイン

未来のインタラクションを覗いてみよう
  映画をエンターテイメントとして楽しむのはもちろんですが、そこに隠れているデザインインスピレーションも見逃せません。特にSF作品には様々な近未来的なコンピューターが登場し、それらを独特の方法で人とインタラクションをしたり、データを表示しています。こうしたグラフィック映画のワンシーンに映し出される、いわば小道具的な存在ですが、映画の世界観を作り出すのに重要な役割を果たしています。

  もちろんこのグラフィックを制作することを専門としたスタジオもいくつか存在します。映画で見られるグラフィックをそのまま自分のデザインに反映することはできませんが、情報の配置の仕方、雰囲気、そしてアニメーションなどはFlashを扱うデザイナーにとっても見逃せないインスピレーションの宝庫と言えます。

  グラフィックだけでなく、どのようなデバイスを使って、どういった方法で情報にアクセスしているかも注目すべき点です。SFなので、当然のことながら現実世界に同じデバイスは存在しませんが、我々が驚くような技術の進歩が描かれていることも多いのです。現在においてもすでにPCだけがリッチなインターネット体験を提供することができる唯一のデバイスというわけではありませんし、キーボードとマウスを使った従来の操作方法だけでなく、より直感的なものや、感覚的にネットワークとつながっているデバイスも存在しています。つまり、これからどんどんチラシのようなページをWebページに載せていくのではなく、様々な情報をPCを始めとした様々なデバイスでアクセスしてもらうかを考える機会が増えてくると言えます。

  現実離れしているように見えますが、SF作品には近い未来が映し出されていると言っても過言ではないでしょう。

ページトップへ  トラックバック0 コメント0
Web以外のところからデザイン力を身につける-その4
2008-07-07-Mon  CATEGORY: ホームページ製作

その一瞬をつかみ取る癖をつける

脳を活性化させるアクティビティ
  インスピレーションを求めてネットサーフィンをしたり、雑誌を眺めることは時に必要ですが、それが常に自分のクリエイティブを刺激しているというわけではありません。単に情報をインプットするのではなく、自発的に探し出して何かしらの形でアウトプットすることによって、初めて自分のナレッジとして蓄積されることも少なくありません。
  携帯電話にもカメラ機能は実装されていますが、レンズをはじめとして、スペックが劣るので、小型のデジタルカメラで良いのでカメラを持ち運ぶ癖をつけておくと良いでしょう。何かテーマを決めて写真を撮るだけでも、何かを探すという能動的な姿勢に変わるだけでなく、観察力も養われます。

  観察することは、写真を撮る時だけではなく、日常においても忘れてはいけません。人が、日常に行っている行動を観察するだけでもデザインの参考になることは少なくありません。Webサイトのユーザーテストを十分な時間と予算で出来る企業は少ないですが、隣にいる同僚、または両親などの身近な人間がどのようにパソコンを使うかを眺めているだけでも学ぶことは多いと思います。こうした観察を通して思い浮かんだアイデアは、頭にしまっておかず、ノートか何かにアウトプットするのも重要です。
  頭の中ではものすごいアイデアも書き出すとまた違った視点で見えることもあるだけでなく、備忘録にもなります。得た情報は何かしらの形でアウトプットというアクションにつなげられるようにしておきたい。

ページトップへ  トラックバック0 コメント0
Web以外のところからデザイン力を身につける-その3
2008-07-06-Sun  CATEGORY: ホームページ製作

写真から最適なカラーバリエーションを探し出す

配色のヒントはすぐ目の前にある
  どういった配色にするのかもWebデザインにおける重要な課題です。最近ではkuler(kuler.adobe.com/)やCOLOURlovers(www.colourlovers.com/)のような配色に役立ちそうなWebサイトがあります。これらは確かに便利ですが、単に人気ある配色、自分の好みに合った配色をサイトデザインに採用しても、バランスが悪くなってしまう場合があります。いくつかの色を組み合わせる事が配色と言えますが、無限に広がる色の世界からいかに色を抜き出して配色を見つけ出すのは至難の業と言えます。結果、どうしても自分好みの配色に落ち着いてしまうこともあるのではないでしょうか。
  様々な色を抜き出してしまう前に、まずは自分が使おうと考えている写真やイラストに注目すると良いでしょう。当然のことながらそれらには様々な色が使われているはずです。写真やイラストに既に使われている色をレイアウトに配色すると、全体的に見てバランスが取れているように見えます。逆に全く使われていない色を使い過ぎるとバランスが崩れ、くすんだイメージになってしまうこともあります。写真から配色を抜き取る方法を利用することで、先に紹介したようなWebサイトを利用しなくても、夕焼け、好きな洋服の柄、庭園など身の回りにあるものや写真からも、オリジナリティのある配色を見つけ出すことが可能です。

式層の基礎から学ぶ配色テクニック
  それでは、実際どのように色を抜き取ればいいのでしょうか。写真からといってもそこには何千何万の色が存在し、抜き取れる色が無数に存在しています。しかし、よく見ると使われている色相はそれほど多くないのに気付くでしょう。使われている写真で面積を多くとっている色相から順にいくつかピックアップしていくのがコツです。
  色の抜き出し方も数をこなすことで段々分ってくるので、身の回りにある写真からチャレンジしていきましょう。抜き出した色を配色として使うのが安全策ですが、そこからさらに、配色を広げていきたい場合は、「色相環」を利用して共通性のある調和や退避のある調和など模索してみるといいでしょう。こうした配色をすることで、いつも通りのマンネリ化した配色から離れる事が出来るだけでなく、全体的に調和のあるデザインに近づいてきます。

  タイポグラフィと同様、色は説明する事が出来ない概念的なイメージをユーザーに与える事が出来る重要な要素のひとつです。レイアウトがテキストや写真といった様々な要素をつなぎあわせているように、色もほかの色と関係し合いながら存在しているのです。それはデザインされたものだけでなく、自然の世界でも同様の事がいえます。色相環を通じて配色の仕方を学ぶと同時に、身の回りにある美しいと思えるものがどのような配色をしているのか一度観察してみると、色への理解がさらに深まることでしょう。

ページトップへ  トラックバック0 コメント0
Web以外のところからデザイン力を身につける-その2
2008-07-05-Sat  CATEGORY: ホームページ製作

雑誌のデザインからレイアウトを学ぶ

スクリーンショットかた得られないこと
  Webデザインのインスピレーションを得る場は数多くありますが、ネットサーフィンをするかWebデザイン関連の雑誌にインスピレーションを求める傾向があります。Webという媒体を扱うわけなので、それをいかにデザインしてユーザーに提示しているのかを知るには媒体そのものを見るのが近道と言えます。とは言うものの、Webデザインの特性上、テクニックやブラウザの相互性など技術的な話に寄りがちになってしまい、こういった制約の話題がクリエイティブの幅を狭めてしまう場合もあります。
  WebデザインのクリエイティブをWebの技術によって狭めるのではなく、一度離れてほかの分野に目を向けることで、どのようにWebデザインに反映したらいいのか分かることも少なくありません。

  近年、Webは動画や音声が加わりリッチメディアになってきたと言えるが、それでも基本は「テキスト(文字)」です。ユーザーはWebサイトで多くの文字と関わっています。常に文字と関わっているユーザーに、気持のよい体験を提供する事が出来るか否かがWebサイト全体のデザインの価値にもつながってきます。それは、読みやすいテキストにするかといったところだけでなく、テキストと全体とのバランスや、テキストを使って伝えることができるイメージなど様々です。
  Webデザインは文字のデザインから始まるだけでなく、サイトデザインそのものといえます。つまり、Webデザインの雑誌を眺めるのではなく、雑誌そのものがどのように文字を構成しているのかに注目していただきたい。デザイン関連の雑誌だけでなく、文字を多く扱うビジネス誌や、コラムを多く扱うグルメ誌やファッション誌もおすすめです。

美しいレイアウトの奥に存在する秩序
  美しいと思えるレイアウトには、必ずと言ってよいほど何かしらの秩序が存在します。自由に写真や文字が配置されているように見えるレイアウトもガイドラインを引くと、そこに何かしらのパターンとルールが存在することに気づくでしょう。欧米のレイアウトによく使われるグリッドシステムは規則的なレイアウトを作る上での基礎理論として多くのデザイナーに採用されています。

  ひとつのマス目に何文字入れるかを決め、マス目をどのように広げたり配置するかを決めていきます。縦の余白にしても高さが決められており、それがレイアウトに心地よいリズムを作り出しています。媒体が異なることもあり、雑誌で用いられているノウハウをそのまま、Webレイアウトに導入することは出来ませんが、グリッドシステムを採用するだけでも、締まりのあるレイアウトにすることは出来るでしょう。
  例えば、レイアウトの横幅を率直に「780px」、「860px」とキリ番に決めるのではなく、本文の文字の大きさはどれくらいになるのか、1行あたりに何文字くらい入れるのかを想定して、それを基本にしてレイアウトの横幅を決定したり、ヘッダーや注釈の文字サイズを決めていくと良いでしょう。また、見出し文字では可能な限り画像文字にし、どういった情報を伝えているのか、どういった雰囲気を見出しに与えたいのかを検討して書体や色を決めていくように心がけましょう。

  雑誌は一貫して同じ書体と大きさを保っているが、見出しだけ特殊な書体を使っていることが多い。どのような内容に対して、どのような書体を使っているのかを調べておくと、後で自分でヘッダーの書体を決めるときに参考になります。
  文字をデザインするときの制約がWebデザインではまだまだ多いが、CSS3.0ではカラムを作る時に便利な「column-count」、「column-width」、「column-gap」や、カラムの間に画像を配置するといった特殊なfloatも可能になるので、今後に備えて雑誌はひとつの情報ソースをして見ていくと良いでしょう。

ページトップへ  トラックバック0 コメント0
Web以外のところからデザイン力を身につける
2008-07-04-Fri  CATEGORY: ホームページ製作

日常にあるボタンから学べるインタラクション

ボタンを押すということ
  私たちは日常、計算機、電気のスイッチ、自動販売機など様々な場所にあるボタンに触れながら生活しています。こうして文章を書いている間もキーボードのキーを押しているわけだから、生活や仕事に密着した重要な部品と言えるでしょう。
  多くのボタンに共通しているのが、ボタンは機械と対話をするための一種の伝達機と言えるところです。例えば、欲しいドリンクのボタンを押すと、自動販売機はボタンが押されたことを認識して、購買者に指定されたドリンクを運び出しています。
  機械が行っている抽象的かつ技術的な処理を感じることなく、簡単にかつ感覚的にユーザーが行いたいアクションを実行するためにボタンは重要な役割を果たしているわけです。

  何気なく使っているこれらボタンは、実際どのような動きをしているのでしょうか?ボタンは異なる形、色、感触だけでなく、反応の仕方も様々ですが、共通している部分も少なくありません。押すと凹むというのがボタンに共通した要素の一つですが、もし凹むという”当たり前”の反応が無かったらどうでしょうか?
  押しても何も反応が無かったら、ユーザーは自分が本当にこのボタンを押したかどうか、そして自分が行いたいアクションを実行出来ているかどうか不安になるでしょう。押したら凹むという動作がボタンと機械がきちんと伝達しているかどうかをユーザーに保証していると言えるでしょう。

バーチャル世界におけるボタンの存在
  それでは凹ませるという具体的な動作を再現することが出来ないコンピュータースクリーンでは、どのように行われているでしょうか?このヒントもATM(現金自動預払機)や鉄道の切符の自動販売機といった日常にかくれています。タッチスクリーン上に表示されているボタンに触れると、ボタンに触れると、ボタンの画像は凹んだ感じの画像に切り替わる。そして指を離すと、ボタンは元の凹んでいないボタンの画像に戻ります。
  つまり、リアルのボタンには劣るものの、押した瞬間に画像を切り替えることによって再現しているわけです。

  いわば当たり前のように感じるボタンの操作ですが、Webサイトではあまり導入されていないのが現実です。テキストリンク、ナビゲーションなどWebには実に多くのボタンがありますが、その多くはマウスオーバーをした時に画像や色が変化するといった効果のみ留まっているケースが多い。それでは、押している感覚を再現するのは面倒な作業かといえばそうではなく、マウスオーバー時と同様に驚くほど簡単に導入することが出来ます。
  CSSであれば、:active疑似要素、JavaScriptであれば、onmousedown属性に指定の色や画像を記述するだけで完成します。もちろんこれらの要素はほとんどのブラウザで認識します。導入するとわかりますが、今まで以上にボタンをクリックした感覚を作ることが出来ます。
  ボタンを押す、リンクをクリックするという日常の何気ない行動ですが、きちんとしたケアを施すことによって見た目だけでは補えない感覚をユーザーに提供する事が可能になります。

ページトップへ  トラックバック0 コメント0
レイアウトの法則を理解する-その8
2008-07-03-Thu  CATEGORY: ホームページ製作

Webページ閲覧時における視線の動き

見た目と機能の密接な関係
  取っ手の付いたドアがあると、無意識につかんで引こうとしますが、押さないと開かない場合もあります。そんなドアは、取っ手を平板に変えると間違えにくいです。
  アフォーダンスとは、「ものや環境の特徴が機能に影響する」という属性で、前述のドアで例えると、取っ手の付いたドアを引くためのアフォーダンスをもち、平板のついたドアは、押すためのアフォーダンスをもつ、ということになります。要するに、見た目の形と実際の機能は食い違わない方が使いやすいというわけです。これは、ユーザビリティという言葉に直結します。

リンクのアフォーダンス
  例えば、Webページにリンクを設置するとき、ヘッダーやサイドメニューは、そこに配置することでリンクと判断してもらえる場合も多いでしょう。しかし、本文中にリンクを設置する場合、色変更やアンダーライン等の処理をしておかないとクリックされにくいです。逆に、派手なイメージは広告と誤解されてしまうこともあるため、ボタン画像を作る際はシンプルにする方が安全です。このように、リンクという機能を持たせる場合だけでも、配置される場所や周囲との関係によって表現を変える必要があります。

Webレイアウトとは
  Webサイトとは仮想空間であり、性質は建築と非常に近いと思います。建築のデザインとは、見た目の美しさ以前に「誰が、何の目的でその空間を使うのか?」を考えてデザインすることです。Webサイトという仮想空間をデザインする際にも、目的を第一に考えてレイアウトを決定していきたいものです。メニューはどこに置くと良いか、配色、文字の大きさ、版面率などは、目的が見えれば自然に決定していくはずです。
  レイアウトとは、要素と要素の位置関係を再構築する作業と言えます。先ほど例にした取っ手付きドアのように、表現とユーザーの行動を結びつけて考えて、適切に再構築する事がWebレイアウトにとって、もっとも重要な作業と言えるのではないでしょうか?

ページトップへ  トラックバック0 コメント0
レイアウトの法則を理解する-その7
2008-07-02-Wed  CATEGORY: ホームページ製作

Webページ閲覧時における視線の動き

Web特有の動き方
  人間の視線の動きには規則性があります。文字が横組みであれば、左上から右下へ視線が流れていきますが、Webページも大きくはこのパターンに該当します。ですが、近年の研究においてWeb特有の視線の動きについて報告されており、

  • 視線はF字型をたどり、右サイドのコンテンツはほぼ見られない
  • 画像よりもテキストに視線が集まりやすい
  • などの特徴があるようです。

    ユーザーが求める情報を与える
      Webサイトに訪れるユーザーは多くが目的をもっていて、さらにその目的が「情報」である場合が多いと考えられます。従来の紙媒体では、特に広告においては「興味を引く」とう役割も大きいですが、Webサイトを訪れた時点で、ユーザーはすでに興味をもち、能動的に訪問しているため、画像や派手な広告には目を向けない傾向にあるのではないでしょうか?

      最終的には、ユーザーに必要な情報を、左上に近い場所から順序立ててレイアウトをすることが望ましいと思います。

    ページトップへ  トラックバック0 コメント0
    レイアウトの法則を理解する-その6
    2008-07-01-Tue  CATEGORY: ホームページ製作

    文字組みについて把握する

    理想的な文字数と行間
      印刷物では、読みやすい文字数は1行当たり最大30~35字までと言われています。(横組みの場合)。最少は14~15字と言われ、新聞を除いてほぼこの範囲に収まっています。Webページについても、およそ同じくらいを基準にするとよいでしょう。
      行間の適正値は行長にも依存しますが、一般的に文字の50~100%が望ましい(CSSのline-heightは150~200%となります)。行間が詰まると情報量の多さを感じ、空くとゆったりしたイメージになるので、サイト全体のイメージに合わせて設定しましょう。

    画像化する場合は文字詰めを
      文字を画像化して配置する場合は、文字詰めを徹底してほしい。Webは印刷物に比べて文字詰めが甘い例も多いですが、読みやすさと見た目の完成度に大きく影響するため、きちんと手詰めを行うべきです。ベタ組み、自働詰め(OpenTypeフォントのプロポーショナルメトリクス)、自動詰め&手詰めと比較すると、バランスが変わると共に印象も大きく変わります。

    文字に妥協しない
      文字については制作側である程度コントロールできますが、ユーザーが文字の大きさを変更すると崩れてしまうため、標準と想定される状態で適正値にする、という考え方が正しいと思います。「文字なんて表示がまちまちだから」と妥協せず、少なくとも標準状態では美しい文字組みとなるよう心がけることが大切です。

    ページトップへ  トラックバック0 コメント0
    << 2008/07 >>
    S M T W T F S
    - - 1 2 3 4 5
    6 7 8 9 10 11 12
    13 14 15 16 17 18 19
    20 21 22 23 24 25 26
    27 28 29 30 31 - -


    余白 Copyright © 2005 TK-ウェブログ. all rights reserved.
    上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。