FC2ブログ
お気に入り商品の紹介、ホームページ制作に関する徒然
TK-ウェブログ
スポンサーサイト
-----------  CATEGORY: スポンサー広告
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
ページトップへ
オリジナルデザインShop「TK-Design」OPEN!
2008-08-28-Thu  CATEGORY: デザイン

MyShop「TK-Design」がOPEN!

  昨日、オリジナルデザインネットショップ「TK-Design」がオープンしました。これを機に、テンプレートも変更しました。
  今後、多彩なデザインのTシャツやマグカップ、パーカーなど多数取り揃えていきますので、よろしくお願い致します。

スポンサーサイト
ページトップへ  トラックバック0 コメント0
グラフィックの押さえどころ
2008-08-26-Tue  CATEGORY: ホームページ製作

画像は画面の動きを支配する

色数を支配する
  自然界には様々な色があふれているため、色にあふれたデザインの方が自然で安心感が出ます。Webページをデザインする際にも、ある程度の色数を使う方が安定した画面を作りやすい。

  ページの色に大きく影響するのは、多くの場合画像であり、メニューボタンなどのパーツに使用する色を一色にするか、二色、三色にするかはそれほどイメージに影響しないことが多いのです。例えば「楽天証券」の場合。パッと見では多色使いでにぎやかな印象ですが、実際は多くの色は画像内にあります。メインカラーとしてメニューボタンなどに青が使われていますが、これを赤や緑に変更してもそれほど大きく印象は変わらないと思います。また、画像をすべて外すと、かなり寂しいページになってしまうはずです。

  画像によって色が支配されると言っても過言ではありません。適切に画像を配置して、その色に合わせてメニューボタンや背景色、文字色などを決定していくと失敗が少なく効果的です。

不規則な形を作る
  文字を遠目に見ると、一行の場合はライン状に見えて、複数行の場合はブロック状に見える。また、メニューボタンなども通常長方形のブロック状なので、ページの要素はほとんどが直線(ライン)か長方形(ブロック)で構成されています。

  色数同様、曲線やランダムな形があるほうが自然な印象を与えますが、それに一役買うのが画像です。角版の写真でも、写真に写っているものはランダムな形をしていて、曲線や楕円、斜めの線などが画面に変化を与えてくれます。例えば「SOFINA 花王ソフィーナ」のページでは、写真以外の部分はシンプルなブロックで構成されていて、写真内の楕円や曲線などが画面全体に心地よい動きを与えてくれています。

  ただし、画像によって動きを出すには、やみくもに画像を配置すればよいわけではありませんので注意が必要です。グリッドを活用して整然とレイアウトし、一定の秩序を持たせた中に画像で変化をつけていく、というプロセスが重要なのです。

つづきを表示
ページトップへ  トラックバック0 コメント0
文字について考える
2008-08-25-Mon  CATEGORY: ホームページ製作

文字の役割とは

文字は読むためにある
  例えば、広告表現などにおいては、ビジュアルは目を引くための存在であることが多い。それに対して、文字は行動を起こさせるものとして位置付けられます。その役割を果たすためには、当たり前ですが、まず文字を「読んでもらう」ことが重要になります。

  Webページの場合、制作者側が書体や文字の大きさを完全に制御する事は難しいですが、意外に影響が大きいのが「行間」です。読みやすい行間は行長に依存し、行長が長いほど行間を広めに取る必要があります。具体的には、20~30文字では行間50%(行送り150%)、30~40文字では行間70%(行送り170%)程度を基準にして微調整するとやりやすいでしょう。標準状態での1行文字数は、最大で35文字くらいと考えておくとよいでしょう。これは、紙媒体の横組み14~40文字という基準より狭いが、画面は紙よりも読みづらいことが多いためです。

  また、画面解像度の問題から、小さい文字は読めなくなる恐れがあります。読ませる文字であれば、12ピクセルが最低ラインと思っておいたほうがよいでしょう。10ピクセルくらいの文字は、装飾用として割り切った場面でのみ使うようにしましょう。

書体の種類
  書体には大きく3種類あります。明朝体、ゴシック体、その他(キャッチ系)ですが、そのうちゴシック体を細かく分けるとセリフありとセリフなしの2種類があります。それぞれ印象が違うので上手な使い分けが必要です。

  明朝体は上品な印象を与えやすく、高級感を演出しやすい書体です。大きく使っても下品になりにくく、思い切ってかなり大きめに使っても面白いでしょう。ただし、太めの明朝体は古典的なイメージになりやすく、限定的な使われ方をしています。逆にゴシック体は活動的な印象を与えやすい。特に太いゴシック体を使うと力強く、見た目のインパクトが大きくなります。明朝体、ゴシック体以外のいわゆるキャッチ系書体は、一般的に読みづらいものが多いほか、多用すると素人っぽくなってしまいます。使う場合はあくまでワンポイントとして効果的に配置するようにしてほしい。

  Webでは、明朝体は読みづらいことが多く、一般的にはゴシック体に軍配が上がります。画面解像度の問題から、横線が細くなる明朝体はガタつきが出やすく、文字が小さいほど顕著です。そのため、明朝体は大きめのキャッチコピーや見出しなどに使うようにして、小さい文字はゴシック体に統一するのが望ましいでしょう。

つづきを表示
ページトップへ  トラックバック0 コメント0
デザイン素材の活用法
2008-08-22-Fri  CATEGORY: ホームページ製作

外部の素材をデザインに取り込む

ピクトを活用する
  メニューボタンや見出しにピクトを入れると、直感的にわかりやすくなるだけではなく、デザインのアクセントにもなります。ピクトは自作する事が多いですが、交通標識などのように決まった形のものが必要なケースもあるでしょう。そんなときは、ピクトデータを公開しているWebサイトを利用すといいでしょう。
  himenoya rywzart

  Adobe Illustrator EPS形式でダウンロードできるので、ベクトルデータとして扱うことができて、拡大・縮小などの再編集がしやくて便利です。Adobe Photoshopも現在はベクトルデータを管理できるので、Photoshopでページデザインをしている場合にも重宝します。

  また、ピクト系フォントも色々あるので、それらも活用できます。アウトライン化すれば上記同様に使えるので、いざというときのために揃えておくといいでしょう。

  Photoshopでデザインしているページにベクトルデータを挿入する場合、シェイプレイヤーかスマートオブジェクトを扱うのが一般的です。CS3のスマートオブジェクト機能は優れもので、スマートオブジェクトレイヤーをダブルクリックするとIllustratorで(ベクトルデータの場合)編集できます。レイヤーをコピーしておけば、同じパーツをページ内に複数配置するときなどに一括管理ができて効率がいいです。

情報とデザイン
  以前はページのにぎやか感を出すためにバナーを配置することなどもありましたが、最近ではブログパーツという選択肢もあります。ブログではなく通常のWebサイトにも使えるので、ページ右サイドなどに置いてアクセントをつけてみても面白い・・・

  配置方法はいたってシンプルで、JavaScriptコードを張り付けるだけのものが多い。使いたいブログパーツを公開しているWebページにソースコードが載っている場合がほとんどなので、それほど迷うこともないでしょう。

  また、ブログパーツは単に装飾するものだけでなく、実用的なものも数多い。例えば気象庁で公開している気象データを取得して天気予報を表示するブログパーツなどもあります。これを普通のWebサイトに置いても装飾程度の意味になってしまいますが、旅行情報のWebサイトに置くとたちまちページ情報と連動した意味を持つことになり、ブログパーツ、Webページともに数倍価値が上がるでしょう。他にも、おすすめ飲食店口コミマップのブログパーツを不動産情報のページに置くことなどが考えられます。新居を探している人にとって、生の近隣情報を得られることは大きく参考になるに違いありません。

  このように、情報は単体ではなく結びつきによって価値が生まれ、結びつき方によってその価値が大きく変わります。Webサイトの情報に外部情報を結びつけて、双方の価値を上げていく。それが見掛け倒しに終わらない、本当の意味でのデザインといえるでしょう。

ページトップへ  トラックバック0 コメント0
情報デザインについて理解する-その2
2008-08-21-Thu  CATEGORY: ホームページ製作

「理解」フェーズでやるべきこと

ユーザーについて知る
  理解フェーズでは「ユーザー」、「コンテンツ」、「文脈」の3つをまとめます。

  まずユーザーについては「どんなユーザーがいるのか」、「それらのユーザーはどういった状況でWebサイトを使うのか」、「どんなニーズがそこにあるのか」、「どういったコンテンツや機能でそれを解決できるか」という順序で考える(ペルソナを用いると明確になりやすい)。この順序で考えていくことによって、無理なく「何が必要とされているか」がわかります。逆に、この順序を守らず「この機能を実装したい」という観点で考え始めると、それがユーザーに必要かどうかではなく、単に実装したいからやる、といったことになってしまうため注意が必要です。

  ユーザーを理解するには様々な方法がありますが、ユーザーテスト(ユーザビリティテスト)、インタビュー、ログ分析などが多く用いられています。ユーザーテストは、専門の実験室を用いると大がかりになって費用もかかりますが、会議室でノートパソコンを使って、現状のWebサイトを友人などに使ってもらうだけでもかまわないので、是非、実施して頂きたい。特にデザイナーの観点からも、多くの発見があるはずです。得られたユーザー像はペルソナと呼ばれる架空の人格や「メンタルモデル」というユーザー心理状況を記述しながらまとめていきます。このユーザー像を使いながら、考えられる状況とニーズを深堀していくのです。

コンテンツについて知る
  Webサイトで扱うコンテンツについて考えます。まずは、現状のWebサイトや、用意されているコンテンツを一覧できる形にしましょう。この段階ではまだページ分けなどは考えなくていいので、どんどん書き出していきます。書き出したコンテンツには、どういった内容なのかを一緒にメモしておきます。例えばプレスリリースなどの情報は追加されるものですし、会社概要なら年度ごとに更新されるかも知れません。先にユーザー分析を行っていれば、誰のどういったニーズを満たすかについても記しておきましょう。こうしてコンテンツを書き出したら今度はそれぞれの関連をまとめます。

  例えば、製品情報なら、関連する製品、製品を販売するECサイト、製品のサポート情報、というようにコンテンツ間で関連があります。このコンテンツ間の関連はコンテンツモデルと呼ばれ、情報アーキテクチャ設計においてとても役に立つ情報となります。

つづきを表示
ページトップへ  トラックバック0 コメント0
情報デザインについて理解する
2008-08-19-Tue  CATEGORY: ホームページ製作

「情報デザイン」という概念

情報デザインとは
  情報デザインとは何なのか。それは人とモノや環境との関係性に形を与える方法論であり、生活の中にあふれる無数の情報をわかりやすく提示する手法、あるいは、それらの考え方です。これをWebの世界で言い換えるなら「相手の立場に立ち、伝える内容を明確にし、目的に沿って提供する」ためのデザインです。

  しっかりとした情報デザインが実現できているWebサイトでは、ユーザーに対して内容が正しく、かつ利用者の欲しい情報が無駄なく伝達されています。

  ここでは、どうやって情報デザインを構築していくのかを解説したいと思います。まず、Webサイトにおける情報デザインの構築ステップ全体像として、「理解」フェーズ→サイトコンセプト→「デザイン」フェーズのような流れとなります。はじめに必要な情報を揃える「理解」フェーズがあり、それを基に「デザイン」フェーズで設計を行います。

  「理解」フェーズでは、「伝える相手=ユーザー」、「伝える内容=コンテンツ」、「伝える意図=文脈」をまとめます。ここはデザイナーにとっても重要なポイントなので、クライアントやディレクターなどのプロジェクトメンバーから与えられた情報に疑問があれば、デザインに着手するまえにクリアにしておきたい。これらの前提要素を基に、「ユーザーにどんな体験を与えたいか=ユーザー体験」の方針を立てます。この方針は特に情報提供型のWebサイトの場合、そのままサイトコンセプトとなります。

つづきを表示
ページトップへ  トラックバック0 コメント0
使いやすさ実現のために必要な考え方-その2
2008-08-12-Tue  CATEGORY: ホームページ製作

リッチメディアを取り込んだユーザビリティ

リッチメディアとは何か
  リッチメディアとは音声、Flash動画、ストリーミングビデオなどのメディアを統合した技術全般を指します。Flash単独で制作されたもの、DHTMLやJavaなどを組み合わせたもの、Web3Dなど形式は様々だが、多様な表現やインタラクティブなユーザーインターフェイスを提供する事が可能です。以前はマルチメディアと呼ばれていましたが、近年ではほぼ同義で「リッチメディア」という言葉が使われています。

テキストや静止画像より多くの情報の伝達
  ユーザビリティやアクセシビリティを考えてWebサイトを制作する場合、テキストと静止画像を中心に考える場合が多い。特にアクセシビリティを意識したWebサイトは、ビジュアルを少なく、テキスト情報を多くする傾向が見られます。Flashの使用を運営ガイドラインで禁止しているWebサイトさえあるほどです。しかし、高齢者、障害者、そしてそれ以外のユーザーに対して、テキストより多くの情報を伝えられる動画や音声が有効に働く場合もあります。
  例えば商品の操作手順や製造工程などを説明する場合、テキストだけでは冗長になってしまいます。しかし、画像や図解を加えれば、パッと見せるだけでも十分に伝えられます。さらに説明が複雑な場合は、動画や音声解説を入れることで、よりユーザーの理解を助ける事が出来ます。Webサイトそのものだけでなく、リスティング広告などをはじめ、より多くの情報を盛り込むために各所でリッチメディアが使われているのが現状です。
  近年のインターネットの回線容量の向上や、様々なメディアの情報を扱う要素技術の整備により、リッチメディアを効果的に使える事が出来れば、ユーザビリティ・アクセシビリティの向上につながると言えるでしょう。

つづきを表示
ページトップへ  トラックバック0 コメント0
使いやすさ実現のために必要な考え方
2008-08-11-Mon  CATEGORY: ホームページ製作

Web標準に通じるユーザビリティ

Web標準準拠とは何か
  Web標準とは、ブラウザやそのバージョンなどに依存せず、多様な環境で人々がWebサイトを閲覧できるようにするための施策です。W3Cが勧告しているXHTML、CSSなどへの準拠ととられられることもありますが、ISOなどの国際団体が策定している仕様やガイドラインを含めることもあり、何をWeb標準と呼ぶかについては実は明確な定義がありません。XHTMLで構造、CSSで見栄えを制御しているWebサイトをWeb標準と考えることもあれば、W3CのDOMなど動作まで標準化したしたものをWeb標準とする考え方もあります。いずれにしても、クロスブラウザ、クロスプラットフォームで古いバージョンとの互換性も保つことがWeb標準の目指すところであり、多様な環境のユーザーが使うことが出来るという大枠の意味合いを含めれば、ユーザビリティ(アクセシビリティ)を考えるのは必然となってきます。

ユーザビリティとは
  現在はXHTMLが主流になりつつありますが、HTMLとCSSにしても、構造と見栄えを分離することにより、ユーザーの閲覧環境が異なってもWebサイトの見やすさが損なわれず、かつユーザーが表示を制御しやすいというユーザビリティの向上を目指すことが、スタンダードになりつつあります。NetscapeやInternet ExplorerなどでブラウザごとにW3C非標準の独自タグが多様されていたころにあった、あるブラウザでは正しく表示されるのに、別のブラウザではレイアウトが崩れてしまったりするといった問題が最近では少なくなりました。また、文字サイズをCSSで可変に設定し、文字色や背景色もCSSで指定することで、読みやすい文字サイズに変更したり、読みずらい配色とCSSをオフにして変える事が出来ます。

  最近ユーザーが増えてきたスマートフォンに代表される低解像度の画面でも、あるいは1,280×960ピクセル以上の高解像度の画面でも、ある程度自分が閲覧しやすいようにWebサイトの見栄えを調整できるわけです。また、Webアクセシビリティ面を考えても、この構造と見栄えの分離は重要な要素と言えるでしょう。このように、ターゲットユーザーが広範囲で閲覧環境も様々なWebサイトの場合は、ユーザビリティを考慮されて制作されるのが通常なのです。

サイト制作者へのメリット
  <table>タグを複雑な入れ子にしてレイアウトしている場合、メニューやコンテンツの変更をともなうWebサイトのリニューアルは手間がかかります。しかし、構造と見栄えが分離している場合、CSSを変更するだけでまったく違った形に変更する事ができます。さらに各ページへ同じCSSを割り当てたり、少し手直しするだけでWebサイト全体に適用する事も可能です。XHTMLのコードのボリュームも、見栄えをCSSにすべて移行すれば半分以下に減る場合もあります。コーディングしやすく変更もしやすいWeb標準への準拠を行うことは、Webサイト制作の工数削減策としてもメリットは大きい。ただし、古いブラウザなどはW3Cの仕様、とりわけCSSに完全対応していないものもあるので、各ブラウザのW3C仕様への対応状況の調査と実際にブラウザチェックを行い、問題があれば回避策をとらなければならない場合もあります。

ページトップへ  トラックバック0 コメント0
標準化、透明化するインターフェイス-その2
2008-08-06-Wed  CATEGORY: ホームページ製作

標準化が進むWebのインターフェイス

「顧客を逃がす」という言葉のインパクト
  Webにとっての90年代は、インターネットの商業利用が行われてから、ブラウザのバージョンアップやプラグインの開発が急速なペースで行われ、技術的な進歩をベースにしてWebの表現力が拡大し、Webサイトの開発者が斬新なWebの表現を求めて切磋琢磨していた時代でした。そして遊び心のある個性的な表現が、面白いと評価されることが多かったようです。

  そうした流れの中で、「使いやすさ」の必要性が指摘されるようになり、表面的な表現から、「Webサイトを使って何をするのか」を見つめ直すことが行われるようになってきました。なかでも、2000年に出版されたヤコブ・ニールセンの「ウェブ・ユーザビリティ顧客を逃がさないサイトづくりの秘訣」という本は、「使いにくいWebサイトは顧客を逃がす」という危機感を感じさせるひとつのきっかけとなりました。Webサイトの制作を発注する企業やプロデューサーにとっては、その内容以前に、「顧客を逃がす」という言葉自体がインパクトのある言葉として響きました。

遊び心よりビジネスを重視
  以来、「使いやすさ」、「ユーザビリティ」は、Webデザインにとっての最重要課題として扱われてきました。Webがビジネスとして成り立つようになったことによって、遊び心よりビジネスが重視されるようになったという背景もあります。多くのWebサイトが使いやすさを追求したことによって、現在ではHTMLを使った通常の記述だけでなく、インターフェイスの表現自体もかなりのレベルで標準化が進んでいると考えることができます。ページの上部か左側、あるいはその両方にナビゲーションがあり、白い背景を基本として、テキスト内のリンク部分には青系統の色、ボタンはボタンらしく囲まれていて、若干立体感があることも多い。また、矢印があれば、関連する情報に進むことができます。Flashが使われる場合もページ上部の一部分に、ショーウィンドウ的に配置されます。このようなインターフェイスのパターンは、非常に多くのWebサイトで共有されていて、捜査に迷うことは少なくなっています。もっとも典型的なインターフェイスの標準化の例はブログで、それがブログだと理解すれば操作に迷うことはほとんどありません。

つづきを表示
ページトップへ  トラックバック0 コメント0
標準化、透明化するインターフェイス
2008-08-05-Tue  CATEGORY: ホームページ製作

情報・機能の提示(暗示)→ユーザーの行動→レスポンス

「ユーザーの欲求」と「Webサイトが提供できること」を結びつける
  ユーザーがWebサイトを利用するとき、企業や商品の情報を得たい、商品を購入したい、サービスを利用したいといった、何らかの欲求を持っています。このような「ユーザーの欲求」と「Webサイトが提供できること」をうまく結びつけることができれば、Webサイトは正しく機能することになります。Webのインターフェイスのもっとも重要な役割は、この「ユーザーの欲求」と「Webサイトが提供できること」を結びつけることです。

的確な「暗示」が使いやすさを生む
  Webのインターフェイスで行われていることを整理してみると、「情報・機能の提示(暗示)」→「ユーザーの行動」→「レスポンス」という流れとして考えることができます。まず、Webサイトは「Webサイトが提供できること」をユーザーに対して示す必要があります。このWebサイトでは何ができるのか、それにはどうしたらよいのかを的確に表現できれば、インターフェイスとしてはかなり使いやすいものになります。ところが、表現するためのスペースは限られているし、丁寧に説明すればわかりやすいというわけではない点が難しいのです。

  例えば、ひとつひとつのリンクに対して、「ここをクリックしてください」と書いたのでは、画面が混乱してしまいます。情報というものは多ければ良いというわけではなく、多すぎる情報は埋もれてしまって、無に等しくなってしまうことが多いのです。そこで、ある部分をクリックすると次の情報に繋がるということを、言葉を使わずに表現する必要があります。つまり暗示する必要があるのです。

  立体的に表現された画像がボタンとして機能するのも、日常的な物体の陰影を画像として表現し、暗示していることによるものです。デザイン的な表現で暗示し、「言葉として表現されているわけではないけれど、なんとなくわかる」という部分を増やすことによって、画面も整理され、美しく、使いやすいインターフェイスになります。逆に、何にでも注釈の付いたデザインは、美しくなく、また使いにくいものになります。しかし、どんなユーザーに伝わるのかは、明確な答えがあるわけではないので、そのバランスをとることが難しいのです。

つづきを表示
ページトップへ  トラックバック0 コメント0
Webサイトの構造を考える-その2
2008-08-04-Mon  CATEGORY: ホームページ製作

サイト構造のおもなタイプ

Webサイトの構造は主に4タイプ
  Webサイトはそれぞれユニークな構造を持っていますが、大まかに分類すると4つのタイプに分ける事が出来ます。まず一つ目は、特定のカテゴリごとにコンテンツが分類され、必要に応じてカテゴリ化されているという「分類型」です。カテゴリの種類として、ユーザー別、製品別、目的別などが挙げられます。分類型のサイト構造は、CMSのようなカテゴリごとに出力可能なツールを使えば容易に構築できたり、ユーザーにとってもサイト構造が把握しやすい造りであることから、コーポレートサイトでよく採用されています。

  2つ目に挙げたいのは、「リニア型」と呼ばれるものです。申込フォームなどのように、目的のコンテンツに向けて一直線に進んでいく構造を指します。この構造は目的に到達できないアクションをユーザーが起こすと(入力項目の不備や誤ったボタンを押すなど)、エラー画面が表示されたり、もう一度最初からやり直す必要があるという構造をしている点で、通常の構造と異なります。

  3つ目として、「時系列型」というものが存在します。これは、時系列に沿ってWebページへのリンクを並べたもので、記事が追加されるとトップページ自体も更新されていきます。企業サイトでは、新着情報の部分に見られる構造です。ブログやCMSのふきゅうに伴い、広く一般に使われるようになった構造と言えるでしょう。

  4つ目は「変化型」呼ばれるもので、ページ単位で画面が遷移していく構造ではなく、画面の一部が動的に切り替わることで遷移を行う構造がこの型にあたります。例えばGmailのようなAjaxアプリケーションや検索サイトなどは、ユーザーのアクションに応じて様々なページに遷移していく。こうしたWebサイトは構造をツリー形式で表すことは難しく、むしろフローチャートで表す方が設計しやすいです。

つづきを表示
ページトップへ  トラックバック0 コメント0
Webサイトの構造を考える
2008-08-01-Fri  CATEGORY: ホームページ製作

Webサイト構造の押さえどころ

WebサイトとWebページの構造の違い
  Webデザインは、Webページのデザインのみを行えばよいという訳ではありません。Webページの集合体であるWebサイトの構造についてもデザインを行ってこそ、はじめてWebデザインと言えます。Webサイトの構造について解説する前に、そもそもWebサイトとはどういうものであるかという点に目を向けてみましょう。「Webサイトとは、Webページの集合体」という点だけは、Webサイトの定義としては不十分です。Webサイトであることを定義づけているものの一つに、「同一ドメイン下で展開されているWebページ群」というものが挙げられます。
  実際、多くのWebサイトはドメイン下のドキュメントルートを基点にツリー構造のディレクトリがぶら下がる形をとっています。このスタイルの発展形として、ドメイン下のディレクトリごと、あるいはサブドメイン下にWebサイトがぶら下がるタイプも存在します。大規模Webサイトなどでよく見られる形です。

  Webページにはユーザーがページ内で様々なアクションを行ったり、情報を取得するUIとしてレイアウトやアイコン、フォームなどがありますが、WebサイトにもUIと呼べるものが存在します。WebサイトのUIは、各ページ間を行き来するために欠かせないハイパーリンクを伝えるためのナビゲーション、そして同一サイト内であることをユーザーに知らせるために欠かせないルック&フィールやサイトIDなどが該当します。つまり、Webサイトをデザインすることは、ディレクトリ構造をデザインするだけでなく、この立体的なUIもデザインする必要があるというわけです。

Webサイトに存在している三重の構造
  Webサイトの構造はハイパーリンクやディレクトリ構造により決まりますが、ひとつのWebサイトには3つの構造が存在すると考えることができます。一つ目は、ユーザーにとっての階層。例えば深い階層にあるページでも、トップページから1クリックでいけるページの場合、ユーザーは浅い階層と捉えていることがあります。また、本来のトップページではないWebページをブックマークしていたりと、ユーザーにとってのトップページが実際のトップページと異なる場合があります。ユーザーにとってのWebサイトの範囲とは、統一されたデザインやロゴを持つページ群と言えるでしょう。

  次に二つ目として、Web制作者の意図した階層を持った構造が挙げられます。Webサイトの構造と言えば、通常はこの構造を指します。サイトマップとしてWebサイトに掲載されている構造も、大抵この構造です。

  3つ目は、ファイルのディレクトリツリーとしてのサイト構造。例えばフォームなどのWebアプリケーションなどは別サーバで動いていたりすることもあり、ディレクトリ構造とサイトマップは同一の構造にならないことが多いのです。

ユーザーを導くために欠かせない構造
  前述の3つの構造のうち、二つ目はWeb制作者がいくらでもコントロールできる個所です。希望する効果を挙げるためにユーザーをあるWebページへ誘導したい場合、Webサイトの導線を意識しましょう。導線とは、ユーザーの目的を達成できるWebページまでストレスなく誘導できる流れのことです。適切なナビゲーションでWebページ間をハイパーリンクでつなげるために、きちんと考えておきたい部分です。

ホームページをリニューアルしました。ぜひ、ご覧ください。
tk-webstudio

ページトップへ  トラックバック0 コメント0
<< 2008/08 >>
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ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。