ご購入者様向け ご準備のお願い
サイト制作を開始するにあたり、以下の情報をご準備ください。
1. 使用するサービス一覧
本サイトでは以下のサービスを使用します。
| サービス | 用途 | 備考 |
|---|---|---|
| microCMS | コンテンツ管理 | 納品後、お客様が主に使用するサービスです |
| Cloudflare | サイト公開・ホスティング | |
| Web3Forms | 問い合わせフォーム | 問い合わせフォームを設置しない場合は不要 |
| GitHub | ソースコード管理 | お客様のリポジトリにこちらが参加 |
2. ご準備いただく情報
サイト制作にあたり、以下の情報をご準備ください。
2.1 基本情報
| 項目 | 説明 | 例 |
|---|---|---|
| サイト名 | サイトのタイトル | 株式会社〇〇 |
| ロゴ画像 | 横長推奨(PNG/SVG) | logo.png |
| コピーライト | フッター表示用 | © 2026 株式会社〇〇 |
| 希望の色 | サイトのメインカラー | 青系、#2563eb、ロゴに合わせて など |
| 希望の雰囲気 | サイト全体のデザインテイスト | 下記参照 |
| ブログ編集形式 | ブログ記事の編集方法 | 下記参照 |
雰囲気の選択肢:
| 選択肢 | 説明 | 向いているサイト |
|---|---|---|
| スタンダード | 標準的なデザイン | 汎用 |
| ダーク | スタンダードのダークモード版 | IT系、ゲーム、クリエイター |
| ビジネス | フォーマルなビジネス向けデザイン | 企業、クリニック、士業 |
| モダン | 洗練されたデザイン | ポートフォリオ、デザイナー |
| エレガント | 上品で落ち着いたデザイン | サロン、ブライダル、高級店 |
| ナチュラル | やさしいデザイン | オーガニック、整体、ヨガ |
| カフェ風 | 暖色・コージーなデザイン | カフェ、ベーカリー、雑貨店 |
| 和風 | 伝統的な和のデザイン | 和食店、旅館、伝統工芸 |
| かわいい | ポップなデザイン | 同人、イラストレーター、キッズ |
| サイバー | ネオン・サイバーパンク風デザイン | VTuber、ゲーム、テック系 |
| その他 | 具体的なイメージをお伝えください | - |
ブログ編集形式の選択肢:
| 選択肢 | 説明 |
|---|---|
| リッチテキスト | ビジュアルエディタで編集(Wordのような操作感) |
| Markdown | テキストベースで編集(プログラマー向け) |
💡 よくわからない場合は「リッチテキスト」をおすすめします。
2.2 ドメイン
ドメインをお持ちでない場合
Cloudflareの無料ドメイン(xxx.pages.dev)での公開が可能です。特別な設定は不要です。
| 項目 | 説明 | 例 |
|---|---|---|
| 希望URL | xxx.pages.dev の xxx 部分 |
mycompany, sample-shop など |
💡 英数字とハイフンのみ使用可能です。希望の文字列が既に使われている場合は別の候補をご相談します。
独自ドメインをお持ちの場合
| 項目 | 説明 |
|---|---|
| ドメイン名 | 例: example.com |
| 現在の管理会社 | 例: お名前.com、ムームードメインなど |
お客様にて行っていただく設定:
サイト公開時に、ドメイン管理会社の管理画面でDNS設定を変更していただく必要があります。具体的な設定値は制作完了時にお伝えします。
方法A: CNAMEレコードを追加(推奨)
ドメイン管理会社の管理画面で以下のレコードを追加します。
| タイプ | ホスト名 | 値 |
|---|---|---|
| CNAME | www | (制作完了時にお伝えします) |
| CNAME | @ | (制作完了時にお伝えします) |
⚠️ 一部のドメイン管理会社では、ルートドメイン(@)にCNAMEを設定できない場合があります。その場合は方法Bをご利用ください。
方法B: ネームサーバーをCloudflareに変更
ドメインのDNS管理をCloudflareに移管する方法です。より柔軟な設定が可能になります。
- Cloudflareにドメインを追加
- ドメイン管理会社の管理画面でネームサーバーを変更
- 変更先のネームサーバーはCloudflareの画面に表示されます
- 反映まで最大48時間かかる場合があります
主なドメイン管理会社の設定画面:
- お名前.com: ドメイン設定 → ネームサーバーの変更
- ムームードメイン: ドメイン操作 → ネームサーバ設定変更
- さくらインターネット: 会員メニュー → ドメイン → ゾーン編集
- Xserver: サーバーパネル → ドメイン → DNSレコード設定
💡 設定方法がわからない場合は、ドメイン管理会社名をお伝えいただければ、具体的な手順をご案内します。
2.3 SNSアカウント(該当するもの)
サイトに表示するSNSリンクがあればお知らせください。
対応プラットフォーム:
X / Instagram / Facebook / YouTube / LINE / Bluesky / Threads / TikTok / Discord / GitHub / LinkedIn / note / Pinterest / pixiv / Twitch / その他
| プラットフォーム | アカウント名 or URL |
|---|---|
| 例: X | @example |
| 例: YouTube | https://youtube.com/@example |
2.4 コンテンツ素材
| 項目 | 形式 | 備考 |
|---|---|---|
| メイン画像 | JPG/PNG | ヒーロー画像など |
| サービス画像 | JPG/PNG | 各サービス説明用 |
| テキスト原稿 | Word/テキスト | サービス説明、会社概要など |
2.5 GitHub(ソースコード管理)
サイトのソースコードをGitHubで管理します。お客様のGitHubアカウントでリポジトリを作成し、こちらをコラボレーターとして招待してください。
準備手順:
- GitHub でアカウントを作成(お持ちでない場合)
- 新しいリポジトリを作成(リポジトリ名は任意、Privateに設定)
- リポジトリの Settings → Collaborators から、
dev@techolic.jpを招待
| 項目 | 説明 |
|---|---|
| リポジトリURL | 作成したリポジトリのURL |
💡 GitHubアカウントの作成方法やリポジトリの作成方法がわからない場合は、お気軽にご相談ください。
2.6 Web3Forms(問い合わせフォーム)
問い合わせフォームを設置する場合、アクセスキーの取得をお願いします。
💡 問い合わせフォームを設置しない場合はスキップしてください。
アクセスキーの取得手順:
- Web3Forms にアクセス
- 「Create your Access Key for FREE」の欄に通知を受け取りたいメールアドレスを入力
- 「Create Access Key」をクリック
- 届いた認証メール「Verify Your Email - Web3Forms」の「Verify Email」を24時間以内にクリック
- 認証完了後に届くアクセスキーをこちらにお送りください
| 項目 | 説明 |
|---|---|
| Web3Forms アクセスキー | xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx 形式 |
💡 お問い合わせがあると、登録したメールアドレスに通知が届きます。
3. 情報共有方法
以下のいずれかの方法で情報をお送りください。
- メール: 上記情報をメールに記載
- 共有ドキュメント: Google ドキュメントやスプレッドシートで共有
- チャット: Slack、Chatwork、LINEなど
4. 制作の流れ
1. 情報共有(お客様)
↓
2. 各種アカウント作成(当方)
↓
3. microCMSの初期設定(当方)
↓
4. Cloudflare Pagesへのデプロイ(当方)
↓
5. コンテンツ入力・デザイン調整(当方)
↓
6. microCMSへの招待・確認依頼(当方 → お客様)
↓
7. 確認・修正(お客様 ↔ 当方)※最大2回まで
↓
8. 独自ドメインの場合、ドメイン設定(当方)
↓
9. 公開・納品
microCMSへの招待について
ステップ6でmicroCMSへの招待メールをお送りします。届いたらリンクをクリックしてアカウントを作成してください。作成後、サイトの内容をご確認いただけます。
💡 納品後はmicroCMSからブログの投稿やページ内容の更新ができます。
修正回数について
確認・修正(ステップ7)は2回までを基本としています。
- 1回目: 初回確認後の修正
- 2回目: 再確認後の微調整
💡 3回目以降の修正や、大幅なデザイン変更は別途お見積りとなる場合があります。
5. 納品後の運用
コンテンツ更新
microCMSにログインして、お客様ご自身で更新可能です。
- ブログ記事の投稿・編集
- ページ内容の修正
- 画像の差し替え
更新後は自動的にサイトに反映されます(通常2-3分程度)。
納品物
| 項目 | 内容 |
|---|---|
| microCMS | メンバー招待(確認依頼時に送付済み) |
| Cloudflare | ログインURL、メールアドレス、パスワード |
| GitHub | お客様のリポジトリにソースコードをプッシュ済み |
💡 Cloudflareは納品後にパスワード・メールアドレスを変更していただくことを推奨します。
サポート
ご不明点がありましたらお気軽にお問い合わせください。
チェックリスト
ご準備が完了したら、以下をご確認ください。
- サイト名・ロゴなど基本情報を用意した
- ドメインについて確認した(独自ドメイン or 無料ドメイン)
- SNSアカウント情報を用意した(該当する場合)
- コンテンツ素材を用意した
- GitHubリポジトリを作成し、コラボレーター招待した
- Web3Formsのアクセスキーを取得した(問い合わせフォームを設置する場合)
情報送付テンプレート
以下をコピーして、必要事項を記入のうえお送りください。
【サイト基本情報】
■ サイト名:
■ コピーライト表記:
(例: © 2026 株式会社〇〇)
■ ロゴ画像:
(添付 or URL)
■ 希望の色:
(例: 青系、やわらかいオレンジ、#2563eb、ロゴに合わせて など)
■ 希望の雰囲気:※該当するものを残してください
スタンダード / ダーク / ビジネス / モダン / エレガント / ナチュラル / カフェ風 / 和風 / かわいい / サイバー / その他:
■ ブログ編集形式:※該当するものを残してください
リッチテキスト(おすすめ) / Markdown
---
【ドメイン】
■ 独自ドメイン:
(お持ちでない場合は「なし」と記入)
■(独自ドメインありの場合)ドメイン管理会社:
(例: お名前.com、ムームードメイン、さくらインターネットなど)
■(独自ドメインありの場合)DNS設定の希望:※該当するものを残してください
自分でCNAMEレコードを追加する / ネームサーバーをCloudflareに変更する / 設定を代行してほしい / わからないので相談したい
■(独自ドメインなしの場合)希望URL:
(例: mycompany → mycompany.pages.dev になります)
---
【SNSアカウント】該当するもののみ
(対応: X / Instagram / Facebook / YouTube / LINE / Bluesky / Threads / TikTok / Discord / GitHub / LinkedIn / note / Pinterest / pixiv / Twitch / その他)
■ プラットフォーム名: アカウント名 or URL
■
■
■
---
【GitHub】
■ コラボレーター招待:※該当するものを残してください
招待済み(リポジトリURL: ) / 招待方法がわからないので教えてほしい
---
【Web3Forms】※問い合わせフォームを設置する場合のみ
■ アクセスキー取得:※該当するものを残してください
取得済み(アクセスキー: ) / 取得方法がわからないので教えてほしい
---
【その他・ご要望】
すべて記入しましたら、ロゴ画像やコンテンツ素材と合わせてお送りください。