ホームページ更新時に重宝しそうな、5つのチェックポイント

冬期休暇を目前にして、自社内でのサイト更新や趣味のサイトのヴォリュームアップ等をご計画の方がいらっしゃるかもしれません。
自らの経験を交え、ホームページ更新時のチェックポイントを挙げていきたいと思います。

1.データをアップロードしたのに、更新されていない。
まず、ブラウザの履歴を削除し、キャッシュ(インターネット一時ファイル)をクリアした後に再読み込みを試みてください。

■履歴とキャッシュの削除について
・インターネットエキスプローラーの場合 … メニューバーの「ツール」内に「閲覧の履歴の削除」があります。
各ヴァージョンの操作手順につきましては、Microsoft社のサポートページをご覧ください。
http://support.microsoft.com/kb/2539129/ja

2.versionの異なるインターネットエキスプローラーで確認したらレイアウトがずれてしまう。

通常、インターネットエキスプローラー(IE)をアップグレードしましたら、下位ヴァージョンのインターネットエキスプローラーは利用できなくなってしまいます。
しかし、下記サイトのIETesterなら、それぞれのヴァージョン毎に動作確認が取られます。

http://www.my-debugbar.com/wiki/IETester/HomePage

IETesterが上手くインストール出来ない場合には、少々時間が掛かりますが下記サイトでも各ヴァージョンでの見え方が確認可能です。

http://netrenderer.com/
※IE NetRendererさんのサイトです。プルダウンメニューからヴァージョンをご選択ください。

また、IEのみならず、ファイヤーフォックスやchrome等でも確認したい場合には、株式会社シーマン社のサイトが非常に便利です。
※無料ツールは1回につき5つまで選択できます。

http://www.cman.jp/BrowserCapture/

3.ページの読み込みに時間がかかってしまう・表示されない。
こちらの場合には、ブラウザ側の問題なのか、サーバ側なのかを切り分けなければなりません。

■ブラウザの問題の場合
まず、ブラウザを変えてみます。
その後、スムーズに読み込めた場合には、メイン使用のブラウザを一旦終了させ、履歴の削除やキャッシュのクリアを試行なさってください。

■サーバの問題の場合
ブラウザを切替えてもページが表示されない場合には、サーバのトラブルが考えられます。
まず、サーバ管理会社の障害やメンテナンス情報を確認しましょう。

また、下記のサイトでは、契約先のサーバが自分の回線状態が込み合っていて見られないだけなのか、他のインターネットユーザも見られないのかが確認出来ます。

http://www.downforeveryoneorjustme.com/
※Webサイトのモニタリングサービスページです。

4.画像が表示されない

私自身も良くやってしまいがちなのですが、アップロード先のディレクトリを誤っていることが多めです。
ローカル環境で表示されている場合には、画像に設定したパスを再確認し、アップロードを再試行なさってみてください。
さらに自戒を込めて記載いたしますが、画像に対して相対リンクを設定します際に「./」と「../」 を誤入力している事もしばしばありがちなミスです。

更に、ファイル名の大文字・小文字の誤記が考えられます。
■-(ハイフン)と_(アンダーバー)の誤字も、多いに考えられる原因です。
■ファイルの拡張子が .jpg なのに .pngになっている等も、やりがちな誤表記です。
上記の2件につきましては、何度も経験いたしました。
当方を反面教師としてくださいますと幸いです。

5.cssの変更が反映されない。

背景色等につきましても、ローカルとサーバ内のディレクトリ構成が異なっているため反映されないことがあります。
cssにインポート設定等をなさっている場合は、特にアップロード先にご留意なさってください。

更に文字コード指定の前にコメント等を記入している時には、正しくcssがインポートされない場合があります。
また、それぞれのcssの文字コードが混在(UTF-8やShift-Jis、EUC等)しておりますと、折角のcssが正しく動作しないことがあります。

文字コードは「1行目に書かれており」かつ「統一」されているか否かは、大事なチェックポイントになるかと思っております。

■その他のお役立ちTips
webページの表示に時間が掛かるように思われた場合には、画像データの軽量化をお試しになると宜しいかもしれません。
Photoshopには、「Webおよびデバイス用に保存」機能もありますが、もう少々軽量化が可能です。

http://tools.dynamicdrive.com/imageoptimizer/index.php
※gif, jpg, pngに対応しています。

http://tinypng.org/
※ブラウザ上でpng画像を軽量化できるフリーサービスです。

もっと確認しなければいけない事項は、他にも沢山あるのかもしれません。
今回は5つに絞ってご紹介しましたが、少しでもwebに関わる皆さまのお役に立てますと嬉しいです。

Webページの横幅設定について(2012年版)。

PC用のwebサイトを作成時、ページ全体の横幅設定は1024pxや960pxに設定することが多めです。
横スクロールが出てしまいますページはユーザビリティ的に閲覧しづらく感じますし、逆に余りにも細身のページは縦方向への遷移が難しくなってしまうと申します懸念があるからです。

今回、分る限りで調べた結果では、PC閲覧用のwebページの横幅は概ね1000px前後であれば大丈夫なようです。

上記の判断基準となりましたデータを基にwebページの横幅について考えてみたいと思います。
※データは、2012年12月時点のものです。

横幅を考えるにはモニタの解像度を知ることが第一かと思いました。
そこで、米国のNet Applications社の最新データを確認いたしました。
※同社のサイトはこちらです。
http://www.netmarketshare.com/report.aspx?qprid=17

1366*768px が最上位でした。
以下、1024*768pxと1280*800pxと続いております。

横幅の設定が1024pxとする以前は、800*600pxを目安に作成することが多かったように覚えております。
今はモニタの解像度もどんどん上がってきているのですね。

また、スマートフォンやタブレットPCにつきましては、株式会社ハイポジ社の津曲さんがお書きになったBlogに分かりやすくまとめられております。

http://case-mobile-design.com/devices/resolution-list/
※同氏のBlogへ

モバイルデバイスの場合は、横幅480pxのユーザが多く、その次に540pxと720pxが来ております。
縦幅の場合には、800px・1280px・960pxの順でユーザが多いようです。

PCと一口に申しましても、データをご覧いただければお分かりのように様々なモニタサイズがあります。
さらにスマートフォンやタブレットPCのユーザも増えまして、どのサイズが適切なのかと思い悩むこともしばしばです。

私自身はまずPCサイトの横幅の目安が判明しましたら、その後は作成したいレイアウトに合わせ、cssを設定して行かれると宜しいかと思います。

様々なデバイスに対応させるには、レスポンシブwebデザインを知っておくことが重要です。

レスポンシブwebデザインとは、過去においてはリキッドデザインと称されておりましたが、リキッド的な展開のみならず1つのhtmlデータで多くのデバイスに対応できるようになってきたことから、レスポンシブ……の名称に変わっていったようです。
※当方の理解が誤っている場合にはご指摘をお寄せいただけますようお願いいたします。

今回の記事ではレスポンシブwebデザインまでは網羅できておりませんが、レイアウト考案時に参考となるサイトをご紹介しまして、こちらの稿のまとめといたします。

宜しければご覧ください。

・960 Grid System
http://960.gs/

全体の横幅を960pxとし、この数値を基に縦方向に12・16と分割したデザインです。
グリッドは(方眼状の枠)を1つのブロックとしてレイアウトを作成していく考え方です。
学生時代の図形の授業を思い出してくだされば、お分かりいただけるかと思います。
※Dreamweaver CS6では、「可変グリッドレイアウト」機能が追加されております。

皆さまのレイアウトデザインの一助になりますと嬉しいです。

複数のサイトを運営するメリットは・・・

現在は、1企業1サイトではなく、1つの企業が複数のサイトを持っていることも珍しくありません。
それでは、複数のサイトを運営するメリットはどこにあるのでしょうか。
★メリット1 サービス・商品別に立ち上げる
    ◆取り扱い商品
    ◆取り扱いサービス
ごとにそれぞれ、専用サイトを立ち上げる。
これは1つの企業が、複数の商品やサービスを取り扱っている場合に効果的です。
◆メリット2 狙ったキーワードごとにサイトを立ち上げる
このパターンのメリットは、狙ったキーワードごとにサイトを分けることで
    ◆SEOの効果を高めることができる
という点にあります。
また、1つのサイトに複数の商品やサービスを羅列するよりも、1つに絞り込んだサイトのほうが、閲覧者に
    ◆専門分野というイメージ
    ◆信頼性が高いイメージ
を与えることができことができます。
以上の点から集客もしやすくなり、信頼性も高まることから反響もアップしやすくなると思われます。

ブログとホームページの比較・メリット・・・

ネット上で情報を配信する場合、通常では2通りの手法があります。
それは、「ブログ」と「ホームページ」です。

まずは、それぞれの意味を少し書いておきましょう。

「ブログ」の語源は「ウェブログ(ウェブ上に残っているログ)」が略されたもので、日記のように頻繁に更新されるタイプのウェブサイトの総称です。

「ホームページ」とは、本来「ウェブサイト」と呼ばれるもので、インターネット上にアップされたウェブページ(今見ているページもウェブページの1つです。)の一まとまり、集合体を指します。

しかし、日本では「ウェブサイト」の事を「ホームページ」と言った方がわかりやすいので、 当サイトではホームページ又は単にサイトと表記しています。

以上を踏まえ、自分が作りたいと思うサイトの目的を考えた場合、「ブログ」と「ホームページ」、どちらを利用すれば良いのかを考えてみましょう。

日記のように、常にフレッシュな情報配信を行うサイトや、仲間との気軽な交流を目的としたサイト、 ライトユーザーとの情報交換を望む場合は、「ブログ」という媒体が適しているでしょう。

よりコアなユーザーとの交流や、内容の信ぴょう性を図る必要のあるサイト、専門的な情報を体系的に発信する場合や、趣味などの詳細な情報、 オンラインでの小売業や会社の公式サイトなど、情報の信頼性をある程度高める必要性があるサイト作りが必要な場合は、「ブログ」と言う媒体よりも 「ホームページ」を利用する方が適しているという事になります。

もしアフィリエイトを主体としたお小遣い稼ぎのサイトを作りたいなら、情報の鮮度が最も必要になりますので「ブログ」の方が適していると言えます。

「ブログ」と「ホームページ」の利用メリットは以下の通りです。

ブログを利用するメリット

・初心者にとって敷居が低い
⇒ホームページの作成経験が無くても手軽にその日から始められる
⇒画像や文章の投稿に専門的な知識が要らない
⇒携帯電話等から簡単に文章や画像の投稿が可能
⇒ブログパーツやプラグイン等、自分で設置しなくても様々なテンプレートがある

・コミュニケーション性に優れている
⇒コメントやアンケート、拍手機能でダイレクトにユーザーとコミュニケーション可能
⇒情報を双方向で共有しやすい(ブログはユーザーが参加する敷居が低い)
⇒コメントは活力の元。モチベーション維持がしやすい
⇒アクセスブロックなど、特定の仲間内だけに特化したサイト作りが簡単に可能

・SEO効果的に有利
⇒更新後最短1時間以内にインデックスされ、鮮度の高い情報を素早く発信する事が可能
(Yahoo!ブログ検索や、Googleブログ検索などに反映。pingはこちら)
⇒トラックバックや相互リンクがしやすい。内部リンクの増加も。
⇒ブログ村やクチコミblogランキング【TREview】など、優秀なランキングサイトがある。

・コスト面で有利
⇒無料ブログサービスを提供している会社が多いので低コストで始めやすい とにかく更新がしやすく、作成の知識が全く無くても誰でも気軽に始められると言うのがブログ最大のメリットです。 また、コミュニケーション性に優れているため、直ぐに仲間を作ることも可能です。
では、次にホームページの利点についてです。

ホームページを利用するメリット

・サイトの利用制限があまり無い
⇒ブログの場合、利用できるシステムやデータ容量にかなりの制限がありますが、ホームページの場合は大容量のアップロードが可能です。 趣味のサイトであれば写真を大量に載せる事も、会社等であればフラッシュや独自ブログの設置などが可能になります。
⇒自分でサーバーを契約すれば広告が表示されないのもメリットの一つです。無料ブログや無料サーバーは必ずプロバイダやホスト会社側の広告が表示されますが、 自分で契約すればホームページ上に無駄な広告は表示されません。
⇒CGIやPHPなど、インターネット上で利用できるプログラム使用の制限が緩和されます。 (これらのプログラムはサーバー側の負荷を増大させるものなので、契約内容によっては利用できない場合もあります。)
⇒商用利用の場合、自社メインHPとしてPR可能。勿論商用利用に制限は無し。

・独自にホームページをアレンジ可能
⇒CSS(スタイルシート)やHTMLの知識があれば、自分独自の様々なデザインのサイト構築が可能です。

・サイトを設置する事による認知度と信頼性の向上
⇒会社のHPが無いと、潜在的カスタマーに自社のサービス内容を知ってもらう機会を喪失する上、そもそもHPが無いと、 どんな事業を行っているか直ぐに分からないので他社からの信頼が得られない。(自社紹介のパンフレットや新聞、テレビCMなどの代わりに広告宣伝用として利用可能)
⇒独自ドメインを利用する事によるサイトの信頼性アップと訪問者数のアップ。「hpguid.com」のように、短いアドレスなら簡単に覚えてもらえるしダイレクトアクセスされやすくなる (口コミでサービスを広げたいなら一番ここに気を使う必要がある。なるべく短く、特徴のあるドメインにすべき)
⇒SSL通信機能を使ったセキュリティアップが可能

・その他の利点
⇒独自ドメインを利用すれば、メールアドレスが無制限に作成可能になるため、用途に合わせたメアドの制作、使い分けが可能に (契約状況によっては多少の制限アリ。容量や契約コースによって異なる。)
⇒運営サイトとの著作権法上の問題で、大学の研究内容や自分の独自の趣味など発信内容に高い専門性がある場合、ブログではその内容を書き込んだ人の承諾なく 運営者側に書籍化など、2次利用される危険性がある。(実際mixiではこの問題で一時騒動になった)
⇒何よりも、ホームページを持つという事は、自分の家を持ったようなもので、あくまで無料賃貸であるブログとは違う点で利用者の満足度レベルが違う。(やっぱりマイホームでしょう)  自分のサイトをブログで作るか、それともホームページで作成するか、イメージが固まってきたら次のステップへ行きましょう。

ITスクールインストラクター  田口 智