「良いホームページの条件」とは? (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/

インターネットで災害に備えるには (3)情報収集

もうすぐ東日本大震災から1年という事で、「インターネットで災害に備える方法」について特集しています。

前々回はインターネットラジオ、前回はSkypeなどのIP電話についてお伝えしました。

いずれも普段からも使えて便利ですね。なお前回の中で「LINE」のWindows版、Mac版が出ましたので若干追記しています。ただし現状では、スマートフォン版を使っている必要があると言う事のようですね。

この震災では携帯電話、固定電話はほとんど通じず、パソコンでのメール、そしてTwitterやSNSなどで連絡を取るのが有効だった、という事は「東日本大震災で有効だった通信手段とは？」として以前にメールマガジンでもお送りした通りです。

さて今回は、災害時にネットで情報収集する方法について簡単にまとめます。

ネットで情報を得るには?

• TwitterやFacebook、mixi等をチェックする
  

  自分や周囲の状況の発信や、家族や友人の安否の確認に使うことが出来ます。

  友人が情報の発信源となる手段、ページを教えてくれる事もあります。

  なので、普段から使い方を把握しておく事も大切ですね。

• Twitterで、総務省消防庁 (fdma_japan) などをフォローしておく
  

  平時は消防庁の報道発表に関する情報が中心のアカウントですが、大規模災害時には都度、正確な情報を発信してくれます。

  他にも、神奈川県庁広報課 (kanagawapref_pr)や秦野市危機管理対策 (hadanokikikanri)のような、地元の都道府県、市町村の公式アカウントをフォローしておくと良いでしょう。

• Yahoo!やGoogleなど大手サイトの特設ページをチェックする
  

  Google Person Finder(現在は運用終了)など、特設ページが設けられることがあります。

災害時に怖いのは、根拠のない偽情報、デマなどです。

チェーンメール等で、終了した情報が広まり続けてしまう事もあります。

それに加担しないために、元の情報源、いつの情報か、などが分かるように伝えたいですね。

地震の速報を知るには?

緊急地震速報は、地震の発生直後に震源に近い地震計でとらえた観測データを解析して、地震の規模を推定し、各地の到達時間や震度を予測し伝える警報です。（気象庁 緊急地震速報とはより）

この情報を元に、交通機関では電車のスピードを落とす、信号を切り替える等の警戒が行われます。家庭でも、まずは火を消す、安全確保する、などの行動が求められます。

より詳しくは気象庁の「緊急地震速報について」をご覧ください。

緊急地震速報の入手方法について、気象庁の「緊急地震速報の入手方法について」というページから引用します。

• テレビやラジオによる放送

  一定の強度以上の地震が発生した場合に速報が流れます。

• 防災行政無線による放送

  各市町村で、一斉放送する場合があります。

• 携帯電話

  通信会社大手三社では、docomoの緊急速報「エリアメール」、 auの緊急地震速報、 Softbankの緊急速報メールと、それぞれ説明されています。

緊急地震速報を知る他の方法は?

下の方法があります。

• iOSの場合：ゆれくるコールを使う
  

  iPhoneなどのiOSで緊急地震速報を表示してくれるアプリです。

  「指定した場所で一定以上の震度の場合に通知する」と設定できます。私も使っています。

• Androidの場合：なまず速報 βを使う
  

  Androidの場合にはこちらのアプリが多く使われている模様です。

  他にAndroid版のゆれくるコールもあります。

  （3月9日追記：「防災速報」Android端末にプッシュ通知、ヤフーが10万人規模でアプリ試験 -INTERNET Watchというニュースもあります。

• Twitterの場合：earthquake_jpをフォローする
  

  地震発生後の速報情報を投稿しているアカウントです。地震の発生場所、時刻などを知ることが出来ます。詳しくはearthquake_jp 運用情報をご覧ください。

  他にも、緊急地震速報の第一報のみを通知するeew_jpなどもあります。

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

インターネットで災害に備えるには (2)IP電話

もうすぐ東日本大震災から1年という事で、「インターネットで災害に備える方法」について特集しています。

前々回はインターネットラジオについてお伝えしました。

十分な速度の回線と電源がある場合、電波が入りにくい場所、室内でもラジオをクリアな音質で楽しめるので、普段からも使えて便利ですね。

さて今回は、インターネット経由で音声を伝える方法についてお伝えします。

この震災では携帯電話、固定電話はほとんど通じず、パソコンでのメール、そしてTwitterやSNSなどで連絡を取るのが有効だった、という事は「東日本大震災で有効だった通信手段とは？」として以前にメールマガジンでもお送りした通りです。

緊急時には、より情報の量が少なくて済む文字の方が音声よりも確実なのですね。

とはいえ、やはり「声を確認したい」という気持ちもよく分かります。

そこでインターネット経由で音声通話する方法について、平時から慣れておくと良いのではないでしょうか。

メリット・デメリットは?

これらのサービスのメリットは次のようなところですね。

• 通話は無料もしくは非常に低料金です。
• 海外の人とも無料で通話できます。

問題点は、データが大量となる事です。

このためDoCoMoのFOMAでは規制されて利用できないケースがある、あるいは他の回線でも携帯電話の回線では安定した通話は難しい事があります。

なので、スマートフォンの場合は無線LANが入るところで利用するのが良いでしょう。

どんなサービスがおすすめですか?

私としては一番のおすすめは今の所、利用者の多いSkype、ついでSkypeに無い機能を備えたViber、という所です。

それぞれのサービスの特徴は?

• Skype
  

  インターネットでの音声通話での最大手です。

  WindowsやMacだけでなく、現在はauの携帯電話でも利用可能ですし、スマートフォン用のアプリケーションも用意されています。

  Skype同士の通話は無料の上、有料オプションで固定電話からの着信、あるいは各国の固定電話への発信も可能です。

  映像つきの会話も無料です。Skypeのために、カメラやマイクを内蔵しているパソコンを選択するのも良いでしょう。iPhone4ではフロントカメラももちろん利用できます。

  欠点は「使う前に、お互いがソフトを立ち上げておく必要がある」事ですね。事前に通話する時間を決めておくと良いでしょう。

  Skypeのビジネスモデルでは、有料オプションが収益源となっていますね。安心して使うためには、ビジネスとして継続可能か、という点も見逃せないですね。

• Viber
  

  「スマートフォンが電源オフの状態でも着信通知」してくれる機能を備えている事が特徴です。

  このため、通常の電話と遜色なく使う事ができます。

  また、スマートフォンの連絡先の中から、Viber を利用している人を自動的にピックアップしてくれる点も非常に便利です。

  「電話する際、可能な相手にはViberで」とすると電話代の節約になるでしょう。

  欠点は、iPhoneまたはAndroid用という事で、WindowsやMac用のソフトが無いという事ですね。

  Viberの場合はビジネスモデルは特に無く、これから収益方法を考えるという事だそうです。

• LINE
  

  一時期テレビや雑誌などで大々的に宣伝していたソフトです。そのせいでダウンロード数も相当な数になっているとの事。

  元々は装飾付きで文字メッセージを送る機能がメインで、この機能はスマートフォンではない携帯電話で利用が出来るとの事です。

  パソコン版の音声通話機能ソフトも開発中との事。(3月7日追記：Windows版、Mac版も追加されました。ただし現在の所、登録にはスマートフォン版で登録しておく必要があるそうです)

  ‥‥なのですが、大変恐縮な事に、私の周りで使っている人が居ないため、私もほとんど試せていません。

  LINEはNAVERという韓国企業が作成しています。オンラインゲーム等で有名な会社ですね。こちらもビジネスモデルはこれからの模様です。

• FaceTime

  MacやiPhoneが相手なら、FaceTimeでビデオ通話が可能です。

  メリットは最近のiOSに最初から搭載されていて、起動が比較的簡単な事でしょう。

  欠点は、WindowsやAndroidと通話できない事、Mac OS版は有償という事ですね。

• Google Talk

  Google Talkは、Gmailの画面上で相手とメッセージを送るものでしたが、後付けの「プラグイン」を利用することで音声通話も可能になっています。

  Windows、Mac、Linux、一部のAndoroid端末と、iPhoneのTalkatoneで使うことが出来ます。

  欠点は、やはりユーザーが少ない事ですね。

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

Windows Vista/7のサポート期間が延長されました

前回「ネットを使った情報交換についてお伝えします」としてインターネットラジオの件を取り上げたのですが、今朝米MSが個人向けVistaのサポート打ち切りを撤回、2017年まで延長という大ニュースが飛び込んできたのでお伝えします。

このブログでもWindows7を買う場合の注意点は?として家庭用Windowsと仕事用Windowsでサポート期間が異なる事をお伝えしてきましたが、今回、Windows Vista/7 ともにサポート期間がすべて共通になったわけですね。

これまでサポート期間について真面目に考慮していた方にとっては、あまり嬉しくないかも知れません。

既に Windows Vista から Windows7 に移行済みだったり、購入時もやや割高の仕事用のEditionにしていたり、コストを支払っているわけですので、割を食ってしまった感がありますね。ちょっと納得しかねますね。

その一方で、様々な理由でVistaから移行しにくかった方には朗報です。

サポート期間が終わると怖くて使えませんが、一般のユーザーにこのような認識が広まっているとはとても言えない状況です。サポートが終了しても使い続ける方が続出するのは想像に難くないので、その点は歓迎すべき事かも知れません。

ともあれ、せっかくサポート期間が延びたのですから、今後もきちんとアップデートは欠かさないようにする事をお勧めいたします。

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