余白を生かして見やすいダッシュボードを作ろう!

余白を生かして見やすいダッシュボードを作ろう! | Tableau-id Press -タブロイド-
アイキャッチ4

tomokoです。

見やすい資料やダッシュボードは説得力が高まり、使われるものとなるためにとても重要です。
配置や色使いなど大切なことはたくさんありますが、余白についてはあまり意識されずに作成されていることもあるので、
余白のありなしでどのくらい見え方が変わるのか比較し、余白の大切さを実感していただけたらと思います。

1. 余白の効果

① 要素同士の関係性を明確にする
余白は要素同士の距離感を調整し、関連性を明確にする効果がある。
近い要素は関連性があり、遠い要素は無関係と判断される。

② 要素を区分けする
適切な余白を持つレイアウトは、要素を分けて整理し、見やすさを向上させる。
例えば、文章が2段組であることを余白によって明示できる。

③ 読みやすくする
余白はテキストやグラフィックの配置を整え、情報の理解をサポートする。
過密なレイアウトでは読み手が情報を吸収しにくくなる。

④ 要素を強調する
余白を使って要素を際立たせることで、重要なポイントを強調できる。

2. 余白を意識していないテキストと意識したテキストの比較

■余白を意識していないテキスト
行が詰まっていて読みにくいですね…。。

■余白を意識したテキスト
フォントは上と同じですが、行間を空けるだけで見やすさが改善しました。

パワーポイントなどで資料を作成する際は、行間やフォントに配慮し、1ページに盛り込む内容も少なくしましょう。
1ページにたくさん文字があるシートは見えにくく、伝わりにくくなるため、
イラストを使用しながら視覚的に伝えるようにすると内容がぐっと聴講者の脳裏に残るものとなります。

3. 見やすさを意識したプレゼンテーション資料

2024年1月に開催されたJTUG総会で、truestarのスポンサーセッションで使用したプレゼンテーションです。
セッションテーマは「ユーザーコミュニティのススメ ~120%楽しむためのTRY~」で、
「ユーザーコミュニティに参加すると、緊張する、楽しめないのはなぜ?」について、理由を3つ挙げました。

1スライドで十分記載できる内容ですが、総会でのスポンサーセッションで、
聞いてくださっている方に少しでも印象に残ってほしいという思いで、
1スライドには短いテキストと関連したイラストのみとしました。
リラックスして楽しみながら聞いていただきたいという思いもあり、こんなくだけたイラストも使用しました!

イラストの使い方や1スライドに入れるべき内容は、目的によっても変わってはきますが、
余白を恐れず十分にとるようにすると、見やすく印象深いスライドとなります。

次に、ダッシュボードの例を見ていきましょう。

4. 余白を意識していないダッシュボードと意識したダッシュボードの比較

■余白を意識していないダッシュボード(枠線内がダッシュボード全体)
余白の設定をデフォルトから変更せず作成したダッシュボードです。

横に売上、利益、数量が配置され、それぞれ縦にトレンド、カテゴリ別棒グラフ、サブカテゴリ別棒グラフが並んでいます。
Tableauではデフォルトでワークシートに左右上下4のパディングが設定されていますが、それでもかなりぎゅうぎゅうな印象です。

■余白を意識したダッシュボード
パディングで余白を20~30に設定したダッシュボードです。(枠線内がダッシュボード全体)
売上、利益、数量のグループで分かれているというのがよりはっきりとわかり、
縦に並んだグラフ間にも適度に余白が入り全体的に見やすさが改善しました。
ダッシュボードの一番外側に余白があることも、すっきりとした印象となり、見やすさをプラスしています。

5. 余白(パディング)の設定方法

ダッシュボード左側のレイアウトタブで設定可能です。
ワークシートをダッシュボードに配置すると、デフォルトで上下左右4のパディングが設定されていますが、
デフォルト設定のままで良いか、必ずレイアウトを確認しましょう。
ダッシュボード全体の外側、各シートに最低でも10、できれば20~30でパディング設定すると
すっきりとした見やすいダッシュボードとなります。

設定方法詳細は、外部パディングと内部パディング 設定の違い で紹介しています。合わせてご確認ください!

6. まとめ

余白は、見やすさや伝わりやすさを高め、資料の効果を向上させる重要な要素となります。
上記の内容を意識して適切な余白を設け、伝わる、わかりやすい、印象に残る資料、ダッシュボードを作成していきたいですね。