Googleスプレッドシート 図形描画で表を画像にする方法

Googleスプレッドシート 表を画像にする方法Googleスプレッドシート

前回、シートやグラフをウェブに公開したり、サイトに埋め込んだりする方法をご紹介させて頂きました。

詳しくはこちらをご覧ください。

その中でもサイトに埋め込む際に問題となっていた、「表の埋め込み」について、さらに詳しくご紹介させて頂きます。

前回の方法では、タブの「ファイル」から「ウェブに公開」を選択して、表を埋め込もうとすると、非常に小さなサイズの表が挿入されてしまいました。

そこで、適切なサイズで表示させるためには、ソースコードに編集を加えることが必要でした。

しかし編集を加えても、表のサイズによっては、画面をスクロールしなければ、表全体を見ることが出来ませんでした。

そこで今回は、表をソースコードとして挿入するのではなく、グラフのように、「画像」として挿入してみようというのがテーマです。

それでは早速見ていきましょう。

スポンサーリンク

図形描画で表を画像にする

表を画像にする

Googleスプレッドシート 表を画像にする方法 図形描画

まずは、画像にしたい表を選択してコピーします。

Ctrl+ C」を押してください。

Googleスプレッドシート 表を画像にする方法 図形描画

タブから「挿入」→「図形描画」をクリックします。

Googleスプレッドシート 表を画像にする方法 図形描画

図形描画」の編集画面が表示されますので、この画面で、先程コピーした表を「ペースト」します。

Ctrl + V」を押してください。

Googleスプレッドシート 表を画像にする方法 図形描画

表の貼り付け」画面が表示されますので、「貼り付け」をクリックします。

「スプレッドシートにリンク」か「リンクなしで貼り付け」の選択がありますが、ここではどちらでも問題ありません。

Googleスプレッドシート 表を画像にする方法 図形描画

」が表示されました。

続いて、矢印の先にある、「操作」をクリックします。

Googleスプレッドシート 表を画像にする方法 図形描画

ダウンロード」から「JPEG画像」か「PNG画像」のどちらかをクリックします。

すぐにダウンロードが開始されます。

Googleスプレッドシート 表を画像にする方法 図形描画

パソコンのダウンロードフォルダに、画像として保存されました。

あとはこの画像をサイトやブログに挿入すれば完了です。

画像の位置の調整

Googleスプレッドシート 表を画像にする方法 図形描画

先程は「図形描画」の画面で、表をそのままダウンロードして保存しましたが、この画面では様々な編集をすることが可能です。

そのすべての機能を説明するのは、別記事にてご紹介させて頂きますが、ここでは簡単に位置の調整を行います。

表をクリックすると、2重の枠線が表示されますので、その上で右クリックしてください。

項目が表示されますので、「ページ中央に配置」から「左右」、「上下」で位置を修正します。

Googleスプレッドシート 表を画像にする方法 図形描画

表を中心に移動することが出来ました。

表のサイズを変更したい場合は、2重線の角をドラッグすると、サイズの調整もすることが出来ます。

編集が終わったら、先程と同様に、「操作」から画像としてダウンロードして利用してください。

終了させる

Googleスプレッドシート 表を画像にする方法 図形描画

表を画像にするプロセスは完了しましたが、「図形描画」の画面を終了させなくてはなりません。

画面右上の、「保存して終了」をクリックします。

Googleスプレッドシート 表を画像にする方法 図形描画

シートに表が画像として挿入されていますので、画像をクリックして「Delete」キーを押してください。

画像が削除されたら、作業は完了です。

スポンサーリンク

サイズの大きい表を画像にする

表を画像にする

Googleスプレッドシート 表を画像にする方法 図形描画

続いてこちらの幅の広い表を画像にしてみましょう。

Googleスプレッドシート 表を画像にする方法 図形描画

先ほどと同様に、タブから「挿入」→「図形描画」をクリックします。

Googleスプレッドシート 表を画像にする方法 図形描画

同じ手順で「貼り付け」をクリックします。

Googleスプレッドシート 表を画像にする方法 図形描画

表が挿入されましたが、右側のはじ、赤い枠線の部分をよく見て頂くと分かるのですが、表が見切れているのが分かると思います。

Googleスプレッドシート 表を画像にする方法 図形描画

こちらの画像がそのままダウンロードしたものになります。

「はじ」が見切れてしまっているのが分かると思います。

そこで、「はじ」が見きれないように、編集でサイズを調整します。

画像の調整

Googleスプレッドシート 表を画像にする方法 図形描画

表を選択すると、2重の枠線が表示されます。

四隅のどこかにマウスを近づけると、両向きの矢印が表示されますので、こちらをドラッグしてサイズを小さくします。

サイズの目安としては、右上の矢印の先にある目盛りの「21」までに入るようにしてください。

サイズ内に収まったら、「操作」から画像をダウンロードします。

Googleスプレッドシート 表を画像にする方法 図形描画

先程の画像と比べて頂くと分かると思いますが、こちらの画像では「はじ」がきちんとサイズ内に収まっています。

完成した画像の問題点

小さな表でも大きな表でも画像として保存することが出来ましたが、どちらにも1つ問題があります。

それが、「空白の部分が多い」ということです。

Googleスプレッドシート 表を画像にする方法 図形描画

表のサイズによっては、最初から問題がない場合もありますし、拡大・縮小によって無駄な部分が出ない場合もあると思います。

画像編集ソフトで切り抜いたり、ワードプレスを利用されている方であれば、メディアの編集で切り抜いたりすることは出来ますが、ここではあえて違う方法で調整してみたいと思います。

Google 図形描画

Google図形描画の起動

Google図形描画 使い方

出典:Google プロダクト

今までご紹介させて頂いたGoogleスプレッドシート内にある「図形描画」とは別に、Googleのアプリにも「Google図形描画」が用意されています。

基本的な使い方は同じなのですが、「Google図形描画」のほうがより細かい設定を行うことが出来ます。

それでは先程の表を「Google図形描画」を使って編集してみましょう。

まずは赤い枠線で囲った「Google図形描画」をクリックします。

Google図形描画 使い方

出典:Google図形描画

「Google図形描画」のページが表示されますので、「アプリを起動」をクリックします。

初めて利用される場合は、「拡張機能の追加」というボタンが表示される場合があります。

Google図形描画 使い方

Google図形描画」が表示されました。

Googleスプレッドシートの図形描画が、ブラウザで表示されたような状態です。

表の挿入

ここでGoogleスプレッドシートに戻り、画像にしたい「」をコピーして、この画面でペースト、「Ctrl + V」を押してください。

Google図形描画 使い方 表の挿入

Googleスプレッドシートの時と同じ画面が表示されますので、「貼り付け」をクリックします。

Google図形描画 使い方 表の挿入

無事に「」が貼り付けられました。

ページサイズの変更 1

Google図形描画 使い方 ページサイズの変更

この状態で画像保存をすると、やはり余白が出てしまいますので、余白をなくして行きます。

ページの右下にある三角マークを表のサイズに合う場所までドラッグします。

Google図形描画 使い方 ページサイズの変更

表が拡大され、余白はなくなりました。

この状態で画像として保存します。

Google図形描画 使い方 ページサイズの変更

ファイル」→「ダウンロード」→「JPEG画像」・「PNG画像」で保存してください。

ページサイズの変更 2

Google図形描画 使い方 ページサイズの変更

先程は直感的にページサイズを変更しましたが、サイズを指定して変更することも出来ます。

ファイル」から「ページ設定」をクリックします。

Google図形描画 使い方 ページサイズの変更

ページ設定画面が表示されますので、「カスタム」をクリックします。

Google図形描画 使い方 ページサイズの変更

「インチ」、「cm」、「ポイント」、「ピクセル」の4つから単位を選んで、数値を入力します。

ここでは、「ピクセル」を選択して、「500×400」を入力して、「適用」をクリックします。

Google図形描画 使い方 ページサイズの変更

先程と同様に、表を貼り付けます。

ページと表がずれているので、表を移動してページの中に配置してください。

Google図形描画 使い方 ページサイズの変更

枠線内に収まったら、「ファイル」から画像として保存してください。

作成した画像

Google図形描画 使い方

こちらがGoogle図形描画を使用して作成した表の画像です。

先程まであった余白はほとんどなくなりました。

利用の際の注意点

Googleスプレッドシートの表を余白を小さくして、画像として保存することは問題なく出来ました。

しかしこの方法でもやや問題が残ります。

それが「画像サイズ」です。

直感的にページサイズを変更する方法は、とても簡単に余白をなくすことが出来ますが、表によって画像サイズがバラバラになってしまいます。

サイトに掲載した場合も他の画像とサイズにずれが生じると思います。

事前にページのサイズ指定をした場合は、画像のサイズは一定になりますが、挿入する表によってはレイアウトが崩れたりする場合があります。

どちらの方法で、どのように画像を編集・保存するかは、十分に検討して利用してください。

スポンサーリンク

まとめ

いかがでしたか。

少し手間がかかりますが、無事、「」を画像としてサイトに埋め込む事が出来ました。

画像編集ソフトをお持ちの方であれば、こんな面倒な事をしなくても、画面をスクショして切り抜いてしまえば良いではないかと思われるかもしれません。

確かにそのとおりなのですが、今回はあえて、スクショをしないで画像を保存する方法を目指してみました。

この方法が良いのかどうかは微妙な所がありますが、「図形描画」を使えば、画像編集ソフトをお持ちでない方も「」を画像として埋め込むことが出来ますので、状況に合わせて利用してみてください。

今回も最後までお読み頂きありがとうございました。

コメント

タイトルとURLをコピーしました