「良いホームページの条件」とは? (4)ページの見えない中身

このブログでは、ここ数回、「良いホームページ(Webサイト)とは、どういうものか」についてお伝えしています。

• (1) Webのはじまり
• (2) ページの目的
• (3) ページの見た目

私がどのような事を意識してWebを作成しているか、ご自身でページを作成している方にも参考になる情報をお伝えできればと思います。

さて今回は、「ページの見えない中身」についてお伝えします。

Webページの中身「タグ」と「W3C」

Webのページの中身は「HyperText Markup Language」略してHTMLと呼ばれる言語で記述されています。

(1) Webのはじまりで触れたように、もともとWebは論文などの文章を共有する事が目的でした。なのでHTMLは当初、色や配置などは二の次で、タイトル、章、項、節と本文、箇条書きやリンクなどを記述する事ができるよう設計されました。

これらの構造は「タグ」というもので指定する仕組みになっていますが、その後、画像も文書中に表示可能となるよう拡張したNCSA Mosaicが普及したのを皮切りに、各Webブラウザ開発者が機能の追加に合わせて独自のタグを拡張するようになっていきました。（ちなみに私が初めて見たWebブラウザもNCSA Mossaicで、Sunのマシンの上で動いていました。20年近く前の事です。）

独自のタグが増えるとページを作成するのが大変になってしまうので、Webの生みの親であるティム・バーナーズ＝リーが中心となってWorld Wide Web Consortium(W3C)という団体を立ち上げて規格を共通化するようになりました。

W3Cが定めた規格どおりページが記述されているかどうかは、The W3C Markup Validation Serviceのページで確認することが出来ます。このブログはBloggerのシステムを使っているので対応できませんが、自分でサイトを作るときは可能な限り対応するようにしています。W3Cの規格に合わせつつTwitterやFacebookへ対応するのはひと手間かかるので、他社できちんと対応できているページは少ないと思います。

規格に従うメリットは?

• 様々な端末やブラウザ、多くのユーザーへの対応

  HTMLファイルを表示するプログラム「ブラウザ」はなるべく規格に従うように設計されています。ページのデータがきちんと規格に従っていないと、自分のコンピューターでは普通に表示されていても、別の環境では表示が崩れる事があります。また前回の記事の最後、音声合成機能で文章を読み上げる「音声ブラウザ」という機能について触れましたが、規格に従ったページにすることで適切に読み上げる事が可能になります。

• 検索エンジンへの対応

  人間はレイアウトで文章の構造を認識しますが、コンピューターはタグを手掛かりにします。表示する際のレイアウトも、タグを手掛かりに決めていきます。ページ内に適切にタグを使う事で、検索エンジンも目次や次に読むべきページなどのページの構造を正しく認識するようになります。

• 通信量の最適化

  適切に規格に従うと「文章の構造」と「見た目の定義」を分けることが出来ます。この見た目の定義にはCascading Style Sheets(CSS)という仕組みを使うのですが、これを上手く使うとサイト内のページを連続して表示する際に「見た目の定義データ」は最初に1回送信するだけで済み、わずかながら転送量を節約できます。「チリも積もれば」で、特に大規模なサイトでは大幅なデータ量を節約できることになります。

古いブラウザの問題点とは?

残念ながら、古いブラウザでは規格で意図されている通りに動作しない事があります。

特にInternet Explorer 6 (IE6)は登場から10年も経っており非常に古く、特にCSSについて問題を多発するので、多くのWeb製作者は他と別扱いで時間をかけて作成しています。

IEはその後 7, 8, 9 と新しいバージョンが登場しており、その都度、さらに適切に規格に従うように改良されていますが、それでもまだまだ古いIE6を使っている方が多く居ます。マイクロソフト社もIE6の利用を止めるように、わざわざInternet Explorer 6 Countdownというサイトを用意していますが、今日の時点でも、日本でもまだ6%以上の方が残っていますね。「更新を促すメッセージが出ているけど、よく分からないので現状維持」としてしまう方も多い模様です。

そこで、Internet Explorer 9 の自動更新による配布という記事の通り、6月からInternet Explorerの自動配布が行われる予定となっています。古いIEは規格に従っていないだけでなく、表示速度も遅く、セキュリティ上も問題を生じやすいので、特別な理由がない限りは更新した方が良いでしょう。以前はかながわ電子入札共同システムなど古いIEでないと問題を生じるページが多々ありましたが、IE9対応のページが増えつつある模様です。

ともあれ、「良いページ」はブラウザの新旧を問わずなるべく様々な環境で見れられるよう工夫していますが、これもお客様からは見えにくい部分となっていますね。

[神奈川県秦野市のIT訪問サービス/ホームページ作成/ソフトウェア開発] 有限会社アイエヌシーhttp://www.incinc.jp/

「良いホームページの条件」とは? (3)ページの見た目

前々回から「良いホームページ(Webサイト)とは、どういうものか」についてお伝えしています。前回は「ページの目的」についてお伝えしました。

私がどのような事を意識してWebを作成しているか、ご自身でページを作成している方にも参考になる情報をお伝えできればと思います。

さて今回は、「ページの見た目」についてお伝えします。

デザイン＝装飾?

「デザイン」という言葉を聞いて「どう装飾するか」だと思う方もいらっしゃるかも知れません。

実際は、それだけではありません。

• 雑誌や新聞の場合

  通常は「ぱっと見」で大体の内容を理解できると思います。これは「見出しと本文、写真」が適切に配置されているためです。

• 道路標識の場合

  特に高速道路などでは、サービスエリアでどんな施設があるのか、どちらに行ったら良いのか、などを瞬時に伝える必要があります。

ホームページの場合も同様で「どこをクリックしたら欲しい情報が得られるのか」「そもそもクリックできる所はどこなのか」等々、ぱっと見て分かる必要があります。

そのために、適切にお客様の目を誘導する目的で装飾が必要になるわけですね。

お客様と、見た目の方向性

ページのデザインは、見て下さるお客様を想定して下の要素を合わせていく必要があるでしょう。

• ページの雰囲気

  例えば有名ブランドショップのような綺麗で落ち着いた感じか、あるいはスーパーやディスカウントショップのような勢いのある感じか、などを検討します。前者であれば余白を多めに、上品さを感じられるフォントで同系色での微妙な違いを使う、等となります。後者であれば太いフォントに原色を多めに使う、等ですね。

• 文章と写真

  情報量がある感じにしたいのか、雰囲気を伝えたいのか、等ですね。前者なら文字の配分を多めに、後者なら写真を効果的に配置する、等です。

• 文字のサイズ

  お歳を召した方の多くは、細かい文字を読むのが苦手です。ですので、そのような読者が想定される場合は文字を大きめにしておいた方が良いでしょう。あるいはブラウザの設定で文字サイズを大きめに指定しているケースがありますが、その場合も表示が崩れないよう工夫が必要です。

配色

色にはイメージがあるので、雰囲気を伝える上で大切な要素になってきます。

上でも少し触れましたが、私の場合は基本的にはお客様の要望する雰囲気やコーポレートカラーを意識して決めています。

また同じ色の組み合わせでも、使う面積の比率でニュアンスが変わるので、ページ内の情報の面積の比率にも注意していきます。また、面積が広ければ少しの色の違いでも簡単に気づきますが、文字など細かい部分ではコントラストをしっかり確保すると読みやすくなります。

そして、Webは誰がアクセスするのか分からないので、色覚障がいの者ある方も情報を把握できるような配色だと良いでしょう。これはColorblind Web Page Filterで簡単にチェックできます。このサイトは日本語が化けてしまう問題がありますが、配色の確認という意味では十分だと思います。

見た目を整える方法や配色については、ノンデザイナーズ・デザインブックという本が非常にお勧めです。ウェブサイトだけでなく、印刷物を作るときにもきっと役に立つでしょう。

さらに多様なアクセスに対応するには

さらには視覚の障がいのため、音声合成機能で文章を読み上げる「音声ブラウザ」という機能を使用している方もいらっしゃいます。そのようなケースに適切に対応するためにも、ページの見えない部分の構造にも注意すると良いでしょう。

という所で、次回は「ページの見えない中身」についてお伝えしたいと思います。

[神奈川県秦野市のIT訪問サービス/ホームページ作成/ソフトウェア開発] 有限会社アイエヌシーhttp://www.incinc.jp/

「良いホームページの条件」とは? (2)ページの目的

前回から「良いホームページ(Webサイト)とは、どういうものか」についてお伝えしています。

私がどのような事を意識してWebを作成しているか、ご自身でページを作成している方にも参考になる情報をお伝えできればと思います。

さて今回は、「ページの目的」についてお伝えします。

そのページの目的は?

効果的なWebページやブログを作るには、まず「このページの目的は何か」をきちんと考えておく事が大切です。

10年前であれば「個人や家族のページ」を作る方も多かったと思いますが、今ならFacebook、mixiのようなSNSや、Twitterでなどを使うと良いでしょう。これらは面倒なツールを使わなくとも簡単に記事を投稿できるのが魅力です。

それらと別にページを作るケースは「ご商売をされている方や、何かの団体を運営されている方が、PR目的で作成する」場合が大半だろうと思います。

という事で、ここでは「商品のPRが目的」という前提とします。

もちろん中には「自分の名刺にアドレスを入れたいから」という方もいるかも知れません。「ページはあって当たり前、無いと恥ずかしい」という気がするのは分かります。Webサイトとメールアドレスのドメインが統一されると確かに「しっかりした会社」という印象を与える事も出来ますね。

しかし、それだけでは非常にもったいないです。むしろ内容の乏しい、あるいは雑な作りのページを公開した場合、マイナスのイメージを周囲に与えかねません。

ちなみにこのブログ自体も、中小企業や個人事業主の方を主な読者として想定しています。

想定した相手によって文章も変わるでしょうし、伝える内容や表現も違ってきますね。

自分の会社名で検索したとき、どんなページが表示されますか?

さてでは「自分の会社やサービス」について検索してみたことはあるでしょうか?

自分のページやブログを持っていない場合、マピオン電話帳などがヒットするケースも多いと思います。会社の所在地や連絡先等を伝えるだけなら、それでも「無いよりはマシ」と言えるかも知れません。

しかしこれでは他社と違う点は分かりません。売り上げに結び付ける事は難しいでしょう。

では「誰」に「何」を伝えれば良いでしょうか?

もちろん、お客様が購入の参考になる情報を伝えると良いわけですね。

会社所在地など必要な情報の他に、他社と違う点を発信するページにしていくと良いわけです。

例えば具体的には、下のようなポイントを押さえると良いでしょう。とはいえ、この部分だけでも本が1冊書けるほどボリュームがある内容なので、かなり端折ってお伝えしています。

• お客様から見た時のメリットが分かりやすい。

  商品の情報・諸元を単に羅列するのではなく、どんなメリットがあるのか分かるように伝えると良いでしょう。

• ページの雰囲気を整える。

  取引相手が主に企業の場合は「固め」にしておいた方が良いでしょうし、個人であれば柔らかい楽しい感じが良いかもしれません。そしてどちらの場合でも、会社や代表の人柄などを伝えるため、代表者や社屋、代表的な商品の写真などがあると良いでしょう。

• これまでの実績が分かる。

  過去に扱ってきた商品や会社の歴史などが分かるような仕組みがあると、なお良いでしょう。TVの通販番組などでも良くありますが、他のお客様の感想なども有効です。

• 時々は更新する。

  せっかくページを見たのに更新されていなければ、がっかりしてしまいます。定期的に更新して最新情報を得られるようにする事も大切です。

もちろんこれらは、読むのがどのような方なのかを考慮しておくと良いですね。

さらにページを見てもらうには?

せっかく良い内容のページが出来ても、まったく見てもらえないのでは意味がありません。

そこで、ページを見てもらうための工夫も大切になってきます。

例えばこんなところですね。

• GoogleやYahoo!の検索連動広告を設定する。
• 実際の店舗や紙媒体など、ネット以外でもきちんとPRする。
• Twitter,Facebookなどと連動する。
• 他のサイトからリンクしてもらう。

さて次回は、「ページの見た目」についてお伝えしたいと思います。

[神奈川県秦野市のIT訪問サービス/ホームページ作成/ソフトウェア開発] 有限会社アイエヌシーhttp://www.incinc.jp/

「良いホームページの条件」とは? (1)

久々のブログ更新ですが、今回から数回に渡って「良いホームページ(Webサイト)とは、どういうものか」についてお伝えしたいと思います。

内容は下を予定しています。

• ページの目的
• ページの見た目
• ページの見えない中身

私がどのような事を意識してWebを作成しているか、あるいはご自身でページを作成している方にも参考になる情報をお伝えできればと思います。

そもそも「Web」は、どんな目的で作られたもの?

本題に入る前に、今回はちょっとした「うんちく」を。

World Wide Webという言い方は耳慣れないかも知れませんが、皆さんが毎日のように使っている「ホームページ」のシステムの昔ながらの呼び方です。長いので書くときは頭文字を取って「WWW」と略したり、最後だけ取って「Web」と呼んだりします。私は「Web」と読み書きすることが多いです。ともあれ、Webがあるおかげで、このブログもこうして皆さんが目にしているわけですね。

さてでは、このWebという仕組みは、どういう経緯で開発されたのでしょうか?

ご存知の方も多いでしょうが、簡単にご紹介します。

スイスとフランスの国境にまたがって、LHCという全周27kmもある巨大な素粒子の実験施設があります。これを管理・運営しているCERN(欧州原子核研究機構)では、実験に関する情報を世界各地の研究者が検索、閲覧できるシステムを必要としていました。

そこでCERNの研究者ティム・バーナーズ＝リーがこの問題に取り組み、1990年のクリスマス休暇の間に世界最初のWebブラウザ/エディタWorldWideWebを作成しました。

1991年8月6日、このシステムに関する要約がNetNewsというインターネットを利用した情報交換の場に投稿されました。この日がWebが世の中にデビューした日とされています。

こうしてみると、Webには最初から「情報を伝える」という目的があったわけですね。

ちなみに上の通り、Webがデビューした時には既にコンピューター同士で情報を交換するための「インターネット」の仕組みは出来ていました。Webはそのインターネットの上に成立したと言えるわけですね。

さらに余談ですが、今でもWebの事を「インターネット」と呼ぶ方も時々いらっしゃって、何の事を指しているのか、こちらとしては注意深くお話を伺う必要があったりします。

[神奈川県秦野市のIT訪問サービス/ホームページ作成/ソフトウェア開発] 有限会社アイエヌシーhttp://www.incinc.jp/