【ブロガー必見!】GASでオリジナル色見本表をつくる

ブログやWebサイト制作において、色見本表はデザインの統一やイメージの共有に欠かせないツールです。

しかし、わざわざ専用ソフトを使うのは面倒…という方も多いのではないでしょうか？

そこで今回は、誰でも簡単にオリジナル色見本表を作成できるスプレッドシートの活用術をご紹介します。

Contents

スプレッドシートで色見本表を作るメリット

ブログやサイト制作にあたって、カラーテーマを決めるのは重要なことです。

カラーコードを紹介してくれているページをブックマークして、確認のたびにページを見るのもあまり効率よくありません。

メモでコードを保存していても、色のイメージが分からない。スプレッドシートであれば、お気に入りのカラーをイメージしやすいオリジナルの色見本帳をつくれる。

専用ソフトと異なり、インストール不要でブラウザ上で操作可能なスプレッドシートは、手軽に始められるのが大きなメリットです。

パソコンはもちろん、スマートフォンやタブレットでも操作できるので、場所を選ばずに作業できます。

行や列をドラッグで移動したり、セルに色を塗ったりするなど、直感的な操作で誰でも簡単に色見本表を作成できます。複雑な機能を覚える必要がなく、初心者の方でも安心です。

Googleアカウントがあれば無料で利用できるスプレッドシートは、コストを抑えたい方にもおすすめです。追加料金なしで、様々な機能を活用できます。

今回は、スプレッドシートとGoogleAppsScriptを使用してオリジナルの色見本帳の作成方法をお伝えします。

活用するのはRGBカラーコード。#○○○○○○（6桁の英数字）表記のコードです。

赤（Red）、緑（Green）、青（Blue）の3色の光を組み合わせることで表現されるカラーコード

スクリプトもシンプル。GASを学ぶにも好教材。

STEP2

スクリプトをコピー

今回のスクリプトはGASのなかでも非常にシンプル。たったの4行。

function original_color_list(){
  let range = SpreadsheetApp.getActiveRange();
  let values = range.getValues();
  range.setBackgrounds(values)
}

＼GASのアクセス承認についてはコチラ／

記事の最後、ブラウザでColorNameが定義されている140色を加えている、色見本表のテンプレートを準備しています。

一から作成が面倒だ～という方は、コピーしてお使いください。スプレッドシートのセルにカラーコードを記載するだけで色が変わります。

作成した色見本表を参考に、ブログやWebサイトのデザインを作成しましょう。統一感のあるデザインにすることで、見やすく洗練された印象を与えることができます。

具体的な例としては、ヘッダーやフッター、ボタンなどの色を色見本表で統一したり、メインカラーとサブカラーを決めて配色を決めたりすることが挙げられます。

色見本表を基に、SNS投稿のアイキャッチ画像やバナー画像を作成しましょう。目を引くデザインにすることで、エンゲージメントの向上が期待できます。

具体的には、色見本表の色を使ってグラフィックを作成したり、写真に色フィルターをかけたりすることが挙げられます。

資料やプレゼンテーションに色見本表を挿入することで、視覚的に分かりやすく情報を伝えることができます。.

具体的には、グラフやチャートの色を色見本表で統一したり、強調したい部分に差し色を使ったりすることが挙げられます。

スプレッドシートを活用すれば、誰でも簡単にオリジナル色見本表を作成することができます。

今回ご紹介した方法を参考に、ぜひ自分だけの色見本表を作成して、ブログやWebサイト、SNSなどをより魅力的に彩りましょう。

以上、自分で作るオリジナル色見本帳についての記事でした。GASを勉強したい方は一から作ってみてほしいですが、GASはあまり興味ない方はこちらのテンプレートをコピーしてお使いください！