実践編舞台裏

【ポートフォリオサイト改善Vol.2】HTMLからWordPressへ

実践編

この記事は、僕のポートフォリオサイト改善の試行錯誤をリアルタイムでお届けするメイキングシリーズの第2弾です。

このシリーズの別の記事を見る↓

ポートフォリオサイト改善
「ポートフォリオサイト改善」の記事一覧です。
この記事を書いた人
このポートフォリオサイトの運営者 本庄弘大のイラスト

本庄 弘大
(ほんじょう こうだい)

  • 『レンタルなんでもWebで売れる人』の中の人
  • Web制作・マーケティング支援で数十社の実績
  • 「手段ではなく成果にこだわる」がモットー
  • 自社で成果を出した知見であなたを支援します

ポートフォリオサイトを更新しやすくするため、HTMLからWordPressへの移行に至った経緯をお届けします。

Vol.1でHTMLベースのポートフォリオサイトを立ち上げてから1ヶ月も経たない頃。

あとで行う予定だったWordPress移行のタイミングが、思ったより早くやってきました。

HTMLからWordPress移行を決断した瞬間

Vol.1のサイトを公開して数週間で、以下のような気づきがありました。

更新の容易さを改めて実感

実は、成功事例記事については最初からサブディレクトリにWordPress環境を構築して少しずつ投稿を開始していました。

サブディレクトリ…メインサイト内の独立したフォルダ。

このWordPress環境での記事投稿の手軽さを日々実感する中で、「ポートフォリオサイトのメインページも全部WordPressで管理できた方が楽じゃない?」と思い始めました。

HTMLの更新作業の煩わしさを再認識

HTMLベースの更新コストが高いことは最初から分かっていました。

将来的にHTMLからWordPress移行すれば解決すると楽観的に捉えていたんです。

しかし、実際にHTMLサイトでちょっとした修正をする度に感じる煩わしさと、WordPressでの更新の手軽さを日々対比していると、「やっぱり早めにWordPress移行しよう」という気持ちが強くなりました。

  • HTMLサイト:テキストエディタでファイルを開いて編集→アップロード
  • WordPress:管理画面でサクッと編集→保存ボタンをクリック

この差は想像以上に大きなものでした。

デザインのシンプルさが後押し

Vol.1でデザインをシンプルなものにしていたこともあり、「WordPressの既存テーマに最低限のデザイン調整を施せば、似たようなサイトになるな」と思い立ったのも移行を後押ししました。

「こうなったらHTMLのサイトであるメリットはほぼ残ってない…」

WordPressでの更新の便利さを実感し、デザインも簡単に再現できる見通しが立った今、HTMLにこだわる理由が見当たらなくなっていました。

費用対効果の再計算

WordPress移行の手間を考えると「もう少し後でも…」という気持ちもありましたが、冷静に考え直してみました。

アクセス数の現実

HTMLで作って1ヶ月も経ってないサイト、アクセスなんてありません。

でも、だからこそWordPress移行するタイミングとしては最適だったんです。

  • 訪問者数が少ない = 移行による影響も最小限
  • サイト構造がシンプル = 移行作業も軽量
  • 早めの移行 = その後の更新効率が飛躍的に向上

制作時間の投資回収

実際、WordPress移行の作業はものの2〜3時間程度で完了しました。

短時間でポートフォリオサイト全体がWordPress環境になり、その後の更新の手間を考えると費用対効果は非常に高いものでした。

本庄 弘大
本庄 弘大

最初からWordPressで作れば良かった。

判断ミスった…恥ずかしい…

でも判断ミスも含めて学びなので、良しとします。

WordPress移行でCocoonテーマを選んだ理由

HTMLからWordPress移行するにあたって、テーマ(サイトのデザインテンプレート)選択は重要でした。

Cocoonの魅力

  • 無料でも高機能:有料テーマに匹敵する機能を無料で提供
  • シンプルで飽きにくい:過度な装飾がなく、長期利用に適している
  • カスタマイズの自由度:必要に応じて調整可能
  • 更新・保守の楽さ:定期的なアップデートで安心

無料のWordPressテーマ Cocoonで十分という判断

複雑な機能を求めているわけでもなければ、特別にデザイン性が高いわけでもない。

そんな僕のポートフォリオサイト程度であれば、無料のWordPressテーマ Cocoonで十分だと判断しました。

Contents is King の継承

Vol.1で掲げた「見た目より中身」の思想は、Cocoonの哲学とも合致していました。

派手な装飾よりも、コンテンツが読みやすく、更新しやすいことを重視。

Vol.2での戦略意図

今回のHTMLからWordPress移行は、単なる技術的な変更ではなく、明確な戦略意図に基づいて行いました。

一言でいうと、今後の更新を楽にして、サイト改善を加速させることが最大の目的でした。

集客や業態の変化に合わせた改善をスピーディーに行える基盤を構築することで、本当の意味でのHubサイト化を実現したかったのです。

運用効率の最大化

WordPress移行により、今後のサイト運用を飛躍的に楽にすることが最大の狙いでした。

HTMLベースでは時間のかかっていた更新作業を効率化し、本来やりたいコンテンツ作成に集中できる環境を構築することが目的でした。

HTMLサイトの場合、サイトのボリュームが増えるほど作業時間も比例して増加していきます

WordPress移行により、この拡張性の問題が根本的に解決されました。

作業項目HTMLWordPress短縮効果
記事投稿10分2分80%減
メニュー変更8分1分87%減
ページ修正5分3分40%減

移行作業3時間の投資で、今後の更新作業負担が大幅に軽減されました。

事業方針の変化に対応

現在やりたいことに合わせて不要なページを削除し、新しいページやコンテンツを簡単に追加できる状態を作ることも重要な戦略でした。

事業は常に進化するため、その変化に柔軟に対応できるサイト構造が必要だったのです。

新規制作したページ

内容はHTMLのものとほとんど変えず、WordPressのブロックエディターでササッとページを作り直しました。

ブロックエディター…レゴブロックのように文章・画像・動画などのパーツを組み合わせて記事を作る編集機能のこと。

ホーム

サイトの顔として、本庄弘大の全体像を伝える固定ページとして継承。

画像の解像度が荒いのはご容赦くださいm(_ _)m

画質を優先するとページの読み込みが遅くなるので、雰囲気だけでも感じ取ってください。

当時の画像↓

実際のページを見る↓

プロフィール

人間性や価値観を伝える重要なページとして継承。

画像の解像度が荒いのはご容赦くださいm(_ _)m

画質を優先するとページの読み込みが遅くなるので、雰囲気だけでも感じ取ってください。

当時の画像↓

ラボラトリー

実験事例をまとめたページとして継承。

画像の解像度が荒いのはご容赦くださいm(_ _)m

画質を優先するとページの読み込みが遅くなるので、雰囲気だけでも感じ取ってください。

当時の画像↓

新規追加した記事

「みんなと同じ」を捨てた瞬間、収入が4倍に!ホームページ制作者M様の革命的ビジネス転換

「高額なホームページは必要なかった」月1件だったネイルサロン経営者F様が7倍の予約を獲得するまで

本庄 弘大
本庄 弘大

ページのキャプチャ(写真)は撮り忘れました…

ご容赦くださいm(_ _)m

これらの記事を通じて、「机上の空論ではなく、実際にやって結果を出している」ことを継続的に証明していく方針を確立しました。

その他の改善点

協業パートナー募集ページの削除

ポータルサイトや『レンタルなんでもWebで売れる人』など、もっとやりたいこと、集中したいことができたため削除。

Hubサイト制作のモニター募集ページの削除

手段を売ることをやめて、『レンタルなんでもWebで売れる人』という包括的な支援サービスを提供する路線にしたため削除。

ロゴの作成

これまでテキストだけだったサイト名を、オリジナルロゴに変更。

僕のイニシャル「H.K.」をシンボルにしたもので、9割ほどはChatGPTのみで作成しました。

シンプルながらも印象に残るデザインを心がけました。

画像の解像度が荒いのはご容赦くださいm(_ _)m

画質を優先するとページの読み込みが遅くなるので、雰囲気だけでも感じ取ってください。

変更前のロゴ↓

変更後のロゴ↓

最低限のCSSカスタマイズ

CSS…サイトのデザインやレイアウトを調整するコード。

Cocoonのデフォルトデザインをベースに、ブランドカラーに合わせた色調調整や、読みやすさを重視したフォントサイズの微調整を実施しました。

またコンテンツに角丸を付けて枠線で囲むなど、元のHTMLでのサイトの見た目にある程度は寄せました。

UIUX改善

UIUX…サイトの使いやすさや見た目の分かりやすさ。

特にボタンデザインですね。

デフォルトのものだとボタンぽっくない四角形の物体だったので“押せる感”があるものに修正。

ユーザーが迷わず行動できるよう、視覚的な分かりやすさを向上させました。

画像の解像度が荒いのはご容赦くださいm(_ _)m

画質を優先するとページの読み込みが遅くなるので、雰囲気だけでも感じ取ってください。

変更前のボタン↓

変更後のボタン↓

改めて考えさせられたこと

「少しは凝りたい」という欲求との付き合い方

Vol.1で「自分のサイトなんだから少しは凝ったものにしたい」という思いに従った結果、保守性を後回しにしてしまいました。

この経験から、個人の好みと実用性のバランスを取ることの重要性を学びました。

ただし、業界によっては最低限のデザイン性がないと見てもらえない場合もあるため、目的や業界特性に応じた判断が必要です。

段階的アプローチの見直し

「WordPress移行は後で」という段階的なアプローチも、結果的には当初の想定よりも早い移行となりました。

この経験から、必ずしもHTML等で凝ったサイトを作ってからWordPress化するという工程を踏む必要はないと気づきました。

予算や目指す品質、目的によっては、最初からWordPressで、何なら無料テーマでサイトを作るというのも一つの選択肢としてあって良いなと思いました。

Vol.2完成時点での手応え

今回のHTMLからWordPress移行は、移行作業としては過去最もシンプルでしたが、運用面では最も効率的なものとなりました。

更新効率の劇的改善

  • 記事投稿:数分で完了
  • ページ修正:管理画面から直接編集可能
  • メニュー変更:一括で簡単に反映
  • サイト全体の保守性向上

コンテンツ作成への集中

技術的な障壁が取り除かれたことで、本来やりたかった「価値あるコンテンツの継続的な発信」に集中できるようになりました。

将来への拡張性確保

WordPress移行により、今後の機能追加や改善が容易になりました。

そして何より、「更新し続けられる基盤」を短時間で構築できたことで、本当の意味でのHubサイト化への道筋が見えてきました。

今後のステップ

継続的なコンテンツ更新とマネタイズ

記事投稿の環境が整ったことで、実験事例や思考の記録を定期的に発信していく基盤ができました。

さらに収益に繋げるためのサービス紹介ページや、そこへの流入を促す記事の作成にも取り組んでいく予定です。

デザイン・UIUX・機能の改善

更にCSSをカスタマイズしてデザイン性を担保することや、UIUXのブラッシュアップ、冗長なコンテンツの見直しなども予定しています。

必要に応じて、お問い合わせフォームの最適化や、SEO対策の強化なども検討していきます。

SEO…検索エンジンで見つけられやすくする対策。


今後はこの基盤を活用して、どんどんポートフォリオサイトを改善していく予定です。

タイトルとURLをコピーしました