ホームページ制作の心得

ホームページをデザインする前に理解しておくべき考慮点をまとめてみました。 これから制作にかかる場合、既存のHPを改装する場合に参考にしてください。 (このページの内容は、予告なしに変更されます。) 問い合わせはこちらまで

★ヒットサイトの条件

●訪問者の視点とサイトデザイン

制作者はまず、自分のサイトの目的、特徴、訪問者のプロファイルを把握しなければなりません。自己満足ではなく、あくまで、訪問者が何を期待し、どの情報を求めているのかを理解しそれに応じた魅力あるページを制作する必要があります。ユーザビリティを考えてサイト全体の設計を「トップダウン」アプローチで行う。

●情報の鮮度の維持

リピーターはより新しい情報を求めてホームページにアクセスする。更新されないページは原則として再度訪問することは少ない。最終更新日を見やすい位置に表示し、情報が更新されいつも新鮮であることを自然にアピールしましょう。(あまり更新しないページに最終更新日を表示すると逆効果となる。)
●魅力ある情報の質と量

商品情報であれリンク集であれ、目玉となる情報の量 と充実度もリピートさせるポイントです。希少性の高い情報が掲載されているとリピートされる可能性が高くなり、汎用性の高い情報が掲載されると訪問者が増える。同じようなサイトが多数あると競争率が高くなる。

●統一感のあるデザイン

各ページの構成、レイアウトがバラバラだと「寄せ集め」のような印象を与えます。(デザイン・センスの個人差が極端にでる。) この種のデザインの苦手な人は、使用する部品、色やフォントなども可能な限り統一して、一体感と完成度の高さを印象づけるよう工夫する。派手なロゴ、バナーなども使い過ぎないように注意しましょう。

●コミュニケーションの充実

サイト側と訪問者のリレーション(絆)が強くなれば自然にリピートの回数が増加します。メールによる迅速な応答、掲示板などによるコミュニケーションを通じて、訪問者は次第にサイトに魅力を感じ、逆に情報を提供するようになる。訪問者間のコミュニケーションが活発になると、さらにリピーターが増える。
●検索のしやすさ
主要なサーチエンジンから検索できることはもちろん、情報量が増加するにつれてサイト内検索のしやすさがリピートのポイントになる。雑然としたレイアウトは避け、コンテンツに合った配置と検索方法(インデックス、サムネイル、フレームなど)を上手に使用しましょう。まず情報の整理がポイント。

★ホームページ制作の考慮点

●制作スタッフ

個人であれ企業であれ、お金をかけずにサイトを構築したいと考えるのは当然である。筆者は、最近、以前に制作したHPのリニューアルに関する相談を受けることが多い。企業の担当者はのほとんどは、以前のHPに関して強い不満をお持ちのようである。特に、以前のHPがWEBデザイナーが参画することなく、社員や経験の浅い業者のプログラマーによって制作された場合には、致命的な失敗作と思われるケースも少なくない。企業のイメージを象徴する顔となるべきHPが、漫画本を見ているような印象では恥ずかしい限りである。このようなサイトのリニューアルは、ハンディを背負っての再構築となるので、さまざまな観点から大変難しい。精神的な圧迫も強く、予算の確保も難しくなるかもしれない。

制作スタッフに関する考慮点は次のとおりである。小規模なサイトは、全部の能力があれば一人でも制作できるが、大規模なサイトについては、コンサルタント、デザイナー、制作部隊が分業で取り組むことになるかもしれない。さらに、イラストレーター、ロゴデザイナー、ブラウジング専門スタッフなども必要になるかもしれない。一人の担当者の趣向や能力の偏りが、Webデザインに影響を与えることになってはならない。

○Webコンサルタント

企業のマーケティング戦略を理解し、どのようなWebが適切かを判断し提案できる戦略スペシャリスト。そもそも、サイトの完成が目的ではなく、そこからの情報発信やビジネスの目標値を達成することが最終目的である。このコンサルティングプロセスを外してしまうと、企業目標の達成に貢献しないサイトができあがる可能性が高い。

○Webデザイナー

デザインの基礎を理解し、サイトデザインからプログラム言語まで、広範な知識とノウハウを持っている人材。エンジニアやプログラマーでは、本来の目的に応じたサイトの制作は無理である。業務を理解し効果的なWEBデザインができる人材を確保しなければならない。お金がかかっても、有能なWEBデザイナーを参画させることが望ましい。

○イラストレーター

○コピーライター

○プロジェクトマネージャ

制作プロジェクト全体をある時はマクロ的に、ある時はミクロの視点で、予定通りに完成できるかどうかチェックする人。ボトルネックを見つけ、トラブルの発生を予測し、事前に対策を講ずることができる人材のことである。従来型開発手法に基づく制作を行なう場合は必須である。

○アプリケーションアドバイザー(業務を熟知する人)

特に、e-ビジネスを目的とするサイトでは、従来型適用業務開発のような開発工程が必ず存在する。詳細仕様を確認できる(設計できる)業務精通者が必要になるはずである。業者任せでは完成してビックリということになるので要注意!

○テクニカルアドバイザー

画像、サウンド、ビデオ、アニメなどのメディアの技術についてアドバイスできる人材。特に、画像処理技術などは、どんなHPでも必ず必要になる。重いファイルをアップして、やり直しを余儀なくされるケースも大変多い。高度なテクニックより基礎を確実に理解している人を選ぶこと。

○メディアプログラマー

HTMLだけでなく、FLASH、Javaスクリプト、CSSなど、DHTML および CGI/Perl 、PHPなどのWEBサーバー側のプログラムに精通し、最適なコーディングができる人材。興味のある部分にやたらと時間を費やす「オタク」プログラマーは参加させてはならない。

○データベースデザイナー

基幹業務のWeb化やデータベースを使用したWeb開発におけるスペシャリスト。今後、Web全体が、パフォーマンスの低い CGI/Perl を使用した開発から、データベース連携型のデザインに移行していくと考えられる。各データベースソフトの知識に加えて、ビルダー、ブラウザのDB連携能力についても理解している必要がある。

●使用目的(商用か個人用か)

プロバイダーによっては、商用の場合、別途申請が必要な場合がある。この場合、追加料金をとられる可能性があるが、商用サイトにリストされるという宣伝効果も期待できる。個人用ならば掲載する内容を吟味し、できるだけ商用で使用していると思われる表現は避ける。例えばインデックス・ページに価格や売り込み文句は表示しない、などを配慮する。ネット詐欺などの犯罪件数も増えており、商用サイトのチェックにかなり気を使っているプロバイダも多い。たとえば、@N○fty等は、会員規約の中で営業活動を禁止しているが、B○globeには、そのような記述はない。会員規約を参照して確認してください。

商用の場合は、独自ドメインの取得、セキュリティ、個人情報の取り扱いなどをはじめから考慮しておきたい。

●容量の制限

プロバイダーにもよるが、使用できるディスク容量は一般に、1ユーザーで3〜20MB程度である。(50MB使えるところもぼちぼち...) それ以上は追加料金が発生するのが普通である。 特に画像はモニターの平均的なリゾリューション(800x600とか1024x768ピクセル)に合わせて大きさを決め、できるだけ容量を少なくする。(画像に容量を使い過ぎると後でページを追加できなくなる。)

○画像ファイル

シンプルな画像(イラスト、ロゴ等)は256色までしか扱えないGIFに落とし、写真などフルカラーで細かな表現を要求される画像については、圧縮率変更により画質を調整できるJPEGに圧縮するのが一般的である。実際には両者の容量、表示速度をまめに比較して決めるのがよい。表示方式も、徐々に細部が表示されるインターレース化、プログレッシブ化した場合と通常の場合とではまったく異なるため、用途に応じて使い分ける。インデックス・ページには100KBを超える重い画像を配置するべきではない。(最初の印象を悪くしないこと。)

○音声・映像のファイル

筆者の経験では、例えばRealPlayer用のファイルだと、音声3分で約500KB、MPEGの映像20秒でも3MBを越えました。マルチメディアのファイルはそれだけ大きくなります。FTPによる転送時間も長く、見る側も聞く側も”待ち”を感じるようになります。さらに、プレイヤー(ソフト)、圧縮方式、設定回線速度の違いによりネットでの再生品質が極端に変化します。(途中で切れたり...) 慣れないうちにページに音声や画像の再生を組み込むのはできるだけ避けましょう。(組み込む場合は十分なテストを行ってください。)

●ユーザーの環境と制作環境
インターネットブラウザの種類はいくつもある。主流はインターネットエクスプローラとネットスケープナビゲータであるが、これらもさまざまなバージョンがある。最近は、タブブラウザも含めて多様化しつつある。Web制作者は、それらのサポートする機能の違い、さらにウインドウサイズの違いやフォントの違いなど、見え方に影響を与える要因について理解していなければならない。ビジネス用のWebや芸術作品などを掲示するWebなどは、特に表示の違いに注意しなければならない。また、制作者は自分が使用するビルダーやオーサリングツールについて、その特性や弱点も理解していなければならない。さらに、さまざまな環境でプレビューし、より広範な環境で違和感なく見えるよう調整しなければならない。
以下、具体的な要因を追求してみる。

○ブラウザの表示の相違

制作に使用するビルダーソフトの種類やバージョンにより、微妙なレイアウトのずれが起きることがある。これはブラウザ(IE、NNなど)によっても異なる。例えば、センタリングしていない文字や絵などは多くの場合ビルダーとブラウザーでは文字サイズや配置が異なる。(どうしても作成したとおりのイメージにならない、といった場合がある。) 余白の大きさも異なるので横一杯に使うと横全部を表示できない。ブラウザによってはサポートされない機能もある。(例:段組、ダイナミックフォントなど) また、頻繁にバージョンアップが行われ、その際必ず不具合が発生する。これも見え方の相違の原因となる。どのブラウザでも違和感なく見えるように制作するのは非常に難しい。

○ブラウザの機能制限

HTML、JAVAなどのインターネット技術はバージョンアップされ、ブラウザやビルダーは遅れてそれに対応する。さらに、各々のブラウザ独自の拡張も行われる。これにより、次のような機能で違いが発生する。

1.HTML:各タグのサポートレベルの違い
2.各ブラウザの独自機能
3.クリッカマブル:対応の有無
4.フレーム:対応の有無
5.CSS、DHTML、Javaアプレット:大変重く不具合も多い

○表示フォントサイズの相違

横サイズを固定した場合でも、Windows幅に応じてフレックスにする場合でも、ブラウザのフォント設定は、ページレイアウトに影響を与える重要な要因である。テンプレートやテーブルなどで横幅を固定すれば、当然1行に入る文字数はフォントサイズにより変わる。例えば、ユーザーがブラウザの文字サイズを1段階大きくしたら、「名前:■」という入力フィールドの「:■」が次の行に送られてしまう、といったレイアウトずれは、意外に多い。さらに同ページ上に、クリッカマブルに使用する画像化された文字と通常のテキストが混在すると、ブラウザのフォントサイズを変更してもテキストの部分しか反映されない。また、制作側がフォントサイズを絶対値(1,2など)で指定するか、相対値(+1,+2など)で指定するかによっても変わってくる。

フォントによる表示の相違を防ぐには、まず、CSS(スタイルシート)を定義してページ全体のフォントサイズを定義する。次に、ブラウザのフォントの種類とサイズをデフォルト値に設定して制作し、必ずブラウザの文字の大きさを+1、-1変更してプレビューし、レイアウトずれを確認修正するよう心がける。

○OSとモニターによる相違

同じブラウザで表示してもOSにより異なる場合が多い。OSが異なると使用するフォントも異なるのである。化けてしまう文字も多い。また、殊記号は文字化けの原因になるのでできるだけ使用しない。もちろんユーザー・フォントなど使用しないのが当然である。

さらに、 WindowsとMACのモニターはガンマ値が異なるとのことで、なんと画像の明るさやコントラストが違って見える。Windowsの方が暗く
コントラストが強めに見えるようである。このため、両方のモニターで違和感なく見えるように画像ファイルを適正化する必要がある。(フォトレタッチ・ソフトにはネット用に画像の色や解像度を最適化してくれる機能を持つものもある。)液晶ディスプレイではコントラストが強めに見える場合が多い。ユーザーの多くは一種類のモニターで見ているためこの違いに気がつかない。したがって、制作者がプレビューしてチェックしなければならない。

●モニター上の頁と印刷頁の相異

印刷される可能性の高いページは、あらかじめプレビューで確認し標準サイズの印刷頁に納まるよう、あるいは切りのよいところで改頁するようレイアウトしておくとよい。ブラウザの文字サイズや画像の配置によっても改ページ場所は違ってくる。ブラウザによっては、画像がページに入りきれないと改ページしてしまう。あまり縦長のページを作ると、どこで切れるか予測できなくなる。
また、濃色背景に白文字などのページはブラウザーの設定によっては印刷されないこともある。標準設定で内容がわかる程度に印刷されるよう配色にも注意する。(一般のユーザーは印刷してから気がつくことが多い。)ただ、横800ドットを基準に制作したページをA4に収めて印刷することは無理であろう。

●プログラム稼動環境

カウンターや掲示板などのCGI、SSIによるプログラミングは、初心者には決して簡単ではない。しかし、ネットの専門HPで公開されている著作権フリーのプログラムや雑誌に添付されているサンプル・プログラムの設定を数箇所変えただけで利用できる場合もある。無料でレンタルできるサイトもたくさんある。

まず、プロバイダがCGI、SSIを使える環境かどうか確認してください。(あらかじめ、カウンターや掲示板など、いくつかのメニューをすぐ使える形で準備しているプロバイダもある。) 利用可能であれば、次にその際の利用規定と制約事項をHPで調べよう。(使用できる容量、ディレクトリ名、Perlのバージョンとパス、TELNETの利用可否、呼び出し方法、など) サンプル・プログラムのデザイン次第では、ほとんど修正なしで稼動する場合もある。特に、注意すべき点は、動かない場合の問題判別が難しい、ということである。慣れないうちから欲張って、複雑なプログラムやシステムに影響を与える無限ループを伴うプログラムをアップし、他のユーザーやプロバイダにくれぐれも迷惑をかけないように注意しよう。(独自CGIを禁止しているプロバイダも多い。)

●著作権の知識

自分が制作した ページに他人の制作したコンテンツを掲示するには、当然制作者の許可が必要である。換言すると、ホームページを制作した時点でそのコンテンツには自動的に著作権が発生する。日本では、あなたの制作したコンテンツを、あなたの許可なくして他人が使用することはできない。

これは、ベルヌ条約に基ずく取り決めである。ベルヌ条約は、1886年にヨーロッパ諸国を中心に締結され、著作権の発生に特別な手続きを必要としない「無方式主義」を原則としている。ベルヌ条約の要約は次のとおりである。

  1. 内国民待遇
    同盟国が外国人の著作物を保護する場合に、自国民に与えている保護と同等以上の保護及び条約で定めている保護を与えねばならない。

  2. 法廷地法原則
    著作権の保護範囲及び救済方法については、条約の規定によるほか、保護が要求される国の法令による。

  3. 無方式主義
    著作権の享有には登録、作品の納入、著作権の表示などのいかなる方式も必要としない。

  4. 遡及効
    条約は、その発行前に創作された著作物であっても、発行時にその本国又は保護義務を負う国において保護期間の満了により公有となったものを除き、すべての著作物に適用される。

●宣伝方法(制作したホームページを見てもらうためには)

(お金をかけない効果的なプロモーション方法をご存知の方、教えてください。)
○連想しやすく、覚えやすい独自ドメインを取得する。
○プロバイダーが持っているメールリストなどで宣伝メールを送る。
○メールマガジンの発行。
○プロバイダーやNiftyなどの紹介掲示板にURLを掲載する。
○ サーチエンジン(YAHOO!等)に登録する。(なかなか登録してもらえない場合がある。キーワードを上手につければ検索でヒットする。) 
○他のホームページで紹介してもらう。(リンクを張ってもらう。)
○バナー広告(一般に高額)を掲載してもらう。
○ 業界誌に宣伝する。
○イエローページに登録する。など

★外注の考慮点

●業者選定の原則

日本のWeb制作会社は、デザイン会社、印刷会社、プロバイダ、広告会社、から個人のアルバイト、学生のビジネスなどさまざまである。米国ではナスダックに上場している制作のWeb専門会社もあり社会的な認識度が日本とは明らかに異なる。こうした専門会社は、コンサルティング、システム、デザインの役割分担が明確になっており、担当の各部門が連携して高度なサイトを制作する。日本では、このような制作会社はほとんどなく、担当者の考え方や能力に依存する部分が大きいため、特に注意すべきである。

まず、制作会社の制作したサイトを訪問し、デザインや使い勝手を評価してみよう。さらに、デザインコンセプトや特に力点をおいたことを説明してもらおう。できれば、その顧客の担当者を聞き出し実作業のなかでのトラブルや制作担当者の印象、できあがりの満足度、その後のフォロー状況などについて教えてもらうのがよい。実態は、見ると聞くとは大違いかもしれない。

●発注側の問題

ホームページを外注した結果、その多くが、こちらの意図と違う、業者がいいかげん、料金が高い、といった不満を抱く。ほとんどの場合、発注する際に仕様を確認しておらず、制作会社の担当者まかせなのである。特定のサイトを指定して「こんな感じで」というのも窮めて曖昧である。これでは、受ける側は、これ幸いと最も楽な作り方をしてしまう。(このような場合、本来は受けてはならない。)使いやすさや低料金を求めるのは当然だが、具体的に、どこまで、いくらで制作して欲しいのかをきっちりと文書化して、双方で合意の上に制作を開始するべきである。

このために、こちらで提供するコンテンツ(テキスト、写真など)と制作してもらうコンテンツが具体的になっている必要がある。つまり、発注側でサイトのイメージやデザインイメージができていなければならないのである。業者任せにしておくとワープロ文書程度のできあがりにしかならないのを覚悟しておこくべきであり、できあがりに不満があっても、それを非難することはできない。業者をコントロールするのは、発注側の責任なのである。
●制作側の問題
制作する業者も仕様が曖昧なオーダーは受けてはならない。これは、後々トラブルの元になり、「金返せ」の訴訟に発展することがある。特に見積もりの段階で、顧客が無知であることを幸いに、明細のない見積書1枚で受注してしまうケースが多い。たとえば、CGIを使用した複雑なプログラミング、JAVAコードの追加、画像の作成などが含まれると、料金は一変する。そのようなオプションを使用するのであれば、それらがいくらなのかを明確に顧客に提示しなければならない。使用する部品についても、ロゴ、バナー、見出し、イラストなど、数量と単価を可能な限り詳細に見積ることが重要である。こうすることで、トラブルを回避できることが多いし、追加があった場合に、追加料金がこれだけになるということを説明する材料にもなる。

コンテンツを決定するのは発注者であり、デザインやHTMLなどのコード作成は制作者であるという業務分担について、両者共きちんと認識しておかなければならない。

★ホームページ制作の心得

●わかりやすとシンプルさ

コンテンツのネーミングが一般的でわかりやすい。中身が推測できる。最初のインデックスページでサイトの内容がわかる。意味の無い導入ページなどは必要ない。

●短めのコンテンツ

HPの一覧性は書籍に劣る。1ページが長過ぎると、表示時間も長くなり、スクロール作業も多くなる。検索もし難い。

●検索性の向上

検索できて当然のものが検索できないと印象が悪い。特に、データベースサイトは検索性の高さが重要。

●丁寧な解説

マニアックなサイトでも汎用性の高いサイトでも、はじめて見る人のために解説を付ける。ただし、中途半端な解説文を随所に網羅すると見難くなる。

●訪問者の意思を尊重

訪問者に主導権を持たせ、コントロールしない。勝手にリンクに飛ばない。ウインドウを開かない。

●タイムリーな更新

更新が頻繁。定期更新がある。更新していることが「What’s New」などでわかる。

●正確な予告

予定が狂ったときリピータが減少するので、確実でない予告はしない。逆に更新を予定している場合は、事前に宣伝した方が効果がある。

●正確なリンク

リンクが必ず全部つながっており、必要な場所にある。リンク先が生きているか定期的にチェックする。

●より高いコミュニティ性

コミュニティ性が高く開かれている。メーリングリストや掲示板で訪問者間のつながりが強くなる。ただし、サイト側からの、あまりに意図的なメーリングリスト等による勧誘・宣伝は避ける。

●完全性の追求

「工事中」「改装中」「準備中」のページを作らない。「未完成」の印象を与えない。