焼き鳥屋のホームページ
こんばんは、ちまです。
ブログ再開の記事で少し触れた、焼き鳥屋さん「池下一鳥目」のホームページ制作について、過程を書いていこうと思います。長期間の制作だったので複数の記事に分けて書くことにしました。今回は、案件の全体像と、制作中に起きた一番大きな変化についてです。
どんな案件だったのか
この案件、実は依頼されたものではなくて、こちらからお願いした話なんです。1年半くらい前、行きつけの美容室のオーナーさんが新しく焼き鳥屋さんをオープンしたので、「ホームページ作らせてもらえませんか」と持ちかけました。未経験の私には実績がなく案件の依頼も来ないので、自分から無償でやらせてもらうように交渉しました。
完成した池下一鳥目のホームページは、トップ・メニュー・店舗案内・ブランドの紹介・お知らせ・求人・お問い合わせの全7ページ構成。お問い合わせは「入力→確認→送信→完了」と流れる、少し本格的な作りにしています。
ちなみに、実はモデルにしたサイトの構成を参考に、公開した7ページ以外のページも一通り作ってあります。公開時に「今のお店に必要な分」に絞ったのですが、データは残してあるので、将来必要になったらすぐ出せるようになっています。
制作スタイルが3段階に進化した話
この制作は、期間が長かったこともあって、途中で作り方がガラッと変わりました。振り返ると3段階に分けられます。
第1段階：自分でコードを手打ち
最初は、自分でコードを打ち込んでいて、わからないことがあったらネットで調べながら進めていました。この頃に一番苦労したのが、flexやgridといったレイアウトの仕組みです。要素を思った場所に配置したいだけなのに、それぞれの特性がわかっていないから、思ったとおりに表示されませんでした。変更しても「なんでそこに行くの？」と思い通りにならない日々の繰り返しでした。イメージどおりに表現する方法をウェブで検索しても、なかなかドンピシャで合わないことがあり地味に大変なんです。
第2段階：チャットAIにコードを書いてもらう
途中からChatGPTというチャットAIを使い始めて、コードを部分的に作成したり、作成済みのコードを貼り付けたりしながら修正するスタイルになりました。最初よりかなり効率的になった一方で新しい悩みも出てきました。部品を個別に作ってもらっている感じなので、組み合わせたときの整合性というか、ツギハギ感があって、思ったとおりに表示されないことがまぁまぁありました。
第3段階：AIエージェントの導入
そして今年の4月、Claude CodeというAIエージェントを使い始めてから、さらに一段変わりました。チャットAIとの一番の違いはAIが直接コードを確認してくれることです。ファイル全体を見ながら相談できるので、修正の意図が伝わりやすく、コードを書く部分はほとんど任せて、私は「デザインや見た目の最終調整を人間目線でやる」という分担に変わりました。
制作を終えて
AIがあるかないかで一番変わるのは、作業のスピードです。それと、誤字脱字などの正確さも、正直、人間よりAIの方がはるかに上でした。
最初は「よくわからないから、どう活かせばいいかもわからない」状態でしたが、触っていくうちに少しずつわかってきて、最終的には効率が格段に上がりました。だからこれを読んでいる方にも、恐れずに触ってみて欲しいと感じます。個人情報や大切な情報を入力しなければ大きなリスクはないので、その点だけ注意しておけば大丈夫だと思います。
制作過程で大変だったこと
制作中に実際に起きた問題を深掘りしようと思いましたが、文章が長くなりそうなので次回以降の記事で問題ごとの体験をまとめることにしました。予定しているのは、お問い合わせフォーム編、WordPress移行編、公開前の仕上げ編、SEO対策編の4本。特にWordPress移行は、完成間近でオーナーさんからの要望で方針転換した話なので、受託案件のリアルな話として面白く読んでもらえるんじゃないでしょうか。
それでは、また次回〜
コメント