ウェブサイトの企画

対象者とコンセプトの決定

ウェブサイトの対象者を決めましょう.明確な方針なく気の向くまま制作すると,主張がぶれやすくなります.

例えば,対象者がパソコンが使える人では不明確です.自作パソコンが趣味の人,プログラミングができる人,基本的なアプリケーションの操作方法なら分かる人,というように程度は様々です.

対象者によりデザインを変えることもあります.同じ説明でも,玄人向けなら凝ったページで技術を感じさせたり,素人向けならイラスト等で親しみやすいページにするのも一考です.

Point

対象者の決定は,次の点を考慮すると良いです.

紙に書く

コンテンツ(ウェブサイトの内容)が決まったら,デザインを具体的に決めます.テンプレート素材を使っても良いです.文章や画像の配置は紙に書くと良いです.

なお,画面の解像度によりページの大きさも変わります.デザインの方法に影響することもありますが,特定の解像度でしかきれいに表示できないページは,ユーザの多様性を考えていません.

技術を学ぶ

XHTMLCSSはウェブの制作に必要です.ブログやwiki等でもウェブサイトを制作できますが,これらの大元はXHTMLCSSです.自分の好みにカスタマイズしたいなら,技術を知ってる方が有利です.

ウェブサイトを作りながら徐々に知識を身につけると良いです.

Opinion

ウェブサイト制作支援ソフト(ホームページビルダー等)は製品によって善し悪しがかなり違います.個人的には使用をおすすめしません.視覚的にページを作れる点は良いですが,その犠牲としてXHTMLのコードがめちゃくちゃになりがちです.

せっかく作ったウェブサイトが特定のUAで表示されなかったり,冗長なコードによりページの容量が肥大化して表示が遅くなることもあります.

重い(表示が遅い)ページを作らない

動画や音声は容量が大きいですし,回線の混雑も考えられます.ページの読み込みが遅ければ,ユーザは閲覧をあきらめて別のウェブサイトにいくかもしれません.

オフラインとオンラインでは,表示にかかる時間に差があるため注意して下さい.

Opinion

音を使うなら,そのページを表示する前に音を鳴らす旨を書く方が良いです.会社や学校で閲覧しているときに音が鳴ると不都合です.あまり偉そうには言えませんが(笑),業務や講義中に遊んではいけません.

複雑怪奇なページを作らない

自分のサイトを一番知っているのは制作者本人で,逆に言えば,他人が制作者と同じように構造を理解できるとは限りません.

一般に,全ページはトップページから3クリック以内でたどり着けるようにすべきで,サイトマップを作るのは有効です.また,メニュー等の項目は5~9個が適切です.

ウェブサイトに掲載する情報をグループ化し,階層的な構造を作る場合,「狭く深く」より「広く浅く」の方が分かりやすいとされてます.

パンくずリスト(トピックパス)があれば,ウェブサイトのどこにいるかユーザが分かりやすくなります.title要素にはサイト名とページ名を併記すると効果的です.サーチエンジンからたどり着いた場合,必ずしもトップページから見てるとは限りません.

なお,上記の内容は繰り返し訪問する人(リピーター)が一定数いるウェブサイトが対象です.期間限定の広告等,1回見せれば目的達成となるページなら,細かいは無視して,目新しさのみ追求しても良いです.

多様な環境に配慮

インターネットは公共の場所です.特定の環境でのみ閲覧できるページは好ましくないです.プラグインを必要とするオブジェクトを使うなら,それを使用した旨を書き,プラグインのダウンロード先にリンクをはると良いです.オブジェクトを生成するソフトウェアのメーカが,リンク用のバナーを用意してたり,プラグインを自動的にインストールするUAも多いです.

画面の解像度が制作者の環境と同じでない限り,どうしても見かけは変わりますが,スタイルシートの設定等を相対指定にすると影響を抑えられます.機種依存文字や半角カタカナは使わないようにしましょう(顔文字に半角カタカナが含まれる場合もあります).

Column

Adobe BrowserLabで様々なUAにおける表示を確認できます.なお,無償版の提供は2012年4月12日までです.

良心的で独創的なページを

ウェブサイトの内容が公序良俗に反してはいけません.著作権も注意して下さい.

個人のウェブサイトは,制作者が著名人でない限り,開設当初の知名度はほぼ0です.最初から独創的なページを作るのは難しいですが,多数の人に見てもらいたいなら,徐々にそういうページを目指しましょう.

多様なユーザに配慮

インターネットを使う人が必ずしもPCでアクセスしてるとは限りません.携帯端末からアクセスしてるなら,画面のサイズや機能がPCと違います.また,障害者もインターネットを使います.障害によりニーズが違うため,全てに対応するのは困難ですが,障害者に配慮した結果,健常者も使いやすくなることがあります.

聴覚障害者への配慮

音が聞き取りにくい,または全く聞こえない場合,音声のみで提供される情報は気づきません.動画であれば映像は見られますが,音声は分からないため,字幕をつける等の配慮が必要です.

聴覚障害者本人だけでなく,周囲の環境にも注意して下さい.大音量の音声が突然発生すると健常者は驚きますが,音が聞こえない人はそれに気づかず閲覧を続けるかもしれません.すると,本人が知らない内に,周囲の人に迷惑をかけることもあります.

視覚障害者への配慮

特定の色の区別がつかない色盲,視力が生活に支障を来す程度の弱視,全く視力がない全盲の人がいます.

色盲には第1~第3色覚障害があり,全ての色の区別がつかない全色盲の人もまれにいます.最も多いと言われてる第1色覚障害では赤と緑の区別がつきません.例えば,緑の背景に赤い字では,字が読めません.

文中で強調したい部分に色を使うときは,色だけでなくフォントを変えたり,強調の意味を表すem要素やstrong要素を用いる等,極力多くの方法を併用しましょう.

全盲の人や一部の視覚障害者の問題は,フォントを大きくしても解決しません.視野中心が見にくい場合,そこ以外に文字がくるよう操作しますが,文字が大きすぎると中心を避けることができません.そのため,フォントサイズは相対指定が良いです.

全盲の場合,画面情報を音声で読み上げるスクリーン・リーダや点字ディスプレイを使うことがあります(入力は健常者とほぼ同じくキーボードをタッチタイピングします).音声は文字情報と違い,一度読み上げられたら,再び読み返さない限り,再確認ができません.点字ディスプレイは40~80桁程度の表示しかできず,画面の鳥瞰的な把握が困難です.視覚情報に頼らず,分かりやすい文を書くことが大切です.

meta要素で自動的に更新するページを作れますが,好ましくありません.画面全体の把握に時間がかかるため,全体像をつかむ前にページが切り替わる可能性があります.音声で読み上げてると,途中でページが更新されたら再び最初から読み上げる手間が生じます.

上肢障害者への配慮

PCの利用にあたり,下肢障害より上肢障害の方が,一般に配慮すべき事項が増えます.

上肢障害者の場合,マウスの利用が困難(操作に時間がかかる)だったり不可能な場合があります.入力装置はマウスだけではないため,マウスでしか操作できないページを作るのはやめましょう.ウェブサイトはゲームではないため,入力の制限時間は極力設けないようにしましょう.

LD(学習障害)への配慮

詳細な症状は専門のページに譲りますが,知的発達に問題がなくても,読む・書く・話す・聞く・計算する等の内,いずれかの能力の習得が困難な状態です.英語圏では,言語コミュニケーションに問題がなく,文字を読むこともできますが,文字を文章として認識できないDyslexia(失読症または難読症)があります.

LDでは,複雑な説明の理解が困難な場合があるため,文を分かりやすく記述する他,画像や動画等の視覚情報を併用することで理解を助けられます.

一時的障害

健常者でも閲覧環境やケガ・病気により,いずれかの障害と同等の状態になることがあります.利き腕を骨折したなら,治癒するまでは細かいマウスの操作が困難ですし,図書館で音をだしたら迷惑ですから,音声情報は使えません.

サイトの運営

荒らしへの対処

匿名や他人になりすまして誹謗中傷をしたり,意味不明な言葉を書き連ねる人または行為を荒らしと言います.掲示板等でこのような書き込みを見たらすぐ削除しましょう.放置すると雰囲気が悪くなり,よけいに荒れる恐れもあります.

荒らしを懲らしめたい気持ちは分からなくもないですが,反応すると相手が調子に乗るので,削除後はアクションを起こさない方が良いです.なお,悪質な行為(名誉毀損や犯罪予告等)は,警察やプロバイダ等に連絡しましょう.

特定のIPアドレスからの書き込みを拒否したり,特定の言葉を含む書き込みを拒否することもできます.完全な対策にはなりませんが,必要に応じてそのような機能をもつプログラムやプラグインを用いると効果的です.

Opinion

掲示板やチャット等,不特定多数の人が書き込む可能性のある入力欄では,タグの使用を禁止すべきです.img要素でわいせつな画像を貼り付けられたり,script要素で悪質なスクリプトを書かれる可能性があるからです.

基本的なタグにしぼっても,スタイルシートで表示を崩せたりします.

更新は頻繁に

更新が頻繁だと,新情報を見つける可能性も高くなり,ユーザが繰り返し訪問します.リピーターをつくることはアクセス数や知名度の向上につながります.

プログラムやスクリプトの設置

インターネットでは色々なプログラムやスクリプトが配布されてます.掲示板やチャットの他,ゲームもそうです.ただし,サーバに高い負荷がかかるプログラムやスクリプトは使用が禁止されてる場合もあるため,必ず規約を読みましょう.場所によっては,使用禁止の具体的なプログラムが書かれており,違反すると,サービス利用の権利を取り消されます.