街と珈琲｜制作記録

今回は、カフェ「街と珈琲」様のホームページを制作させていただいた際の、制作背景や取り組みについてご紹介します。

今回の制作では、AIを活用したWeb制作（バイブコーディング）を取り入れながら、お店の魅力やこだわりが伝わるホームページを目指しました。

単に見た目の綺麗なサイトを作るのではなく、「誰に、何を伝えるホームページなのか」を大切にしながら制作を進めた案件です。

制作のきっかけ｜お店のWeb発信をリサーチ

今回の制作は、私がお店のWeb発信を調べたことから始まりました。

まずGoogleでお店の名前を検索し、現在どのような方法で情報発信や集客を行っているのかを確認しました。

調べてみると、Instagramを中心に積極的に情報発信されており、Facebookやグルメサイトなども活用されていました。

一方で、既存のホームページは、私が拝見した時点ではまだ整備の余地があるように感じました。

そこで、SNSで発信されているお店の魅力を、ホームページとしても整理して伝えられたら、より良い情報発信につながるのではないかと考えました。

この段階では、まだ正式な制作依頼をいただいていたわけではありません。

まずは実際にサイトの形を作り、お店の方に見ていただこうと思い、自主的にデモサイトの制作を始めました。

AIを活用してデモサイトを制作

制作には、AIを活用してWebサイトを構築する「バイブコーディング」という手法を取り入れました。

まずは、お店のInstagramやグルメサイトなど、インターネット上で公開されている情報を参考に、ホームページの基本構成を作成しました。

AIを活用することで、サイトの大まかな形は約1時間ほどで制作できました。

ただし、この段階では、あくまでデザインの土台が完成した状態です。

ここから、お店の特徴や魅力がきちんと伝わるように、内容やデザインを調整していきました。

デザイン以上に大切にした「誰に何を伝えるか」

今回、特に意識したのが、ホームページのコンセプト設計です。

最初に制作したサイトは、見た目としてはある程度満足できるものでした。

しかし、改めて見直してみると、「どんなお客様に向けて、何を伝えたいのか」という部分が十分に整理できていませんでした。

そこで、制作の方向性を見直すことにしました。

お店の過去の活動や、オーナー様のこだわり、店舗の特徴などについて、公開されている情報をAIで追加リサーチ。

その情報をもとに、お店の魅力をどのように伝えるべきかを考え直しました。

特に重視したのが、ターゲット設定とファーストビューです。

ファーストビューとは、ホームページを開いたときに最初に表示される部分のことです。

訪問者が最初に目にする場所だからこそ、お店の雰囲気や魅力が伝わる構成を意識しました。

また、誰に向けたホームページなのかを具体的に考えることで、掲載する情報やメッセージの方向性も整理しました。

単に写真を綺麗に配置するだけではなく、お店の魅力を伝えるためのデザインを目指しました。

デモサイトをご提案し、正式に制作をご依頼いただく

サイトのブラッシュアップを進めたところで、実際にオーナー様へデモサイトをご紹介しました。

「こういうホームページを作ってみたのですが」とお見せしたところ、とても驚いていただき、詳しいお話を聞いていただけることになりました。

その後、正式にホームページ制作をご依頼いただきました。

最初から制作依頼をいただいていたわけではなく、デモサイトをご覧いただいたことがきっかけで、実際のお仕事につながった案件です。

事前に完成イメージを確認していただけたことは、制作内容を共有するうえでも良かったと感じています。

制作中の調整とブラッシュアップ

AIを活用すると、ホームページの基本的なデザインや構成を効率よく作成できます。
しかし、最初からすべてが思いどおりに完成するわけではありません。

今回も、細かなデザイン調整や不具合の修正など、繰り返し改善する作業が必要でした。

AIに修正を依頼しても、一度では期待どおりにならない場合があります。

そのため、実際の表示を確認しながら、修正箇所を整理し、AIへの指示を調整していきました。

また、制作過程ではWeb制作の専門家からサイトの添削を受け、さまざまな改善点についてアドバイスをいただきました。

自分だけでは気づきにくい細かなポイントも見直しながら、完成度を高めていきました。

サイトの大まかな形は短時間で作成できましたが、こうした調整を含めると、仕事の合間に約1週間ほど制作に取り組んだと記憶しています。

AIの制作スピードを活かしつつ、最終的な品質を確認し、丁寧に仕上げていくことの大切さを感じた工程でした。

WordPressのオリジナルテーマとして制作・納品

今回の案件では、納品方法についても工夫しました。

オーナー様が以前から運営されていたホームページは、WordPressで構築されていました。

そこで、新たに制作したサイトもWordPressで利用できるようにすることにしました。

AIを活用して制作したホームページを、WordPressのオリジナルテーマとして利用できる構成に変換。

テーマファイルをZIP形式にまとめ、納品しました。

WordPressのテーマとして制作することで、既存のWordPress環境を活用したサイト運用が可能になります。

テーマ化の作業自体もAIを活用して進めたため、大きな問題なく対応することができました。

導入支援と操作マニュアルの作成

ホームページは、制作して納品すれば終わりというものではありません。

今回、特に大切にしたのが、納品後にオーナー様がホームページを利用できるようにするためのサポートです。

「街と珈琲」様は地域でも知られているカフェで、オーナー様も日々お忙しくされていました。

そのため、完成したテーマファイルをお渡ししても、WordPressへの導入作業に時間を割くことが難しい状況でした。

そこで、実際にお店へ伺い、WordPressへの導入作業をサポートしました。

また、今後の管理や操作に役立てていただけるよう、導入マニュアルと操作マニュアルも作成しました。

実際に画面を確認していただきながら、マンツーマンで操作方法もご説明しました。

お忙しい中でのスケジュール調整には時間がかかりましたが、単にファイルを納品するだけでなく、実際に利用できる状態までお手伝いできたことは、今回の制作で大切な経験になりました。

今回の制作を通じて感じたこと

今回の「街と珈琲」様のホームページ制作では、AIを活用することで効率よくサイトを構築できました。

一方で、実際の制作を進める中では、見た目の良さだけではなく、コンセプトの設計や情報の伝え方、細かな品質確認が重要だと改めて感じました。

特に意識したのは、以下の点です。

• お店の特徴やこだわりを理解すること
• ホームページを訪れるお客様を具体的に想定すること
• ファーストビューで伝える内容を整理すること
• AIが生成したサイトをそのまま完成品にせず、確認と改善を重ねること
• 納品後の導入や操作まで考えてサポートすること

AIはホームページ制作を効率化してくれる便利な技術です。

ただし、誰に何を伝えるのかを考え、完成したものを確認し、お客様にとって使いやすい形に整えていくことは、制作する側の大切な役割だと思っています。

まとめ｜お店の魅力を伝え、安心して使えるホームページを目指して

今回の「街と珈琲」様のホームページ制作では、事前リサーチからデモサイトの制作、コンセプトの見直し、WordPressテーマ化、導入支援、操作マニュアルの作成まで対応しました。

制作を通じて、ホームページは単に綺麗であれば良いのではなく、お店の魅力が伝わり、実際の運用にも役立つものであるべきだと改めて感じています。

これからもAIの技術を活用しながら、一つひとつのご依頼に丁寧に向き合い、お客様の思いやこだわりを大切にしたホームページ制作を心がけていきたいと思います。

このたびは、ホームページ制作をお任せいただき、ありがとうございました。