私は一応、WordPressでプライベートカンパニーのサイトを運営している。
サイトは自分で作っていて、
awstatsというノイズだらけのログを読み解くと、
月のPVはおそらく5〜10程度。ほぼ、このブログからのお情け流入だろう。
プライベートカンパニー経由の受注は無く、
このブログが活動といったところ。
1年程前に作成したこのサイト。
改めてみるとなかなか絶望的なファーストビューだ。
「整理します」の前に、お前が整理しろと言いたい。
月に10PVあるかどうかとはいえ、
この絶望的なファーストビューにより、
大事なご縁を無くしているかも知れない。。
ファーストビューのコンセプト
ゴールの条件
- 自分が見て「これなら納得できる」と思えること
- プライベートカンパニーとして、何をしている人かが伝わること
チャッピーだけでは厳しかった
非デザイナーにとってはAIでの画像作成は
バイブコーディングくらいは気合を入れないといけない。
プロンプトの考え方と失敗プロセス
まず、チャッピーだけでファーストビューを作成するのは
限界がある。
プロンプトはだいたい、こんな感じ。
落ち着いたイラスト風。
中年の日本人エンジニアが主役で、木の作業机でノートPCを使っている。
隣には小型のロボット。主役ではなく補助役。
派手な演出や近未来表現は使わない。
Webサイトのファーストビュー用。画像内に文字は入れない。
最初はこんな画像作成されてびっくりしました。
考えようによっちゃありですが、AI臭い。
別にここまで人がフューチャーされる必要もない。
チャッピーではこの辺りが限界。
独特のこのヌメッとした感じ。
構図は他のサイトを参考にさせてもらった方がはやい。
テキストはWordPressで入れるのが、SEO的に見栄え的にも正解。
ただ、これでもAIっぽさがふんだんに残っている。
GenSparkの登場
デザインのクオリティはGenSparkの方が断然高い。
チャッピーで作成した画像をGenSparkに喰わせる。
初期プロンプトもチャッピーに作ってもらう。
チャッピー特有のぬめっとした感じはマシになったが、
何故か年齢が上がってしまってるし、AIロボットが
何かわからない。
やはり、Gensparkにも具体的に指示したほうがいい。
複数枚同時にアウトプットしてくれるのが
Gensparkの魅力、だんだん使えそうなデザインになってきた。
何となく今時のマテリアルデザインっぽくなってきた気がする。
最終調整
色々と最終調整を重ねて、ある程度しっくりきた。
最初に比べると、
どんな人間が、どんな距離感で仕事をしようとしているのかは、
だいぶ伝わる画像になったと思う。
ゴリゴリのエンジニアでもなければ、
デザイナーでもない。
現場で積み上げてきた経験をベースに、
AIを道具として使いながら、
ITまわりの「よくわからない」を一緒に整理していく。
そんな立ち位置が、
この一枚の中に、少しは表現できた気がしている。
Wordpressへ設定
そのまま入れると上下の余白はなくなる。
画像サイズに合わせるとイメージよりもちょっと大きい。
再度調整
WordPressのアップデート
ブログは「はてなブログ」なのでWordPressのログインは久しぶり、
WordPress本体とテーマ、PHPもまとめてアップデートしておく。
・テーマ（SWELL）
・PHP（8系）
・画像周りの設定
と、レイアウトに影響が出そうな要素が多かった。
ただ、結果としては
レイアウト崩れも無し、エラーも無し。
WordPressは便利な反面、
世界中で使われている分、
セキュリティリスクも高い。
放置しておくと、
脆弱性を突かれる可能性も現実的にあるので、
アップデートは「気が向いたら」ではなく、
定期的にやる方がいい。
普段はあまり意識しないが、
個人サイトでも、こういう安心感は大事だなと改めて思った。
ちなみに、このWordPressのレンタルサーバーはエックスサーバーがおすすめ。
少なくとも、
「非デザイナーがAIを使って試行錯誤する」くらいの用途なら、
余計なところで足を取られない環境だと思っている。
WordPressで調整
改行は設定画面でこのように入れる。
ITの「よくわからない」を、<br>経験でほどく。<br>AIで整理する。
<br>を直に入れる。
オーバーレイを2から1に変えて文字を少し見やすくした。
まあ、これくらいでいっか。。
URLを貼った時に画像が表示されない
どうもSWELLの場合はSEO SIMPLE PACK
というプラグインが必要みたい。
とりあえず入れてみるとこんな感じ、微妙。。
専用の画像がいるっぽい。
はてなのOGP表示を調整しようと、まず推奨されている横長サイズ（1200×630）
で画像を用意したが、狙った通りには表示されなかった。
次に正方形画像も試してみたが、多少マシになる程度で決定打にはならない。
どうやらはてな側の独自トリミングや強いキャッシュの影響が大きいようだ。
設定や画像サイズの問題というより、プラットフォームの仕様と割り切るのが正解だと判断した。
まとめ：AIは「デザインを作る」より「判断を早くする」
プライベートカンパニーのファーストビュー。
いつかやらないと、と思いながら、なかなか手を付けられていなかった。
やはり、AIでしっくりくるところまで仕上げるのは、なかなか大変だ。
ただ、AIがなければ、そもそもここまで辿り着くのは完全に無理筋だったとも思う。
ChatGPTで方向性を固めて、
GenSparkで見た目を整える。
最後はWordPress側で、改行やオーバーレイを微調整する。
この流れに落ち着いたのは、個人的にはしっくりきている。
そして何より、
「どういう人間が、どういう距離感でITをサポートするのか」
が、最初よりは伝わる形になった気がする。
ちなみに、この記事はデザインの話っぽいが、
自分がやりたいのは“デザイン制作”ではない。
経験がある中年は、AIと本当に相性がいいと思っている。
概要がわかっているだけで、AIはずいぶんコントロールしやすくなる。
今は本業があるので、
インフラ診断やサイト／ブログ診断といった、
自分が無理なくできる範囲からやっていくつもりだ。
まずは、
「なんとなく気になる」
くらいでいいので、見てくれた人に興味を持ってご縁が生まれる事が目的。
OGPでハマったり、微調整で沼ったりもしたが、
まあ、これくらいでいっか、と割り切れたのも収穫だった。
次はこのサイト自体を、
「診断サービスが伝わる構成」に、少しずつ寄せていこうと思う。
👇完成品
20260122追記
正方形のOGPを設定すれば、はてなでもイメージ通りにに
表示されました。
はてなのキャッシュは強いです。。
