【Googleスプレッドシート】スプレッドシートにGoogleドライブやWeb上の画像を表示する!(IMAGE関数)(2021/9/12追記版)

PRYTHMWORKS Googleスプレッドシート
Googleスプレッドシート

スプレで画像をやりとりする際の最適解は?

突然ですが、スプレッドシートでWeb上、ないしGoogleドライブ内で「リンクを知っている人全員に共有」を設定した画像が、IMAGE関数というものを式にいれれば、セル内で画像を読み込めます!

以下のシートがその表示例です。(2021/9/12 Dropboxの画像リンク貼り付け方法も追記しました!)

IMAGE関数の表示例
シート1 Web上の画像URL,IMAGE関数

スマホで閲覧している方でスプレッドシートのアプリをインストールしていない方は表示されないかもですので、念のため以下がキャプチャです。

IMAGE関数の構文

IMAGE関数の使い方です。

=IMAGE(“画像URL”, [モード], [高さ], [幅])

※画像urlのみ必須で他は任意のオプション項目です。

2つ目のモードはどのように画像表示するか、1~4の数字を選び、以下の4つのモードから選択します。

  1. アスペクト比を変えずにセル内に収まるように画像サイズを変更します。
  2. アスペクト比を無視してセル内に収まるように画像を引き伸ばすか縮めます。
  3. 画像を元のサイズのままにします。その場合、画像がトリミングされることがあります。
  4. カスタム サイズに変更できます。

3,4の引数ではモードが4のときの場合のみ、表示画像の幅と高さを指定します。

Googleドライブの画像をimage関数で表示するには?

image関数ではGoogleドライブの画像を表示することにも対応しており、スプレッドシートのセル内に表示することが可能です。

Googleドライブに保存されている画像をスプレッドシートのセルで表示するには、まず、その画像を外部に公開していなければいけません。

通常のGoogleドライブの画像は自分にしか見えていない制限モードのため、URLを生成してもスプレッドシートからはアクセスができません。

画像を公開状態にするには、

  1. Googleドライブの管理画面上で、スプレッドシートにimage関数で掲載したい画像を右クリックし、「共有可能なリンクを取得」を選択します。
  2. 制限付きという状態になっているので、そこをクリックし、「リンクを知っている人全員」に変更します。
  3. これで外部からもGoogleドライブの画像にアクセスできるようになったので、「リンクをコピー」をクリックして、画像リンクを取得します。

image関数でGoogleドライブ画像の表示方法

Googleドライブの画像の共有リンクはスプレッドシートのセルに表示できるURLではないため、Googleドライブの単純な共有URLではだめで、

スプレッドシート上でも表示できるようにURLを以下のように変更してあげる必要があります。

https://drive.google.com/file/d/1M38tplZyFsnb1xvPg64dWy_JPBBVrEB_/view?usp=sharing

https://drive.google.com/uc?export=download&id=1M38tplZyFsnb1xvPg64dWy_JPBBVrEB_

赤字の、idにあたる部分のみが元の共有URLから拝借する部分です。

これを一回一回手動で書き換えるのは大変な手間なので、

IMAGE関数用に作成した以下のような式を通過させて出力されたパスをIMAGE関数で読み込むと効率的です。

以下の式は汎用的に使用できますので、どうそコピペしてお使いください。

A7のセルにGoogleドライブ上の画像の共有URLがあるとして、

="https://drive.google.com/uc?export=download&id="&mid(A7,find("d/",A7)+2,find("/view?usp=sharing",A7)-find("d/",A7)-2)

これでOKです。(ご自身のシートに合わせて赤字部分を変更してください)

Dropboxの画像をimage関数で表示するには?(2021/9/12追記)

Dropbox上に保存したの画像もIMAGE関数で表示できることが判明しましたので、追記します!

僕的にはGoogleドライブよりもDropboxの方が使いやすいので、これはありがたかったです。しかも、Googleドライブのやり方ではではなぜかスマホやタブレットのスプレッドシートでは画像が表示できませんでしたが、Dropboxでは表示できました。

まず、Dropboxのオプションで画像の共有URLを作成します。

こうして取得できる共有URLですが、

Dropboxの画像の共有リンクスプレッドシートのセルに表示できるURLではないため、

スプレッドシート上でも表示できるようにURLを以下のように変更してあげる必要があります。

https://www.dropbox.com/s/4fgaijfg938lvev/IMG_3393.JPG?dl=0

https://dl.dropboxusercontent.com/s/4fgaijfg938lvev/IMG_3393.JPG?dl=0

赤字の、idにあたる部分のみが元の共有URLから拝借する部分です。

これを一回一回手動で書き換えるのは大変な手間なので、

IMAGE関数用に作成した以下のような式を通過させて出力されたパスをIMAGE関数で読み込むと効率的です。

以下の式は汎用的に使用できますので、どうそコピペしてお使いください。

A11のセルにGoogleドライブ上の画像の共有URLがあるとして、

="https://dl.dropboxusercontent."&MID(A11, FIND("com",A11),100)

これでOKです。(ご自身のシートに合わせて赤字部分を変更してください)

クライアントや社内での画像のやりとりでのトラブルを解消できるか?

スプレでの画像のやりとりは制作の仕事で多くなっています。

しかし、画像の扱いに関するリテラシーの違いのため、スプレに貼った画像はそのまま再利用できると思われ、元画像をいただけていないということもあり得ます。

もしくは、もっと多いのは、ドライブやDropboxで画像を大量に頂けても、画像名がすべてifa6464gagaga.jpgとか、何らかの機器で生成された生の状態であるために、

どの画像をどれに使用したいのか不明!というケースがあります。

ECサイトの商品画像の場合、これは致命的です。

以前、サイト移行の際に膨大な量の画像がこの状態で渡され、結局旧ECサイトの全商品ページを見ながら、画像名をリネームしたり、商品名で名付けたフォルダに仕分けするという事務作業が1日がかりで発生してしまいました。

上記のような方法を知っていれば、

  • 元画像は必ずドライブに上げている必要がある
  • セル上にもその画像が表示されるので、対応する商品名を隣のセルに記載でき、命名ルールの管理でき、紐づけの間違いも避けられる

ので、精度の高いプロジェクト進行ができるのではないでしょうか!

Webサイト制作を依頼したい方へ

PRYTHM WORKS(プリズムワークス)は、東京都墨田区、東京スカイツリーのふもとにあるWebコンテンツ制作事務所です。

華々しいおしゃれなECサイトをはじめ、アンダーグラウンドな案件まで幅広くご依頼をいただき、どんな案件でも真心・丁寧・楽しくを理念に掲げて制作しております!

作りたいサービスはあるけど、まずは費用感が知りたい!という方も、まずはお問い合わせください!

mail@prytymworks.tokyo

PRYTHM WORKSが手掛ける仕事の一部をご紹介します。

制作のご依頼者様用 費用かんたんお見積もりフォーム

おそらく本記事を読まれるのは、制作の現場の、法人またはフリーの、プロデューサーの方、ディレクターの方、エンジニアの方がほとんどかと存じます。
いつもおつかれさまです!そして本記事をお読みいただきありがとうございます。
紹介した記事の内容について、またはその他制作のご依頼について、以下のフォームより簡易お見積もりができます!
試算だけならフォーム送信しなくてもできますので、ぜひ試しにいかがでしょう?

お仕事をご希望の制作者様用 お問合せフォーム

また、まずはライトなご相談から…ということであれば、こちらのコンタクトフォームからお気軽にどうぞ!ご縁を大切にしてご返信いたします!

    ShopifyでのECサイト制作を行うならPRYTHMWORKS(プリズムワークス)へ

    ShopifyでのECサイト制作を外注しようとお考えの方は、PRYTHMWORKS(プリズムワークス)にご依頼ください。高品質なWebサイト制作で、お客様のビジネス成長を支援する会社です。Shopifyを使ったECサイト制作に力を入れており、売上向上に貢献するECサイト構築を代行いたします。豊富な経験と実績にもとづき、お客様のニーズに最適なECサイトを構築しますので、費用相場や制作事例など、気になることがございましたらお気軽にお問い合わせください。移行のご相談も承っております。

    社名合同会社PRYTHMWORKS
    事業内容EC/Webサイトの構築、管理保守
    CEO吉川直人
    法人事務所所在地〒150-0001
    東京都渋谷区神宮前六丁目23番4号桑野ビル2階
    設立日2023年(令和5年)7月3日
    沿革2020年(令和2年)10月
    個人事業主PRYTHMWORKS事業開始
    2023年(令和5年)7月
    合同会社PRYTHMWORKS設立

    会社に関するご連絡は以下よりお願いいたします。

    mail@prytymworks.tokyo


    お問い合わせ用LINEはこちらからどうぞ!

    お問い合わせ用LINEはこちらからどうぞ!

    LINE

    GoogleMeetの相談予約が可能になりました!

    以下の空いている日からサクッとGoogleMeet(ビデオ通話)の予約をどうぞ!

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