記事内に広告が含まれています。

Canva Codeでグラフを作るなら、見た目より先に数字を確認しよう!初心者のダッシュボード入門

表の数字とグラフを照合して資料を作るオリジナル解説イラスト:cover AI

表の数字はそろっているのに、会議で説明する資料になると手が止まる。そんな場面で、Canva Codeを使ってグラフやダッシュボードを作る方法があります。

ダッシュボードとは、売上や件数などをまとめ、状況を見渡せる画面のこと。Canvaは9月の新機能紹介で、表計算データやウェブ調査から視覚的なダッシュボードを生成する使い方を紹介しています。

ただ、グラフがきれいだと、数字まで正しいように感じませんか?今回は「生成して終わり」にせず、元の表と照合できる資料を作ることを軸に、初めての準備と確認方法を見ていきましょう。

Canva Codeって何?ログイン用のコードとは別です

合計を比べるグラフと、時期ごとの変化を見るグラフ。先に知りたいことを決めましょう。
合計を比べるグラフと、時期ごとの変化を見るグラフ。先に知りたいことを決めましょう。

Canva Codeは、言葉で指示して、クリックや入力に反応するデザインを作るAI機能です。グラフのほか、計算ツールやクイズ、ウェブページなども作成対象になります。

メールに届く認証コードとは別の機能です。「Canva コード」で検索すると両方の情報が出るため、探すときはCanva Code、コード生成、ダッシュボードなど、目的も添えると区別しやすくなります。

一枚のグラフと、操作できる画面は違う

月別の売上を棒グラフにするだけなら、まず通常のグラフ機能で足りるか考えてみてください。見る人が月や店舗を切り替え、同じ画面で別の集計を見たいなら、操作に反応するデザインの出番があります。

たとえば店舗Aと店舗Bの合計を比べたいのか、店舗Aだけの毎月の変化を追いたいのか。この違いで、必要な図も操作も変わります。

先に決めること

「誰が、何を判断するための画面か」を一文にします。見た目の希望は、そのあとで加えても遅くありません。

「分かりやすいグラフを作って」だけだと、何を強調すればよいかが曖昧です。「二店舗の月別販売件数を比べ、減った月を見つけたい」なら、比較の対象と目的がはっきりします。

元の表を小さく整えると、確認が楽になります

期間・項目名・単位をそろえてから、グラフの材料にします。
期間・項目名・単位をそろえてから、グラフの材料にします。

最初は、架空の三か月分で十分

いきなり仕事の大きなファイルを渡す前に、小さなサンプルで考えてみましょう。ここでは次の架空の販売件数を使います。

月A店(件)B店(件)
1月3020
2月4025
3月2030
合計9075

この表なら、A店の合計は90件、B店の合計は75件、両店舗の合計は165件です。生成したグラフを確認するための基準を、先に自分でも計算しておきます。

空欄とゼロを、同じ意味にしない

ゼロは「件数がなかった」という数字です。空欄は、まだ入力していない、集計できていないなど、別の意味かもしれません。

その違いを決めずにグラフへ進むと、未集計の月を販売ゼロとして扱ってしまうことがあります。空欄が何を表すかは、元の資料を作った側で確認しておきましょう。

おまめ
小さい表なら、合計を自分でも確かめられますよね。最初の練習は、その「答え合わせできる大きさ」が使いやすいと思います。

列名にも単位を添えます。「売上」だけでは、円なのか万円なのか分かりません。今回は「販売件数(件)」なので、金額のグラフへ勝手に変えないよう、指示にも単位を書きます。

複数の表を組み合わせる場合は、対象期間と項目の意味もそろえます。注文した件数と発送した件数を同じ「件数」として足すと、計算自体が合っていても、伝える意味が変わってしまいます。

指示には、数字を変えない条件も入れてみよう

材料を整える、指示を出す、生成を見る、元の表と照合する、という流れ。
材料を整える、指示を出す、生成を見る、元の表と照合する、という流れ。

公式の入口は、CanvaホームのCode

公式ヘルプでは、ひとまとまりの画面を作る場合はホームからCodeを選び、エディターのCanva AIで内容を説明する手順が示されています。

グラフなど一つの部品を作りたい場合は、Canva AIからCodeを選ぶ入口もあります。作成後は、デザインに追加して使えます。

Canva CodeはCanvaが対応する言語をサポートし、日本語も含まれます。ただし、チームの設定や利用プランによって、使える機能や利用枠は異なります。Codeが見つからない場合も、まずアカウントの提供条件を確認してください。

このサンプルなら、何を頼む?

指示の例

次の表だけを使って、A店とB店の月別販売件数を比較する画面を作ってください。単位は件。数値は変更・補完しないでください。月別の棒グラフと、各店舗の三か月合計を表示してください。空欄は未集計として扱い、ゼロに置き換えないでください。対象期間と単位を表示し、スマホでも読める大きさにしてください。

この例は、完成結果を保証する指示ではありません。欲しい表示と、変えてほしくない条件を分けて伝えるためのたたき台です。

グラフの色だけで店舗を区別せず、凡例や店舗名も残すよう頼むと、読む人が追いやすくなります。青とオレンジで見分けられても、印刷や画面の条件によって違いが分かりにくくなることがあるからです。

修正は一度に全部頼むより、まず数字、次に項目名、最後に見た目の順で進めると、どこを変えたか把握しやすくなります。文字を大きくしたいだけなのに、集計方法まで変えてしまわないようにしたいですね。

Canva公式のアップデート解説では、ホームからの入口、画像を添えた指示、編集、画面サイズの調整を紹介しています。最初の流れを映像で見たい方の参考になります。

合計が合ったら終わり?月ごとの数字も見よう

元の表の一行と、対応する棒を照らし合わせる確認のイメージ。
元の表の一行と、対応する棒を照らし合わせる確認のイメージ。

合計・各行・対象期間の三つを照合

まず、A店90件、B店75件になっているかを確認します。次に1月のA店30件など、元の表の一行とグラフを照合しましょう。

合計だけが合っていても、月の順序や店舗名が入れ替わっているかもしれません。見る人が月ごとの差を判断する資料なら、合計の一致だけでは十分ではありません。

最後に、表示する対象期間と単位を確認します。三か月のデータなのに「年間売上」という見出しが付けば、数字が正しくても資料の説明は誤りになります。

差があるときは、色ではなく条件を直す

想定と違ったら、「違います」だけでなく、元の値と期待する値を伝えます。「B店の2月は25件です。30件として表示されている箇所を直し、ほかの値は変更しないでください」のように、確認箇所を具体的にします。

条件を切り替えられる画面なら、切り替え後も集計を確認します。全店舗では正しくても、一店舗だけにしたときに合計が変わらない、といった点を見落とさないためです。

おまめ
私は、きれいな画面ほど元の表も隣に置いて見たいです。最初に照合する数字を決めておくと、見た目に気を取られず確認できますよ。

公開する前に、動く場所と利用プランを見ておこう

スマホでの読みやすさと、共有する範囲を確認します。
スマホでの読みやすさと、共有する範囲を確認します。

PDFにしたら、同じようには動きません

公式ヘルプでは、操作に反応する機能はCanva上で表示する場合や、ウェブサイトとして公開する場合に働くと説明されています。

PDFや画像として渡すときに、月を切り替えるボタンまで同じように動くと考えないでください。配布する形式に合わせて、必要な情報が最初から見えているかを確かめましょう。

スマホでは、数字や軸の文字が読めるか、選択項目が押せるか、横へ長くはみ出さないかも確認します。作る側の大きな画面だけで、完成と判断しないことが大切です。

Canva全体が無料でも、Codeの条件は別

現在の公式プラン比較では、Canva Codeによるインタラクティブなデザイン生成はPremium AIの項目に入り、無料版では利用不可、Proでは含まれると示されています。Canvaの無料アカウントがあることと、Codeが使えることは分けて確認しましょう。

AIの利用枠は、契約プランや使う機能によって違います。画面を何度も作り直す前に、アカウントで表示される残量と公式の利用案内を確認してください。有料プランでも、無制限とは限りません。

共有前には、元の表に個人名や未公開の数字が入っていないかを見直します。公開範囲は、デザインやウェブサイトの共有設定に合わせて確認しましょう。

もう一本のCanva公式動画は、Canva SheetsとCodeのデータ連携を紹介しています。9月の発表そのものではありませんが、表と操作できる画面がどう関わるかを見る参考になります。

おまめ
AIに任せたいのは、伝わる形を試す手間です。どの数字をどう比較するかは、先に自分で決めておく。そうすると、ダッシュボードが「きれいな飾り」で終わらず、話し合いに使える資料へ近づきますね。
タイトルとURLをコピーしました