制作をスムーズに進行できるように

サイト設計書は、お客様を含めた制作チームの為に、制作～納品が確実に進行できるよう統一した情報整理を行う為用意されるものです。（サイト設計書はホームページ制作会社によって様々な項目が存在する上に項目名称も異なります。会社によっては設計書無しでサイト構築するところもあります。）例として、サイト設計書の項目を細かいものまで詳細に書き出してみると下記のようなものが挙げられます。

• コンテンツ設計
• ナビゲーション/サイトマップ設計
• SEO設計
• 情報設計
• レイアウト設計
• ビジュアル設計
• プログラム設計
• 見積書
• スケジュール
• 作業計画
• 運用計画

他にも外注スタッフとのやり取りの指示書等がありますが、これはお客様側とは関連ありませんので省きます。

WEBデザイナーの設計担当

ビジュアル設計

主に設計書の作成は、WEBディレクターが担当するのが一般的です。ただしビジュアル設計の部分は主にWEBデザイナーの仕事です。レイアウト設計もWEBデザイナーが担当することも多いので、ユーザーの目の導線や使い勝手を考慮した設計ができるよう、日々勉強が必要です。

]]> http://www.it-work.jp/web-designer/contents/web_site/sda/post/ http://www.it-work.jp/web-designer/contents/web_site/sda/post/ WEBサイト設計 Sat, 27 Jan 2007 11:04:07 +0900 日本工業規格「JIS X 8341-3」

JISは日本のアクセシビリティの標準指南書

日本工業規格の「JIS X 8341-3」 が平成16年に作成されました。この「JIS X 8341-3」 というのは、可能な限り高齢者や障害者の方々がサイトを操作・利用できるように、様々な要件を定義しています。米国ではリハビリテーション法508条というものがあって、政府関連のサイトは必ずアクセシビリティの整備が法律で義務づけられています。その点、日本では自由です。

実際に取り入れる際には

正直なところ「JIS X 8341-3」の項目を全て確実にこなしていたら、制作工数は確実に増える可能性が高い為、取り入れる際にはその優先順位（適応範囲）とお見積の算出を考慮しておく必要がありますので要注意です。

SEO設計

SEOとは、検索エンジン上位表示の対策の事をいいます。検索エンジンで上位に表示されるようにするには様々な配慮をもってホームページ作成する必要があります。サイト設計時にSEO設計も行います。この設計はキーワード設計と配置計画が主に含まれています。あとは運用時のメンテナンスが重要です。

魅力的なコンテンツ作り

根本的に魅力的なコンテンツ作りが一番大事です。小手先のテクニックで工夫しても少しばかりのプラスにしかなりません。そもそも魅力あるコンテンツ作りが一番難しい事ですか･･･。

WEB標準に準拠したXHTML+CSSによるコーディングで逆効果になる事も

WEB標準でCSSコーディングさえできれば検索エンジン対策ができました！と思っている方が中にはいるようです。SEOにおいて最も重要なのはWEB標準ではなく、ソースのキーワード選定とその配置率にあります。WEB標準を意識する余り、配置より準拠を優先し、SEOにとっては逆効果になっているケースも多々見受けられますので要注意。ソースが整っていることはもちろん根底的に良い事ですが、盲目的にならないように注意しましょう。

危険なテクニック / テキストをブラウザ外に無理やり飛ばす事

特にh1タグの部分はSEOにとって重要なキーワードを配置する部分ですが、画像表示をしたいが為にindent等でブラウザ外に無理やり飛ばす手法を取るケースがあります。しかし1歩間違えればいつかスパム認定される恐れが100％無いとは言えず、SEO重視のサイトにとっては将来的に命取りになりえます。しかしSEOより音声ブラウザ対応を重視しているサイトなら問題ありません、どちらを重視すべきか考えてSEO設計しましょう。

CSSとSEO

そもそもCSSでコーディングされているとSEOに良いと言う話をよく聞きますが、何を根拠にしているのでしょう？主にそれはソースが短くなるという点です。検索エンジンのロボットは、ソースを上から読み、ある程度の量までしか読み込みません。その為、重要なキーワードを読み込ませるためソースを短く調整することが大事です。逆に言えば重要なキーワードはソース上部に記載すれば良いのです。その為、特にCSSでなくてもエンジン対策は十分可能です。

ブログが上位表示されやすい訳

ブログで作ると検索エンジンに良いですよ！という話もよく聞きます。これは何を根拠にしているのでしょう？それは、ページを増やしやすく、トラックバックの仕組みを利用して被リンクを増やせるという点です。SEOのためにはページ数は多ければ多いほど良いものです。もちろん被リンクもです。逆に考えるとせっかくブログで作っても10P程度のブログなら意味がありません。トラックバックも最近では被リンクとして計上されないケースも増えてきました。頻繁な更新がSEOに良いという話はページが増えればGOODという意味の方が強く、放置されるブログは意味がありませんので要注意です。]]> http://www.it-work.jp/web-designer/contents/web_site/search/css/ http://www.it-work.jp/web-designer/contents/web_site/search/css/ 検索エンジン最適化 Sat, 27 Jan 2007 12:22:04 +0900 コンテンツマネージメントシステム

ホームページ更新が簡易化できる仕組み

コンテンツマネージメントシステムは、一般的に略してCMSといいます。簡単にいうとデザイン部分と情報部分を分離化して、その情報の部分をデータベース化してシステムで簡単に編集管理できるようにしたものを指します。

使用例

身近な一例がブログ

ブログもCMSの1つです。指定したデザインにそって、別で登録した文章をはめ込んで表示してくれます。このブログを組み込んでホームページを作れば、ニュース部分やコラムの部分をお客様側で更新していただけるようになります。

人気のCMS

プロフェッショナル向けにもムーバブルタイプが人気

世の中には沢山の種類のCMSがありますが、ブログシステムの1つであるムーバブルタイプのシェアがかなり大きいようです。このムーバブルタイプはカスタマイズが非常に細やかに出来るので本格的なプロフェッショナルにも最適です。他の月額レンタル式CMSシステムだと別サーバーで管理せねばならなかったり、費用面でもムーバブルタイプより劣ることが多い為、十分な検討が必要です。

• ムーバブルタイプ

このWEBデザイナー辞典にも一部だけブログシステムが混入

このWEBデザイナー辞典にも、一部分だけブログが組み込まれています。さてそれはどこかというと、今このページこそがブログから書き出されているものです。このようなコラム等の情報系コンテンツは、後々増えてくる情報の管理が非常に大変ですので、ブログを導入すると飛躍的に情報管理が楽になります。

ブログのデザイン設定

いつも通りにWEBデザインを作ればいいだけ

ホームページにブログシステムを組み込むのは大変そう！と思われる方もおられるかもしれませんが、いつも通り、普通にWEBデザインしてコーディングすればいいのです。このサイトの例だと、普通にフォトショップでトップデザインを作ってコーディングして、そして下層ページもデザインしてコーディングして･･･、その下層ページのソースに、ムーバブルタイプ用の「システムキーワード」をそっと加えればいいだけです。

後はシステムにデザインを設定

キーワードを出力したい箇所に入れたら、あとはシステムに登録すればOK。ブログに記事を投稿して、それが先ほど設定したデザインに沿って書き出されます。細かい設定は使っているうちに覚えます。難しく考える必要はありません、プログラマーではなくデザイナーのレベルでも十分使いこなせるほど、非常に簡単なものです。まずは経験してみるのもいいですね。

コラムやプレスリリース等の情報管理に最適

コラムやプレスリリースは随時ページが増えていくものです。そういう部分にはブログを組み込むのが最適です。改ページやページ内検索にも柔軟に対応できますし、素人であっても記事追加が簡単です。ただサイト全部をブログ化するのは避けたほうがいいでしょう。いくら更新がシステム上でできるからといって、むやみに各コンテンツをブログで作るのは非現実的です。あくまでも情報管理が必要なコラムやニュース部分に使用するのがベストです。

RSSやPING送信で更新通知ができる

RSSやPINGで更新情報を外部に通知することができますので、頻繁な更新があるコンテンツには最適です。

コメントやトラックバック機能でコミュニケーションを取れる

記事ごとにユーザーからコメントを投稿してもらうことができます。またトラックバックでは外部のサイトに被リンクを張る事ができます。しかし企業サイトにはこれらの導入にはリスクを伴いますので、十分注意が必要です。

ブログでホームページ制作のデメリット

そっけないテキストサイトになりがち

このコラムのページを見てもらうと分かるように、非常にそっけない見せ方しかできません。これでも頑張って工夫したつもりなのですが…、やはり見出しがあって文章があって…その繰り返しです。他のページを見てもらうと分かるように、情報の見せ方は目の導線を考慮してレイアウトに様々な工夫をしていますが、さすがにこのブログ部分はそういうレイアウトの配慮が難しいのがデメリットです。無理やりできないこともないのですが、非常に手間がかかります。

一括編集機能があるのは、ブログだけではない

ブログでなくてもDreamweaverにはサイト管理機能の1つ、一括編集機能がありますので、大量のページを一括更新することができます。ブログと同じようにデザイン部分の設定をシステムに設定すればいいだけです。それだけで100万ページあろうと全ページをワンタッチで更新できるのです。デメリットを考慮し、ブログ等のシステムにむやみに頼りすぎず、本当に必要な箇所に絞って導入するのがベストです。

パソコンによって色が違うので要注意

根本的にパソコンによって色が微妙に異なります。ウインドウズとマックでも違います。ガンマ値が異なる為、色の明るさが違うのです。その為ユーザー全員に共通した色を見せることができるとは約束できないのがWEBデザインの現状です。

カラーコードで色指定

お客様と色の指示・確認のやり取りをする際には、RBGのカラーコード等の数値で行いましょう。サイトデザインを印刷したものを渡されて、この色にしてください、と色指定をもらってしまわないように･･･。印刷機によっても色が異なりますし、実際にRGBに変換するには目視での確認になってしまいます。

カラースペースとは

カラースペースとは、色の表現可能域の事です。パソコン上で表現できる色には限度があります。その限度域を定義したものがカラースペースで、「RGB」や「CMYK」等が代表例です。この2つ以外にも沢山種類がありますが、WEBデザイナーが使用するのは主に「RGB」です。

WEBデザインはRGBで

WEBデザインを行うにはフォトショップ等のドローソフトでRGBモードで画像編集を行う必要があります。印刷物には「CMYK」が一般的です。たまにお客様からCMYKの状態でロゴデータ等をいただくこともありますので取扱いには要注意です。

アクセシビリティとユーザビリティの違い

アクセシビリティは「音声ブラウザ対応」や「マウス無しでキーボードだけでも操作できる配慮」、そして「他の言語でも翻訳表示できる」等の、様々な問題を抱えたユーザーに対する「アクセスのしやすさ」という事を主に指します。一方ユーザビリティは「サイトの分かりやすさ/使いやすさ」を指します。

まずはターゲットユーザーを明確に

目の不自由な方をターゲットユーザーに入れる必要があるのかどうか、まずはターゲットユーザーを明確にして導入しましょう。サイトのコンセプトによっては、グラフィック重視、コスト重視、SEO重視、と様々で、どちらかを優先せねばならない事もあります。一概にアクセシビリティが良ければ必ず効果あるサイトとは言えないものです。

ソースにこだわりすぎるのは禁物

htmlのソースのチェックは、下記のようなツールでチェックできます。LINTでは、必ずしも高得点を出す必要はありません。サイトによってはどうしても文法通りの表記ができないケースが存在します。

• The W3C Markup Validation Service
• HTMLソースチェックのHTML-LINT

cssは手打ちだからこそミスしやすい！エディタはドリームウィーバーで。

cssは手打ちで作ることが多く、だからこそスペルミスが出やすいものです。cssを手打ちで打ち込む際、ドリームウィーバーのコード表示画面を使用して打ち込みましょう、スペル候補が出る上にエラーもその場で表示してくれますので、ミスを少なくスムーズに構築できます。（その上、大規模サイト向けのサイト管理もできます。）普通のテキストエディタより高度に手打ち管理できますし、バージョンによりけりですが、cssのソースチェックもドリームウィーバー内である程度チェックできます。

• W3C CSS検証サービス

ブラウザチェック

ソース面のチェックだけでなくブラウザチェックも

ウインドウズのIEだけでなく、オペラやファイヤーフォックス、ネットスケープ。そしてマックのサファリ等、世の中には様々なブラウザが存在します。まずはターゲットとするブラウザとそのバージョンを決め、そのブラウザでうまく表示されているかどうかチェックしましょう。

ツールを使ってチェック！

アクセシビリティ重視のサイト構築時には、ツールを使ってすばやくチェックする事をオススメします。ドリームウィーバーにはJIS対応チェックの無料拡張版を入れることができます。このドリームウィーバー内で様々なチェックが出来ますので、上手く活用しましょう。

• ドリームウィーバーJIS対応
• ウエブ・アクセシビリティ・ツールバー
• 富士通アクセシビリティアシスタンス
• エーデザイナー
• 情報伝達度チェッカー
• HTMLソースチェックのHTML-LINT