![](https://www.okyoblog.com/wp-content/uploads/2023/04/NCG214-scaled-1-150x150.jpg)
SWELLでサイト型のトップページを作りたい!
この記事では、SWELLを使用したサイト型のトップページの作り方をご紹介します。
SWELLを使用すれば、サイト型のトップページを作るのは簡単です!
- SWELLでサイト型のトップページを作りたい
- サイトをおしゃれにしたい
- SWELLを使用した、トップページを見てみたい
「当サイトを作るのには、こんなことをしています!」という解説記事になります。
どんなカスタマイズ方法があるかは省くので、SWELLをいじくりまわしてみてください♪
※なるべく更新しますが、違う箇所・気になる点がありましたら、コメントください。
サイト型トップページとは?
![](https://www.okyoblog.com/wp-content/uploads/2023/04/NCG214-scaled-1-150x150.jpg)
![](https://www.okyoblog.com/wp-content/uploads/2023/04/NCG214-scaled-1-150x150.jpg)
![](https://www.okyoblog.com/wp-content/uploads/2023/04/NCG214-scaled-1-150x150.jpg)
サイト型のトップページって何?
まず、当サイトのサイト型で作成したトップページはこんな感じです。
スクロールできるよ!
![](https://www.okyoblog.com/wp-content/uploads/2022/04/25340574-f546ed0b0f11fbd5561410540e0d4b8a.png)
![](https://www.okyoblog.com/wp-content/uploads/2022/04/25340574-f546ed0b0f11fbd5561410540e0d4b8a.png)
当サイトの場合は、とてもシンプルに作成しています。
サイト型トップページにするメリットは下記の3つです!
- おしゃれになる
- 記事の配置を自由にできる
- 読んでほしいページへ誘導しやすい
SWELLでサイト型トップページを作成して、自分にとっても、ユーザーにとっても「わかりやすく」「おしゃれな」ブログを作りましょう♪
サイト型トップページの作成:3ステップ
SWELLでサイト型トップページを作成するには、下記の3ステップで簡単に作成できます。
![](https://www.okyoblog.com/wp-content/uploads/2023/04/NCG214-scaled-1-150x150.jpg)
![](https://www.okyoblog.com/wp-content/uploads/2023/04/NCG214-scaled-1-150x150.jpg)
![](https://www.okyoblog.com/wp-content/uploads/2023/04/NCG214-scaled-1-150x150.jpg)
クリックすると、該当箇所に飛べますよ~
上記のステップ通りにやれば、簡単にサイト型トップページを作成できます。
ステップずつ、カスタマイズ方法を解説いたします。
Step1:メインビジュアル・ヘッダーをカスタマイズする
まずは、トップページの上部のヘッダーをカスタマイズしていきましょう。
ヘッダーでは下記をカスタマイズしています。
1-1.メインビジュアル(画像)を設定する
![](https://www.okyoblog.com/wp-content/uploads/2022/04/スクリーンショット-2022-04-04-195146-1024x561.png)
![](https://www.okyoblog.com/wp-content/uploads/2022/04/スクリーンショット-2022-04-04-195146-1024x561.png)
下記から作成していくよ!
外観→カスタマイズ→トップページ→メインビジュアル
画像・動画の「表示内容の選択」
![](https://www.okyoblog.com/wp-content/uploads/2022/04/スクリーンショット-2022-04-02-150452.png)
![](https://www.okyoblog.com/wp-content/uploads/2022/04/スクリーンショット-2022-04-02-150452.png)
Scrollボタン・フィルター処理などの「表示設定」
「■表示設定」部分を上から解説していきます。
![](https://www.okyoblog.com/wp-content/uploads/2022/04/スクリーンショット-2022-04-07-075003.png)
![](https://www.okyoblog.com/wp-content/uploads/2022/04/スクリーンショット-2022-04-07-075003.png)
![](https://www.okyoblog.com/wp-content/uploads/2022/04/スクリーンショット-2022-04-07-073645.png)
![](https://www.okyoblog.com/wp-content/uploads/2022/04/スクリーンショット-2022-04-07-073645.png)
![](https://www.okyoblog.com/wp-content/uploads/2023/04/NCG214-scaled-1-150x150.jpg)
![](https://www.okyoblog.com/wp-content/uploads/2023/04/NCG214-scaled-1-150x150.jpg)
![](https://www.okyoblog.com/wp-content/uploads/2023/04/NCG214-scaled-1-150x150.jpg)
文字色が白でも見やすいように「ドット」を使用しています。
画像を設定する「各スライドの設定」
「■各スライドの設定」で画像を設定します。
![](https://www.okyoblog.com/wp-content/uploads/2022/04/スクリーンショット-2022-04-04-195312.png)
![](https://www.okyoblog.com/wp-content/uploads/2022/04/スクリーンショット-2022-04-04-195312.png)
画像の上に文字を入れたい場合は、「メインテキスト」「サブテキスト」に文字を入れましょう。
![](https://www.okyoblog.com/wp-content/uploads/2023/04/NCG214-scaled-1-150x150.jpg)
![](https://www.okyoblog.com/wp-content/uploads/2023/04/NCG214-scaled-1-150x150.jpg)
![](https://www.okyoblog.com/wp-content/uploads/2023/04/NCG214-scaled-1-150x150.jpg)
当サイトは、「メインテキスト」に文字を入れています。
画像は4枚まで入れられ、スライド式になります。
スライド[2]~[4]まで、上記のように画像を入れていきましょう。
![](https://www.okyoblog.com/wp-content/uploads/2023/04/NCG214-scaled-1-150x150.jpg)
![](https://www.okyoblog.com/wp-content/uploads/2023/04/NCG214-scaled-1-150x150.jpg)
![](https://www.okyoblog.com/wp-content/uploads/2023/04/NCG214-scaled-1-150x150.jpg)
当サイトは、3枚画像を入れています。
1-2.ヘッダーロゴ・グローバルメニューをカスタマイズ
![](https://www.okyoblog.com/wp-content/uploads/2022/04/スクリーンショット-2022-04-03-013247.png)
![](https://www.okyoblog.com/wp-content/uploads/2022/04/スクリーンショット-2022-04-03-013247.png)
![](https://www.okyoblog.com/wp-content/uploads/2022/04/スクリーンショット-2022-04-03-014811.png)
![](https://www.okyoblog.com/wp-content/uploads/2022/04/スクリーンショット-2022-04-03-014811.png)
トップページの一番上の部分、「ヘッダーロゴ=サイト名」と「グローバルメニュー=カテゴリへのリンク先」をカスタマイズしていきます。
下記から作成していくよ!
外観→カスタマイズ→ヘッダー
ヘッダーロゴのカスタマイズ
ヘッダーのロゴですが、当サイトは「色」のカスタマイズしかしておりません。
「■トップページでの特別設定」でヘッダーの背景を透明にするかどうかを設定します。
![](https://www.okyoblog.com/wp-content/uploads/2022/04/スクリーンショット-2022-04-07-074116.png)
![](https://www.okyoblog.com/wp-content/uploads/2022/04/スクリーンショット-2022-04-07-074116.png)
![](https://www.okyoblog.com/wp-content/uploads/2023/04/NCG214-scaled-1-150x150.jpg)
![](https://www.okyoblog.com/wp-content/uploads/2023/04/NCG214-scaled-1-150x150.jpg)
![](https://www.okyoblog.com/wp-content/uploads/2023/04/NCG214-scaled-1-150x150.jpg)
文字色を「白」にしているので、ヘッダー部分の文字色は白になります。
ロゴ画像を自分で作成した方は、「■ヘッダーロゴの設定」で画像と画像サイズをカスタマイズしてください。
グローバルメニューのカスタマイズ
トップページ上部の右側に設定している、グローバルメニューのカスタマイズをします。
「■レイアウト・デザイン設定」部分を解説していきます。
![](https://www.okyoblog.com/wp-content/uploads/2022/04/スクリーンショット-2022-04-07-074646.png)
![](https://www.okyoblog.com/wp-content/uploads/2022/04/スクリーンショット-2022-04-07-074646.png)
Step2:固定ページ(メイン部分)をカスタマイズ
今度は、トップページの中間(メイン)部分を作成していきましょう!
中間部分は固定ページで作成していきます。
下記から作成していくよ!
固定ページ→新規追加
![](https://www.okyoblog.com/wp-content/uploads/2022/04/スクリーンショット-2022-04-05-005450-1024x449.png)
![](https://www.okyoblog.com/wp-content/uploads/2022/04/スクリーンショット-2022-04-05-005450-1024x449.png)
「新規追加」を押したら
①:「TOPページ」や「HOME」などを入れておきましょう。
②:「home」でOKです。
メイン部分を作成するにあたって、それぞれ「フルワイド」ブロックで枠を作って作成していきます。
![](https://www.okyoblog.com/wp-content/uploads/2022/04/スクリーンショット-2022-04-05-223807-1024x348.png)
![](https://www.okyoblog.com/wp-content/uploads/2022/04/スクリーンショット-2022-04-05-223807-1024x348.png)
①「見出し」
コンテンツのタイトルを入れる
②赤枠部分
フルワイドブロック内で「段落」を追加して、コンテンツを作成していく
③コンテンツ幅
表示されるサイズが変わってくるので、「記事」「サイト幅」「フルワイド」の好きな幅を選択する
④背景色・上下の境界線
ブロックの背景色や、フルワイドブロックの境界線を「波」にしたり、「ジグザク」にしたりできます。
(当サイトは、「波」で、「高さレベルを3」にしています)
![](https://www.okyoblog.com/wp-content/uploads/2023/04/NCG214-scaled-1-150x150.jpg)
![](https://www.okyoblog.com/wp-content/uploads/2023/04/NCG214-scaled-1-150x150.jpg)
![](https://www.okyoblog.com/wp-content/uploads/2023/04/NCG214-scaled-1-150x150.jpg)
これを踏まえたうえで、↓コンテンツを作成していくよ
それでは、作成していきましょう!
2-1.カテゴリー(現在はなし)
2-2.新着記事・人気記事
2-3.カテゴリーごとの細かい導線
2-5.キーワード(タグ)の導線
![](https://www.okyoblog.com/wp-content/uploads/2023/04/NCG214-scaled-1-150x150.jpg)
![](https://www.okyoblog.com/wp-content/uploads/2023/04/NCG214-scaled-1-150x150.jpg)
![](https://www.okyoblog.com/wp-content/uploads/2023/04/NCG214-scaled-1-150x150.jpg)
画像もチェックして、作成したいと思ったところに飛んでね~
2-1.カテゴリー(現在はなし)
![](https://www.okyoblog.com/wp-content/uploads/2022/04/スクリーンショット-2022-04-04-191440-1024x310.png)
![](https://www.okyoblog.com/wp-content/uploads/2022/04/スクリーンショット-2022-04-04-191440-1024x310.png)
現在はないですが、作成方法は残しておきます。
削除した理由は、スマホで見たときにバランスが悪かったためです…。
カテゴリーページは、「画像リンク」と「アコーディオン」で作成しています。
画像リンクの作成
![](https://www.okyoblog.com/wp-content/uploads/2022/04/スクリーンショット-2022-04-05-105612-1024x213.png)
![](https://www.okyoblog.com/wp-content/uploads/2022/04/スクリーンショット-2022-04-05-105612-1024x213.png)
カラムを増やす場合、□枠の間にマウスをもっていって増やす
![](https://www.okyoblog.com/wp-content/uploads/2022/04/スクリーンショット-2022-04-05-110118-1024x231.png)
![](https://www.okyoblog.com/wp-content/uploads/2022/04/スクリーンショット-2022-04-05-110118-1024x231.png)
キャプションを2段にしたい場合、文字を入力してから改行する
![](https://www.okyoblog.com/wp-content/uploads/2022/04/スクリーンショット-2022-04-05-110521.png)
![](https://www.okyoblog.com/wp-content/uploads/2022/04/スクリーンショット-2022-04-05-110521.png)
アコーディオン作成
次に、画像リンクしたのアコーディオンを作成していきます。
![](https://www.okyoblog.com/wp-content/uploads/2022/04/スクリーンショット-2022-04-05-212344-1024x429.png)
![](https://www.okyoblog.com/wp-content/uploads/2022/04/スクリーンショット-2022-04-05-212344-1024x429.png)
![](https://www.okyoblog.com/wp-content/uploads/2022/04/スクリーンショット-2022-04-05-212859-1024x414.png)
![](https://www.okyoblog.com/wp-content/uploads/2022/04/スクリーンショット-2022-04-05-212859-1024x414.png)
②のテキストは、「リスト」ブロックで入れてます。
2-2.新着記事・人気記事
![](https://www.okyoblog.com/wp-content/uploads/2022/04/スクリーンショット-2022-04-04-191825.png)
![](https://www.okyoblog.com/wp-content/uploads/2022/04/スクリーンショット-2022-04-04-191825.png)
人気記事ページは、「タブ」ブロックと「投稿リスト」で作成しています。
「タブ」ブロックを作成
![](https://www.okyoblog.com/wp-content/uploads/2022/04/スクリーンショット-2022-04-05-214913-1024x247.png)
![](https://www.okyoblog.com/wp-content/uploads/2022/04/スクリーンショット-2022-04-05-214913-1024x247.png)
「投稿リスト」で新着記事・人気記事を設定する
![](https://www.okyoblog.com/wp-content/uploads/2022/04/スクリーンショット-2022-04-05-215652-1024x453.png)
![](https://www.okyoblog.com/wp-content/uploads/2022/04/スクリーンショット-2022-04-05-215652-1024x453.png)
「もっと見る」を作成する場合は、「MOREリンクの表示テキスト」にテキストとURLを入力する。
2-3.カテゴリーごとの細かい導線
![](https://www.okyoblog.com/wp-content/uploads/2022/04/スクリーンショット-2022-04-04-192740.png)
![](https://www.okyoblog.com/wp-content/uploads/2022/04/スクリーンショット-2022-04-04-192740.png)
カテゴリーごとの細かい導線は、「メディアとテキスト」と「投稿リスト」ブロックで作成しています。
「メディアとテキスト」と「リッチカラム」を使用して、上部を作成
![](https://www.okyoblog.com/wp-content/uploads/2022/04/スクリーンショット-2022-04-05-230831-1024x331.png)
![](https://www.okyoblog.com/wp-content/uploads/2022/04/スクリーンショット-2022-04-05-230831-1024x331.png)
![](https://www.okyoblog.com/wp-content/uploads/2022/04/スクリーンショット-2022-04-05-233639-1024x257.png)
![](https://www.okyoblog.com/wp-content/uploads/2022/04/スクリーンショット-2022-04-05-233639-1024x257.png)
![](https://www.okyoblog.com/wp-content/uploads/2022/04/スクリーンショット-2022-04-05-234545-1024x293.png)
![](https://www.okyoblog.com/wp-content/uploads/2022/04/スクリーンショット-2022-04-05-234545-1024x293.png)
![](https://www.okyoblog.com/wp-content/uploads/2022/04/スクリーンショット-2022-04-05-234938-1024x319.png)
![](https://www.okyoblog.com/wp-content/uploads/2022/04/スクリーンショット-2022-04-05-234938-1024x319.png)
「投稿リスト」を使用して、カテゴリーの記事一覧を作成する
![](https://www.okyoblog.com/wp-content/uploads/2022/04/スクリーンショット-2022-04-07-001317-1024x164.png)
![](https://www.okyoblog.com/wp-content/uploads/2022/04/スクリーンショット-2022-04-07-001317-1024x164.png)
![](https://www.okyoblog.com/wp-content/uploads/2022/04/スクリーンショット-2022-04-07-001554-1024x372.png)
![](https://www.okyoblog.com/wp-content/uploads/2022/04/スクリーンショット-2022-04-07-001554-1024x372.png)
①投稿リストの「Pickup」をクリック
![](https://www.okyoblog.com/wp-content/uploads/2022/04/スクリーンショット-2022-04-07-002102.png)
![](https://www.okyoblog.com/wp-content/uploads/2022/04/スクリーンショット-2022-04-07-002102.png)
②カテゴリーを選択する
![](https://www.okyoblog.com/wp-content/uploads/2022/04/スクリーンショット-2022-04-07-002223.png)
![](https://www.okyoblog.com/wp-content/uploads/2022/04/スクリーンショット-2022-04-07-002223.png)
![](https://www.okyoblog.com/wp-content/uploads/2023/04/NCG214-scaled-1-150x150.jpg)
![](https://www.okyoblog.com/wp-content/uploads/2023/04/NCG214-scaled-1-150x150.jpg)
![](https://www.okyoblog.com/wp-content/uploads/2023/04/NCG214-scaled-1-150x150.jpg)
「Pickup」内では、IDで直接指定できたり、タグごとに表示させたりすることもできるよ!
2-4.ABOUT(サイト・運営者)について
![](https://www.okyoblog.com/wp-content/uploads/2022/04/image.png)
![](https://www.okyoblog.com/wp-content/uploads/2022/04/image.png)
ABOUT部分は、「カラム」で2つに分けて作成しています。
![](https://www.okyoblog.com/wp-content/uploads/2022/04/スクリーンショット-2022-04-07-003003-1024x229.png)
![](https://www.okyoblog.com/wp-content/uploads/2022/04/スクリーンショット-2022-04-07-003003-1024x229.png)
![](https://swell-theme.com/wp-content/uploads/2020/04/swell-official-ogp.jpg)
![](https://swell-theme.com/wp-content/uploads/2020/04/swell-official-ogp.jpg)
![](https://www.okyoblog.com/wp-content/uploads/2023/04/NCG214-scaled-1-150x150.jpg)
![](https://www.okyoblog.com/wp-content/uploads/2023/04/NCG214-scaled-1-150x150.jpg)
![](https://www.okyoblog.com/wp-content/uploads/2023/04/NCG214-scaled-1-150x150.jpg)
↑のページから確認してみてね!
![](https://www.okyoblog.com/wp-content/uploads/2022/04/スクリーンショット-2022-04-07-123324.png)
![](https://www.okyoblog.com/wp-content/uploads/2022/04/スクリーンショット-2022-04-07-123324.png)
2-5.キーワード(タグ)の導線
![](https://www.okyoblog.com/wp-content/uploads/2022/04/スクリーンショット-2022-04-04-215413-1024x294.png)
![](https://www.okyoblog.com/wp-content/uploads/2022/04/スクリーンショット-2022-04-04-215413-1024x294.png)
KEYWORDSの部分は、「タグクラウド」を使用しているよ!
![](https://www.okyoblog.com/wp-content/uploads/2022/04/スクリーンショット-2022-04-07-004507-1024x379.png)
![](https://www.okyoblog.com/wp-content/uploads/2022/04/スクリーンショット-2022-04-07-004507-1024x379.png)
![](https://www.okyoblog.com/wp-content/uploads/2023/04/NCG214-scaled-1-150x150.jpg)
![](https://www.okyoblog.com/wp-content/uploads/2023/04/NCG214-scaled-1-150x150.jpg)
![](https://www.okyoblog.com/wp-content/uploads/2023/04/NCG214-scaled-1-150x150.jpg)
タグの表示数も指定できるよ!
2-6.【重要】固定ページをトップページとして設定をする
最後に、作成した固定ページを、トップページとして設定します。
下記から作成していくよ!
外観→カスタマイズ→WordPress設定→ホームページ設定
![](https://www.okyoblog.com/wp-content/uploads/2022/04/スクリーンショット-2022-04-07-053143.png)
![](https://www.okyoblog.com/wp-content/uploads/2022/04/スクリーンショット-2022-04-07-053143.png)
下記、設定をしていくよ!
①ホームページの表示:固定ページ
②ホームページ :↑で作成した固定ページを設定
③投稿ページ :新着記事
![](https://www.okyoblog.com/wp-content/uploads/2023/04/NCG214-scaled-1-150x150.jpg)
![](https://www.okyoblog.com/wp-content/uploads/2023/04/NCG214-scaled-1-150x150.jpg)
![](https://www.okyoblog.com/wp-content/uploads/2023/04/NCG214-scaled-1-150x150.jpg)
上記設定して、TOPページを見てみてね♪
Step3:フッターをカスタマイズ
最後にフッター部分を作成していきましょう。
3-1.ウィジェットからカスタマイズ
![](https://www.okyoblog.com/wp-content/uploads/2022/04/スクリーンショット-2022-04-07-054443-1024x489.png)
![](https://www.okyoblog.com/wp-content/uploads/2022/04/スクリーンショット-2022-04-07-054443-1024x489.png)
最後に、ウィジェットでフッター部分を作成していきましょう。
下記から作成していくよ!
外観→ウィジェット
使用する箇所
![](https://www.okyoblog.com/wp-content/uploads/2022/04/スクリーンショット-2022-04-07-055303-1024x535.png)
![](https://www.okyoblog.com/wp-content/uploads/2022/04/スクリーンショット-2022-04-07-055303-1024x535.png)
↑で設定すると、↓部分に反映されるよ
![](https://www.okyoblog.com/wp-content/uploads/2022/04/スクリーンショット-2022-04-07-055611-1024x540.png)
![](https://www.okyoblog.com/wp-content/uploads/2022/04/スクリーンショット-2022-04-07-055611-1024x540.png)
①:カテゴリーの設定
![](https://www.okyoblog.com/wp-content/uploads/2022/04/スクリーンショット-2022-04-07-061140.png)
![](https://www.okyoblog.com/wp-content/uploads/2022/04/スクリーンショット-2022-04-07-061140.png)
![](https://www.okyoblog.com/wp-content/uploads/2023/04/NCG214-scaled-1-150x150.jpg)
![](https://www.okyoblog.com/wp-content/uploads/2023/04/NCG214-scaled-1-150x150.jpg)
![](https://www.okyoblog.com/wp-content/uploads/2023/04/NCG214-scaled-1-150x150.jpg)
設定したら「保存」を押しましょう!
②:人気の記事の設定
![](https://www.okyoblog.com/wp-content/uploads/2022/04/スクリーンショット-2022-04-07-062507.png)
![](https://www.okyoblog.com/wp-content/uploads/2022/04/スクリーンショット-2022-04-07-062507.png)
![](https://www.okyoblog.com/wp-content/uploads/2023/04/NCG214-scaled-1-150x150.jpg)
![](https://www.okyoblog.com/wp-content/uploads/2023/04/NCG214-scaled-1-150x150.jpg)
![](https://www.okyoblog.com/wp-content/uploads/2023/04/NCG214-scaled-1-150x150.jpg)
設定したら「保存」を押しましょう!
③:部分の設定
③部分は「検索」「アーカイブ」「カスタムHTML」を挿入しています。
![](https://www.okyoblog.com/wp-content/uploads/2022/04/スクリーンショット-2022-04-07-063254.png)
![](https://www.okyoblog.com/wp-content/uploads/2022/04/スクリーンショット-2022-04-07-063254.png)
![](https://www.okyoblog.com/wp-content/uploads/2022/04/スクリーンショット-2022-04-07-063606.png)
![](https://www.okyoblog.com/wp-content/uploads/2022/04/スクリーンショット-2022-04-07-063606.png)
![](https://www.okyoblog.com/wp-content/uploads/2023/04/NCG214-scaled-1-150x150.jpg)
![](https://www.okyoblog.com/wp-content/uploads/2023/04/NCG214-scaled-1-150x150.jpg)
![](https://www.okyoblog.com/wp-content/uploads/2023/04/NCG214-scaled-1-150x150.jpg)
設定したら「保存」を押しましょう!
3-2.フッターメニューのカスタマイズ
![](https://www.okyoblog.com/wp-content/uploads/2022/04/スクリーンショット-2022-04-07-054531-1-1024x57.png)
![](https://www.okyoblog.com/wp-content/uploads/2022/04/スクリーンショット-2022-04-07-054531-1-1024x57.png)
ここでは、メニューで設定しているフッター部分のカスタマイズをします。
フッターメニューを設定したら、カスタマイズをしていきましょう!
下記から作成していくよ!
外観→カスタマイズ→フッター
![](https://www.okyoblog.com/wp-content/uploads/2022/04/スクリーンショット-2022-04-07-072749.png)
![](https://www.okyoblog.com/wp-content/uploads/2022/04/スクリーンショット-2022-04-07-072749.png)
まとめ:SWELLでTOPページを作成する
最後まで読んでくださり、ありがとうございました!
- Step1:メインビジュアル・ヘッダーをカスタマイズする
- Step2:固定ページ(メイン部分)をカスタマイズ
- Step3:フッターをカスタマイズ
TOPページはサイトの顔ともいえる場所なので、「どんなサイトなのか?」というのを読者に伝えるのに重要になってきます。
SWELLを使用している方も、これからSWELLを購入しようとしている方も、参考になれば嬉しいです。
![](http://image.moshimo.com/af-img/3130/000000053838.jpg)
![](http://image.moshimo.com/af-img/3130/000000053838.jpg)
参考にさせてもらったサイト
参考にできるSWELLサイト集
![](https://webnote-plus.com/swell-gallery/wp-content/uploads/2024/04/swell-design-gallery.png)
![](https://webnote-plus.com/swell-gallery/wp-content/uploads/2024/04/swell-design-gallery.png)
![](https://hinakira.com/wp-content/uploads/2023/04/SWELLのブログデザイン集-1.jpg)
![](https://hinakira.com/wp-content/uploads/2023/04/SWELLのブログデザイン集-1.jpg)
![](https://www.okyoblog.com/wp-content/uploads/2023/04/NCG214-scaled-1-150x150.jpg)
![](https://www.okyoblog.com/wp-content/uploads/2023/04/NCG214-scaled-1-150x150.jpg)
![](https://www.okyoblog.com/wp-content/uploads/2023/04/NCG214-scaled-1-150x150.jpg)
上記2つは、掲載しているサイトの数がとても多いので、参考にさせてもらってます!
TOPページ作成の際に、参考にさせてもらったサイト
![](https://hitamukidesign.blog/wp-content/uploads/swelltop-ec.jpg)
![](https://hitamukidesign.blog/wp-content/uploads/swelltop-ec.jpg)
![](https://www.okyoblog.com/wp-content/uploads/2023/04/NCG214-scaled-1-150x150.jpg)
![](https://www.okyoblog.com/wp-content/uploads/2023/04/NCG214-scaled-1-150x150.jpg)
![](https://www.okyoblog.com/wp-content/uploads/2023/04/NCG214-scaled-1-150x150.jpg)
とても分かりやすく、最初にTOPページを作る際に参考にさせてもらいました!
ぜひ参考にしてみてくださいね~♪