SWELLの参考サイト活用術5ステップでおしゃれ化（未経験者OK）

Swellでサイトを作りたいけれど、どんなデザインにすればいいかピンとこない…とモヤモヤしていませんか。Swellの参考サイトをじっくり眺めて少し真似するだけでも、自分のブログやコーポレートサイトの完成イメージはかなりハッキリしてきます。

結論としては、良さそうなSwellの参考サイトをいくつか選んで「見る→真似る→自分用にアレンジする」流れさえ押さえれば、デザインに自信がない私でも十分きれいなサイトが作れる、ということです。

Swell参考サイトを見る前に決めておきたい3つのこと

サイトの目的をはっきりさせる

なんとなく「おしゃれなサイトにしたいな」と思いながらSwellの参考サイトを眺めると、どれも素敵に見えてしまって決めきれません。まずは「このサイトで何を達成したいのか」という目的を、一言で言える状態にしておくと方向性がブレにくくなります。

例えば、次のようなイメージです。

目的	ゴールのイメージ	向いている参考サイトのタイプ
ブログで収益化したい	広告・アフィリエイトの売上アップ	記事一覧が見やすく、カテゴリが整理されたブログ型サイト
会社の信頼感を高めたい	問い合わせ・来店・資料請求を増やす	実績紹介やサービス説明がしっかりしたコーポレートサイト
個人の仕事を増やしたい	案件・相談・お仕事依頼を増やす	プロフィールと実績が前に出ているポートフォリオサイト
商品・サービスを売りたい	申込みや購入ボタンのクリックを増やす	LP型レイアウトでCTA（ボタン）が分かりやすい1ページ完結サイト

この目的が決まると、「今はどのSwellの参考サイトを中心に見ればいいか」が一気に絞り込めるので、その後の作業が楽になります。

ターゲットと世界観をざっくり言語化する

次に、「誰に向けたサイトなのか」と「どんな雰囲気にしたいか」をざっくりでいいので言葉にしておきましょう。紙にメモするだけでも、Swellの参考サイトの見え方が変わります。

例えば、こんな感じです。

• ターゲット：副業に興味がある社会人／世界観：落ち着いた色で、信頼できそうな雰囲気
• ターゲット：子どもを持つ親世代／世界観：明るく、やさしく、ちょっとかわいいデザイン

このイメージを頭に入れながらSwellの参考サイトを見ると、「これは自分のターゲットに近い」「これは世界観が違うな」と判断しやすくなり、デザインの迷子になりにくくなります。

 

【深呼吸タイム】

稼ぐために必要な3つのポイントを知っていますか？

1. 稼げる広告
2. 稼げるキーワード
3. 稼げるライティング

これら全部を暴露します。

⇒まずはあっさり10万稼ぐためのメルマガ

 

必要なページ・機能を書き出してから参考サイトを見る

最後に、「自分のサイトにどんなページが必要か」「どんな機能が欲しいか」を先に書き出しておくと、参考サイトの見方が変わります。

• ブログ：トップページ、カテゴリ一覧、記事ページ、プロフィール、お問い合わせ
• コーポレートサイト：トップ、サービス紹介、会社概要、実績・お客様の声、採用情報、お問い合わせ
• ポートフォリオ：トップ、プロフィール、制作実績一覧、各実績の詳細、お問い合わせ

このリストを手元に持ってSwellの参考サイトを見ると、「このサイトは採用ページの作り方が参考になる」「この実績ページの構成を真似したい」など、必要な部分だけをピンポイントで拾えるようになります。

Swell 参考サイトの探し方｜まず見るべきギャラリーと検索のコツ

まず押さえたいSwell参考サイトのギャラリー3選

Swellで作られたサイトを効率よく眺めたいときは、まず「ギャラリーサイト」をチェックするのが近道です。制作会社や個人クリエイターが運営しているものもあり、ジャンルやカラーで絞り込めるものが多いです。

ギャラリーの種類	特徴	こんなときにおすすめ
公式Swellデモサイト	テーマが用意しているデモデザインが一気に見られる	デザインだけでなく、ブロック構成ごと真似したいとき
デザインギャラリー系サイト	実際のブログ・企業サイト事例がジャンル別に豊富	いろいろな業種のSwellサイトをまとめて眺めたいとき
制作実績検索サイト	サイトの種類やカラー、業種で条件検索できる	「青系のコーポレートサイト」など条件を決めて探したいとき

こうしたギャラリーは、Swellの参考サイトを探すうえでの「地図」のような存在です。まずはここから、自分の目的に近いサイトを3〜5個だけピックアップしてみてください。

Google検索でSwell参考サイトを見つけるキーワード例

ギャラリーだけでなく、Google検索から直接Swellで作られたサイトを探す方法もあります。まとめ記事や制作実績ページがヒットしやすいキーワードをいくつか挙げておきます。

• 「swell 制作実績」
• 「swell 参考サイト ブログ」
• 「swell コーポレートサイト 事例」
• 「swell テーマ デザイン 事例」

検索で見つかるサイトは、ギャラリーには載っていないケースも多いので、「他の人とかぶらないSwellの参考サイトを探したい」ときにかなり役立ちます。

SNSでSwell 参考サイトを探すときのポイント

XなどのSNSでも、Swellで作られたサイトは意外とたくさんシェアされています。作り手のコメント付きで流れてくることも多く、ギャラリーとは違った視点で参考になります。

SNSの良いところは、「どこを工夫したか」「どこが気に入っているか」など、制作者の一言コメントが一緒についていることです。デザインだけでなく、その裏側の意図も想像しながらSwellの参考サイトを眺められます。

 

【ちょっと一息♪】

私の妻がどうやって7日で初報酬を得て5万円の不労所得を得られるようになったか？
その全貌を知りたくありませんか？

⇒今すぐその秘密を見る

ジャンル別に見るSwell参考サイトのチェックポイント

ブログ向けSwell参考サイトで見るべき3つのポイント

ブログ用のSwell参考サイトを見るときは、次の3つに注目すると判断しやすくなります。

• 記事一覧が見やすいか（カードの大きさ・サムネイル・文字量）
• カテゴリやタグが分かりやすく整理されているか
• スマホで読みやすい行間と文字サイズになっているか

ブログのタイプごとに、「どんなデザインが合うか」「どこを見ればいいか」をざっくり表にするとこんな感じです。

ブログタイプ	デザインの方向性	チェックしたいポイント
雑記ブログ	シンプルで情報量が多くても読める構成	カテゴリメニュー、パンくずリスト、検索窓の位置など
特化ブログ	テーマカラーがはっきりしている	トップの導線（収益記事への誘導、ランキング、カテゴリ）
写真・ビジュアル重視	画像が大きく表示されるカード型レイアウト	画像のトリミング、余白、タイトルとのバランス
個人ブランド系	プロフィールや実績がしっかり目立つ	プロフィールの位置、顔写真やアイコンの雰囲気

私も最初にSwellの参考サイトを眺めたときは、いわゆる特化ブログ系の構成を真似しました。その結果、トップページを見ただけで「何のブログか」がすぐ伝わるようになり、実際にアクセスの質も良くなったと感じています。

コーポレートサイト向けSwell参考サイトの見方

コーポレートサイト向けのSwell参考サイトでは、「信頼できそうか」「サービス内容が一目で伝わるか」が何より大事です。見栄えだけで決めずに、訪問した人の気持ちになってチェックしてみてください。

• トップに会社の強みやキャッチコピーがはっきり書かれているか
• 実績やお客様の声など、信頼につながる情報が分かりやすく並んでいるか
• 会社概要やアクセス情報がすぐ見つかるか

業種ごとに、優先したい要素とSwellの参考サイトで見るべき箇所を整理すると、次のようになります。

業種	優先したい要素	見るべき箇所
士業・コンサル系	信頼感・専門性	実績紹介、代表メッセージ、プロフィールの見せ方
クリニック・サロン	清潔感・安心感	カラー（白＋淡い色）、写真の雰囲気、院内の見せ方
教室・スクール系	親しみやすさ・楽しさ	写真のテイスト、体験者の声、料金表の見せ方
制作会社・代理店	実績の豊富さ・デザイン性	制作実績一覧ページ、事例詳細ページの構成

Swellの参考サイトを眺めながら、「自社と業種が近いサイト」「ターゲットが似ていそうなサイト」を1〜2つ決めて、その構成をベースに考えると迷いが減ります。

ポートフォリオ・LP向けSwell参考サイトの見方

ポートフォリオやLP（ランディングページ）型のSwell参考サイトでは、「ストーリーの流れ」と「ボタンまでの導線」を意識して見てみましょう。

• 自分のストーリーや実績が、自然な順番で伝わる構成になっているか
• 依頼や申し込みのボタンが、迷わず見つかる位置にあるか
• スクロールしたくなるリズム（文章と画像のバランス）になっているか

よくあるLP型Swellサイトの構成を、ざっくり表にすると次のようになります。

セクション順	内容の例	チェックポイント
1	ファーストビュー（キャッチコピー＋写真）	一目で「誰のための何のサイトか」が伝わるか
2	共感パート（悩みの整理）	ターゲットの悩みが、自分の想定と近いか
3	解決策・サービス説明	サービスの特徴が整理されていて読みやすいか
4	実績・お客様の声	信頼材料として十分な数と内容があるか
5	プラン・料金表	プランの数、比較表の分かりやすさ、CTAの位置
6	よくある質問	申し込む前の不安が解消される内容になっているか
7	申し込み・問い合わせボタン	最後にもう一度、分かりやすくボタンが置かれているか

自分のLPを作るときは、こうしたSwellの参考サイトを開きながら、「どこでセクションを区切っているか」「どんなブロックを使っていそうか」を観察してみると、構成の組み立て方がつかめてきます。

 

★ちょっとだけ宣伝させてください★

「ブログで10万」と聞くと、

1. センスが必要
2. 文章力が要る

と思われがちですが、実は「勝ちパターン」を知っているかどうかだけなんです。

⇒ブログで10万稼ぐ勝ちパターンとは

Swell参考サイトを真似してデザインする6ステップ

ステップ1：参考にするSwellサイトを3〜5個だけ選ぶ

まずは、ギャラリーや検索から「これはいいな」と感じたSwellの参考サイトを3〜5個に絞ります。たくさん開きすぎると、どれを真似すればいいか分からなくなってしまうので、いったん数を絞るのがコツです。

このとき、「ブログ系」「コーポレート系」「LP系」などタイプを分けておくと、自分のサイトに合うパターンだけを集中して見られます。

ステップ2：トップページの「パーツ」を書き出す

選んだSwellの参考サイトのトップページをスクロールしながら、画面に出てくる「パーツ」をメモしていきます。

このメモを、自分のサイトに必要なパーツと見比べて、「残すパーツ」「いらないパーツ」「追加したいパーツ」を決めると、トップページの設計図が見えてきます。

ステップ3：Swellのブロックで置き換えて考える

次に、「このパーツはSwellのどのブロックで作れそうか」をざっくり想像してみます。ブロック名まで完璧に分かる必要はないので、大まかなイメージで大丈夫です。

• ヒーローエリア → カバーブロック＋ボタンブロック
• サービス紹介 → カラムブロック＋アイコン付きの見出し
• 実績一覧 → グリッドレイアウトやカード型のリスト表示
• お客様の声 → ボックスデザインや吹き出しブロック

Swellの参考サイトに出てくるパーツを、自分の編集画面で再現するとしたら…と考えながら見ると、「どのブロックを使えば近づけるか」が段々分かってきます。

ステップ4：色とフォントは「ほぼ真似＋少し調整」にする

色やフォントは、いきなり完全オリジナルで作ろうとすると崩れがちです。気に入ったSwellの参考サイトを1つ決めて、まずはほぼそのまま真似してみるのがおすすめです。

• 背景は白ベースにして、うるさくしない
• メインカラーを1色決めて、ボタンやリンク、見出しに使う
• サブカラーを1色だけ足し、強調したい部分にだけ使う
• フォントはSwellのデフォルトをベースに、サイズを少し大きめに調整する

そのうえで、「ロゴの色」や「プロフィール写真の雰囲気」だけ自分らしく変えると、参考サイトと同じ空気感は保ちつつ、きちんとオリジナルのサイトに見えるようになります。

ステップ5：スマホでSwell参考サイトと自分のサイトを見比べる

Swellの参考サイトを真似するときは、PCだけでなく必ずスマホでも見比べてください。多くのユーザーはスマホからサイトを見ているので、ここをおろそかにすると使い勝手が悪くなってしまいます。

• 見出しの文字が大きすぎないか、小さすぎないか
• ボタンが指で押しやすい大きさと間隔になっているか
• 行間が詰まりすぎていないか、読みやすい余白があるか

スマホでSwellの参考サイトを表示しながら、自分のサイトの同じ位置を見比べてみると、「ここはもう少し余白が欲しいな」「ここの文字は小さすぎるな」といった細かい修正点が見えてきます。

ステップ6：1ページ作ってから、徐々に広げていく

最後は、いきなり全ページを完璧にしようとせず、まずは1ページだけを仕上げる意識を持つことです。

• 最初はトップページだけをSwellの参考サイトを見ながら作り込む
• 次に、記事ページやサービスページなどよく見られるページを整える
• そのあとで、プロフィールや実績ページなど細かい部分を整えていく

私も最初はトップページだけを徹底的に真似し、その後で下層ページに広げていきました。一気に全部をやろうとしないほうが、手が止まらずに進めやすいです。

Swell参考サイトを真似するときのNGとOKパターン

そのままコピペはNG、構成だけ真似するのがOK

当然ですが、Swellの参考サイトだからといって、テキストや画像をそのままコピーして使うのはNGです。著作権の問題もありますし、自分のサイトの信頼にも関わります。

真似していいのは「構成」や「レイアウト」「色のバランス」など、いわば設計の部分です。

項目	NG例	OK例
テキスト	キャッチコピーや説明文をそのままコピペする	見出しや段落の構成を真似しつつ、自分の言葉で書き直す
画像・写真	人物写真やロゴを保存して、そのまま使う	構図や雰囲気だけ参考にし、自分で撮影・制作した素材を使う
色・フォント	細かい色やフォント設定まで完全コピーする	ベースの色や雰囲気を真似しつつ、アクセントカラーを少し変える
サイト構造	ページ構成も各ページの内容もそっくりにする	ページ構成を参考にしつつ、自分の目的に合わせて項目を調整する

Swellの参考サイトは「設計図」として借りるイメージで、「中身」は自分で作る、という意識を持つと線引きが分かりやすくなります。

 

---

★ブログでは公開できない裏情報★

私の発行するメルマガではブログでは公開できない秘匿性が高い特別な情報を発信しております。

例えば、

1. 実際に10万稼いだキーワード
2. 今やるべきおススメ広告

などをこっそり暴露しています。ぜひ公開停止する前に受け取ってください。

⇒あっさり10万稼ぐためのメルマガ

---

 

かっこよさだけで選ぶとミスマッチになりやすい

見た目がかっこいいSwellの参考サイトほど真似したくなりますが、自分の業種やターゲットと合わない場合も多いです。デザインだけで決めてしまうと、読者とのズレが生まれやすくなります。

• 落ち着いた士業サイトなのに、ポップでカラフルなデザインを真似してしまう
• 主婦向けブログなのに、クールなIT系サイトの雰囲気をそのまま持ってきてしまう

こうなると、「自分向けの情報じゃなさそう」と感じて離脱されてしまうこともあります。Swellの参考サイトを選ぶときは、「自分のターゲットにとって読みやすいか」「安心して読み進められそうか」を基準にすると、ミスマッチを防ぎやすいです。

機能を盛り込みすぎず、まずはシンプルに

Swellはブロックも装飾もたくさん用意されているので、参考サイトを見ていると「あれもこれも使いたい」となりがちです。ただ、機能を盛り込みすぎると、かえって見づらいサイトになってしまいます。

• アニメーションやスライダーをあちこちに入れすぎない
• ボタンやバナー画像を増やしすぎない
• 1画面に情報を詰め込みすぎず、余白をしっかり取る

最初は、Swellの参考サイトの中でも「シンプルで余白の多いデザイン」を真似しておくと、失敗しにくいです。物足りなければ、あとから少しずつ要素を足していけば大丈夫です。

Swell参考サイトに関するよくある質問

Q1：Swell 参考サイトは何個くらい見ればいいですか？

A：最初から大量のSwell参考サイトを見ると、どれもよく見えてしまい、逆に決められなくなりがちです。まずは目的に合いそうなサイトを「ブログ系で2〜3個」「コーポレート・LP系で2〜3個」、合計5個前後に絞るのがおすすめです。

その中から「自分のサイトに一番近いな」と思うものを1〜2個決めて、構成やレイアウト、色づかいをじっくり観察してみてください。

Q2：Swell 参考サイトと同じデザインにしたら、SEO的に不利になりますか？

A：Swell参考サイトとテキストや構成がほとんど同じになってしまうと、SEO的にもユーザー体験の面でもあまり良くありません。ただし、Swellの参考サイトの「レイアウト」や「色の使い方」だけをヒントにして、中身の文章や画像をしっかり自分で作り込めば問題ありません。

検索エンジンは、デザインよりもコンテンツの中身を重視します。Swellの参考サイトはあくまで「見せ方の参考」として使い、情報そのものは自分の言葉で充実させるイメージでいきましょう。

Q3：Swell 参考サイトを見ても、自分で再現できるか不安です

A：Swellの参考サイトをいきなり完コピしようとすると、難しく感じてしまうのは普通です。おすすめは、「1セクションずつ分解して真似する」という考え方です。

例えば、「ファーストビューだけ真似してみる」「実績セクションだけ真似してみる」と決めて、1つずつSwellのブロックで作ってみてください。それを積み重ねるだけでも、「どこかで見たことがあるけれど、自分らしさもあるデザイン」に近づいていきます。

Swell参考サイト選びのまとめ

ここまでの内容を振り返ります

今日からできる最初の一歩として、Swellの参考サイトを3つだけ選び、「トップページにどんな順番で情報が並んでいるか」を紙やメモアプリに書き出してみてください。

そのメモをSwellの編集画面の横に置きながら、1セクションずつブロックを組み立てていけば、自分だけのSwellサイトが少しずつ形になっていきます。

 

---

★初心者さん必見★

「あと3ヶ月早くこの情報を知りたかった…」

そうならないために、今すぐ実践したいノウハウをギュッと一つのメルマガに詰め込みました。

無料で読めるうちに受け取っておいてください。

⇒あっさり10万稼ぐためのメルマガ