ー おすすめの記事 ー
SWELL購入から使い始めるまでの全レビュー！
迷ったけれど、やっぱり選んで良かった
SWELL導入前に知りたいデメリット！
後悔しないための注意点まとめ
【ロードマップ】SWELLトップページカスタマイズでブログをサイト型にリニューアル｜「おしゃれ」と「機能性」を両立
当ページのリンクには広告が含まれています。
ジューンこんにちは、Web制作フリーランスのジューンです。
ブログを書き続けていると、ある日ふと気づくことがあります。
記事が増えてきて、過去の自信作が埋もれてしまっているかも……？
私も記事数が70を超えたあたりから、トップページのごちゃつきが気になり始めました。
そこで今回、思い切ってパッタンブログのトップページを「サイト型」にフルリニューアル。
目指したのは、単におしゃれなデザインではなく、訪れた人が迷わず、心地よく過ごせる「おもてなし」の設計です。
この記事では、Web制作の現場で10年活動してきた私が、どのような意図で、どのような手順でSWELLをカスタマイズしたのか。その「制作の裏側（ロードマップ）」を包み隠さず公開します。
こんな人にオススメです
- SWELLを使っているが、「普通のブログデザイン」から抜け出せない
- 記事数が（50〜70記事以上に）増えて、過去の記事が埋もれてしまっている
- トップページを「おしゃれ」にしたいが、何から手をつければいいかわからない
- ただ着飾るだけでなく、読者に親切な「サイト型」を作りたい
この記事でわかること（ロードマップ）
【全手順】 制作10年のプロが実践した「サイト型リニューアル」の工程
【考え方】 読者を迷わせない「おもてなしの導線」の作り方
【テクニック】 SWELL機能を活かした「スマホ/PC出し分け」などのプロの技
目次
私が、ブログをサイト型にする理由（理想の家づくり）
70記事を超えて見えてきた「情報の整理整頓」の必要性
ブログを始めたばかりの頃は、記事が新着順に並んでいるだけの「ブログ型」で十分でした。
でも、記事が増えるにつれて、読む方が「見てほしい記事にたどり着けていない」ということを感じたんです。
せっかく書いた記事も、読まれなければ存在しないのと同じ。
今のパッタンブログに必要なのは、情報をただ並べる棚ではなく、読者を最短距離でゴールへ導く「案内板」だと気づいたのです。
【実録】「ブログ型」から「サイト型」へ。これだけ印象が変わります
論より証拠。まずはリニューアル前後の変化をご覧ください。
▼ Left：リニューアル前（ブログ型）
２カラム設定。
少し手を入れていましたが、ほぼブログ型。情報量が多く、どれを見たらいいか迷いそうです。
▼ Right：リニューアル後（サイト型）
１カラム設定。
「誰に・何を」届けるかを整理し、トップページを「案内所」として再設計しました。
ジューン新着記事だけでなく、「特集エリア（ピックアップ記事）」や「カテゴリー別の入り口」を作ることで、初めて来た方でも直感的に欲しい情報へ辿り着ける「おもてなし」の設計に生まれ変わりました。
【準備】コンセプト設計：手を動かす前に固めた「サイトの骨組み」
いきなりSWELLの設定画面を開く前に、実は一番大切な工程があります。 それは、「誰に・何を・どうなってほしい？」を整理すること。家づくりで言えば「設計図」を書く作業です。
「誰に・何を・どうなってほしい？」を再定義する
デザインがおしゃれでも、誰に向けたサイトなのかが曖昧だと、結局誰の心にも響きません。
私は今回のリニューアルで、改めてノートにこう書き出しました。
- 誰に？：40代の女性。これからSWELLで自分だけの場所を作りたいけれど、何から始めればいいか迷っている方へ。
- 何を？：10年の制作経験で培った知識と、失敗しないための道筋を。
- どうなってほしい？：「私にもできそう！」とワクワクして、最初の一歩を踏み出してほしい。
ここが固まると、選ぶべき色や、置くべきボタンの言葉が自然と決まってきます。
カスタマイズを始める前の環境チェック
このロードマップは、WordPressテーマ「SWELL」を使っていることを前提に進めます。
まだサーバーの契約やSWELLの導入が済んでいない方は、まずはこちらの記事から「土地と家」を準備してくださいね。
SWELLの導入がまだの方
SWELLのはじめ方ガイド｜Web制作10年のプロが教える最短ルート
こんにちは、WordPress歴13年、Web制作の現場で10年以上活動しているジューン・マイマイです。 「これからブログを始めたいけれど、テーマ選びで失敗したくない」「SWEL…
【実践】おしゃれと機能性を両立するカスタマイズ・ロードマップ
STEP1：固定ページ作成：「トップページの土台」を作る
まず、トップページ専用の「固定ページ」を新規作成します。
ブログ型のように自動で記事が並ぶのではなく、この白紙のキャンバスに、必要なパーツ（家具）だけを配置していきます。
STEP2：メインビジュアル：「サイトの空気感」を込める
サイトの顔となるメインビジュアル。ここはお店で言えば「ショーウィンドウ」です。
SWELLなら動画も背景に設定できますが、私はあえて静止画を選びました。
【制作意図：安心感・居心地の良さ】
動く画像はインパクトがありますが、少し「忙しい」印象を与えることもあります。 パッタンブログに来てくれた方には、まず深呼吸するような安心感を感じてほしかった。だから、私は、流行りよりも「自分の居心地が良い」と感じる、落ち着いたトーンの一枚を選びました。
【プロのひと手間】：PCとスマホは、別の画像を準備する
ここで一つ、SWELLならではの便利な機能を使いました。それは「PC用」と「スマホ用」で、別々の画像を設定することです。
PC画面は横長ですが、スマホ画面は縦長です。 横長の画像を無理やりスマホで表示すると、意図しない場所でトリミング（切り取り）されてしまったり、せっかくの雰囲気が崩れてしまったりします。
私は、スマホで見た時にも一番美しく見えるよう、スマホ専用の正方形画像を別途用意して設定しました。 「どのデバイスで見ても、変わらない居心地の良さを届ける」。これも、Web制作のプロとしてこだわったポイントです。
▼PC用メインビジュアル画像（サイズ：1800×1000）
▼スマホ用メインビジュアル画像（サイズ：800×800）
【視覚に訴える：「ブログパーツ」でメインビジュアルの上にキャッチコピーを置く】
メインビジュアルにそのまま文字を置いてしまうと、PCやスマホによって見え方が変わります。
そのため、キャッチコピーとリード分はPNG画像で作って、SWLLの機能「ブログパーツ」で上に乗せるようにしまた。
▼キャッチコピー
▼リード文
【＋αの機能性：一番目立つ場所にボタンで「正解」を置く】
また、このメインビジュアルの上には、「SWELLのはじめ方ガイド」へのリンクボタンを設置しました。
綺麗な写真をただ見せるだけでは、読者は「ふーん、きれいだね」で終わってしまいます。 一番最初に目に入るこの場所に、「まずこれを読めば大丈夫！」という自信作（キラーコンテンツ）へのショートカットを置くこと。 これも、読者を迷わせないための大切な「導線設計」の一つです。
STEP3：世界観（色・フォント）：カラーとフォントで「世界観」をデザインする
文字のフォントや、サイト全体のキーカラー設定です。
【制作意図：温度感の調整】
色には温度があります。青なら信頼、赤なら情熱。 私が目指したのは「親しみやすさ」「信頼感」「軽やかさ」。ターゲットの40代女性が嫌味に感じない程度の甘さにしたかったので、淡いグリーンをメインに。カラートーンを抑えめにしました。
また、フォントはキャッチコピーで使った「はんなり明朝」というフリーフォントを使っています。
STEP4：カテゴリー案内（2段構成）：「2つの案内板」を立てる
メインビジュアルの下、一番目立つエリアには、あえて「2段構え」で情報を配置しました。 ただ記事を並べるのではなく、読者の心理に合わせた順番にこだわっています。
1段目：「はじめまして」の方へのガイド
まず目に入る1段目には、「SWELLカスタマイズ」や「Web制作」といったカテゴリー別の入り口を用意しました。
【制作意図：迷わせない親切心】
ここは、初めて私のブログに来てくださった方への「総合案内所」です。 「ここさえ読めば、あなたの知りたいことが分かりますよ」という想いを込めて、初心者の方がまず読むべき記事へ迷わず飛べるように整理しました。
2段目：「プロとしての証明」となる制作実績
そして、そのすぐ下には私の「制作実績」をスライダーで並べました。
【制作意図：言葉より確かな信頼】
ノウハウを伝えるだけでは、「本当にこの人は作れるの？」という不安は消えません。 実際に私が手がけたサイトを見てもらうことが、一番の自己紹介であり、信頼感に繋がります。 「親切なガイド」の直後に「確かな実績」を見せる。この2段構成が、お問い合わせへのハードルを下げる重要なポイントです。
STEP5：記事一覧（タブ切り替え）：最新記事は、スクロールの手間を減らす
メインビジュアル、カテゴリー案内、実績……と続いて、最後に配置したのは「最新記事」のエリアです。
ここでも、ただ新着記事を縦に並べることはしませんでした。SWELLの「タブ機能」を使って、カテゴリーごとに記事を切り替えられるようにしています。
【制作意図：情報の押し売りをしない】
興味のない記事が延々と続くスクロールは、読者にとってストレスです。 「SWELLについて知りたい人」はSWELLのタブを。「ブログ論を読みたい人」はコラムのタブを。 読者自身が見たい情報を選べる権利（タブ）を用意すること。これも、私が大切にしている「居心地の良いサイト」の条件です。
やり方はとても簡単です。 SWELLの「タブブロック」の中に、「投稿リストブロック」を入れるだけ。 これだけで、プロがコードを書いて作ったような「切り替え機能付きの記事一覧」が完成します。
ジューン▲ 上部のタブをクリックすると、表示される記事がパッと切り替わります。
STEP6：プロフィール（自由レイアウト）：締めに、想いを綴った「プロフィール」を
記事一覧の下、トップページの最後にはプロフィールエリアを作りました。 ここはSWELL標準の「プロフィールウィジェット」を使わず、あえて自分でブロックを組み合わせて（画像とテキストなど）自由にデザインしました。
【制作意図：型にはまらない「私」の表現】
標準のウィジェットは便利ですが、決まった項目しか表示できません。 ここまで読んでくださった方に、どうしても自分の言葉で、このブログにかける想いや経歴をしっかり伝えたかったのです。
だからこそ、画像とテキストを自由に配置して、「デザイン」も「言葉」も私らしい形にこだわりました。 テンプレート通りの自己紹介ではなく、一人の人間として読者と向き合うための大切な場所です。
まとめ：理想のサイトは、作ってから「育てていく」もの
ここまで読んでいただき、ありがとうございます。 「ブログ型」から「サイト型」へのリニューアル。それは単なる模様替えではなく、読者への「おもてなし」を形にする作業でした。
運用は「砂漠の中のお店」を見つけてもらう旅
どんなに素敵なお店（サイト）を作っても、誰も知らなければ砂漠の中にあるのと同じです。 サイト型にしたことで、「案内板」は整いました。これからは、SEO（検索）やSNSを使って、たくさんの人にこの場所を見つけてもらう「集客の旅」が始まります。
リニューアルはゴールではなく、「読者と出会うための新しいスタートライン」です。
悩む時間を、書く時間に。プロと一緒に形にするという選択
SWELLを使えば、プログラミングの知識がなくても、ここまで自由な表現が可能です。 ぜひこのロードマップを参考に、あなただけの「居心地の良い場所」を作ってみてください。
でも、もし途中で……
操作はわかったけれど、『自分らしい世界観』が定まらない
『誰に・何を』の部分でペンが止まってしまう
もっとプロの視点で、導線を整えてほしい
そう感じて立ち止まってしまったら、一人で抱え込まずに私を頼ってください。 10年の制作経験と、私の持てるすべての「おもてなし」で、あなたの想いを形にするお手伝いをします。
悩む時間を、書く時間に。 あなたのブログが、読者にとって最高の居場所になりますように。
[ 自分で作るなら：SWELL公式サイトへ ]
＼ 今日から、あなたの「好き」を形にしませんか？ ／
[ プロと作るなら：Web制作のお問い合わせ・ご相談はこちら ]
＼ 悩む時間を、書く時間に。／