SWELLを買ったあと、「デザインを一から組むのは大変…」と感じていませんか。そんな人のための機能が、SWELLのデモサイト（着せ替え）です。公式が用意したデザインデータを取り込むだけで、プロが作ったような見た目を数分で再現できます。CSSもデザインセンスもいりません。
僕はブログ歴6年、SWELLを5年使っています。この記事では、デモサイトの種類と選び方、着せ替えの具体的な手順、そして着せ替え後にやるべきことまで、つまずきポイントを押さえて解説します。
- SWELLのデモサイト（着せ替え）とは何か
- デモの種類と、目的別のおすすめの選び方
- 着せ替えの手順と、後から崩れないための注意点
最初に着せ替えを当てておくと「ゴールの形」が見えるので、そこから自分好みに直していくのが一番ラクです。
目次
SWELLのデモサイト（着せ替え）とは？
SWELLのデモサイトとは、公式が用意した「完成済みのデザイン見本」です。SWELL会員サイトから着せ替えデータをダウンロードし、自分のサイトに取り込むと、カスタマイザーの設定（色・レイアウト・トップページの構成など）がまとめて反映されます。ゼロから設定するのと比べて、最初の見た目づくりが圧倒的に速くなります。
SWELLのデモサイト一覧とおすすめの選び方
SWELLには複数のデモが用意されており、ラインナップは公式会員サイトで随時更新されています。代表的なタイプと、どんなサイトに向くかを整理しました。
| デモの傾向 | 雰囲気 | 向いているサイト |
|---|---|---|
| シンプル系 | 余白広め・読みやすい | ブログ全般・特化ブログ |
| リッチ・華やか系 | 画像映え・装飾多め | 女性向け・トレンド・美容 |
| スタンダード系 | 王道の万能デザイン | 雑記ブログ・初めての1サイト目 |
| クール・ミニマル系 | 白基調でスタイリッシュ | ガジェット・ビジネス・コーポレート |
迷ったら、まず「スタンダード系」を当てておけば失敗しません。コーポレートサイトを作りたい人は、白基調のミニマル系をベースにすると整えやすいです。
SWELLのデモサイトを着せ替え（インポート）する手順
着せ替えは次の流れで行います。SWELL本体のインストールが済んでいることが前提です。まだの方は使い方の柱記事を先に確認してください。
SWELL会員サイトにログインし、使いたいデモの着せ替えデータ（カスタマイザー設定ファイル）をダウンロードします。
着せ替え設定を取り込むために、カスタマイザー設定をインポートできる無料プラグイン（Customizer Export/Import など）を有効化します。
「外観」→「カスタマイズ」を開き、ダウンロードしたデータをインポート。反映されたら、デモのデザインが一気に適用されます。
デモによってはトップページの固定ページ指定やメニューの割り当てが必要です。表示設定とメニューを整えれば完成です。
画像挿入：カスタマイザーのインポート画面のスクリーンショット
着せ替え後にやるカスタマイズ
着せ替えはあくまで「土台」です。そのままだとデモのままなので、最低限ここだけは自分仕様に変えましょう。
- サイトロゴ・キャッチコピーを自分のものに差し替える
- メインカラーをブランドカラーに変更する
- メインビジュアルの画像とテキストを差し替える
- 不要なデモ用のダミーコンテンツを消す
色やメインビジュアルなど、各パーツの細かい調整方法は使い方ガイドの早見表からたどれます。「やりたいこと」から逆引きしてください。
→ 内部リンク：「SWELLメインビジュアルの設定」「サイトカラーの変更」個別記事（作成後に挿入）
ロゴと色を変えるだけで「自分のサイト」感が一気に出ます。まずはこの2つからどうぞ。
着せ替えでよくあるトラブルと対処
- トップページがデモと違う：固定ページの「ホームページ表示」設定が未指定。表示設定を確認
- メニューが表示されない：メニューの「表示位置」が割り当てられていない
- 色が反映されない：キャッシュが残っている。ブラウザとSWELLのキャッシュをクリア
よくある質問（FAQ）
- デモサイトの着せ替えは無料でできますか？
SWELLを購入していれば、着せ替えデータは会員サイトから無料でダウンロードできます。追加料金はかかりません。
- 運用中のサイトに着せ替えを当てても大丈夫ですか？
カスタマイザー設定が上書きされるため、自分で調整した色やレイアウトは消えます。運用中のサイトに当てる場合は、必ずバックアップを取ってから実行してください。
- デモのデザインから大きく変えても問題ありませんか？
まったく問題ありません。デモはあくまで出発点です。ロゴ・色・トップ構成を変えていくほど、オリジナリティのあるサイトになります。
まとめ：デモサイトは「ゴールを先に見る」ための近道
SWELLのデモサイトを使えば、デザインの完成形を先に手に入れてから、自分仕様に整えていけます。ゼロから組むより圧倒的に速く、初心者でもプロっぽいサイトが作れます。まずはスタンダード系を当てて、ロゴと色を変えるところから始めてみてください。各パーツの調整は、使い方の柱記事から逆引きで進めるとスムーズです。
これからSWELLを導入する方は、着せ替えデータが使えるのも購入後すぐです。買い切りなので、複数サイトそれぞれに違うデモを当てて運用することもできます。
