- 目次 -
Q.【初めてのホームページ】デザインが他のパソコンで見ると崩れてしまいます、何故ですか？
ホームページを立ち上げたのですが、友人から「デザインが崩れているよ」と指摘されました。
私のパソコンでは問題なく見えているのですが、なぜそうなってしまうのでしょうか？
A.回答
これを説明するのは少し難しいのですが、ちょっと乱暴に説明すると、ホームページが表示される仕組みは、組立家具を作成するような作業なのです。
ホームセンターで組立家具を購入すると、家具の部品と、作成のための説明書がついてきます。
そして、説明書を解読しながら何とか家具を組み立てることになります。
ホームページも同じで、公開すると、各パソコンが「説明書」を見ながら家具を組み立てる、というような仕組みで表示をしているのです。
「HTML」という言葉を聞いたことがあるでしょうか？
これは、ホームページ専用の「プログラミング言語」です。
ホームページは、この特殊な「言語」を使って、言わば「説明書」を作成する作業なのですが、その「言語」つまり「説明書」の解釈が、ホームページを表示する「ソフト」ごとに、少しずつ異なっているのです。
そのため、異なる「ソフト」を使っている人が見た時に「デザインが崩れている」ということになるのです。
皆さんも、組立家具の説明書が分からず、うまく組立られなかったという事はありませんか？
■ホームページの表示には、色々な種類のソフトがある
ホームページを表示するソフトは「ブラウザ」と言います。
そして、この「ブラウザ」には、色々な種類があります。
「Windows」のパソコンをお使いの方であれば、あまり意識することなく、IE(Internet Explorer)と呼ばれる「ブラウザ」を使っている方が多いでしょう。
何のことやら分からない、という方は、あなたが普段、インターネットを立ち上げる時にクリックしているアイコン（マークのようなもの）を、確認してみてください。
アルファベットの「e」のようなマークであれば、それが「IE」というソフトなのです。
しかし、世の中には「FireFox」「Safari」「Opera」「Chrome」といった、「IE」ではない、さまざまな「ブラウザ」を利用している人がいるのです。
また、パソコンも「Windows」ではなく「Mac」を使っている方の場合には、「IE」「FireFox」「Safari」といった同じ種類の「ブラウザ」を使っていても、見え方がかなり変わってきてしまうのです。
さらに面倒なことには、それぞれの「ブラウザ」には「バージョン」というものもあり「IE」は、2010年1月現在、最新バージョンは「Ver.8」です。
もちろん、このような「バージョン」を最新版にいちいち更新をしていない人もたくさんいますから「Ver.7」「Ver.6」あるいは未だに「Ver.5」を使っている方もいます。
やっかいなのは、この「バージョン」が異なると、同じ「ブラウザ」であるにも関わらず、これまた見え方が違ってくる、ということなのです。
もはやこうなってくると、全く同じ条件でホームページを見ている確率の方が低い、と言えるほどなのです。
■ ホームページ上で、コンテンツを表示する方法
ではここで、先ほど触れた「プログラミング言語」である「HTML」がどのようなものか、実際に見てみましょう。
まず、お使いの「IE」や「FireFox」と言った、インターネットの「ブラウザ」を、立ち上げてみてください。
次に、最上部にある「メニューバー」から「ソース」を表示してください。
※「IE」なら「ページ」という項目から「ソースの表示」を選んでください。
「FireFox」なら「表示」という項目から「ページのソース」です。
すると、まるでなにかエラーかのような、アルファベットがたくさん並んだページが表示されたと思います。
これが「HTML」といわれる「プログラミング言語」です。
そして、この大量のアルファベットこそが、いわゆる「説明書」なのです。
「このページの文字の大きさは14ポイントにしなさい」「ここに、この写真を入れなさい」とか「この文字を赤い色にしなさい」などの指示が、特殊な文字によって書かれているのです。
これらの指示の解釈が「ブラウザ」や「バージョン」によって異なるために、デザインが崩れたりしてしまうのです。
では、その崩れを防止する方法は、全くないのでしょうか？
実はそれには、いくつかの方法があります。
１つ目は、やや非現実的ですが「全部画像にしてしまう」という方法です。
例えば、いくらホームページのレイアウトが崩れてしまっていたとしても、ホームページにアップされた「写真（画像）」は、そのカタチが変形していたり、絵柄が変わってしまう、なんて言うことはありませんよね？
つまり「画像」にしてしまえば、デザインが崩れることは無いのです。
ですから、画面全体を、１つの画像（写真のような状態）として作り上げてしまって、ペタっと貼付けておく、という方法があることはあるのです。
しかし、そうすると、確かにどの「ブラウザ」でも同じように見ることができますが、ホームページ全体が重くなったり、動きが鈍くなったり、個別のボタンやテキストにリンクを貼ったりすることができなかったり、ましてや、どこか一カ所を書き換えるといった対応もできません。
さらに、細かい話をすれば「Yahoo」や「Google」などの「検索」サイトの検索は、「HTML」のテキストを読み込んでいますので、「画像」にした時点で、「検索」に引っかからなくなってきてしまいます。
■ プロに頼むメリット
それではいったいどうしたら良いのでしょう。
なんだか、皆さんを絶望させてしまいそうなお話が続きましたが、デザインの崩れを防止する、２つ目の、そして、とっておきの方法を、ここでご説明いたしましょう。
それはプロに頼む、という方法です。
皆さんがよくご覧になるホームページには、どんなものがあるでしょうか？
例えば「Yahoo」や「Google」なら、どんな方でも、一度くらいは利用されたことがあるのではないでしょうか？
例えばこの「Yahoo」や「Google」は、非常にたくさんの方が利用していますから、あらゆる「ブラウザ」で利用されることを前提として、作られています。
つまり、よほどのものでない限り、どんな「ブラウザ」で見ても、同じようなデザインとして見ることができるように設定されているのです。
これ、どんな仕掛けになっているのでしょう？
実はこれ、画期的な仕掛けがあるのではありません。
専門の技術者が、どの「ブラウザ」でも同じように見られるように、ただひたすら地道に、細かい調整作業を積み重ねてくれているおかげなのです。
Web業界では「ブラウザチェック」といって、一度作成したホームページを、複数の「ブラウザ」で問題がないかどうかをチェックする作業が存在するのです。
それなりの値段の業者は、レベルの高い技術者がいますので、どの「ブラウザ」でもしっかり見えるよう「ブラウザチェック」をした上で、納品をしてくれます。
しかし価格が安い業者の場合、レベルの低い技術者を使っている可能性が高く、１～２種類程度の「ブラウザ」でしか「チェック」せずに納品したりします。
そうすると、せっかく業者に頼んだにも関わらず、「チェック」していない「ブラウザ」では、デザインがガタガタになってしまう、なんてことがあるのです。
同じように見える「ホームページ」の制作でも、制作会社によって、値段が高い、安いという違いがある場合、こういった要素が絡んでいることも、あるので、ぜひここは気をつけていただきたいポイントです。
ちなみに、これはプロでもそれなりに苦労する作業ですので、多少の知識がある、ましてや素人レベルでは、とうてい無理な作業です。
私も以前、技術者に頼まずに自分で試みたことがありましたが、それなりにホームページに精通した私でさえ、あっちを直せばこっちが崩れる、といったことの繰り返しで、全くお手上げでした。
ところで「ホームページ」の「デザイン」は、個人の趣味で運営しているうちは良いのですが、企業の「自社サイト」となると、崩れてガタガタだったりすると、信用度にも影響してきます。
本来の業務の実力には何の関係もないはずですが、会社案内のデザインがいい加減だと、不信感を抱いてしまうのと同じで「この企業大丈夫なのかな？」と思われてしまうのです。
例えば、この文章で初めて「FireFox」という「ブラウザ」の名前を聞いた方もいるかもしれません。
しかし全世界において「FreiFox」は「ブラウザ」の30％のシェアを握っているのです。
もし、あなたのホームページが「IE」ではうまく表示されるのに「FireFox」では崩れてしまう、というような場合には、あなたのホームページを訪れた人のうちの30％が、あなたの会社に不信感を抱く可能性がある、ということなのです。
また、最初にも説明をしたように、いったん大丈夫だった「ブラウザ」でも、新しい「バージョン」が主流になってくると、その「ブラウザ」で崩れないかどうかのチェックが必要になってきます。
すべての「ブラウザ」で常にキレイに見えるようにするには、実は、とても手間もお金もかかるのものなのです。
とはいえ、せっかく公開したホームページが、不信感をかってしまうようなサイトでは意味がありませんよね。
ホームページの制作発注をかける際、その辺のことも踏まえて、ホームページ制作会社の値段比較や、会社選択を行うことをお勧めいたします。
＊～＊～＊～＊～＊～＊～＊～＊～＊～＊～＊～＊～＊～＊～＊～＊～＊～＊～＊～＊～＊～＊
ドリームゲートアドバイザー 大槻貴志
企画経営アカデミー：http://www.kikaku-keiei.com
◇各種セミナー 開催中！◇
１週間で会社を作ろう！「会社設立実践セミナー」
起業にかかるお金ってどのくらい？「開業資金計算セミナー」
ホームページ開設にかかるお金ってどのくらい？「Webに関わるお金を徹底解説セミナー」
＊～＊～＊～＊～＊～＊～＊～＊～＊～＊～＊～＊～＊～＊～＊～＊～＊～＊～＊～＊～＊～＊
