エクセルを作ってそれにメモしている人

注:今回も超社内メモです。あしからず。
東雲(しののめ)です。今回はテーブルの代わりにエクセルで表を作って記事に画像として載せる時の、エクセル表の行列幅やその他の注意点にまとめておきたいと思います。

題材はこちらのエクセル画像です。

エクセルで表を作る時の悪い例1

このエクセル画像を「私のやり方」で綺麗にします。

そもそもWEBサイトの記事にエクセルの表を貼り付けるのってどうなの?

多分、多くの人は先程のエクセルの表くらいなら、テーブルタグでささっと作った方が良いんじゃないの?と思った事でしょう。それが正解です。

サチコのヘルプ記事でも以下のように書かれています。

重要なテキストを画像に埋め込まない
重要なテキストを、リンク ページの見出しやメニュー項目などの要素の画像に埋め込まないでください。ユーザーによっては、その要素にアクセスできないことがあるからです。重要なテキスト ベースのコンテンツにすべてのユーザーが確実にアクセスできるようにするには、通常の HTML 内に記述してください。

要はGoogleのクローラーは画像のalt属性やファイル名は読めるけれど、画像の上に表示されたテキストは読めないので、仮にそこに重要なキーワードがテキストとして含まれていても認識できませんよ。だから、出来る限りテキストで表現してね。って事を言っています(多分)。

また、alt属性にむやみにキーワードを詰め込むのもペナルティーの原因になったりしますので、それも出来ません。

従って、テーブルタグを使って表現できるものはエクセルなど使わず普通にテーブルタグを使って表現した方が良いです。この方がGoogleにとっては分かりやすいですし、記事本文に含まれるキーワードの数も増えるはずです。

とは言え、現代はスマホ主流ですよね。あの小さな画面に対して、情報量が多いテーブルを綺麗に見せるのって結構難しいです。

特に列が増えすぎると、スマホユーザーからするとテーブル全体が見えないわけですからウザいですよね。
まして、東雲の会社にはテーブルを綺麗に見せる技術を持っている人間が私も含め一人もいません。じゃあどうするか?と言うと、エクセルで表作って画像処理しよう!ってなるんですねぇ。ソッチのほうがまだスマホからでも見やすいから(見やすいと思っているから。)

以下それを踏まえての記事です。よろしくお願いします。

【参考】画像処理した方が良い場合

これについては別途「アフィリエイトサイトでコンテンツを画像処理した方が良い場合【記事未了】」で詳しく書いていますので、そちらを参照して下さい。

今回処理する画像の前提条件

今回処理するエクセル画像は「自動車保険サイト」の中の「レクサスユーザー専用の自動車保険」の概要について紹介する記事で利用された画像です。その中でもレクサス自動車保険の保険料は高いのか?というセクションで用いられた画像です。

エクセルで表を作る時の悪い例1

で、「レクサス自動車保険」って「あいおいニッセイ同和損保(以下、あいおい損保)」が引受保険会社なんです。だから、記事の流れの理屈としてはあいおいが引き受けてるんだから、保険料はあいおい損保のソレと大きく変わることはないはず。⇒一応、約款等で明示されている保険料の割引制度を比較してみよう!という感じの中で使われたエクセル表画像です。

記事自体は改善の余地ありです。実際にレクサス自動車保険の見積を取ってみたほうが良いのは間違いありません。ただ、社内にレクサス所有者がいないので苦肉の策でこういう流れになっています。いずれは実際に見積もりを取らないと駄目ですね。

修正する事項

修正する事項は以下のとおりです。

  • 文字のフォントは「メイリオ」で統一
  • 対等比較項目は(列・行ともに)出来る限り幅を同じにする
  • 見栄えが良くなるように項目(列・行ともに)の順序を調整する
  • 画像ボケ(ピンぼけ)が起きないように画像サイズをサイトのメインカラムの幅に合わせて調整する

こんな感じでしょうか。また、思いついたら追記します。

以下、それぞれ詳しく見ていきます。

文字のフォントは「メイリオ」で統一

フォントは「メイリオ」を使用するのが無難。

別に、メイリオが最上級って言っているわけではありません。でも無難です。

あれこれ考えずにメイリオにして下さい。

対等比較項目は(列・行ともに)出来る限り幅を同じにする

対等比較項目とは、今回の例で言う「レクサス自動車保険の割引制度」と「あいおい損保の割引制度」です。

■エクセル画像再掲
割引制度比較のために作ったエクセル画像

今回の記事の文脈から言えば、両者は対等です。対等なら原則として両者の幅は統一するのが普通です。じゃないと、読者に「あ、この記事に執筆者はあいおい損保の方を強調したいのかしら?」と誤認させてしまいます。

本当にあいおい損保の方を強調したかったのであれば、別に構いません。でも記事本文内で両者は対等です。なら幅は統一するべきでしょう。

ちなみに、文章や画像などの見せ方に強弱を付けて、ユーザーを自分の売りたい商品(あるいは自分の見せたい情報や強調したい情報)に誘導する事を、行動心理学用語で”松竹梅の法則(*)”と言います。

* 定食屋で、松・竹・梅の3つのメニューがあったら中間の価格帯である「竹」のメニューを頼む人が圧倒的に多いです。なぜなら、高すぎると金銭的に苦しくなるし、一番安いのを選ぶと惨めな目で見られるかもしれない・・・という心理が働くから。

両者の中間である「竹」なら、どちらの心理的負担も無くす事が出来ますよね。だから、竹を選ぶ人が多い(らしい)

これ、実はお店の戦略で、多くのお店では「竹」のメニューの利益率が一番高くなっています。人間の心理を逆手に取ったマーケティング手法ですよね。

これをWEB上で体現している物の例をあげるとすると、こちらの「ミネラルCCクリーム|LANOA公式通販⇒⇒⇒魚拓はこちら(LPが削除された時用のリンクです)」のLPとかどうでしょうか。

このLPの販売商品の見せ方が「松・竹・梅の法則」に似通った方法です。ごめん、もしかしたらコレは松・竹・梅の法則じゃなかったかもしれない。でもマーケティング的に何かしらの名前は付いてたような。)

ミネラルCCクリームのお得なセット定期便

どうでしょうか、本来なら「ミネラルCCクリーム」の単品お試し商品を申し込ませるところ、ミネラルCCクリームは当然弊社が販売しているミネラルフェイスパウダーと一緒に使うと効果的だし、お得だよって事で「クリーム&パウダー」を“人気No.1”という表記を付けてまで売ろうとしています。

販売会社としては「ミネラルCCクリーム&パウダーの定期便」が売れるのが一番利益率が高くなるわけですから、こういう売り方になります。「ミネラルCCクリームとはなんぞや?」という視点でLPを見に来たお客さんがパウダーまでも定期便で買ってくれたらそりゃ利益率・LTVは高くなりますね。

「ミネラルCCクリーム&パウダー」のセットの定期便を一番売りたいのであれば、多少利益率は低くなっても「ミネラルCCクリーム」単品の定期便よりも単価を下げないとダメだと、個人的には思いますけどね。

消費者もそこまでアホじゃないので、このLPの作りだとあんまり決まってないような気がしますね。見せ方は良いと思いますが、消費者のベネフィットがないので普通の消費者なら「あ、これお得じゃないわ!」って事で申込まで行かないと思います。

このように、何かしら意図があるのであれば、見せ方に強弱を付けても良いと思います。ただ、今回の事例は対等比較です。わざわざ違う幅を利用する必要はありません。(もちろん、スペースの関係で仕方ない場面もあります!極端に捉えないように!)

この辺りのセンスは、Excel本やらビジネス本やらマーケティングの本やらをそれぞれ1冊ずつでも本気で読めば身につくと思うので、是非何かしら読んどいた方が良いでしょう。

細かいことですが、後から直すとなると無駄なコストがかかりますし、どうせ作るなら最初からこういう所に気をつけて表を作成しましょう。

見栄えが良くなるように項目(列・行ともに)の順序を調整する

続いて今回の例示の場合だと行項目(イモビライザー制度とかECOカー割引制度の部分)ですね。

■エクセル画像再掲
割引制度比較のために作ったエクセル画像

コレも少し調整が必要だと思います。なぜなら、今の書き方だとちょっと見栄えが悪いから。

もちろん、意図してこの順番にしてるなら良いと思います。でも、今回の表の場合「リスク細分型割引」という項目以外は全て対等の情報だと思います。であれば、別にそこまで厳密に順番が決められている訳ではないはずです。

じゃあ、文字数が多くて行幅が太くなりそうなやつは下に持ってくるとか、文字数が少ないやつは上に持ってくるとか、そういう配慮が必要です。読者が表を読みやすくなるような配慮が。

また、「対損傷性・修理性割引(車両保険が対象)」の項目も目に付きますね。コレ、どう考えても三行じゃなくて二行にした方が良いでしょう。なんで最後の「引」だけで一行使うんだ。

ココを直すだけでも大分スッキリすると思います(順番を変えなかったとしても)。

画像サイズをサイトのメインカラムの幅に合わせて調整する

■Excel表再掲
エクセルで表を作る時の悪い例1

上の画像少しぼやけていると思いませんか。画像がぼやけてるとキッチリと見る気が無くなりますよね。なぜボケているかと言うと「サイズが合ってないから(画像をわざわざ縮小しているから)(*)」です。

* スマホから見る場合はある程度の大きさがあれば綺麗に見えるので気にならない。ココで言ってるのはPCでの見え方のお話です。
私はサイトごとに標準の画像サイズを決めています。たとえば、自動車保険のサイトだったら「横幅は550px」にするようにしています。横幅と縦幅の比率はこちらの記事で書いてますので、そちらを参考に。

で、この自動車保険のサイトのメインカラムの幅は概ね620pxです。自動車保険サイトの場合は”画像は横幅いっぱい使わない!”という方針をとっているので、通常の画像は550pxに設定しています。これくらいが丁度いいから。

しかし、コレは通常の賑やかし画像の場合に限った話なのですが、WordPressの記事ソースを見ると以下のように、わざわざ550pxに縮小してくれています。

サイズ感を表すhtmlソース

しかし、しかし。そもそも、テーブルタグで表現できない大きさ・複雑さだからExcelで表にしているわけであって、コレは本来であれば視認性を高めるためにメインカラム一杯を使って表示させなければならない項目です。

わざわざ横幅550pxに縮小して表示させる必要ありません。

加えて言えば、Excelで表を作ってFast stone capture(*)でキャプチャーを取る段階でサイトのメインカラムの最大幅620px程度を意識してキャプチャーを行えば、フルサイズでそのまま掲載出来るはずです。

* 何かと便利なので、うちはFast stone captureというキャプチャソフトを使っています。有料版は動画もとれます。動画はカムタジオスタジオの操作性には負けますが、それでも結構満足出来るレベルです。

東雲が修正したExcel表画像はこちら

以上を踏まえて、東雲が修正したExcel表がこちら。

gifバージョンのExcel表の正しい例

どうでしょうか、

割引制度比較のために作ったエクセル画像

に比べれば見やすいのでは?

ましてサイズも私が作ったのは「486px×433px」なので縮小の問題も生じません。(あと,jpgでExcel表画像がぼやける場合はgifかpngで保存してアップロードすると綺麗になる事が多い)。

細かいことですが、こういう所までしっかりと気を使って欲しいところですね。

ちなみに、結局この事例の表はExcelを使わずに普通にテーブルプレスで表現しましたw

まとめ

というわけで、細かいしょうもない事をグダグダ書いてきました。

あんまり読むメリットも無いのに記事を読んでくれた初心者の方々。お疲れ様でした。

一つ言える事があるとすると、

「こんな事に気を使う時間があるなら記事書いた方が売上伸びるよ」

ってことです。東雲でした。