Studioなら、今日中に無料でWebサイトが公開できます。アカウント登録からサイト公開まで最短30分。この記事では実際の手順をスクリーンショット解説で紹介します。
Studioで無料サイトを作る手順：全体の流れは？
全体は5ステップです。プログラミング知識は一切不要です。
ステップ1：アカウント登録（2分）
studio.design にアクセスし、GoogleアカウントまたはメールアドレスでSign upします。クレジットカードの入力は不要です。
ステップ2：テンプレートを選ぶ（5分）
「New Project」を押すとテンプレートギャラリーが開きます。目的（ポートフォリオ・コーポレート・LP・ブログ等）でフィルターをかけて、気に入ったデザインを選択します。
ステップ3：テキスト・画像を変更する（15〜20分）
テキストをダブルクリックすると直接編集できます。画像はクリックして「Replace」から自分の画像をアップロードします。フォント・色・余白もサイドパネルから変更可能です。
ステップ4：スマホ表示を確認する（5分）
画面上部の「Mobile」ボタンでスマホ表示を確認します。崩れている箇所があればモバイルビューで直接修正します。
ステップ5：公開する（1分）
右上の「Publish」ボタンを押します。「◯◯.studio.site」のURLで即座に公開されます（無料プランはサブドメインのみ）。
無料プランでできることとできないことは？
| 機能 | 無料プラン | Starterプラン（¥980/月） |
|---|---|---|
| 独自ドメイン | ✕（.studio.site） | ◎ |
| ページ数 | 5ページまで | 15ページまで |
| Studioロゴ非表示 | ✕（表示される） | ◎ |
| 基本的なデザイン編集 | ◎ | ◎ |
| フォーム設置 | ◎ | ◎ |
| SEO設定 | ◎ | ◎ |
ビジネス名刺代わりのサイト・学習目的・ポートフォリオのテスト用途なら無料プランで十分です。本格的なビジネス利用（独自ドメイン・ロゴ非表示）にはStarterプラン（¥980/月）が必要です。
サイト制作で詰まりやすいポイントと解決策は？
| よくある問題 | 解決策 |
|---|---|
| 要素が動かせない・選択できない | 親要素を先にクリックしてから子要素を選択する |
| スマホ表示が崩れる | モバイルビューに切り替えて該当要素を個別調整 |
| フォントが反映されない | Googleフォントを選択して「Apply to all」で一括適用 |
| 画像が引き伸ばされる | 画像の「Fit」設定を「Cover」または「Contain」に変更 |
| 公開したのに更新が反映されない | 再度「Publish」を押す（変更のたびに必要） |
クオリティを上げる3つのコツ
①フォントは2種類に絞る
見出し用と本文用の2種類だけ使います。Studioのデフォルトフォントのまま使うと「Studioっぽい」印象が強くなるので、日本語対応のNoto Sans JPやM PLUS Roundedなどに変更するだけで印象が変わります。
②余白を意識的に取る
コンテンツを詰め込みすぎると読みにくくなります。Studioではセクションの上下パディングを「80px以上」にすると、余裕があって読みやすいサイトになります。
③カラーパレットを3色に限定する
メインカラー・サブカラー・テキストカラーの3色を決めて、全ページで統一します。Studioの「Color Styles」に登録しておくと変更が一括でできて便利です。
まとめ：30分でプロ品質のサイトが完成する
- アカウント登録はGoogle認証で2分、カード不要
- テンプレートを選んでテキスト・画像を入れ替えるだけ
- スマホ表示は必ず確認して調整する
- 独自ドメインが必要になったらStarter（¥980/月）に移行
コメント