2020.2.16

【2020年版】スプレッドシートやExcelの表を見やすくするための手法8選

おそらくこのブログで初めてデザインに関する投稿です。

そして、Webデザイナーなのに、初めてのデザインに関する投稿の内容がスプレッドシートという……

はじめに

会社でよくスプレッドシートやエクセルで表を作りますよね?

あれって、人によって見やすい、見にくいなどあると思います。

今回は、少しの一工夫でスプレッドシートやエクセルの表が格段に見やすくなる方法をいくつかご紹介します。

 

でも、まずは、見にくい表見やすい表を見比べてみましょう。

 

最初に見にくい表です。

こちらは、特に何も手を加えず、ただデータを入力した表です。

確かに見にくいですね。

 

次に、少し手を加えた見やすい表がこちらです。

ふたつの表の差は一目瞭然だと思います。

余談(行と列、どっちが縦でどっちが横なのかの覚え方)

スプレッドシートなどでよく耳にする「行」「列」、どっちが「縦」か「横」か分からなくなってしまう方はいい覚え方があります。

それぞれ、ひらがなで読んだ時の「最初の文字の1画目」に注目してください。

  • 行 → ぎょう → 最初の文字は「ぎ」
  • 列 → れつ → 最初の文字は「れ」

「ぎ」の1画目は「左から右」に書きますね。

「れ」の1画目は「上から下」に書きますね。

  • 「左から右」=「横」=「行」は横のこと
  • 「上から下」=「縦」=「列」は縦のこと

 

しょうもない覚え方ですが、私はこの方法で覚えました。

気が向いたら参考にしてみて下さい。

 

以上、余談でした。

それでは、表を見やすくする方法を紹介していきます。

 

表を見やすくする方法(最低限これはやろう!)

行の高さを広くする

先程の「見にくい表」「見やすい表」では、下記のように「見やすい表」のほうが行の高さを広くしています。

こうすることで、1行1行ゆとりが生まれます。

また、行の高さを変えたら、文字を縦方向に対して中央寄せにするのも忘れずにしましょう。

■ スプレッドシートの行の高さの変更方法
  1. 左側の行の数字をクリックして1行全てを選択
  2. 右クリック
  3. 「単一行のサイズを変更」を選択
  4. 任意の数値を入力(サンプルでは30

「見出し」の見た目を「本体」と変える

ここで言う「見出し」とは、一行目の「商品名」や「数量」の行のことです。

「本体」は、「見出し」より下の行のデータの部分のことです。

先程のサンプルでは、以下のように見出しの見た目を変えています。

  • 背景を黒にする
  • 文字色を白にする
  • 文字を太字にする
  • 文字を中央寄せにする

こうすることで、「見出し」「本文」の差別化を図ることが出来ます。

表を見やすくする方法(もっと見やすくするために…)

偶数行・奇数行でセルの背景色を変える

「見やすい表」では、1行ごとにセルの背景色を微妙に変えています。

ここでポイントなのが、「微妙」に色を変えることです。

色の差(コントラスト)が開きすぎると逆に見にくくなってしまいます。

基本的には、「白」「薄いグレー」で設定するといいでしょう。

■ スプレッドシートで1行ごとにセルの背景色を変える方法
  1. 変えたい範囲を選択
  2. 上部メニューバーの「表示形式」→「交互の背景色」を選択
  3. ここで任意の色を設定します

 

列の幅を調整する

「見にくい表」では列の幅が均等ですが、「見やすい表」では列の幅をそれぞれ調整しています。

「No」の列は数字しか入力しないから狭める、「商品名」の列は長くなるので広くする…のようにそれぞれ列の幅を調整することで見やすくなります。

線の濃さを薄くする

デフォルトの線の色は少し濃すぎるので、少し薄い色の線にしてあげます。

そうすることで、表が柔らかい印象になります。

表の「上と左」を「1行1列」開ける

「A列」と「1行」を空白にすることで余白が生まれ、ゆとりをもった見た目になります。

「見にくい表」では窮屈感がありますが、「見やすい表」だと窮屈感は感じないかと思います。

合計の手前の列の線の種類を変える

「合計」や「総計」の列は、他の列の値を足した値を表示しているので、他の列と意味合いが異なります。

また、表を見て何かを判断するときに、「合計」や「総計」をまず初めにに見るケースも多いかと思います。

なので、「合計」や「総計」は他の列と差別化を図ります。

この時に、「合計」や「総計」の列の背景色を変えるでもいいのですが、色をたくさん使いすぎると、逆にごちゃごちゃしてしまうので、今回は線の種類を変えることで差別化をします。

下記では、「合計」の列の左側の線の種類を二重にしています。

こうすることで、他の列の線と種類が変わり、「合計」の列だけ差別化することが出来ます。

数値は3桁ごとにカンマで区切る

数値のデータはカンマ区切りで表示することで、桁数が多いときでも見やすくなります。

■ スプレッドシートで数値をカンマ区切りで表示する方法
  1. 変えたい範囲を選択
  2. 上部メニューバーの下のフォントなどを変更するバーの「フォントを変えるボタンのひとつ左にある123のボタン(表示形式の詳細設定)」をクリック
  3. 「数値」を選択

まとめ

スプレッドシートやExcelの表は、少しの手間を加えてあげるだけで格段に見やすくなります。

表を見やすくするということは、「データの間違った読み取り方をする可能性も低くなる」ということなので、面倒くさがらずにキレイな表を作ることを心がけましょう。

シェアする
フォローする
Web-Guided - web業界で働く方を少しだけ手助けするメディア