【見やすいサイト】 グラフは縦置きが見やすい
このサイトでは、図表を多く使用しています。グラフと表は、自分で作成しています。グラフを作成するうえで気付いた点、簡単に表を作る方法などを紹介します。
ポイント
- グラフは縦置きが見やすい
- 縦横比は大和比が良い
- 表の簡単な作り方
はじめに
見やすいグラフはどんなグラフだろうか？
この サイトでは、少しでも読みやすくなるように、なるべく多く図表を使うように心がけている。
今回、どのようなグラフが見やすいか考えてみた。
テンプレート
まずは、書き手が作成した グラフ の テンプレート を紹介する。
医学サイト - グラフテンプレート
グラフは自分で作る
このサイトでは、主に医学論文の内容を紹介している。
サイトを開設した当初は、論文の図をそのまま引用することが多かったが、今はなるべく自分でグラフを作るようにしている。
グラフを自分で作ると、どこにボイントがあるのか示しやすい。また同じ形式で作るので、サイトを通して統一できる。
Google スプレッドシート
グラフの作成には、Google スプレッドシートを利用している。
最初は Microsoft Excel を使用していたが、操作が簡単で拡張機能の追加も便利だったので、今は Google スプレッドシート を利用している。
Google スプレッドシート の 問題点 は、クラウド上に保存するのでデータ流出の懸念があるのと、誰が作っても同じような見た目のグラフが出来上がることだと思う。
書き手が入力している データ は基本的に Web上 で公開せれている医学論文なので、データの安全性については特に問題ないと考えている。
グラフ は 縦置き
グラフを作り始めた当初は、あまり考えずに横長のグラフを作成していた。
ところが、あるときスマホで見ると表示が小さくて見にくいと感じた。
参考：PNG・JPEG・WebP・AVIF の 画像形式 を比較
グラフを縦置きにしてみると、スマホの画面にフィットして見やすくなった。特に、細かい数字や文字がずっと読みやすくなった。
縦長のグラフはパソコンだとスクロール量が増えてしまうが、今はスマホのユーザーが多いので、スマホの表示を優先することにした。
グラフを続けて使うときは、パソコンやタブレットでは２つ並べて表示するようにしている。
縦横 は 大和比
美しいとされる縦横比は、いくつかある。
大和比 ５：７
黄金比 ５：８
白金比 ５：９
参考：グラフのアスペクト比はどれぐらいが良いか
グラフのアスペクト比はどれくらいが良いか - Qiita
初めに神は細部に宿る，と云う．論文を読んでいると，偶に，「変に引き伸ばしたグラフだな」とか「ちょっと横に長いな」とか思うことがある．逆の立場になって，自分の論文を読んでもらうときには，「綺麗だな…
黄金比が特に有名な比になるが、他の比率も実際に試してみた。
大和比、黄金比、白金比
参考：Blogger の画像サーバーの比較
縦置きのグラフだと、縦横比が一番近い大和比が見やすいと感じた。グラフは大和比で作成することにした。
グラフ を SVG 形式 で保存できる
スプレッドシートは、作ったグラフを SVG 形式で保存できる。
SGV は画像フォーマットの一つで、ベクトルと座標で画像を描画する。他の形式が画像を点の集合で描くのに対して、SVG は数式で描くイメージになる。
SVG は一般的に容量が小さくて、変形が簡単にできる利点がある。特に拡大・縮小をしても画像がぼやけないのが優れている。
スプレッドシートのグラフ作成画面は、よくみると SVG 画像 編集の UI になっている。
書き手は今まで SVG 画像 の編集はしたことがないと思っていたが、意外なところで経験していた。
SVG 形式 の欠点
SVG 形式は利点が多いが、欠点もある。
SVG は、数式に変換しにくいグラディエーションのある繊細な表現を苦手にしている。
スプレッドシートで作成したグラフを拡大して見ると、輪郭がはっきりしていてグラディエーションが単純化されているのが分かる。
特に、グラディエーションに使われている色が Excel だと RGB なのに対して、スプレッドシートでは グレースケール になっている。
グラフ全体で見ても、スプレッドシート は Excel のような柔らかさが無い。
オンオフのはっきりした デジタル なグラフで、少なくとも見て美しいグラフではない。
書き手はスプレッドシートはきれいなグラフを作るのではなく、手早く資料を作るツールだと捉えている。
表を作る
このサイトでは、表も自作している。
| 接種対象 | 小児 | 高齢者 | 基礎疾患のある人 |
|---|---|---|---|
| ニューモバックス | △ | 定期 | ◯ |
| プレベナー13 | 定期 | ◯ | ◯ |
| バクニュバンス | 定期 | ◯ | ◯ |
| プレベナー20 | 2024年8月 | 申請中 | 申請中 |
参考：４つの肺炎球菌ワクチンの比較
表を作るときに、はじめは スプレッドシート を スクリーンショット で撮影していたが、記事の執筆に Markdown エディター を使うようになってから、Markdown 形式 で作成するようになった。
Markdown はHTML を簡略化した記法で、HTML よりずっと簡単に氷を作ることができる。
上の表は Markdown だとこのようになっている。
| 接種対象 | 小児 | 高齢者 | 基礎疾患のある人 |
| --- | --- | --- | --- |
| ニューモバックス | △ | 定期 | ◯ |
| プレベナー13 | 定期 | ◯ | ◯ |
| バクニュバンス | 定期 | ◯ | ◯ |
| プレベナー20 | 2024年8月 | 申請中 | 申請中 |
これを HTML に展開するとこのようになる。
<table>
<thead>
<tr>
<th>接種対象</th>
<th>小児</th>
<th>高齢者</th>
<th>基礎疾患のある人</th>
</tr>
</thead>
<tbody>
<tr>
<td>ニューモバックス</td>
<td>△</td>
<td>定期</td>
<td>◯</td>
</tr>
<tr>
<td>プレベナー13</td>
<td>定期</td>
<td>◯</td>
<td>◯</td>
</tr>
<tr>
<td>バクニュバンス</td>
<td>定期</td>
<td>◯</td>
<td>◯</td>
</tr>
<tr>
<td>プレベナー20</td>
<td>2024年8月</td>
<td>申請中</td>
<td>申請中</td>
</tr>
</tbody>
</table>
HTML で書くのはとても大変だが、 Markdown を利用することでずいぶん楽に作ることができるようになった。
スプレッドシート から簡単に表を作る
普段 Markdown を使っていない人でも、拡張機能を利用して簡単に表を作ることができる。以下に、その方法を紹介する。
まず スプレッドシート に Generate Markdown Table という拡張機能をインストールする。
次に、表を作成したい範囲を選択し Generate Markdown Table を実行する。
すると Markdown が出力されるので、これをコピーしてオンラインの変換ページで HTML に変換する。
書き手は toshi さんが公開されている Markdown Minify を利用している。
Markdown Minify
このページを使用するには JavaScript を有効にする必要があります。
これで、Markdown を 簡単に HTML に変換できる。あとは Code Beautify などのページで成形して、Blogger の入力画面に貼り付ければ完成する。
こうして作った表はデザインを統一できて、後から修正することもできる。
まとめ
このサイトで作成している、グラフと表について紹介した。
このサイトでは今回紹介した以外にも、画像を多く使用している。
AI 画像 と Google Trends については別の記事で紹介しているので、よければ参照していただきたい。
次回から、血圧についての連載をスタートすることにする。