作ってみたブログを作るぜーって思ったとき、避けて通れないのがトップページの作成。
ブログの”玄関”なワケですから、ゴッリゴリに凝るまではいかなくとも味気ないのも嫌なワケで。
私が見た/読んだことがあるブログってだいたいアクセスがめっちゃあるブログなんですけど、ああいうのって装飾とか作りがしっかりしていて、「あぁ～手が込んでるな～スゲェ」ってなります。
ごちゃついていなくて、カテゴリから個々の記事への導線ちゃんとあって、色づかいも統一感がある。
ああいう「ちゃんとしているブログ」を、自分も作ってみたいとずっと思ってた。
……んですが、WordPressのHTMLだのCSSだのコードだの、今でもぜーんぜん分かっていない。
なんか「オシャレなテーマでブログを作ろう！」的なのを見たり試したりしたこともあったんですが、そういうので作り始めても「ちょっとココ違うんだよな」みたいなのが出てきたときにどうしようもないんですよね。
過去にサイト作りに挫折したこともあるんですが、挫折ポイント、何だと思います?
カテゴリーのボタンにカーソル合わせたとき良い感じの反応にならなかったなんですよ。
まぁそんなワケであえなく撃沈したワケですが、今回は違います!
そう、AIを使って作れる!
「こういう感じにしたいな～」を、専門用語一切ナシの話し言葉全開なチャットで伝えると、指示やアドバイスが返ってくる。それに従って書いて、また次を聞いて、書いて聞いて書いて……
これを繰り返していったら、なんとか満足のいくトップページが完成しました。この記事はその軌跡について書いています。
先述した通り、自力でのサイト作りは挫折したことがあるんですよ。それも1度や2度ではありませんでした。
でも、AIとだったら完成まで辿り着けたワケです。何度目の正直でしょうね。凄い時代になったホントに。
今までとは何が違うって、詰まったとき、上手くいかなかったときに速攻で対処してくれる存在がいたこと。あと、「これやってください」ってAIから言われたことに難しいことがほとんどなかったことです。
正確に言うと、「ワケが分からないもの」は次々出てくるのですが、そのたびにAIへ「なにそれ」「どうすればいいの」と聞けば、前より噛み砕いた説明が返ってくる。
(個別リンク段落)なんなら「こうしてみたらこうなったんだけど、これで合ってる……?」って作業前後をスクショしてAIチャットに貼ったら「合ってます」「そこじゃないです」ってちゃんとスクショ読み取って返答が一瞬で返ってくるんですよ。
だから、「これどうすればいいんDA!」になることがなく、常に次になにをやれば良いかが明確な状態で作れました。
もうひとつ大きかったのが、AIに一度も「もうどうしようもないので、この装飾は諦めてください」って言われなかったことですね。
実際にはちょっとした妥協をした部分もあるというか、「まぁこの部分はこうでもいっか!」になった箇所がゼロではないのですが……それでも「次はこれをやれば前進します」が常にわかる状態であり続けたっていうのは大きいです。
まず、進め方を決めるところから始めました。
トップページの作り方にはいくつか道があって、一つのHTMLをドンと貼ってしまう手軽な方法もあるらしいのですが、今回は「カテゴリを押したら記事一覧に飛ぶ」といった普通のブログらしい動きをちゃんとさせたかったので、WordPressのCocoonの仕組みに乗せる進め方を選びました。
手間は増えますが、後々きれいにまとまる道ってAIが言ったので、「んじゃ最初に作り込むか」で後者を選んだって感じです。
方針が決まったら、次は土台づくり。
記事を入れるカテゴリを用意して、ヘッダーのメニューを作り、トップページの中身を入れる固定ページを準備しました。
この辺は、AIの指示のまんまボタンを押していったらすんなり進んだ感じです。
なのでAIナシで同じ動作をもう1回やれと言われてもできる気しません
問題は、次の「見た目を整える」段階でした。
CSSという、色や形を指定するコードを書いてページを装飾していくのですが、これが実際のサイトに全然反映されない。編集画面ではちゃんと変わっているのに、公開されたサイトを見ると何も変わっていない……。
(個別リンク段落)この大苦戦っぷりはこちらで詳しく書いていますので、「AI使って、AIが得意そうなブログ設計って領域でももこういうところで試行錯誤が生まれる」のナマの様子を見たい方は是非。
(個別リンク段落)そして見た目の土台が形になってからは、せっかく土台作りのモックに会話形式の吹き出しがあったので「わたし」と「AI」がやり取りしているようにアイコン表示機能を実装しました。トップページだけでなく、個々の記事の中でも使えるように作ってあります。
(個別リンク段落)最後に、細かい設定を片づけました。サイトを安全な通信(HTTPs)にしたり、トップページに勝手に出てくる目次を消したり、日付の表示を消したり。
一つひとつは地味ですが、やっておくと全体がぐっと整います。この初期設定まわりも、同じようにつまずく人がいそうなのでまとめてあります。
こんな経緯でトップページが出来上がりました。
丸っこいフォントとか、会話の吹き出し&アイコン表示とか、色分けカテゴリカードとか……
この辺も全て、自分がAIに「こうしたい」を伝えて、返ってきたものに手を入れてのラリーの結果です。divとかclassとかarticleとか意味不明なままでも作れちゃいました。
結構「これホントに進むのかよ」って思った瞬間あったけどね! CSS一生反映されへん時とかね! でもなんとかなったからヨシ!
コメント