カラーコードからセルを塗りたい場面とよくある悩み

Webサイトのデザイン設計、バナー制作のカラーパレット管理、ブランドガイドラインの作成などで、Googleスプレッドシートに「#be9f9c」「#8c7a70」といった16進数のカラーコード（HEXコード）を一覧化することがよくあります。

その際、コード文字列だけでなく「実際の色」を隣のセルや上のセルに視覚的に表示させたいと考える方が多いはずです。

スプレッドシートで1セルずつカスタムカラーを開いて入力する作業

通常、セルの色を変えるには「塗りつぶしの色」アイコンをクリックし、「カスタム」の「＋」を選んでカラーコードを貼り付ける必要があります。数色程度なら手動でも対応できますが、10色、20色と増えてくると大変な手間と時間がかかってしまいます。

「隣のセルに入力したカラーコードを参照して、関数でパッと塗ることはできないのか？」という疑問が生じるのは当然のことです。

通常の関数ではセルの背景色を変更できない理由

結論から申し上げますと、Googleスプレッドシートの標準関数（SUM、IF、VLOOKUPなど）単体では、セルの背景色（塗りつぶし）を変更することはできません。

ただし、諦める必要はありません。目的や運用体制に応じて、次の2つの解決策を選ぶことができます。

• 方法A: SPARKLINE関数を活用する（擬似塗りつぶし）
  スクリプトや権限設定を使わず、数式だけでセル内に特定色のバーを敷き詰めて表示します。
• 方法B: Google Apps Script（GAS）を活用する（本物の背景色変更）
  簡単なスクリプトを導入し、カラーコードを入力した瞬間に指定セルの背景色そのものを自動で塗りつぶします。

関数だけで色を表示する方法（SPARKLINE関数）

「GASの設定や権限承認は避けたい」「同僚やクライアントに共有するシートなので、純粋な関数だけで完結させたい」という場合におすすめなのが、SPARKLINE（スパークライン）関数を利用した方法です。

SPARKLINE関数は通常、セル内に小さな推移グラフを描画するための関数ですが、オプションを工夫することで「セル幅100%の単色横棒グラフ」を描画させることができます。

SPARKLINE関数でセル全体を塗りつぶし風に見せる仕組み

入力する数式と指定例

例えば、シートの4行目にカラーコード（C4に「#fcf7f0」など）があり、その1つ上のセル（C3）に色を表示させたい場合は、C3セルに次の数式を入力します。

=SPARKLINE(1, {"charttype", "bar"; "color", C4; "max", 1})

もし、A列にカラーコード（A4）があり、その右隣のセル（B4）に色を表示させたい場合は、B4セルに次のように記述します。

=SPARKLINE(1, {"charttype", "bar"; "color", A4; "max", 1})

SPARKLINE関数のパラメータの仕組み

この数式の構造は以下のようになっています。

• 第1引数の「1」：グラフとして描画する数値データです。
• “charttype”, “bar”：グラフの種類を「横棒グラフ」に指定しています。
• “color”, C4：バーの描画色として、カラーコードが入ったセルを参照しています。直接「”#8c7a70″」のように文字列で渡すことも可能です。
• “max”, 1：グラフの最大値を「1」に設定しています。数値データが「1」で最大値も「1」のため、セルの横幅いっぱいにバーが描画されます。

セルの背景色そのものを自動変更する方法（Google Apps Script）

「グラフではなく、本物のセルの背景色として塗りつぶしたい」「セル内にテキストも重ねて表示したい」という場合は、スプレッドシート付属のGoogle Apps Script（GAS）を使用します。

「onEdit」という特別な関数を使うことで、シート上でカラーコードを入力・確定した瞬間に、指定したセルを自動で塗りつぶすことができます。

GASの「onEdit」トリガーを活用した自動塗りつぶしの流れ

コピペで使える自動塗りつぶしコード

以下のスクリプトをスプレッドシートに登録します。

// カラーコードが入力されたら、自動で1つ上のセル（または隣のセル）の背景色を塗りつぶす
function onEdit(e) {
  if (!e || !e.range) return;

  var sheet = e.range.getSheet();
  var val = String(e.value || e.range.getValue()).trim();

  // #から始まる6桁または3桁のカラーコードか判定
  var colorRegex = /^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$/;

  if (colorRegex.test(val)) {
    var row = e.range.getRow();
    var col = e.range.getColumn();

    // 【設定A: 1つ上のセルを塗りつぶす場合】
    if (row > 1) {
      sheet.getRange(row - 1, col).setBackground(val);
    }

    // 【設定B: 右隣のセルを塗りつぶす場合】
    // 右隣を塗りたい場合は、上記の設定Aを無効化し、下の行の先頭の「//」を外してください
    // sheet.getRange(row, col + 1).setBackground(val);
  }
}

Apps Scriptの設定手順

設定はブラウザ上だけで完了し、追加のソフトウェアインストールは不要です。

• スプレッドシート上部のメニューから「拡張機能」＞「Apps Script」をクリックします。
• コードエディタが表示されるので、最初から書かれている「function myFunction() …」を削除し、上記のコードを貼り付けます。
• エディタ上部のフロッピーディスクアイコン（保存）をクリックして保存します。
• スプレッドシートのタブに戻り、任意のセルに「#8c7a70」や「#be9f9c」と入力してEnterを押します。指定したセルが即座にその色で塗りつぶされます。

SPARKLINE関数とGASの使い分けまとめ

それぞれの方法には異なる強みがあります。用途や運用環境に合わせて最適な手法を選択してください。

• 手軽に一覧表示したいとき：数式をコピーするだけの「SPARKLINE関数」が適しています。
• カラーパレット帳として仕上げたいとき：セル内に文字（色名や用途など）を書き込める「GAS自動塗りつぶし」が適しています。

まとめ

Googleスプレッドシートでカラーコードをもとにセルを着色する2つの方法を解説しました。

通常の関数では背景色の変更ができないという制約がありますが、SPARKLINE関数を活用したグラフ表現や、GASのonEditトリガーを活用した自動化を取り入れることで、手動入力の手間を大幅に削減できます。

カラーパレット作成やWebデザイン業務の効率化に、ぜひお役立てください。