Studio無料入門講座
お店のホームページを
まずは無料で
Instagramで気になったお店。営業時間や料金、
行き方が分かれば初めてのお客さまも訪ねやすくなります。
ホームページを自分で作りたい方へ。
Studioを使って、お店の魅力と基本情報が伝わる1ページを作りましょう。
カフェの制作例を見ながら、全6回で一つずつ進める無料の読みもの講座です。
本講座の閲覧は無料です。Studioの利用にはアカウント登録が必要です。
伝えたいことをひとつの場所に。
01 ／ はじめての来店
どんなお店？に答える
お店の雰囲気、楽しみ方、料金をまとめて、初めて訪れる人の疑問を減らします。
02 ／ 情報の整理
基本情報を探しやすく
営業時間、定休日、アクセス。投稿に埋もれがちな情報を、いつでも見られる場所へ。
03 ／ 小さくスタート
まずは1ページから
最初から大きなサイトにしなくて大丈夫。必要な情報を載せ、営業しながら育てていきます。
Studioは無料で公開できる？Freeプランの範囲
この講座では、StudioのFreeプランとStudioが提供するサブドメインでの公開を前提に進めます。独自ドメインや有料素材を購入せず、まずは基本的なお店の案内ページを作ります。
無料で始めるときのポイント
- Freeプランの利用料は月額0円です。
- 独自ドメインでの公開やStudioバナーの非表示には、有料プランが必要です。
- 予約システムやアプリの開発は、この講座には含みません。
- 写真・フォント・テンプレートは、利用条件と料金を確認して選びましょう。
プランの内容は変更される場合があります。2026年9月7日確認。
作成前・公開前にStudio公式の料金プランと公式ヘルプをご確認ください。
本講座はワンマンセルが制作する非公式の入門コンテンツです。
ボードゲームカフェメイプルを作ってみました。
「いくらかかる？」「どんなゲームが遊べる？」来店前の疑問に答えるために作った架空のボードゲームカフェサイトです。
この作例で学ぶこと
- お店らしさが伝わる写真とキャッチコピー
- 初心者にも分かりやすい案内と料金表示
- 文字の丸み・太さ・余白で印象を整える方法
- スマホでの読みやすさと控えめな動き
制作途中のライブプレビューです。店舗・所在地・アプリ・募集情報はすべて架空で、予約や参加申込はできません。
登録から公開まで、順番に学ぶ。
第1回 アカウント作成
Studioの無料アカウントを作成し、管理画面を確認します。Freeプランと有料プランの違いを押さえ、無料で進める条件を理解します。
この回のゴール
Studioにログインして、制作を始められる状態にする。
第2回 ホームページを作る
新しいプロジェクトとHomeページを作り、文字・画像・ボックスを置く基本操作を学びます。レイヤーと設定パネルに触れながら、まずは1ページの骨組みを作ります。
この回のゴール
店名・見出し・画像を置いたページの土台を作る。
第3回 内容を作る
誰に来店してほしいかを決め、紹介文・メニューや料金・営業時間・アクセス・よくある質問を用意します。メイプルを例に、来店前の疑問に答える順番で情報を並べます。
この回のゴール
お店の魅力と必要な情報を、文章と写真で伝えられるようにする。
第4回 デザインを整える｜安っぽく見せないテクニック
書体、文字の太さ、色数、写真の選び方、余白を整えます。メイプルで実際に行った丸ゴシックへの変更や余白の調整を例に、変更前後を比べながら学びます。控えめなアニメーションもこの回で扱います。
この回のゴール
情報に強弱があり、お店らしい印象のデザインにする。
第5回 スマホのデザインを整える
スマホ向けの表示へ切り替え、文字サイズ、改行、写真の見え方、余白を調整します。幅360pxなどの狭い画面と実機で確認し、読みやすさと操作しやすさを仕上げます。
この回のゴール
スマホで文字や画像が見切れず、必要な情報が読める状態にする。
第6回 公開する
ページタイトル・説明文・公開URLを整え、情報とリンクを最終確認します。Studioのサブドメインで公開し、スマホからアクセスして確認。Instagramなどから案内するところまで進めます。
この回のゴール
お店の案内ページを公開し、お客さまにURLを伝えられるようにする。
はじめる前の気になること。
パソコンが苦手でも作れますか？
コードを書かずに制作できますが、画面操作に慣れる時間は必要です。
まずは店名と紹介文を置くところから、一つずつ試してみましょう。
お店のホームページに独自ドメインは必要ですか？
この講座ではStudio提供のサブドメインで始めます。
お店独自のURLにしたくなったら、対応する有料プランとドメイン取得費用を確認して検討しましょう。
スマートフォンだけでも制作できますか？
この講座はパソコンでの編集を前提としています。スマートフォンは、完成したページの表示やリンクの確認に使います。
メイプルポケットも作れる講座ですか？
メイプルポケットは架空アプリの画面画像です。
本講座ではホームページへの画像の掲載を扱い、リアルタイムの人数表示や予約アプリの開発は扱いません。
まずは、作りたいお店の
イメージを決めましょう。
「どんな人に、どんな時間を過ごしてほしいか」
その一文から、ホームページ作りが始まります。
忙しい日は、途中で止めて次の空き時間に戻ってきても大丈夫です。
制作・執筆：ワンマンセル／Studioおよび掲載サービスの仕様は変更される場合があります。作例は架空サイトです。