「AIで作った感満載」。
セキオラのホームページを更新している途中、AIが作った記事のアイキャッチを見て、僕が返した言葉です。画像はできている。でも、自分の会社のブログに置きたいものには、なっていませんでした。
そこから表紙を何度も作り直しました。ようやくこの感じでいこうと決めた後には、文字の小ささも気になった。今回は、そのやり直しまで含めたサイト更新の話です。「セキオラのせきらら」の第1回として残します。
サイトの説明と、AIが読む理念がずれていた
出発点は、ホームページを今の自分の考え方に合わせたい、ということでした。日々、AIに仕事を任せたり、事業づくりを考えたりしているので、会社の説明もそれに合わせて更新していきたい。そこで、サイトの分析と修正をAIに頼みました。
セキオラが掲げているのは「中小企業の利益改善を、実行まで」ということです。売上、支出、仕事にかかる時間をつないで見ながら、必要な調査や制作、改善を進める。その実務にはAIも使います。
今回、トップページとサービスページには、AIが調査・制作・確認を進め、人が優先順位や公開、費用、契約を判断する分担を加えました。記事をまとめて読める実践ノートの一覧も用意しました。
その途中で、公開サイトと、AIが仕事の前に読む手元の資料がずれていることが分かりました。サイトでは今の理念を説明しているのに、ローカルの会社理念や作業ルールには古い内容が残っていたんです。
次の仕事でその資料を読ませたら、また古い前提から始まってしまう。そこで、理念のファイルも更新しよう、ローカルもどんどん更新していこうと伝えました。すでに決めていた理念へそろえ、日々の仕事で確認できた進捗や判断も、作業の区切りに資料へ残すことにしました。
記事も、読んだ後の行き先も直した
サイトに載っていた2本の記事も、今回書き直してもらいました。AIに10万円の予算を任せて商品案を作り直した話と、WordPressのテーマを作った後に30記事を移行した話です。
僕から頼んだのは、もっと読み応えのある記事にすることでした。何を試して、どこで引っかかり、何を変えたのか。そういう実際の出来事を入れ直して、文章を整えてもらいました。
無料相談も受け付けることにしました。記事を読んで、自分の仕事について話したくなった人が、そのまま問い合わせへ進めるようにする。記事末尾に毎回バナーを貼る作業は増やさず、テーマ側で共通の案内が出る形にしてもらいました。
見出しも気になりました。使っているWordPressテーマの見出しが、自分の欲しい見た目に合っていなかった。そこでデザインを調べてもらい、白地に濃い文字と細い罫線を使う、すっきりした形へ変えました。
記事の書き直しと並行して、アイキャッチも作り直してもらいました。その画像を見て返したのが、冒頭の言葉です。
生成感を消したら、今度は味気なくなった
最初に作ってもらった画像は、紙の質感や立体感が目立つものでした。僕には、それがいかにもAIで作った画像に見えました。
次は、装飾を減らして文字を中心に組み直してもらいました。ところが、今度の感想は「文字だけで味気ない」。余計なものを消したら、記事の中身を伝える絵までなくなってしまった。
実際の企業ブログのアイキャッチを参考にしてほしい、と頼みました。図案と見出しを組み合わせた案も出てきましたが、それにも「まだちょっとテンプレっぽい」と返しています。
ここで、Claude Codeにも実際の2枚を見てもらい、企業ブログの画像と比べながら直すことにしました。色を変える、文字を太くする、といった調整に加え、その記事の何を一枚で見せるかを選び直しました。
商品案を作り直した記事には、赤字の入った企画書を。大きな制作案をいったん保留し、引き受ける範囲を変えた話なので、修正線が記事の出来事とつながります。
もう一つの、30記事を移行した話は、それでもまだ資料っぽく見えました。そこで、大きな数字やチェック欄を主役にする構成をやめ、原稿の束で作業の量を見せる形へ変えました。
生成りの背景、濃い墨色、少しの朱色、明朝の大きな文字。そこへ記事ごとの出来事を表す図案を合わせる。この2枚まで来たところで、「この感じで行きましょう」と伝えました。
好きな見た目になっても、文字は小さかった
デザインの方向が決まった後、今度は文字が小さく、読みづらそうに見えました。フォントの種類とサイズを、Claude Codeとも確認してもらいました。
調べると、記事本文は画面幅に合わせて小さくなる設定で、幅320pxの画面では12.8pxまで縮んでいました。記事タイトルが、その下の見出しより小さくなる組み合わせもあった。アイキャッチの補助文字も、スマホではかなり細かくなっていました。
そこで、本文の下限を16pxにし、大きな画面では17pxを使う形に修正。記事タイトルも大きくし、画像の中では大事な文字を拡大して、薄い灰色を濃くしました。小さな説明を全部残すことにはこだわらず、重複するラベルは減らしました。
このときは、せっかく決めたテイストまで変えないように頼んでいます。書体や配色、紙の図案を保ったまま読みやすくする。PCとスマホで見てもらった後、タブレットくらいの幅で見出しの大小が逆転する箇所も見つかり、そこまで直して本番へ反映しました。
次の記事に、同じところから悩み直さないために
今回選んだ画像と制作ルールは、ローカルに残してもらいました。使った書体、色、余白、小さな画面での文字の見え方。途中で何が気になり、どう直したかも、次に参照できるようにしています。
今後の記事を、すべて同じ紙の図にするつもりはありません。同じテイストで、その内容に合ったアイキャッチを作れるようにしたい。今回のやり直しを、次の制作の材料にするためです。
記事を定期的に下書きしてもらう設定も用意しました。日々の実践を材料にAIが原稿を作り、僕が確認する流れです。その仕組みで記事を積み重ねていくのは、これから。この記事は、僕から頼んで仕上げてもらった、シリーズ最初の一本です。
サイト側では、問い合わせフォームから送って、メールが届くところまでの通し確認が残っています。次は、こういう実際に使う流れも確かめていきます。
この先も、試して、使って、直したことを、そのまま記事にしていきます。セキオラのせきらら、という感じで。
