#167 Web制作の裏側、私が実際に使ったAIツール4種の使い分け
知識のない私がWeb制作で使ったAIツールたち。
知識のない私がWeb制作で使ったAIツールたち。
こんにちは、ちーみつです。
AIを少しずつ取り入れて、
毎日をちょっとラクに。
生まれた余裕がやさしさを育て、
やさしさが広がる未来を願って発信しています。
連日お伝えしているWebページの作成ですが、
ようやく一通り、
人にお見せできるくらいには見た目が整いました。
今回はその制作の裏側で、
私がどんなAIツールを、
どの場面で使ったのか、
備忘録も兼ねて整理してみたいと思います。
投稿を音声でも配信しています。
移動中や作業中に、ぜひお聞きください。
・stand.fm
・Apple Podcast
・Spotify
コーディングはAIアシスタントと
まず、Webページの骨格を作るコーディング。
ここは、Codex CLI と Gemini CLI という、
コマンドで対話できるAIアシスタントに頼りました。
「こういう構造のHTMLを作って」
「この部分の見た目を、CSSでこう変えて」
といった具合に、
日本語で指示を出すとAIがコードを書き出してくれる、
バイブコーディングというやり方です。
もちろん、
細かい調整は自分で行う場合がありますが、
ゼロから書く手間が省けるだけで、
かなりの時間短縮になりました。
デザインのアイデア出しと画像生成
次に、サイトの印象を左右する画像です。
メインとなるモチーフは、
画像生成AIの Midjourney を使って、
いくつか生成した中から選びました。
そして、意外かもしれませんが、
画像の細かな加工には ChatGPT も活躍しました。
例えば、
預かった写真の布に気になるシワがあったのですが、
「この写真の布のシワを取って、自然な感じにしてください」
と頼んだところ、
本当にきれいにしてくれたのには驚きました。
仕上げと調整はPhotoshop AIで
さらに、画像のクオリティを上げるため、
Photoshop のAI機能も活用しました。
預かった写真だけでは少し物足りない部分を、
AIによる「拡張生成」で自然に付け足したり、
古い写真のノイズを除去したり。
Midjourneyで作った画像と、
加工した写真を組み合わせる際にも、
PhotoshopのAI機能が、
違和感なく仕上げるのを手伝ってくれました。
最後に
今回のWebページ制作を通して、
AIは決して万能ではないけれど、
それぞれのツールの得意なことを理解し、
「適材適所」で使い分けることの重要性を改めて感じました。
コーディングが得意なアシスタント、
アイデア出しが得意なアーティスト、
画像加工が得意なレタッチャー。
まるで、
そんな専門家チームと一緒に、
一つのプロジェクトを進めているような感覚です。
AIに「丸投げ」するのではなく、
「AIと協業する」という意識を持つと、
ものづくりがもっと楽しく、
効率的になるかもしれません。
最後まで読んでいただきありがとうございます。
