自社サイトを全面的に作り直すことにしました。きっかけは「記事が増えてきたのに、どうも見にくい」「サイト自体をもっと格好良くしたい」という、それだけです。社内にデザイナーはいません。
この状態で配色から考え始めると、たいてい失敗します。好みで色を変えて、なんとなく整えて、前より良くなったのか分からないまま終わる。だから先に測ることにしました。この回は、何を測って何が分かったかの記録です。
測ってみたら、書体が指定されていなかった
最初に見たのはです。文章が主体のサイトなので、印象の大半はここが決めます。の設定を確認するところから始めました。設定を確認したところ、読み込んでいたのは Inter という欧文書体で、しかも指定が subsets: ["latin"] でした。
つまり日本語のグリフが1文字も含まれていません。和文は端末にある書体で表示されていました。Mac ならヒラギノ、Windows なら游ゴシックか Noto。498記事が、読む人の環境ごとに別の見た目になっていたわけです。
書体を選んでいないサイトは、良くも悪くも「何の主張もない見た目」になります。配色を変えても、この状態のままでは印象は変わりません。を指定していないこと自体が、最大の未着手項目でした。
29連載に色が2色しかなかった
次に配色です。連載ごとに色を持たせる仕組みはあったのですが、実際に使われていた値を数えると、29連載に対して2色しかありませんでした。橙が18、ペールブルーが11。
さらに調べると、ロゴマークは橙と黄の2色で描かれているのに、サイトのは橙とペールブルーでした。ブランドが持っている色を使わず、無関係な色を足していたことになります。
「見にくい」の原因は配色ではなかった
ここまでは見た目の話です。ところが本当の原因は別にありました。記事一覧のページを測ったところ、HTML が 5.16 MB ありました。
内訳を出すと、84.5% が script タグの中。原因は、498件の記事データをまるごとブラウザ側の部品に渡していたことでした。記事データには本文そのものが含まれるので、一覧ページなのに全記事の本文が埋め込まれていたわけです。
import reimport urllib.request
def split_html(url: str) -> dict: """script タグの中と、それ以外に分けて大きさを見る。 見た目に関係ないものが大半を占めていないかを確かめる。""" html = urllib.request.urlopen(url).read().decode("utf-8", errors="replace") total = len(html.encode("utf-8"))
scripts = re.findall(r"<script\b[^>]*>(.*?)</script>", html, re.S) script_bytes = sum(len(s.encode("utf-8")) for s in scripts)
return { "total": total, "script": script_bytes, "markup": total - script_bytes, "script_ratio": script_bytes / total, }| ページ | HTML | うち script |
|---|---|---|
| 記事一覧 | 5,158,525 B | 84.5% |
| 用語集 | 1,619,087 B | 51.0% |
| トップ | 388,555 B | 52.4% |
| 連載一覧 | 248,630 B | 67.0% |
ページの表示速度を測る指標としては が知られていますが、その前段としてそもそも何バイト送っているかを見るだけでも十分に判断できます。この時点で分かったのは、「見にくい」と「重い」が同じ根から来ているということでした。498件を1ページに並べている構造そのものが原因で、配色や書体をいくら整えても解決しません。の問題です。
この構造は、ブラウザ側で動く部品にデータを渡すときに起きます。渡した値は、あとで組み立て直せるように HTML の中へ書き出されます。一覧の描画に使わない項目まで渡すと、その全部が書き出されます。
// 変更前：記事データをまるごと渡していた（本文も含まれる）<AllArticlesIndex articles={ARTICLES} />
// 変更後：一覧の描画に使う項目だけを取り出して渡すconst ARTICLE_CARDS = ARTICLES.map((a) => ({ slug: a.slug, series: a.series, ep: a.ep, title: a.title, excerpt: a.excerpt, date: a.date, readTime: a.readTime, tags: a.tags,}));
<AllArticlesIndex articles={ARTICLE_CARDS} />測って初めて分かったこと
始める前は「配色を今風にして、余白を整えれば良くなるだろう」と考えていました。実際に測って出てきたのは、書体が未指定であること、ブランドの色を使っていないこと、一覧ページの構造が破綻していることの3つです。
どれも見た目を眺めているだけでは気づけません。とくに 5.16 MB は、手元の速い回線では体感できませんでした。数字にして初めて「これは直すべきだ」と判断できます。
ついでに見つかったものもあります。連載一覧ページの説明文が「7シリーズ・42記事」のままでした。実際は29連載498記事です。検索結果に出る説明文が、2年前の規模を語り続けていました。
次回は、デザインの方向を決める段階の話をします。AI に相談すると、決まった型の答えが返ってくるという問題に、正面からぶつかりました。
この記事の感想を教えてください
あなたの 1 クリックで、本当にこの記事は更新されます。「もっと詳しく」「続編希望」が一定数集まった記事は、 ふくふくが 実際に内容を拡充したり続編記事を公開 します。 送信したリアクションはお使いのブラウザに記録され、再カウントされません。