キャッチコピーを画像にすると失う3つのもの｜議員サイト28件の実測

2026年7月、国会議員の公式サイト28件を実測しました。CSSから16進カラーコードを機械的にカウントし、ヒーロー画像をダウンロードして支配色を抽出し、Last-Modifiedヘッダーでリニューアル時期を特定する。デザインの印象評価ではなく、数値の調査です。

はじめは配色を見るつもりでした。ところが、いちばん差がついていたのは色ではありませんでした。

28件のうち、ファーストビューのキャッチコピーをHTMLのテキストで組んでいたのは、わずか2件です。残る26件は、コピーが画像になっていました。

調査の範囲と方法

先に範囲をはっきりさせておきます。

今回の対象は、野党系の女性国会議員および元議員28人の公式サイトです。与党の議員、男性議員は含んでいません。ここに出てくる数字は、あくまでこの28件の範囲のものです。同じ手法を別の母集団に広げれば、結論は変わるかもしれません。

範囲を絞ったことで得たものもあります。母集団の条件が揃うことです。実測すると、28件中11件が主色をピンク／マゼンタ系にしていました。色の振れ幅が小さい集団なので、「色以外で何が差になるのか」を観察するには適した対象でした。

なお、この記事は各サイトの作りについての技術的な観察です。政治的な内容や主張についての評価は一切含みません。

調査手法は次のとおりです。

• 各サイトの生HTMLとCSSを直接取得
• 16進カラーコードを機械的にカウント
• ヒーロー画像をダウンロードして支配色を抽出
• Last-Modifiedヘッダーでリニューアル時期を特定

調査日：2026年7月30日／対象28サイト。

キャッチコピーを画像にすると、3つを同時に失う

1. 検索エンジンに読まれない

コピーを画像にすると、そこに書かれた言葉はテキストとして存在しなくなります。alt属性を入れれば代替テキストにはなりますが、今回の28件では、コピー画像のaltが空文字になっているサイトが複数ありました。alt属性そのものが無いサイトもありました。1件は、コピーがCSSの背景画像として置かれており、altを入れる場所すらありません。

サイトでいちばん大きく、いちばん目立つ一文が、検索エンジンからは存在しないことになっている。これはSEOの手前の問題です。

2. 改行が制御できない

35文字前後のキャッチコピーを画像にすると、PCとスマートフォンで改行位置を変えるために2ファイル必要になります。実際、PC用とSP用でコピー画像を2枚持っているサイトがありました。文言を一語直すたびに、2枚とも作り直すことになります。

テキストなら、CSSの1行で済みます。

3. 更新が止まる

デザインソフトを開き、書き出し、アップロードし、差し替える。この手間があると、コピーは「気軽に直せないもの」になります。今回、設計レベルで手が入っていたのは28件中3件だけで、残りは画像の差し替えにとどまっていました。

コピーをテキストで組んでいた2件は、梅村みずほ氏（ローディング画面とヒーローの2箇所に同じテキストとして出る）と、櫛渕万里氏（テキストにtext-shadowを重ねる）でした。

色では、差がついていなかった

主色の系統を分類すると、こうなりました。

• ピンク／マゼンタ系：11件
• 紺・青系：5件
• 赤・朱・えんじ系：4件
• オレンジ系：3件
• 緑：1件
• ティール：1件
• 独自のブランドカラーなし：2件

ピンク／マゼンタが11件で最多です。つまりこの分野では、ピンクを選ぶこと自体が差別化になりません。選んだ時点で11件の中に入ります。

もうひとつ、色について興味深い数字が出ました。CSSに定義されている色の数です。最も少ないサイトは26色、最も多いサイトは117色でした。

117色を意図して設計した人はいないはずです。継ぎ足しの結果です。同じ濃紺が3つの値で併存しているサイト、オレンジが6種類混在しているサイトもありました。

色は、選ぶものというより管理するものだ、というのが実測から出た結論です。

実際に差がついていた4つのこと

地の色を、白から「わずかに色の乗った白」へ

最も安く、最も効いていたのがこれです。

堤かなめ氏はクリーム（#FFF0DE／#FFF6F0）を地に使っています。梅村みずほ氏は淡く青みを寄せた白を4段階持ち、セクションごとに使い分けていました。大石あきこ氏は白に紙のテクスチャを重ねています。

純白は、硬く事務的に見えます。1〜3%だけ色を寄せた白にするだけで、画面の体温が上がります。実装コストはほぼゼロです。

明朝を、1箇所だけ効かせる

28件のうち、明朝／セリフ体を意図して使っているのは3件だけでした。残る25件はゴシック一辺倒です。

徳永エリ氏は、リード文とページタイトルを明朝（Noto Serif JP）、本文をゴシックにしています。和文組版のセオリー通りの使い分けです。ロゴかキャッチの1箇所だけを明朝にする。これが、最も安く差がつく打ち手でした。

ただし読み込むだけでは意味がありません。1件、Noto Serif JPを読み込みながら適用箇所が0件というサイトがありました。フォントのダウンロードだけが発生している状態です。

写真を、スタジオではなく街の中で撮る

最も参考になったのは大石あきこ氏のファーストビューです。商店街の路上に立つ、膝上のやや引き。標識・電柱・通行人が望遠のシャローフォーカスで大きくボケています。自然光、目線はカメラ。

スタジオで切り抜いた写真は、どれだけ写りが良くても「近さ」とは矛盾します。背景に生活が写っているのにボケているから雑然としない。「近い」を、被写体ではなく場所で語る手法です。

ヒーローの型そのものは「写真1枚＋コピー1つ」が最も強く、スライダー3〜5枚が最多かつ最弱でした。言うことが3つあると、どれも残りません。

紙とペンで、署名を1点つくる

追加の撮影も実装も要らない打ち手として、手書き署名がありました。実測したファイルは500×98ピクセル、13キロバイト。本人が紙とペンで名前を書き、透過処理をして1点置くだけです。大河原まさこ氏と塩村あやか氏が持っていました。

今回見た「近さ」の打ち手のなかで、いちばん安いものです。

これは、議員サイトだけの話ではない

ここまで議員サイトの話をしてきましたが、当てはまるのは個人の顔が商品になる仕事全般です。

士業、講師、コンサルタント、クリニックの院長、地域の会社の社長。いずれもサイトの一等地に本人の写真と一文が置かれます。そしてその一文が画像になっている確率は、決して低くありません。

自分のサイトで確かめる3つのこと

いますぐできます。

1. トップページで、キャッチコピーの部分をマウスでドラッグしてみる。選択できなければ画像です。
2. 画像だった場合、右クリックから「検証」を開いてalt属性の中身を見る。空、または属性ごと無ければ、その一文は検索エンジンに存在していません。
3. 背景が純白かどうかを見る。#FFFFFFなら、1〜3%だけ色を寄せる余地があります。

1と2で問題が見つかった場合、直し方は2通りです。コピーをHTMLテキストに置き換えるのが本筋。デザイン上どうしても画像を使いたい場合は、最低でもaltに同じ文言を入れてください。

この3つをご自分のサイトで確かめる時間が取れないときは、30分の無料診断で画面を共有しながらご一緒に見ます。

まとめ

28件を実測して分かったのは、差がついていたのは色ではなく、次の4点だったということです。

• キャッチコピーがテキストか、画像か（テキストは2件のみ）
• 地が純白か、わずかに色を寄せた白か
• 明朝を1箇所効かせているか（3件のみ）
• 写真をスタジオで撮ったか、街の中で撮ったか

いずれも高価な打ち手ではありません。むしろ、いちばん効いていた「地の色」と「コピーをテキストにする」は、追加費用がほぼかかりません。

配色を悩む前に、コピーが選択できるかどうかを確かめてみてください。

よくある質問