やりたかったこと(最初の方向性)
ブログ記事のカバー画像を用意したものの、どうにも殺風景だった。
困ったものだ。
情報としては成立しているが、「moai-log らしさ」がほとんど伝わらない。
やりたかったのは次のようなこと。
- 記事タイトルの視認性を高めたい
- でも派手にはしたくない
- moai というキャラクターが、主張しすぎず“そこにいる”感じで伝わってほしい
- 記事が増えても使い続けられる構造にしたい
具体的な希望としては、
- タイトルの上下に区切り線(枠線)を入れる
- 左端にモアイの画像を配置する
ただしこれは「案」であって、
ブログ記事のカバー画像として適切かどうかを一度外から見てほしかった。
最初に出したサンプル画像
最初のカバー画像は、かなり要素が少ない。
- 白い背景
- 左にモアイ画像
- 右寄りにタイトルテキスト
結果として、
- 余白が「意図を持っていない」
- モアイがただ置かれている
- タイトルも背景も、同じ強度で並んでいる
という状態だった。
ここから調整を始めた。
ChatGPTから最初に返ってきた視点
まず指摘されたのは、「要素を足す前に、役割を決めたほうがいい」という点。
殺風景に見える理由として整理されたのは、
- 余白が意味を持っていない
- タイトルと背景の緊張感が同じ
- モアイが“役割を持っていない”
そして方向性として示されたのは、
- 要素は増やさない
- 役割を与える
特に重要だったのは、
- モアイは全部見せない(はみ出させる)
- タイトルは中央に置かず、やや右に寄せる
- 枠線は「囲う」のではなく「読む場所を区切る」ものにする
つまり、
静かな個性を、配置と余白で出すという方針だった。
グラデーションの検討
次に出てきたのが背景のグラデーション。
ここでの前提は一貫していて、
- 背景は主役にならない
- タイトルの視線誘導を助ける
- 感情を動かす色は使わない
というもの。
提案されたのは、派手な色ではなく、
- ウォームグレー → ほぼ白
- ベージュ寄り → 白
- ごく薄いオリーブグレー → 白
など、
色というより“明度差”で整えるアプローチ。
特に強調されていたのは、
- 白→色 ではなく、色→白
- モアイ側に重さが溜まり、タイトル側に抜ける構造
だった。
実際にグラデーションを入れてみた
上下に薄いグラデーションを入れた案を作成。
ここでの評価は、
- 殺風景さは解消された
- カードのような厚みが出た
- ただし、やや全面的に効きすぎている
というもの。
改善案として出たのは、
- 上側のグラデーションを弱める
- 下側はそのまま or 少しだけ強める
理由はシンプルで、
- 視線は上から下に流れる
- タイトルは上寄りにある
- 上が暗いと、タイトルが押されて見える
という視覚的な話だった。
最終調整と判断
グラデーションを「上はほぼ白、下だけ沈ませる」形に調整。
この時点で評価はかなり明確だった。
- 視線の流れが自然
- タイトルが前に出る
- モアイが喋らない
- 記事が増えても破綻しない
そして最終的な判断は、
- これ以上いじると、良くなるより「迷いが混ざる」
ということで完成。
このカバー画像が目指している状態
整理すると、このデザインは次の状態を目指している。
- 派手ではないが、識別できる
- キャラクターはいるが、主張しない
- 一度きりでなく、育てられる
- 記事内容の邪魔をしない
個性は、足した量ではなく、引いた判断に出る
という考え方が一貫していた。
あとがき的なメモ
このやり取り自体がmoai-log でやりたいこととかなり重なっている。
- 表現を足す前に、役割を定義する
- 主張よりも配置で語る
- 長く使える構造を優先する
たぶん、このカバー画像は長く使えるものになりそう。
他の人も使うかもしれないので、そういう位置づけで、ここに残しておく。