SHUTTLES Icon

SHUTTLES Guide

ジェネレーターに戻る
DIYコース ユーザー様へ

ジェネレーターの使い方ガイド

SHUTTLES Website Generatorを使えば、専門的な知識がなくても プロ品質のWebサイトを無料で作成・ダウンロードできます。

1 基本情報を入力する

まずは、あなたのお店やサービスの名前、連絡先などを入力しましょう。入力した内容は「プレビューを更新」ボタンを押すことで、右側の画面にリアルタイムで反映されます。

  • サイトの公開予定URL: SNSでシェアされた時の画像（OGP）を正しく表示するために必要です。
  • デザイン設定: テーマカラーに加え、4種類のフォント（書体）、5段階の「文字の太さ」を組み合わせて、お好みの雰囲気に調整できます。
  • ABOUT / 営業情報: お店のこだわりや、営業時間、定休日などを入力してください。

2 SNS連携と画像の設定

お持ちのSNSアカウント情報を入力すると、サイトのフッターにリンクアイコンが自動で追加されます。InstagramのIDを入力した場合は、ギャラリーの下に専用のボタンも表示されます。

アイコン
ブラウザのタブに
表示されるマーク
OGP画像
SNS等でシェアされた
時に表示される画像
メイン背景
サイトの顔となる
一番大きな画像
ギャラリー
中段に4枚並べて
表示される画像

※アップロードした画像は、後でダウンロードするZIPファイル内に自動で同梱されます。（推奨サイズ：5MB以下）

3 外部システムと連携する Advanced

「News」「Schedule」「Contact」の各セクションを機能させるための高度な設定です。
※この設定が難しく感じる場合は、「プロにおまかせコース」のご利用をおすすめします。

① 外部ブログ (RSS) 連携 【News用】

アメブロやnoteなど、お使いのブログの「RSSフィードURL」を入力すると、サイトのNews欄に最新記事が自動で表示されます。
（例：noteの場合は https://note.com/あなたのID/rss）

② Googleカレンダー連携 【Schedule用】

Google Cloud Consoleから取得した「APIキー」と、公開設定にしたカレンダーの「カレンダーID」を入力すると、サイト上にスケジュールが表示されます。
※未入力の状態では、デザイン確認用の「サンプルカレンダー」が表示されます。

③ Googleフォーム連携 【Contact用】

Googleフォームで作成したお問い合わせフォームの「基本ID」と、各質問項目の「entry ID」を調べて入力することで、サイト内のデザインのままメールを送信できるようになります。

4 プレビューとダウンロード

入力が完了したら、左上の「プレビューを更新」ボタンを押して、全体のデザインを確認してください。スマートフォンでの見え方もブラウザの幅を狭めることで確認できます（メニューがハンバーガーメニューに変化します）。

完成したら、右上の「サイトを公開する」タブをクリックし、「無料でダウンロード (ZIP)」ボタンを押します。
ダウンロードされたZIPファイルを解凍すると、index.html と各種画像が入った images フォルダが生成されています。

💡 その後の公開手順 (DIY)

  1. GitHub Pages、Cloudflare Pages、Netlifyなどの無料ホスティングサービス、またはご契約中のレンタルサーバーを用意します。
  2. 解凍したファイル一式（index.html と images フォルダ）をそのままサーバーにアップロードします。
  3. ジェネレーターで設定した「公開予定URL」と実際のドメインを合わせて、公開完了です！

設定やサーバーへのアップロードがご不安ですか？

APIの取得から、サーバーへのアップロード、ドメイン設定まで。
面倒な作業はすべて、SHUTTLESのプロスタッフが代行するプランをご用意しています。

まるごとおまかせコースを見る