<?xml version="1.0" encoding="UTF-8"?><rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>トップページ &#8211; ara-garage</title>
	<atom:link href="https://www.ara-garage.com/tag/%E3%83%88%E3%83%83%E3%83%97%E3%83%9A%E3%83%BC%E3%82%B8/feed/" rel="self" type="application/rss+xml" />
	<link>https://www.ara-garage.com</link>
	<description>アラ還エンジニアの家庭ネットワーク・AI運用・最新ニュースノート</description>
	<lastBuildDate>Sat, 09 May 2026 22:01:40 +0000</lastBuildDate>
	<language>ja</language>
	<sy:updatePeriod>
	hourly	</sy:updatePeriod>
	<sy:updateFrequency>
	1	</sy:updateFrequency>
	<generator>https://wordpress.org/?v=6.8</generator>

<image>
	<url>https://www.ara-garage.com/wp-content/uploads/2026/01/cropped-ファビコンNew-32x32.png</url>
	<title>トップページ &#8211; ara-garage</title>
	<link>https://www.ara-garage.com</link>
	<width>32</width>
	<height>32</height>
</image> 
	<item>
		<title>立ち上げ3ヶ月のブログをポートフォリオ仕様に進化させた – Claudeと一緒にサイト全体を刷新</title>
		<link>https://www.ara-garage.com/folio-specifications/</link>
					<comments>https://www.ara-garage.com/folio-specifications/#respond</comments>
		
		<dc:creator><![CDATA[Sandy16L]]></dc:creator>
		<pubDate>Sat, 09 May 2026 22:01:38 +0000</pubDate>
				<category><![CDATA[NAS・自宅サーバー]]></category>
		<category><![CDATA[301リダイレクト]]></category>
		<category><![CDATA[Claude]]></category>
		<category><![CDATA[SWELL]]></category>
		<category><![CDATA[カテゴリ]]></category>
		<category><![CDATA[タグライン]]></category>
		<category><![CDATA[トップページ]]></category>
		<category><![CDATA[プロフィール]]></category>
		<category><![CDATA[フロントページ]]></category>
		<guid isPermaLink="false">https://www.ara-garage.com/?p=768</guid>

					<description><![CDATA[<p><img src="https://www.ara-garage.com/wp-content/uploads/2026/05/トップページ刷新-1024x576.png" class="webfeedsFeaturedVisual" /></p>📋 この記事の目次 はじめに まず「コンセプト」を言語化した トップページをフロントページ化した プロフィールページを作った カテゴリを7つに再編した サイドバーを整理した リニューアルを終えて感じたこと まとめ はじめ [&#8230;]]]></description>
										<content:encoded><![CDATA[<p><img src="https://www.ara-garage.com/wp-content/uploads/2026/05/トップページ刷新-1024x576.png" class="webfeedsFeaturedVisual" /></p><p><!-- 手動目次 --></p>
<div style="border:2px solid #5b9bd5;background:#f0f7ff;padding:16px 20px;margin-bottom:32px;border-radius:6px;">
<p style="font-weight:bold;margin:0 0 8px;color:#1a1a1a;"><img src="https://s.w.org/images/core/emoji/15.1.0/72x72/1f4cb.png" alt="📋" class="wp-smiley" style="height: 1em; max-height: 1em;" /> この記事の目次</p>
<ol style="margin:0;padding-left:20px;color:#1a1a1a;line-height:2;">
<li><a href="#intro" style="color:#2980b9;text-decoration:none;">はじめに</a></li>
<li><a href="#concept" style="color:#2980b9;text-decoration:none;">まず「コンセプト」を言語化した</a></li>
<li><a href="#frontpage" style="color:#2980b9;text-decoration:none;">トップページをフロントページ化した</a></li>
<li><a href="#profile" style="color:#2980b9;text-decoration:none;">プロフィールページを作った</a></li>
<li><a href="#category" style="color:#2980b9;text-decoration:none;">カテゴリを7つに再編した</a></li>
<li><a href="#sidebar" style="color:#2980b9;text-decoration:none;">サイドバーを整理した</a></li>
<li><a href="#review" style="color:#2980b9;text-decoration:none;">リニューアルを終えて感じたこと</a></li>
<li><a href="#summary" style="color:#2980b9;text-decoration:none;">まとめ</a></li>
</ol>
</div>
<p><!-- 1. はじめに --></p>
<h2 id="intro" style="color:#1a1a1a;">はじめに</h2>
<p>ブログを始めて3ヶ月が経ったとき、ふと思いました。</p>
<p>「このブログ、何屋さんかわからないな」</p>
<p>NASの話もあれば、AIの話もあり、地政学の記事もある。カテゴリは5つあるけれど、どこか散漫な印象。トップページも「最新記事が並ぶだけ」で、初めて来た人には何のブログかが伝わりにくい状態でした。</p>
<p>記事数は88本まで増えていたので、このタイミングで一度サイト全体を整理しようと決めました。今回はその作業の全体像をご紹介します。カテゴリ再編の詳細は<a href="https://ara-garage.com/claude-in-chrome-category/" style="color:#2980b9;">別記事</a>にまとめていますので、あわせてご覧ください。</p>
<p><!-- 2. コンセプト --></p>
<h2 id="concept" style="color:#1a1a1a;">まず「コンセプト」を言語化した</h2>
<h3 style="color:#1a1a1a;">タグラインを変えてブランディングを刷新</h3>
<p>最初に手をつけたのは、ブログのタグライン（キャッチコピー）の変更でした。</p>
<p>タグラインはブログの顔とも言える一文です。「このブログは誰に・何を届けるのか」が一言で伝わるかどうかが重要です。</p>
<p>Claude（Opus）に現状のブログコンセプトを伝え、「読者に刺さるタグラインを一緒に考えてほしい」と依頼しました。いくつかの候補を出してもらいながら、最終的には自分の言葉でまとめ直す、という流れで決定しました。</p>
<div style="background:#fff8e1;border-left:4px solid #f0c040;padding:14px 18px;margin-bottom:16px;border-radius:4px;">
<p style="margin:0;color:#1a1a1a;"><strong><img src="https://s.w.org/images/core/emoji/15.1.0/72x72/1f4a1.png" alt="💡" class="wp-smiley" style="height: 1em; max-height: 1em;" /> ポイント</strong><br />AIに「考えてもらう」のではなく、「候補を出してもらって自分で選ぶ」スタンスが、自分らしいブランディングにつながりました。</p>
</div>
<h3 style="color:#1a1a1a;">「誰に・何を伝えるか」を整理する</h3>
<p>タグラインを決める過程で、改めてブログのターゲット読者と届けたい内容を言語化しました。これをやっておくと、カテゴリ設計やトップページの構成にも一貫性が生まれます。</p>
<p>「NASや自宅サーバーを使いこなしたい人」「AIツールを日常に取り入れたい人」「時事・地政学に関心があるPC好きな人」——そういった読者像が、この段階ではっきりしてきました。</p>
<p><!-- 3. フロントページ --></p>
<h2 id="frontpage" style="color:#1a1a1a;">トップページをフロントページ化した</h2>
<p>SWELLのデフォルトでは、トップページに最新記事が時系列で並ぶ仕様になっています。これはシンプルでわかりやすいのですが、初めて訪れた読者に「このブログでできること」を伝えるには不十分です。</p>
<p>そこで、WordPressの「固定ページをホームページとして表示」機能を使い、トップページを専用のフロントページに切り替えました。</p>
<h3 style="color:#1a1a1a;">三点セットの構成</h3>
<div style="background:#f0f7ff;border:1px solid #5b9bd5;padding:16px 20px;border-radius:6px;margin-bottom:16px;">
<ul style="margin:0;line-height:2.2;color:#1a1a1a;">
<li><strong>カテゴリカード</strong>　→　ブログのジャンルを一目で伝える</li>
<li><strong>最新記事</strong>　→　更新頻度・鮮度をアピール</li>
<li><strong>プロフィール誘導</strong>　→　「誰が書いているか」への動線</li>
</ul>
</div>
<p>この三点セットにすることで、初めての訪問者が「何のブログか → 最近の記事は何か → 誰が書いているか」を一画面で把握できるようになりました。</p>
<h3 style="color:#1a1a1a;">ブロックエディターの限界とHTML直書きという選択</h3>
<p>フロントページの構成を考えていて、すぐに壁にぶつかりました。SWELLのブロックエディターで思い描いたレイアウトを再現しようとすると、細かい余白・カード配置・文字色の調整などが思うようにいかないのです。</p>
<p>ブロックエディターは直感的で便利な反面、「自分のイメージ通り」に仕上げようとすると、どうしても限界を感じる場面があります。</p>
<p>そこで、カスタムHTMLブロックを使ってClaudeにHTMLを直接書いてもらうことにしました。やりとりはシンプルで、「こういうレイアウトにしたい」「この色にしたい」「カードを横並びにしたい」と伝えると、インラインスタイル付きのHTMLをそのまま出力してくれます。</p>
<div style="background:#fff8e1;border-left:4px solid #f0c040;padding:14px 18px;margin-bottom:16px;border-radius:4px;">
<p style="margin:0;color:#1a1a1a;"><strong><img src="https://s.w.org/images/core/emoji/15.1.0/72x72/1f4a1.png" alt="💡" class="wp-smiley" style="height: 1em; max-height: 1em;" /> SWELLでHTML直書きするときの注意点</strong><br />カスタムHTMLブロックではSWELLのショートコード（<code>[say]</code>や<code>[box]</code>など）は機能せず、テキストとしてそのまま表示されてしまいます。スタイルはすべてインラインで記述するのが確実です。</p>
</div>
<p>「ブロックエディターで限界を感じたらHTMLに切り替える」——この判断ができるようになると、SWELLの表現の幅がぐっと広がります。</p>
<p><!-- 4. プロフィール --></p>
<h2 id="profile" style="color:#1a1a1a;">プロフィールページを作った</h2>
<p>以前はプロフィールをウィジェットの短い自己紹介だけで済ませていましたが、今回は固定ページとして独立したプロフィールページを作成しました。</p>
<p>プロフィールページを作る理由は2つあります。</p>
<ol style="line-height:2.2;">
<li><strong>読者との信頼関係を作る</strong>：誰が書いているかがわかると、記事への信頼感が高まります</li>
<li><strong>サイドバーやフロントページからの導線を作れる</strong>：ページが存在することで、回遊の起点になります</li>
</ol>
<p>SWELLではプロフィール固定ページへのリンクをウィジェットに設定でき、フロントページとの連携もスムーズでした。</p>
<p><!-- 5. カテゴリ再編 --></p>
<h2 id="category" style="color:#1a1a1a;">カテゴリを7つに再編した</h2>
<p>5カテゴリから7カテゴリへの再編については、<a href="https://ara-garage.com/claude-in-chrome-category/" style="color:#2980b9;">こちらの記事</a>に詳しくまとめています。ここでは要点だけ触れておきます。</p>
<table style="width:100%;border-collapse:collapse;margin-bottom:16px;">
<thead>
<tr style="background:#5b9bd5;color:#fff;">
<th style="padding:10px;border:1px solid #ccc;text-align:left;">変更前（5カテゴリ）</th>
<th style="padding:10px;border:1px solid #ccc;text-align:left;">変更後（7カテゴリ）</th>
</tr>
</thead>
<tbody>
<tr style="background:#f9f9f9;">
<td style="padding:10px;border:1px solid #ccc;">NAS・PC</td>
<td style="padding:10px;border:1px solid #ccc;">NAS・自宅サーバー</td>
</tr>
<tr>
<td style="padding:10px;border:1px solid #ccc;">AI・デジタル</td>
<td style="padding:10px;border:1px solid #ccc;">ブログ運用 / AI活用 / ガジェット・アプリ（3分割）</td>
</tr>
<tr style="background:#f9f9f9;">
<td style="padding:10px;border:1px solid #ccc;">時事・社会</td>
<td style="padding:10px;border:1px solid #ccc;">地政学・産業分析</td>
</tr>
<tr>
<td style="padding:10px;border:1px solid #ccc;">DIY</td>
<td style="padding:10px;border:1px solid #ccc;">DIY</td>
</tr>
<tr style="background:#f9f9f9;">
<td style="padding:10px;border:1px solid #ccc;">おでかけ</td>
<td style="padding:10px;border:1px solid #ccc;">おでかけ・体験</td>
</tr>
</tbody>
</table>
<p>カテゴリ名を具体的にすることで、読者が「自分の知りたい情報がここにある」と判断しやすくなります。また旧カテゴリURLへは301リダイレクトを設定し、SEOへの影響を最小限に抑えました。</p>
<p><!-- 6. サイドバー --></p>
<h2 id="sidebar" style="color:#1a1a1a;">サイドバーを整理した</h2>
<p>サイドバーは「あるから置く」ではなく、「読者の回遊を助けるための導線」として設計し直しました。</p>
<table style="width:100%;border-collapse:collapse;margin-bottom:16px;">
<thead>
<tr style="background:#5b9bd5;color:#fff;">
<th style="padding:10px;border:1px solid #ccc;text-align:left;">変更前</th>
<th style="padding:10px;border:1px solid #ccc;text-align:left;">変更後</th>
</tr>
</thead>
<tbody>
<tr style="background:#f9f9f9;">
<td style="padding:10px;border:1px solid #ccc;">カレンダー</td>
<td style="padding:10px;border:1px solid #ccc;"><img src="https://s.w.org/images/core/emoji/15.1.0/72x72/274c.png" alt="❌" class="wp-smiley" style="height: 1em; max-height: 1em;" /> 削除</td>
</tr>
<tr>
<td style="padding:10px;border:1px solid #ccc;">最新の投稿</td>
<td style="padding:10px;border:1px solid #ccc;"><img src="https://s.w.org/images/core/emoji/15.1.0/72x72/274c.png" alt="❌" class="wp-smiley" style="height: 1em; max-height: 1em;" /> 削除</td>
</tr>
<tr style="background:#f9f9f9;">
<td style="padding:10px;border:1px solid #ccc;">アーカイブ</td>
<td style="padding:10px;border:1px solid #ccc;"><img src="https://s.w.org/images/core/emoji/15.1.0/72x72/274c.png" alt="❌" class="wp-smiley" style="height: 1em; max-height: 1em;" /> 削除</td>
</tr>
<tr>
<td style="padding:10px;border:1px solid #ccc;">―</td>
<td style="padding:10px;border:1px solid #ccc;"><img src="https://s.w.org/images/core/emoji/15.1.0/72x72/2705.png" alt="✅" class="wp-smiley" style="height: 1em; max-height: 1em;" /> プロフィール追加</td>
</tr>
<tr style="background:#f9f9f9;">
<td style="padding:10px;border:1px solid #ccc;">―</td>
<td style="padding:10px;border:1px solid #ccc;"><img src="https://s.w.org/images/core/emoji/15.1.0/72x72/2705.png" alt="✅" class="wp-smiley" style="height: 1em; max-height: 1em;" /> 人気記事追加</td>
</tr>
</tbody>
</table>
<p>カレンダーやアーカイブは「日記ブログ」的な印象を与えやすく、情報ブログとしてのコンセプトと合わないと判断しました。代わりに「プロフィール」と「人気記事」を置くことで、初訪問の読者が複数記事を読み進めやすい構造になりました。</p>
<p><!-- 7. 感想 --></p>
<h2 id="review" style="color:#1a1a1a;">リニューアルを終えて感じたこと</h2>
<h3 style="color:#1a1a1a;">半日で完了できた理由</h3>
<p>今回の作業は、タグライン変更・固定ページ作成・フロントページ化・カテゴリ再編（88記事）・リダイレクト設定・サイドバー整理と、かなりの量でした。それでも半日で完了できたのは、ClaudeのOpus・Sonnet・Claude in Chromeを役割に応じて使い分けたからです。</p>
<div style="background:#fff8e1;border-left:4px solid #f0c040;padding:14px 18px;margin-bottom:16px;border-radius:4px;">
<p style="margin:0;color:#1a1a1a;"><strong>① 戦略・言語化</strong>　→　Claude Opus<br />
  <strong>② WordPress操作・記事振り分け</strong>　→　Claude Sonnet / Claude in Chrome<br />
  <strong>③ 最終判断・全体確認</strong>　→　自分</p>
</div>
<p>「全部自分でやる」でも「全部AIに任せる」でもなく、<strong>得意な部分を分担する</strong>という感覚が、今回の作業をスムーズにした一番の理由だったと思います。</p>
<h3 style="color:#1a1a1a;">「ポートフォリオ仕様」にして変わったこと</h3>
<p>リニューアル後、ブログを開いたときの印象が大きく変わりました。「最新記事が並ぶだけ」だったトップページが、自分のブログの「顔」らしくなった感覚があります。</p>
<p>読者目線でも、「このブログで何が得られるか」が伝わりやすくなったと思います。記事を書くモチベーションにも、じわじわと影響してきそうです。</p>
<p><!-- 8. まとめ --></p>
<h2 id="summary" style="color:#1a1a1a;">まとめ</h2>
<p>3ヶ月目のリニューアルは、振り返ると「ちょうどいいタイミング」でした。記事がある程度たまった段階でサイト全体を見直すと、「何を軸にするか」が自然と見えてきます。</p>
<div style="background:#f0f7ff;border:1px solid #5b9bd5;padding:16px 20px;border-radius:6px;margin-bottom:16px;">
<p style="font-weight:bold;margin:0 0 8px;color:#1a1a1a;"><img src="https://s.w.org/images/core/emoji/15.1.0/72x72/2705.png" alt="✅" class="wp-smiley" style="height: 1em; max-height: 1em;" /> 今回やったこと まとめ</p>
<ul style="margin:0;line-height:2;color:#1a1a1a;">
<li>タグライン変更（ブランディング刷新）</li>
<li>プロフィール固定ページ作成</li>
<li>トップページのフロントページ化（HTML直書きで対応）</li>
<li>5カテゴリ → 7カテゴリへ再編（88記事）</li>
<li>301リダイレクト設定（4ルール）</li>
<li>サイドバー整理</li>
</ul>
</div>
<p>次はGoogle Search Consoleでインデックス状況を確認しながら、新カテゴリに沿った記事を意識的に増やしていく予定です。「ポートフォリオ仕様」のブログ、これからが本番です。</p>



]]></content:encoded>
					
					<wfw:commentRss>https://www.ara-garage.com/folio-specifications/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
	</channel>
</rss>
