WordPressオリジナルテーマ制作事例｜Open Sky Heart

自分の事業で使い続けるための、WordPressテーマ

『トラウマ転換ウォーキング』の書籍、iPhone・Apple Watchアプリ、実践や研究に関する記事を、一つの公式サイトで伝えるために制作したオリジナルテーマです。クライアントからの受託案件ではなく、自身の事業で実際に公開・運用している自主開発の制作事例です。

既製テーマの色を変えるだけではなく、訪問者が「本で知る」「アプリで実践する」「記事を読む」のどこからでも入れる情報設計から、PHPテンプレート、CSS、JavaScript、管理画面の設定まで整えました。

書籍とアプリを、混同させないトップページ

トップの主役には実際の書籍表紙とAmazonへの購入導線を配置。その直下でアプリ・書籍・記事の入口を分けています。アプリは無料ダウンロードと任意のPro買い切り、書籍は別購入であることを伝え、商品や価格を取り違えにくい構成にしました。アプリ公開後は、App Storeへの共通導線とApple公式の日本語バッジも反映しています。

長い記事も、迷わず読めるように

投稿ページは、パンくず、カテゴリー、記事タイトル、アイキャッチ、見出しから自動生成する目次、本文、著者紹介、関連記事、前後の記事、コメント欄までを一つの読書体験として設計しました。目次は見出しが多い記事では閉じた状態から始まり、読み進み位置を示す細いプログレス表示も備えています。

PCでは本文とサイドバーを分け、アプリ案内はフッターなどに重ならない範囲で追従。スマートフォンでは本文の後へ自然に並び、画面を覆う追従表示は行いません。検索・カテゴリー・タグも整理し、既存のウィジェット設定を削除せず重複表示を避けています。

見た目だけでなく、触れたときの分かりやすさまで

コメント入力欄は、選択したときの青いフォーカスリングを角丸の枠に沿わせました。送信ボタンは、マウスを重ねると少し浮き、押している間は沈む反応を返します。キーボードのフォーカス、無効状態、タッチ操作、動きを減らす設定も考慮し、迷惑コメント対策の非表示入力を通常のフォーム装飾に巻き込まないようにしています。

公開後の運用を、テーマ側から支える

アプリ紹介、書籍、Amazon、App Store、サポートなどのURLや、おすすめ記事をWordPressのカスタマイズ画面から変更できます。記事一覧・カテゴリー・タグ・検索結果・固定ページ・404も共通のデザインで用意。穏やかなスクロール演出は一括で切り替えられ、端末の「動きを減らす」を優先します。

サイトテーマ曲の再生・停止・再生位置・閉じる操作にも対応。同一サイト内の通常移動では、音声を親ページに残す構成で再生をつなぎ、フォームやページ固有の処理は移動先の完全なページで初期化する方式にしました。

掲載画像について

ギャラリーには、2026年10月16日に本番サイトから取得したトップページと投稿ページの縦長フル画像を掲載しています。想像上のモックではなく、実際に運用しているページ全体です。別事例として紹介するアプリLPも、同じテーマの専用テンプレートで制作しています。

公開サイト

トラウマ転換ウォーキング公式サイト

投稿ページの実例を見る