実績紹介

菊田溶接株式会社： WordPressへの移行で業務効率を改善—HTML/CSSからWordPressへのホームページリニューアル事例

制作経緯

WordPressへの移行で業務効率を改善—HTML/CSSからWordPressへのホームページリニューアル事例

最近、HTML/CSSで作成された既存のホームページを、WordPressに移行してほしいというご依頼をいただきました。今回は、比較的シンプルな構成で作成されたホームページをWordPressに移行するという内容です。以前のサイトは複雑な機能や動的なコンテンツを使用しているわけではなく、基本的にはブロック単位で構成されていました。これにより、WordPressでの移行作業も比較的スムーズに進行しました。今回は、ブロックテーマを使用したWordPressサイトへの移行作業と、その際の工夫、効率化を図ったポイントについて詳しくお伝えいたします。

1. 移行作業の流れ

まず、HTML/CSSで作成された以前のホームページの構造を詳しく確認しました。サイトは静的なページで、特別な機能を持っていませんでしたが、画像が多く、各ブロックには一定のレイアウトがありました。このため、各ブロックに画像を適切に当てはめていく作業が中心となりました。

移行の最初のステップは、WordPressブロックテーマの選定です。ブロックテーマを使用することで、より効率的にコンテンツを作成でき、画像やテキストの配置が直感的にできる点が大きなメリットとなります。WordPressのブロックエディタは、直感的にコンテンツを追加・編集できるため、HTML/CSSで作成された元のページ構成をブロック単位でそのまま再現することが可能です。

2. 画像の配置と調整

依頼されたデータには、多くの画像が含まれていましたが、これらをブロックに当てはめていく作業はスムーズに進みました。特に画像は、サイズや解像度にバラつきがありましたので、適切なサイズにリサイズし、圧縮してページ速度への影響を最小限に抑えるよう努めました。

画像を使ったコンテンツの配置は、WordPressのブロックエディタを活用することで効率的に行いました。画像を挿入するための「画像ブロック」や、画像とテキストを一緒に配置する「カバーブロック」を使用することで、以前のHTML/CSSサイトのデザインをそのまま再現することができました。

さらに、サイトがレスポンシブデザインに対応できるよう、画像のサイズや表示方法を調整しました。これは特にモバイル端末やタブレットでの表示が重要となるため、ユーザー体験を損なわないように注意しました。

3. ヘッダーとフッターの対応

次に、ヘッダーとフッターの作成を行いました。元々HTML/CSSで作られていたヘッダーとフッターは、ショートコードを使って再現することにしました。ショートコードを利用することで、ページの各部分に必要なコンテンツや要素を簡単に追加することができ、管理が非常に効率的になります。

ヘッダーとフッターには、ナビゲーションメニューや連絡先情報、SNSリンクなどの重要な情報が含まれていたため、これをWordPressのウィジェットエリアやカスタムメニュー機能を活用して実装しました。これにより、今後の更新や修正も容易になり、クライアント様は自分で簡単に変更を加えることができます。

4. レスポンシブデザインの調整

元のサイトにはレスポンシブデザインに関するデータは含まれていませんでした。そのため、サイトをスマートフォンやタブレットでも問題なく表示できるように、CSSでレスポンシブ対応の調整を行いました。具体的には、以下の作業を行いました：

– 画像のサイズ調整: 画像が大きすぎてモバイル表示でうまく表示されない場合があったため、メディアクエリを使って画像サイズを調整し、画面サイズに合わせて最適なサイズで表示できるようにしました。

– レイアウト調整: 一部のテキストや画像がモバイル端末で見づらかったため、CSSで改行や余白を調整しました。これにより、デバイスに関わらず、ユーザーにとって快適な閲覧体験を提供できるようになりました。

– メディアクエリ: 画面幅に応じてコンテンツのレイアウトを変更するために、メディアクエリを使ってレスポンシブデザインを調整しました。これにより、サイトがどの端末でも見やすく表示されるようにしました。

5. WordPressの利点と今後の展望

WordPressへの移行により、サイト管理が大幅に楽になったと感じています。特に、コンテンツ更新の容易さや、SEOの強化において、WordPressは非常に強力なツールです。元々のHTML/CSSサイトでは、ページの更新や追加作業に時間がかかることが多くありましたが、WordPressにすることで、クライアント様が自分で簡単にページを更新したり、ブログ投稿を行ったりできるようになりました。

また、WordPressではプラグインを使って、さらなる機能追加が容易にできます。例えば、SEO対策を強化するためのSEOプラグインや、フォーム機能、セキュリティ強化など、サイト運営に役立つ機能を後から追加することができます。これにより、サイトの成長に合わせて柔軟に対応できる点が、WordPressの大きな利点です。

今後は、さらにSEO対策を強化し、サイトの集客力を高める施策をクライアント様と共に進めていく予定です。例えば、SEOに最適化されたコンテンツ作成や、内部リンク構造の見直し、外部サイトとの連携によるトラフィックの増加を目指します。

結論

HTML/CSSで作成されたサイトをWordPressに移行することで、サイト管理が格段に楽になり、クライアント様の更新作業が非常に効率化されました。また、レスポンシブ対応やSEO対策の強化ができ、今後の運用にも柔軟に対応できるサイト構築が実現できました。WordPressの利便性を活かして、さらに機能を追加し、クライアント様のビジネスをサポートしていけることを楽しみにしています。

使用ツール

• PhotoShop
• local by flywheel
• WordPress

作業エリア

• コーディング(html/css/javaScript)
• WordPress構築