現在運営しているAIツール情報サイト「AI Tool Labo」。
記事を書いたり、アイキャッチ画像を作ったりしながら少しずつ育てていますが、サイトのデザインや機能のカスタマイズは、実はほぼすべてCodexに任せています。
僕自身はWeb制作の専門家ではありません。
HTMLやCSSを少し見たことはありますが、コードをゼロから書いて、思いどおりにサイトを変更できるほどの知識はありません。
それでも今では、トップページのレイアウトや文字サイズ、余白、記事一覧の見せ方などを、自分のイメージに合わせて少しずつ改善できています。
やっていることは、日本語でお願いするだけ
Codexへの頼み方は、かなりシンプルです。
「トップページをもう少し見やすくしたい」
「スマホで見たときの余白を狭くしたい」
「この文字を少し大きくしたい」
といったように、変更したい内容を普通の日本語で伝えます。
するとCodexがサイト内のコードを確認し、必要なファイルを探して修正してくれます。
完成後の表示を見て、少し違うと感じたら、
「もう少し狭くして」
「ほかのページには影響しないようにして」
と追加でお願いするだけです。
最初から細かい仕様を決めたり、専門用語を使ったりする必要はありません。
今日も、ヘッダーの高さを直してもらった
たとえば今日行ったのは、トップページのヘッダー調整です。
サイトを見ていて、ヘッダーの縦幅が少し広すぎると感じたので、Codexに次のようにお願いしました。
TOPページのヘッダーの縦幅が広すぎるので、もう少し狭めたい。
僕が伝えたのは、ほぼこれだけです。
何pxに変更するのか、どのCSSファイルを直すのかといった技術的な指示は出していません。
Codexが現在のサイト構成を確認し、トップページだけに反映されるように調整してくれました。
作業時間は約2分39秒でした。
修正前のトップページ
修正前は、ヘッダーの高さが約518pxあり、トップページを開いたときにヘッダー部分が大きく表示されていました。
記事一覧が表示される位置も少し下がっていたため、もう少しコンパクトにしたいと感じていました。
修正後のトップページ
修正後は、ヘッダーの高さが約418pxになりました。
約100px狭くなったことで、ページ全体がスッキリし、記事一覧も以前より早く画面に入るようになっています。
「AI TOOL LABO」の文字表示やアニメーションは、そのまま残してもらいました。
また、記事ページなどには影響しないよう、トップページ専用の調整として修正されています。
今回Codexが行った作業は、次のような内容です。
・ヘッダーの高さを約518pxから約418pxに変更
・「AI TOOL LABO」の表示とアニメーションは維持
・記事ページなど、ほかのページには影響しないよう調整
・LiteSpeed Cacheを削除
・通常のURLで反映を確認
コードを書かずにここまで直せるのが、普通にすごい
今回あらためて感じたのは、これだけの修正を、自分では一行もコードを書かずにできたことです。
厳密にいえば、裏側ではCodexがCSSなどのコードを修正しています。
ただ、使っている側の感覚としては、ほとんどノーコードです。
僕がやったのは、サイトを見て気になった部分を見つけて、
「ここをもう少し狭くしたい」
と日本語で伝えただけです。
修正するファイルを探す必要もありません。
CSSの書き方を調べる必要もありません。
ほかのページに影響が出ないように調整し、キャッシュを削除して、表示確認まで行ってくれます。
少し前まで、WordPressのデザインを細かく変更するには、自分でコードを勉強するか、詳しい人や制作会社にお願いする必要がありました。
それが今では、普通の言葉で指示するだけで、自分のサイトを少しずつ改善できます。
冷静に考えると、かなりすごいことです。
また、どこどこの幅を〇〇pxにとか中央に揃えてなど、詳しく書くことでさらに精度が上がります。
ノーコードツールとは少し違う
一般的なノーコードツールは、用意された機能やパーツを組み合わせてサイトを作ります。
一方でCodexは、実際のサイトコードを確認し、そのサイトに合わせた修正を行ってくれます。
そのため、用意されたデザインの中から選ぶだけではなく、
「この部分だけ少し狭くしたい」
「このアニメーションは残したい」
「トップページだけ変更したい」
といった細かい調整もできます。
自分ではコードを書いていないのに、ノーコードツールよりも自由度の高い変更ができる。
ここがCodexを使っていて特に面白いと感じる部分です。
サイトを自分で育てる感覚が出てきた
制作会社に頼めば、もっと早く、完成度の高いサイトを作ってもらえるかもしれません。
ただ、Codexと相談しながら少しずつ変更していくと、サイトを自分で育てている感覚が出てきます。
以前なら、
「少し気になるけれど、直し方が分からないからそのままにしておこう」
と諦めていた部分も、今では気軽に試せます。
思いついた変更をCodexに相談し、実際に直してもらい、表示を見ながらさらに調整する。
この繰り返しで、AI Tool Laboも少しずつ自分のイメージに近づいてきました。
まだ改善したい部分はたくさんあります。
これからもCodexに相談しながら、サイトを少しずつ育てていこうと思います。
今後はCodexとChatGPT Workを使い分けたい
これからは、作業内容に応じてCodexとChatGPT Workを使い分けていく予定です。
Codexにお願いするのは、主にサイトそのものを変更する作業です。
トップページのデザイン調整、表示崩れの修正、新しい機能の追加、スマホ表示の最適化など、実際のコードやファイルを変更する必要がある作業はCodexに任せます。Codexはコードの確認や編集、実行まで行えるため、サイト制作や機能改修との相性が良いです。
一方、ChatGPT Workには、ブログを運営するための調査やコンテンツ制作をお願いしたいと考えています。
たとえば、最新のAIニュースを調べる、記事テーマを選ぶ、記事本文を書く、出典を整理する、メタディスクリプションやXの投稿文を作る、といった作業です。
ChatGPT Workは、時間のかかる調査や分析を行い、文書やレポートなどの完成物まで作れることが特徴です。接続したアプリやファイルを横断して作業することもできます。
僕の中では、次のように分けるのが分かりやすそうです。
サイトを直接直す仕事はCodex。
調査して考え、記事や資料を作る仕事はChatGPT Work。
もちろん、できることが一部重なる場面もあります。
それでも、AI Tool Laboの運営では、Codexを「Web制作担当」、ChatGPT Workを「編集・調査担当」のように考えると、かなり使いやすくなりそうです。
コードを書けない僕が日本語で希望を伝え、Codexがサイトを直す。
さらにChatGPT Workが情報を調査し、記事作成まで進める。
ブログ運営のかなりの部分をAIに任せられるようになってきました。
まだ使い始めたばかりですが、この2つをどう組み合わせればブログ運営を効率化できるのか、今後も実際に試しながら紹介していきたいと思います。
参考・公式リンク
・今回カスタマイズした「AI Tool Labo」
Codexに依頼しながら、トップページのデザインやヘッダーの高さ、記事一覧の見せ方などを調整しています。
・OpenAI公式「Codex」
Codexの機能や、コード編集・レビュー・開発作業での活用方法を確認できます。
・OpenAI公式サイト
ChatGPTやCodexなど、OpenAIが提供するサービスの最新情報を確認できます。
※本記事の内容は執筆時点の情報をもとにしています。機能や提供プラン、利用方法は今後変更される可能性があります。最新情報は各公式サイトをご確認ください。
コメント