業種別 Webサイト サンプル集

AI×HP制作講座で、実際に手を動かして作ったサイトの見本です。
旅館・洋菓子店・美容室の、3つの業種を作りました。

この3つのサイトを作るのにかかった
人の作業時間は、約3時間(実働1日以内)です。
AI が作業していた時間は含みません。

下の3枚の窓の中は、どれも実際に動いているサイトです。
窓を押すと、中のサイトをそのまま操作できます。
ENTER を押せば、そのサイトが別のタブで開きます。

窓は、上の細い帯をつかんで動かしたり、
端を引いて大きさを変えたりできます。
細くすると、中のサイトはスマホ向けの表示に切り替わります。

3つのサンプルサイト

業種ごとに「サイトで何を解決したいか」が違うので、
ページの構成も、見せ方も、それぞれ変えています。

  • 山あいの宿 つきしろ

    旅館・宿 / 情景で惹きつけ、プランを読み比べてもらう

    縦書きの見出しと細い罫線/重なって替わる写真/プランを横に送る/写真を画面に重ねて拡大/行で読み比べる一覧 → 詳細/コラムとお知らせ

  • 菓子工房 こより

    洋菓子店 / 紙に赤一色で刷ったように見せる

    紙の質感と赤一色/1文字ずつ浮かぶ見出し/専用のカーソル/段違いに並ぶカード/絞り込み → 詳細ページ/流れ続ける店名の帯

  • hair atelier NAGI

    美容室・サロン / 静かな色と余白で、スタイルを見せる

    ティール1色と余白/流れ続ける波線/背景ごと色が切り替わる/浮かぶ写真と視差/横に送って、押すと拡大/料金の比較表

作ったサイトを、売り上げにつなげる。

予約・アクセス解析・記事を AI とつなぎ、
公開したサイトを育てていく講座です。