サイト「n-fit」のPC及びSPのモックアップ画像

n-fit

https://n-fit.org/

プロジェクト概要

 HTML/CSSおよびJavaScriptで構築されていた「n-fit.org」を、WordPress化しながらレスポンシブ対応を行う案件を担当しました。不要なコンテンツやメニューを削除し、新たに必要となった要素を追加しました。サイドバーやトップページにおいて、カテゴリー別で最新記事を一覧化できるようにし、投稿機能を活用した効率的なサイト運営を実現しています。また、レスポンシブ化することで、スマートフォン等からでも快適に閲覧できるよう対応しました。

【プロジェクトの背景】

レスポンシブデザインへの対応:
 もともと PC 画面を前提としたデザインで、スマートフォンなどの小画面ではデザイン崩れや可読性の問題がありました。これを機にモバイルユーザーにも最適化した表示を実装する必要がありました。

WordPress化の要望:
 HTML/CSS で組まれたサイトは更新のたびにソースコードを触る必要があり、クライアント様は容易に投稿情報や一部ページを変更できるようにCMS導入を希望されていました。不要なページを整理して、追加したい機能やレイアウトをまとめて見直す方針となりました。

投稿記事一覧の実装:
 サイドバーやトップページに最新情報を反映させ、カテゴリーごとに記事をまとめたいという依頼がありました。WordPressの投稿機能を活かしながら、必要な部分だけを厳選して一覧化を行っています。

【担当業務】

  • サイト修正
  • サイトカスタマイズ
  • コンテンツ管理

【制作年月】

2024年4月

【工夫したポイント】

レスポンシブ設計と表の対応:
 PCでの見やすさを維持しつつ、モバイル時には左サイドバーを下部に移動し、ヘッダーメニューが複数行に分かれても崩れないよう調整しました。また「職員募集」以外の表が非常に多かったため、制作コストとスケジュールを考慮し、該当テーブルを画像表示に置き換える工夫を行いました。一方、「職員募集」ページだけはWordPressから直接編集可能にし、将来の更新にも柔軟に対応できるようにしています。

不要コンテンツの取捨選択:
 クライアント様とヒアリングを重ね、使われていないメニューやリンクを整理し、重要な情報だけを残すことでシンプルかつ管理しやすい構成を目指しました。また、TOPページの一部コンテンツをサイドバーへ移動し、投稿の最新5件を表示する「Information」枠を設置することで、利用者にとって分かりやすい動線を確保しています。

WordPress化で編集性を向上:
 HTMLコードをテンプレートファイルへ書き換え、テーマとして一元管理できるようにしました。カテゴリー別の投稿一覧をPHPでプログラムし、特定カテゴリーだけを表示する仕組みを実装しました。メインページの大半はテンプレート化のため修正はコードレベルになりますが、「法人概要」や「職員募集」など更新頻度の高いページは管理画面からテキストや表を変更可能にしています。加えてセキュリティプラグイン、SEO関連プラグインなども導入し、今後の運用と拡張性を高めています。

制作物の画像

サイト「n-fit」のトップページのスクリーンショット
サイト「n-fit」のスマートフォンのモックアップ画像
Back