横浜でHP制作・IT事務・テープ起こしを行う会社ブログ » ブラウザ

IE8やFireFox等でツイッターウィジェットが表示されない場合の対処方法

haruku-up — Wed, 21 Dec 2011 03:14:20 +0000

　自分のホームページやブログにtwitter公式タイムライン（プロフィールウィジェット）が表示されない場合の対応備忘録です。

　IE9やGoogle Chromeなど、他のブラウザでは表示されるのに、IE8やFireFoxではツイッタープロフィールウィジェットの部分が表示されない場合についてです。

原因

　この場合は、恐らく、ページ（サイト）自体の文字コードがutf-8以外に指定されていることが原因です。多くの該当サイトは文字コードが”Shift_JIS”のはずです。ツイッタープロフィールウィジェットはutf-8の文字コードでしか機能しないことが原因と思われます。

対処方法

　ツイッタータイムラインコードの最初の部分

　これを以下のように追記してアップしてみましょう。

　サイト（ページ）全体の文字コードをutf-8に変えてしてしまうのも方法の一つですが、逆に今まで正しく表示されていた部分が文字化けする等のふぐあいが出る可能性もありますので、手軽に上記部分のみを追記してみるのがベターです。

WP Social Bookmarking Lightで「いいね」ボタンを設置してGoogle Analyticsを使っていたら必ずしたほうがいい設定

haruku-up — Sat, 01 Oct 2011 02:09:39 +0000

※10月11日修正追記

　facebookのいいねボタンをサイトに設置し、Googleアナリティクスのアクセス解析結果を見ると、「/?fb_xd_fragment=」のパラメータを含むアクセスがページ数としてカウントされることがあります。いいねボタンのバグのようで、正確なアクセス数の統計の邪魔になるので、気になる人は対処可能なので、対処しましょう。

WP Social Bookmarking Lightでも発生する

　「/?fb_xd_fragment=」のパラメータを含むアクセスがページ数としてカウントされるバグが発生する条件は、対象閲覧者のブラウザがIE6、あるいはIE7の場合だそうです。ただし、WordPressサイトで、WP Social Bookmarking Lightを利用している場合はその限りではない、という情報を見かけたのですが、弊社運営WordPressサイトにおいて、WP Social Bookmarking Light使用でIE6からのアクセスで思いっ切りこのバグを食らっていたため、WordPressサイトでWP Social Bookmarking Lightによるいいねボタン設置の場合でも、このパラメータのアクセス除外設定をしておいたほうがよいでしょう。

複数サイト管理時のGoogle Analytics（旧画面）から「/?fb_xd_fragment=」を一括除外設定する方法

ログイン後初期画面一番右下、「フィルタマネージャ」をクリック
フィルタマネージャ画面で、表の右上「+フィルタを追加」をクリック
新しいフィルタを作成画面「フィルタ情報を入力」で、フィルタ名（任意）を入力、フィルタの種類で「サブディレクトリからのトラフィック」を選択、ドメインに「/?fb_xd_fragment=」を入力（その他はデフォルト）

こちらの記事を参照し、打ち消し線を入れた箇所のミスに気づきました（感謝！）。ですが、当方の環境では、カスタムフィルタではなく、「既定のフィルタ」から「サブディレクトリへのトラフィック」でも大丈夫です。

「?fb_xd_fragment=」や「&fb_xd_fragment=」など、サイトによってパターンが異なるので、やはり重要なのは、「&」や「?」をつけず、「fb_xd_fragment=」の文字列を含む場合に除外すると設定することです。

「プロファイルにフィルタを適用」で、左の「使用可能なプロファイル」一覧に表示されているプロファイルから上記フィルタを適用させたいプロファイルを選択→追加（右側「選択したプロファイル」に該当項目移動する）。
全部を一括適用させたい場合は、一番上のプロファイルを選択し、Shiftキーを押しながら一番下のプロファイルをクリックすると、全プロファイルが反転選択されるので、そのまま追加ボタンをクリックすると速いです。
左下「変更を保存」をクリック。
※後にサイトを追加した場合は、フィルタマネージャ画面「既存フィルタ」から今つくったフィルタの「編集」をクリックし、４の作業をして変更を保存します。

　以上で、以降のいいねボタンIE6アクセスのバグはページ数としてカウントされなくなるはずです。

IE7経由は不明

　IE6からのアクセスでこのバグに気づき、上記設定をしましたので、以降、IE7からのアクセスがあった場合は、このバグ現象が起きたのかどうか、もはやわかりません。検証環境は一応あるのですが、面倒なので検証しません（笑）。IE6もIE7もまだまだ利用者は多く、少なくともIE9よりは多い統計結果が弊社のアクセス統計からは現状で確認できています。

　なので、WP Social Bookmarking Lightでいいねボタンを設置して、なるべく正確なアクセス統計をとりたい場合は、WP Social Bookmarking Lightでいいねボタンを設置と同時にこのフィルタマネージャでの除外設定をしておいたほうがよいでしょう。

◆参考にさせていただいたページ（設定画面の画像がわかりやすいです）→「いいね！ボタンを設置するとアクセス解析に支障が出る件 | SEO対策 e-search 公式ブログ」

Google Chrome6.0.472.xx 変更点備忘録

haruku-up — Sat, 11 Sep 2010 08:55:32 +0000

Google Chromeが（勝手に）バージョンアップされました

　グーグルのブラウザ、GoogleChromeがいつの間にか6.0.472.55にバージョンアップされています。「勝手に変わるな！」という声もありますが、無料ブラウザは山ほどあるので嫌なら使うなということで、それについては割愛し、微妙に前バージョンと変わった点で気づいた部分の備忘録です。前バージョンのインターフェイス・機能ともにうろ覚えなので、あいまいな点はご了承ください。

インターフェース・機能

☆ボタン（ブックマークに追加）がアドレスバーの左側から右側に移動
×ボタン（読み込み中止）がリロードボタンと合体。→ページ読み込み中のみ×ボタンに変化
スパナボタンに全設定・メニューを統一。（前バージョンにはもう一個、四角い紙っぽいアイコンボタンがあった気がします）
アドレスの先頭「http://」の文字列を地球アイコンボタンで代替表示。地球ボタンをクリック（左右どちらでも可）すると、ポップアップウィンドウでページのID、接続、アクセス履歴が表示されます。アドレスURLをコピーすると、http://もコピーされます。（「https://」ページは地球ボタン化されず、暗号化情報がアドレスバーに表示されるみたいです。その他の接続は試していません）

スペースキーによるスクロール無効の有効化方法

　バージョンアップに気づいたのは、Spaceキーによるページスクロールがサイトによってできたりできなかったりし出したことからでした。ウェブページのページスクロールは[PageDown]キーでも同様に可能ですが、スペースキーで行う癖があるので、これはちょっと困ります。ただ、スペースキーでスクロール可能なサイトもあり、調べて検証した結果、
言語バーが全角入力（かな入力）モードになっていると、スペースキーがきかない
ようです。サイトを表示して、言語バーが全角入力モード表示になっていたら、スペースキースクロールはききません。全角入力をオフにする、つまり半角入力モードへ切りかえると、スペースキーによるスクロールダウンができるようになります。

　サイトによって最初からスペースキースクロールが可能なものと、そうではないものがあります。スペースキースクロールがきかないサイトは入力フォームにカーソルが行っているわけでもないのにききません。根本的な対処方法はまだわかりません。ないかもしれません。とりあえず、スペースキースクロール癖のある人は、スペースキーを押してもスクロールしないなと思ったら、半角入力に切りかえましょう。
　このスペースキースクロールの点について、何かご存じの方はぜひ教えてください。

おまけ「スペースキーでスクロールアップ」

　ちなみに、スペースキーではスクロールダウンしますが、[Shift]+スペースキーでスクロールアップします。（常識かな？）

マウスを使わずに前のページに戻るキーボードショートカットの方法

haruku-up — Thu, 20 May 2010 11:09:35 +0000

ウェブページを閲覧中、ブラウザの戻るボタンをクリックせずに、キーボード入力で戻る方法です。

BS（Back space）キーで戻す

入力した文字を消す、例の[BS]キーを押すことで、ブラウザの「戻る」ボタンを押したのと同じ効果があります。

BSキーで戻らない

BSキーを押しても戻らないときは、カーソル（アクティブ）が検索文字入力フォームの中にあったり、フレーム内のページがアクティブであったりすることによります。検索フォームの中にカーソルがあってBSキーを押しても、単にフォームの中の文字を消そうとするだけなので、見た目上、何の変化も起こりません。

あるいは、戻るページがないということもあります。ブラウザの「戻る」ボタンはアクティブですか？　今見ているページがそのウィンドウ（タブ）内で最新のページであったら、戻りたくても戻るページがありません。

[Shift]+[BS]キーで、「進む」

[Shift]キーを押しながら[BS]キーを押すことで、戻るとは逆に「進む」ことができます。進まない場合は、上記の戻らない現象と同じ原因です

ブラウザ以外でも戻れる

ブラウザでウェブサイトを閲覧中以外でも、この[BS]キーで戻る方法は通用します。例えば何かパソコン内のフォルダを見ていて、どんどん下の階層のフォルダを見て、一つ上に戻りたいときなども、このBSキー入力で戻ることができます。戻らない場合は（以下省略

[Home]キーでページトップと並んで、割と使えるキーボードショートカットキー操作だと思いますので（自分はよく使います）、ご存じなかった方はぜひご活用ください。

マウスを使わずにホームページの先頭へ戻る方法

haruku-up — Mon, 03 May 2010 07:36:14 +0000

　ウェブページを作成する際、ページ下部に「トップ（先頭）へ戻る」ページ内リンクの設置をクライアントから要求されます。縦長のページを下のほうまで見ていて、ページトップのナビゲーションまで戻りたいときなど、一気にトップまで戻れるので、「トップへ戻る」リンクは便利です。

　ただ、これはマウスを使ってスクロールをしている人が、上に戻るのにホイールをかりかりと回したり、ブラウザのスクロールバーを上へドラッグするのが面倒だということへのニーズだと思います。

HOMEキーで一発　ページトップへ

　マウスで上のような操作をせずとも、キーボードの[HOME]キーを押すことで閲覧中のページのトップへ戻ることが可能です。デスクトップパソコンや、[HOME]キーが独立しているノートパソコンでしたら、[HOME]キーを押すだけで、はるか上方のページ先頭へ一発で移動することができます。

[HOME]キーでトップへ戻らない

　HOMEキーを押してもページトップへ戻らない場合は、アクティブな場所が閲覧中のページではない可能性が大です。

　ページ内フレーム（ifame）ページがアクティブであったり、入力フォームにカーソルが点滅していたりすると、ページ全体がアクティブではないため、[HOME]キーがページに対して利きません（フレーム内ページや入力フォームのトップへ戻れというコマンドを入力している）。確実にページメインの部分だと思われる場所をワンクリックし（アクティブにし）、[HOME]キーを押してみてください。ページ先頭へ戻るはずです。

　その他、意図せずにウェブブラウザがアクティブウィンドウではなくなっている場合があります。ほかに動かしているソフトなどのウィンドウがアクティブになっていると、たとえ前面にブラウザウィンドウがあっても、[HOME]キーでページトップへが利きません（これもアクティブな別のウィンドウへ[HOME]キーコマンドを入力していることになります）。

いろいろなキーでショートカット機能を

　[HOME]キー以外にも、[End]キーを押せばページの最下部へ、[Page Up]キーを押せば１画面分、上にスクロール、[Page Down]キーで１画面分、下へスクロールします。矢印キーも小刻みな移動に使えます。キーボード操作には便利な機能があったりするので、いろいろ試してみてください。

img alignで画像回り込み時のIEバグ備忘録

haruku-up — Mon, 22 Mar 2010 19:25:09 +0000

で画像をテキストに回り込ませた際、CSSでvertical-alignを指定するとIE7（恐らくIE6も）でうまいことテキストが回り込んでくれません。vertical-alignを指定しないか回り込みさせたい画像以外の画像のみに指定することで回避します。

ウェブ制作者から見たIE6（インターネットエクスプローラー）と他のブラウザの違い

haruku-up — Tue, 09 Mar 2010 12:42:03 +0000

2010年３月４日、アメリカコロラド州でIE6の葬儀イベントが行われた。米国のAten Design GroupというWebデザイン企業が主催し、100人以上の人が参加したという。

IE6とはウェブページを閲覧するためのソフトの一つである。旧ウィンドウズパソコンにあらかじめセットアップされていたため、初心者にはインターネットでウェブページを閲覧する＝IE6を利用する（例のアイコンをクリックする）という認識が成り立ってしまっている。
それの何がいけないのか。という理由を以下のページで挙げている。

「IE6を永眠させるべき10の理由」ITmedia News

とても醜い

パワーがない

大きなセキュリティホール

評判の問題

互換性がない

Googleに捨てられた

世界の嫌われ者

Microsoftさえ忘れたがっている

ユーザーのIE離れの原因に

IE6はもう時代遅れ

ウェブ制作者がIEを嫌う理由

詳細は上記引用リンク先及びリンク先にある原文ページリンク先をごらんいただくとして、なぜ一Webデザイン企業がこのようなイベントを開催したのか。同じウェブページを作成する極東の末端企業として、IE6に限らず後継のIE7～も同様だが、この「葬儀」に大きく同意できるのは、上の10の理由より、「ウェブページのソースコードの解釈が他のブラウザと大きく違い、最新の規格に追いついていこうとしていない」という点である。

細かい部分を挙例しないが、大ざっぱに言うと、ウェブページを作成する際、IEとそれ以外のFireFoxやGoogle Chromeなどモダンブラウザを想定した２つのコーディングをしなくてはならないという点が制作者泣かせなのである。また、同じIEでもIE6とIE7では表示結果が異なるため、[最新ブラウザ][IE6][IE7.8]という３つのブラウザの想定とチェックが必要になる。要するにこの世から本当にIEさえ「死んでしまえば」、ウェブ制作のコストは格段に下がるのである。ウェブ制作者はその死に対して、ある種の感慨を覚えながらも、心からの祝杯を上げるであろう。

昨今のブラウザ競合のため、数年前と比べればIEのシェアは下がってきてはいるが、まだまだ制作側としては無視はできない数字がある。下図はこのブログサイトの直近のブラウザシェアである。

ブラウザ別シェア

（閲覧シェアはインターネットエクスプローラーが過半数）

インターネットエクスプローラー内のシェア

（IEの内、いまだにIE6が４分の１のシェア。。。）

IEに限らず、シェアがあるうちは制作時に視野に入れざるを得ない。一利用者としてなら時代おくれであろうと醜かろうと、IEがよければ利用すればいい。個人の自由である。また、時代おくれが嫌で、美しいブラウザがよければIEを利用しなければいいのだが、恐るべきはIEでないと機能しないウェブサイトが存在するということで、これがあるため、完全にIEを使わないというわけにはいかない。

「ブラウザ=IE」の弊害

ウェブサイト制作を依頼する、ブラウザのことをよく知らない発注企業は、自社でウェブサイトを閲覧するブラウザがIEしかなく、ウェブサイトを閲覧するとはそうすることだという認識の場合がある。すると、悪意のある制作者はその会社のバージョンのIEでのみきちんと閲覧できるように制作し、他のブラウザでどのように見えるかを全くチェックせずに納品するかもしれない。IEのみで機能する便利な機能があるので、それをコードに組み込み、他のブラウザでは起こり得ないまやかしの表現を実現させてしまったりすることもあるであろう。

ウェブサイトをつくりませんかと提案すると、「私はパソコンを見られないから」と言って断る企業・商店主がいる。自社のウェブサイトは自分が見るためのものではないのだが、要はこの感覚のため、IEしかブラウザがない（と思いこんでいる）企業・商店の人たちが、不誠実なウェブサイトを購入するはめになるのである。そしてIEが永遠になくならない温床でもある。

XPとIE7の相性が悪い（ゆえに一度入れたIE7をIE6に戻し、以後IE8を試してもいない）、まだ企業などで多く現役であろうウィンドウズ2000でIE6を使わざるを得ないなどの問題もあると思われる。IEにこだわらず、他のモダンブラウザをインストールすればいいのだが、そこまでするほど日常的に頻繁に問題が発生するわけでもないというのがまたIEを延命させている理由の一つでもある。

大人の世界の真意はよくわからない部分があり、風が吹けば桶屋がもうかる方式を意図的に行うために、マイクロソフトは執拗にしょっぱいブラウザを開発し続けているのではないかというげすの勘ぐりも働いてしまう。ブラウザに脆弱性が多いほど、セキュリティーソフトが売れるはずだからだ。独禁法その他、大企業が考慮すべき点はきっと我々には想像もつかないほど多種多様なのであろう。

ブラウザは複数インストールし、使い分ける

ほんの15年前には画期的な先端企業だったマイクロソフトの製品が今や老害のように言われてしまうこの世界のサイクルの速さに愕然としつつ、最後に私が使っているブラウザについて、簡単に記しておくのでよければ参考にしてください。ブラウザはパソコンに何種類でもインストールできます。ただし、IEならIE、バージョン違いをインストールすることはできません。

IE7: 既定のブラウザ。これだけIE非難しておいて、既定です。理由は２つなのですが、制作チェックの都合上、最もシェアの大きいブラウザを最も利用するため。もう一つはこれも制作の癖で、ソースの編集がしやすいため、です。通常のウェブブラウジング時にはまず利用しません。他のサイトでのシェアが大きかったのでこれを既定にしていましたが、今回の確認でIE8のシェアが上回っていることが判明したので、アップグレードしようと思います。
FireFox3: セキュリティー警告を出してくれます。怪しそうなサイトを見るときはこのブラウザ。便利なプラグインも豊富にあるようですが、これも制作チェックの都合上、最も多いであろうデフォルトの状態にしてあります。
Google Chrome: 動作が軽い、レンダリング速度が速いです。非常にシンプル。ただ、若干不安定で、ページにアクセスができなくなる瞬間があるような気がします。通常のブラウジングにはこれを利用しています。
Opera・Safari: 上記２つのブラウザと遜色ないです。ただ、シェアが頭打ちっぽいので、ほとんど利用していません。これもソースコードの解釈が若干違うので、本当はチェックすべきではあるのですが、ともにモダンブラウザなので、FireFox・Google Chromeをチェックすればまず問題ないです。

上の４つはすべてタブブラウザです。IE7は複数のタブを開いた状態で閉じようとすると、毎回次回起動時どうするかを聞いてきます。その他のブラウザは再起動すると前回の状態を勝手に復元してくれます（自分でそう設定したのかも。ちょっと忘れました）。「お気に入り」に入れなくても記憶してくれるので、毎日のように見る（ログインする）サイトをまとめて１つのブラウザにタブで開いておき、そのブラウザはそのためだけに利用する、などもしています。

一生の伴侶というわけでもないので「ブラウザは１つと決め、添い遂げる！」と思わず、全部のブラウザをインストールし、それぞれ使い分けていくのがベターかと。

◆横浜でウェブサイト制作等のご相談は「合同会社ハルクアップ」（YHS横浜ホームページサービス）

２ちゃんねるのサーバーダウンとF5キー

haruku-up — Mon, 01 Mar 2010 11:29:03 +0000

某世界最大匿名掲示板２ちゃんねるが３月１日午後から某隣国からのサイバー攻撃によるサーバーダウンにより、ほぼ全面的にアクセス不可となっているようです。「2ちゃんねるアクセス不能　韓国から大規模サイバー攻撃？」(J-CASTニュース)によると

「攻撃は、ウイルスプログラムを使って行え。プログラムに不慣れなのであれば、F5キーを押してトラフィックを誘発しろ」

という手引きにより、多数からの一斉アクセスがなされているようです。

ここに出てくる「F5キーを押して」という意味ですが、これは文字どおり「キーボードのF5キーを押せ」ということです。[F5]キーの効果とは、現在見ているウィンドウを最新の情報に更新することです。つまり、２ちゃんねるをブラウザで閲覧しながら[F5]キーを可能な限り連打し、見ているページを更新しろ、ということを意味しています。

これがどうして２ちゃんねる閲覧不可状態を呼び起こすのか。ふだん、インターネットでいろんなウェブページを閲覧します。これはウェブサーバーというところにある該当ページを自分が今使っているパソコン等に「ダウンロード」して見ているのです。「ダウンロード」は動画やオンラインソフトなどの保存時だけではなく、普通のウェブページも自分のパソコン等にダウンロードしています。ウェブページ１ページはそんなにサイズが大きくなく、体感的にはほぼ一瞬でダウンロードできるため、いわゆるダウンロードをしているという感覚にならないだけで、原理は動画などと一緒なのです。そうやってダウンロードし、ローカルに保存・複製したウェブページを見ているのです。

もしその閲覧中と同時にサイト管理者がページを更新したとしても、あなたは自分のパソコンにダウンロードした「古い」ページを見ています。あなたがページを開いた（ダウンロードした）直後にそのサイトの管理者が該当ページを更新していた場合、[F5]キーを押せば、更新したページがダウンロードされ、最新のものが見られるという寸法です。

で、このページの更新なのですが、ウェブサーバーはこの更新要求を無限には処理できません。「データ転送量」という枠がサーバーにより決められていて、この量をオーバーすると、いわゆるサーバーダウンになります。[F5]キーを押してページを更新する、つまりページの最新情報を「転送せよ」とサーバーにリクエストしているのです。この転送量は時間当たりで割り振られるので、同時に更新＝転送リクエストが集中すると、転送処理が追いつかなくなり、サーバー停止→ページの閲覧不可という状態になります。電話が一斉に鳴り電話回線パンク、というのに似ているかもしれません。

ウェブサイトは自然に見られていればアクセスの集中によるサーバーダウンはめったにありません。想定したアクセス量＝転送量に見合った能力のウェブサーバーをサイト運営者は使用しています。コンテンツが大きくなったり、人気が出てきて平均アクセス数が増加したりした場合、より大きな能力を持つウェブサーバーへヤドカリのように引っ越ししていきます。ですが、今回の２ちゃんねるのように意図的に集中してアクセスを（人力の[F5]キー連打だけなら大丈夫でしょうが、[F5]キーを連打する効果と同様の自動プログラムも利用しているようです）されると、想定外の転送処理をリクエストされ、許容値をオーバーしてサーバーダウンしてしまうことがあるのです。

これは悪意がなくとも起き得る現象です。例えばふだんはほとんど閲覧されないこぢんまりしたお店のウェブサイトが、ある日テレビなどに紹介されると、その瞬間、一斉にテレビを見ていた人がそのお店のサイトにアクセスし、サーバーダウンなどということもあります。

以上、２ちゃんねるの事件のメカニズムの、パソコン初心者の方への大まかな説明でした。まる。
※復活したら教えてください。

ちなみに[F5]キーはブラウジング以外にも利用できます。例えばパソコンで今見ているフォルダの中身を最新の状態にするときなどにも[F5]キーが使えます。これはパソコン内の情報のやりとりなのでパソコンがハングアップすることはまずないでしょう。ただ、ネットワーク内の外部ドライブなど、多くの人がアクセスする場所でむやみに[F5]キーを連打すると、同じドライブを利用している人の処理が遅くなったりなどして迷惑する可能性はありますのでちょっと注意が必要です。

ファイルアップロードページを設置しました

haruku-up — Sun, 28 Feb 2010 13:12:55 +0000

弊社サイトに、ページ上から無料で直接、ファイルを転送できるツールを設置しました。FileQさんのファイルアップロードツールを使用しています。弊社あて先メールアドレスも固定しているので、送りたいファイルを選び、送信ボタンを押すだけでファイルのアップロードが終了します。会員登録などの作業は一切不要です。

ただいま法人初回１時間分10500円（税込）キャンペーン中ですが、録音メディアや資料の送料は別途オプション料金とさせていただいているので、なるべく無料のインターネットサービスを利用し、不要なコストを減らしてご利用ください。

インターネットでやりとりすることで、輸送コストだけではなく、受け渡しの日数も削減できますので、ネット経由のデータ授受をぜひ活用してください。

ファイルのアップロードの方法がわからない場合は、ご注文ご発注時に電話でサポートしますので、ご相談ください。

◆音声ファイルのテープ起こしなら「合同会社ハルクアップ」
◆弊社へのファイルアップロード・転送の詳細はこちら

画面解像度（横幅）の適切なサイズを検証する

haruku-up — Fri, 12 Feb 2010 10:07:27 +0000

昔に比べて高機能なパソコンが多くなり、画面も連れて高解像度になってきています。ウェブサイト（ホームページ）を制作していると、自分の利便性より、だれともわからぬ不特定多数の閲覧者が一体どの程度の解像度の画面でウェブページを見ているのかが考慮すべきポイントとなります。

ポイントは横幅

ブラウザでウェブページを閲覧する際、気になるのは横幅でしょう。縦にスクロールするのは一般的だと思うのですが、横にスクロールバーが出るのは見づらいと感じるユーザーは多いはずです。なので、縦の総量は余り気にせずページ作成したとしても、横幅はやっぱり注意します。ユーザーの利便性（ユーザビリティ）が悪いサイトは、再訪問される確率が低くなりますので。

直近１カ月のGoogleアクセス解析の生データから解像度を確認

では、どうすれば不特定多数の一般ユーザーの画面解像度がわかるのか。ウェブページにアクセス解析を入れていると、それがわかります。Googleが無料提供しているGoogle Analyticsなどがメジャーなアクセス解析ツールです。このアクセス解析ツールで集計したサンプルから、実際の画面解像度の割合を見てみたいと思います。

では弊社合同会社ハルクアップ管理の、とあるウェブサイトの直近約２万セッション（約１カ月分）からユーザー画面解像度の傾向を見てみましょう。

（Google Analytics解像度統計画像）

XGAが最多画面解像度

１位は圧倒的に1024×768（XGA）です。約39％の人がこの解像度で閲覧しています。この数字は無視できません。この集計はトップ10までを表示していますが、総ユニーク解像度は133種類ありました。ただし、これは縦解像度の違いもユニークとしてカウントしているため、これだけの数になりますが、横幅だけで大きく分けると、11種類程度に分類できます。最大で横幅1920、最小で横幅800です（実際にはもっと狭い横幅からの閲覧もありましたが、本当に少数なので無視します）。

横幅だけでも1024～1280が多数

そして横幅だけで見ても、やはり１位は1024で、全体の約42％を占めています。２位は僅差で1280、これは約38％。この２サイズだけで、80％を占めていることになります。すべての画面に最適にすることは難しいので、やはり大は小を兼ね、「より狭くて数の多いものに合わせる」のがよいです。つまり、1024の横幅でおさまるように設計すれば、1280以上の解像度で見ても横スクロールは出ないので、1024以上の幅にならないようにすることが必要だということになります。

ブラウザのサイドバーの差分に注意

ただ、ブラウザのサイドバーに「お気に入り」や「履歴」などを常時表示している人は多いと思います。その幅が150~200ピクセルくらいでしょうか。その分を差し引くと、820～880ピクセル内に押さえたページ幅にするのがベストかもしれません。また、この統計で２％ほどあった幅800の解像度の人をどうするかが問題です。たかが２％、として切り捨ててしまうか、されど２％と考え、さらに横幅を縮めたウェブページを作成するか。この辺は悩みどころですが、このブログのように、本文カラムをリキッド（伸縮自在）式にするなど、対策はいろいろあります。

ページの幅（横スクロール対策）だけがユーザビリティではありませんが、重要な要素であると思いますので、ウェブページをつくってみようという方は、この統計数字を参考の一つにしてみてください。