ユーザビリティテストと「poo（プリントアウト最適化）」 | 京都のSEOコンサルタント松尾茂起のブログ

2009年02月24日
ユーザビリティテストと「poo（プリントアウト最適化）」

気がつけば2月も終わり。

1ヶ月近く、このSEOブログの更新ができていませんでした。

「このサイトはコンピュータに損害を与える可能性がありますとは？」の記事って、一体いつの話だよ、っていう感じです。（SEO業界は変化が早いので）

で、1ヶ月近く更新していなかった当SEOブログの順位はというと・・・・・・

・・・

特に変化ありません。

今月は賢威のリニューアル作業でてんてこまいでした。

自社商品の話をするのもあれなんですが、今回のテンプレート改良の第一のテーマを「ユーザビリティの改善」に定め、色々なことを試しました。

その一つが「ユーザビリティテスト」の導入。

「ユーザビリティテスト」というのは、一般の方を招いて「どこがクリックしやすい」とか「どこが見にくい」とか、そういった意見を出してもらい、サイトの見やすさや使いやすさをチェックする作業のことですが、一般ユーザーの方の生のご意見はとても参考になりました。

ユーザビリティテストなんてする暇が無いという方は、Google Analyticsのクリックパターンを見るだけでも、気付くことが多いかと思います。

当SEOブログのクリックパターン

ユーザビリティテストをしている風景を写真で撮って、当ブログの記事にしようと思っていたものの、見事に写真を撮るのを忘れました。
ユーザビリティテストの最後は、なぜかカレーパーティーになっていました。

実はカレー大好きなんです。
カレーと言えば、最近、キッチン飛弾のカレーにはまりました。
レトルトカレーですが、すごく美味しいです。

さて、ユーザビリティテストと言えば、今回の賢威テンプレートには、
プリントアウト最適化（略して「poo」）を取り入れました。

「poo」は「ぷー」ではありません。
「ピーオーオー」です。

一応「print out optimization」の略で、当方の造語です。
最近略語を作るのが流行っているみたいなので、すかさず便乗してみます。

そういや、うちの事務所では最近

「そのサイト、しっかりぷーできてんのか！？」

「ぷー、確認お願いします！」

「ぷーぷーぷーぷーやかましい！！」

という声が飛び交っています。

誰一人「ピーオーオー」なんて言ってませんでした。

ああ、切ない。

さて、気を取り直して、「poo」とはどういうものなのか説明します。

その前に。

一度、皆さんが運営されてるブログやサイトをプリントプレビューしてみて下さい。
ブラウザの設定にもよりますが、プリントアウトがきれいに行えますか？

うちのブログなんて途中からスコーンと切れてしまっています（爆）

何の自慢にもなりません。
やばいですね、この状況。
ていうか、このブログのテンプレート、早く差し替えないと。
いつまで賢威1.0使ってるんだか・・・。

で、「poo」とは、そんなブログやサイトをきれいに印刷するためのテクニックです。

そんなテクニック、今更紹介するまでも無いだろ、という声が飛んできそうですが、要はSSのメディアタイプの「print」に「プリントアウト用のCSS」を割り当ててやればOKって話です。

→CSSのメディアタイプとは？

プリントアウトのためだけのCSS設定ができると知りながらも、実際には行動に移せていない方って、少なくないんじゃないかと思います。

プリントアウト時に完璧なWebレイアウトを再現するのは不可能に近いです。
色々な制約がありますので。

ですので、ここでは皆さんに「捨てる勇気」を持ってもらいたいと思います。

例えば、下記のソースは賢威4.0で使用しているソースですが、共通のメニューなど、印刷時に必要無いと想定される部分は「display: none」で隠してます。
（必要に応じて「!important」を追加して下さい）

@media print{

    body{
        width: 100%;
        padding: 0;
        background: none;
        overflow: visible;
    }

    div#header{ display: none; }

    div#main{ overflow: visible; }

    div#sidebar{ display: none; }

    div#main-contents{
        margin: 0 auto;
        width: 96%;
        overflow: visible;
    }

}

「あ、隠しテキストだ」なんていう、空気を読まないご意見は無しでお願いします。
上記の設定はプリントアウト時のみに適応されますから、普段はきちんとコンテンツが表示されています。

もしこの設定でSEOペナルティを受けるのだとしたら、怖くてサイトなんて作れません。

上記はあくまでも、うちのテンプレートで使っている設定ですが、上記を参考にしていただいて、皆様のサイトやブログに合ったCSSを書いていただければと思います。

で、もし、皆様のサイトがimport用のCSSを作って、他のCSSを読み込んでいるのなら、下記のような感じに設定すれば良いでしょう。

@charset "UTF-8";

/*初期化用*/
@import "common.css";

/*デザイン用*/
@import "blue1-2.css";

/*印刷用*/
@import "print.css";

/*拡張用*/
@import "advanced.css";

ほんでもって、HTMLでのCSSの読み込み設定は下記のようにしましょう。
HTML内で下手にメディアタイプ（media）を指定しないのがベターです。
CSS内で制御できる部分はCSS内で制御してしまいます。

というわけで、HTML内に書くメディアタイプ（media）は空欄にします。

IEの場合は「背景の色とイメージを印刷する」にチェックが入っていないと、CSSの「background」プロパティが反映されないので、ご注意を。
（サイトのどこかに注意書きをしておいても良いかもしれませんね）

一例としては、下記のような感じになります。
（下記は賢威4.0の100ある3カラムデザインの中の1つです。総デザインは2,200あります）