WordPressオリジナルテーマ制作｜個人ブログサイト構築実績

デザイン設計からコーディング、WordPressの独自テーマ構築までワンストップで制作した、個人ブログ兼ポートフォリオサイトです。 「シンプルながらも記憶に残る体験」をコンセプトに、モバイルファーストでの徹底的なパフォーマンス最適化と、目的（コンテンツ）に合わせたUXデザインを両立させました。

デザインのこだわりと工夫

カテゴリー別のカラーUX設計

雑記ブログ特有の「今、何のジャンルの記事を読んでいるか迷子になる」現象を防ぐため、カテゴリーごとに異なるテーマカラーを採用。閲覧者が直感的にサイト内の現在地を把握でき、回遊性を高める設計にしています。

コンテンツの目的に合わせた世界観の切り替え（トーン＆マナー）

• ブログ記事： テキストの読みやすさを最優先に考え、余白を活かしたクリーンな「白基調」のデザイン。

• 実績紹介ページ： ブログとはガラリとテイストを変え、色味を抑えた「落ち着いた雰囲気」に。

コンテンツそれぞれの役割と魅せ方に合わせてあえて世界観を切り替えることで、サイト全体で飽きさせない工夫を凝らしました。

スクロールと連動した演出

トップページの装飾要素には、スクロール量に連動したアニメーションを実装。シンプルなレイアウトの中に、心地よい動きのアクセントを加えています。

技術的なアプローチとパフォーマンス改善

WordPressのカスタマイズ

WP_Query を駆使し、ブログ記事と実績コンテンツの確実な出し分け、用途に応じた柔軟な条件分岐による記事一覧表示を実装しました。

Core Web Vitalsを意識した高速化（モバイルファースト）

スマートフォンからの閲覧を最優先に想定し、画像やカスタムフォント（容量の最適化）の読み込み処理を徹底的にチューニング。不要なスクリプトの削減などを行い、ストレスのない快適なブラウジングを実現しています

制作範囲・使用スキル

担当範囲： 企画・サイト設計 / デザイン / コーディング / WordPress構築 / スピード最適化

使用技術：HTML / CSS / JavaScript / PHP / WordPress

実装機能・仕様一覧

• オリジナルWordPressテーマ

• レスポンシブ対応

• WP_Query によるコンテンツ出し分け（カテゴリー別記事一覧 / 実装実績一覧）

• JavaScriptによるインタラクション（ハンバーガーメニュー、スムーススクロール、スクロール連動・フェードインアニメーション）

• お問い合わせフォーム（Contact Form 7）

• SEO・各種最適化（構造化マークアップ、OGP設定、ページネーション、パンくずリスト）