2026年5月29日(金)

スマホデザインをもとに新規ページを制作｜花道教室サイトのページ追加対応事例

今回は、花道教室のホームページに新しいページを2ページ追加した事例をご紹介します。

お客様ご自身でスマートフォン向けのデザインラフや掲載内容をご用意いただいていたため、その内容をもとにWordPressサイトへページを新規作成しました。スマホ向けのレイアウトをベースにしながら、パソコンやタブレットでも見やすくなるようレスポンシブ対応を行い、あわせてサイト内の導線整備も実施しています。

ページ制作では、単に内容を掲載するだけでなく、閲覧環境に応じて見やすさや使いやすさが変わるため、各端末での表示を考慮した設計が重要です。今回はスマホデザインから逆算してPCレイアウトを構築した事例としてご紹介します。

今回のご相談内容

今回ご相談いただいたのは、花道教室を運営されているお客様からの「新しく2ページを作成したい」というご依頼でした。

既存のWordPressサイトを運用されており、新たな情報発信や教室案内のためにページを追加したいとのことでした。

お客様側でスマートフォン表示を想定したデザインラフと掲載内容をご準備いただいていたため、それらをもとに実際のページ制作を進めることになりました。

発生していた症状・エラー内容

今回はシステムエラーや不具合の対応ではなく、新規ページ制作のご依頼でした。
そのため「サイトが表示されない」「エラーが出る」といったトラブルは発生しておらず、既存サイトへ新たなページを追加することが目的となります。

ただし、新規ページ制作の場合でも、閲覧する端末によって見え方が大きく変わるため、デザインをどのように実装するかが重要なポイントになります。

原因の特定ポイント

今回はトラブル対応ではないため原因調査はありませんでした。
その代わり、制作にあたって確認したのは、お客様が作成されたスマホ向けデザインをどのようにPCやタブレットへ展開するかという点です。

スマートフォン向けのデザインは縦方向に情報が並ぶことが多く、そのままパソコン表示にすると余白が広くなりすぎたり、視線移動が増えて見づらくなったりする場合があります。
そのため、各端末での見え方を想定しながらレイアウト設計を行う必要がありました。

実際に行った対応内容

まずはお客様からご提供いただいたスマホ向けのデザインラフと原稿内容を確認しました。
その内容をもとにWordPress内で新規ページを2ページ作成し、スマートフォンだけでなくパソコンやタブレットでも自然に閲覧できるようレスポンシブ対応を実施しました。

スマホでは縦並びで表示される要素については、パソコン表示時に横並びになるよう調整したり、余白や画像サイズを見直したりしながら、各端末で違和感のないデザインになるよう構築しています。
また、ページ完成後にはお客様にご確認いただき、内容や表示に問題がないことを確認した上で、既存ページから新規ページへ移動できる導線の設置も対応しました。

対応後の結果・改善点

ページ内容の確認後、お客様から問題ないとのご回答をいただきました。
その後、事前にご指示いただいていた導線の設置も実施し、新規ページへのアクセスがしやすい状態へ調整しています。

結果として、新しく作成した2ページと既存サイトを適切につなぐことができ、閲覧者が必要な情報へスムーズにたどり着ける構成となりました。

今回の対応から分かったこと

今回の対応で改めて感じたのは、スマホ向けのデザインだけでなく、パソコン表示まで含めた設計が重要だということです。

近年はスマートフォンでサイトを見る方が増えていますが、業種によってはパソコンから閲覧する方も少なくありません。
そのため、スマホのデザインをそのまま拡大するのではなく、PC表示時のレイアウトや情報の見せ方まで考慮することで、より見やすく使いやすいページになります。

新規ページ制作では、こうした各端末への配慮がサイト全体の品質向上につながります。

同様のトラブルを防ぐために

ページ制作やリニューアルを行う際は、スマートフォンだけでなくパソコンでの見え方もあわせて検討することをおすすめします。
特にデザインラフを作成する場合は、スマホ版だけでも十分制作は可能ですが、その情報をもとにPC表示でどのように見せるかを事前に考えておくと、完成後のイメージ違いを防ぎやすくなります。

また、ページを作成するだけでなく、サイト内のどこからアクセスできるようにするのかといった導線設計も重要なポイントです。
せっかく良いページを作成しても、見つけてもらえなければ十分な効果は得られません。