NPO法人JRS公式サイトの再構築作業について

 みなさん、こんにちは。

知人が関わっている NPO法人で Web 作業を担当していた方が突然やめてしまい、サイト制作が止まっている状態となっていたとのことで、急遽引き受けることになりました。

前任者が離任したタイミングが急だったようで、団体側でも対応できる人がいない状況だったため、まずは現状の確認から作業を進めることになりました。

最近はアプリ開発の案件が多く、Web制作は約10年ぶりとなりました。

そのため、当初は色々と戸惑う部分もありましたが、作業を進めながら徐々に感覚を取り戻していった形です。

■ 作業を引き受けた経緯

前任者が作成していたページは内容がほとんどなく、構造も不十分だったため、実質的にいちから作り直す必要がありました。

また、前任者は CMS のみで作業しており、CSS による調整は行っていなかったようです。

そのため、CMS由来のCSSが強く効いている箇所が多く、私が新しく作成したCSSと競合してしまい、優先度の調整にかなり苦労しました。

■ CSS構造の見直し

当初は、サイトのページ数が少ないように見えたため、私の方で一つの外部CSSファイルにまとめていました。

しかし、オーナーからの情報提供が進むにつれてページ数が増える見込みとなったため、CSS構造を見直し、以下のように分離しました。

・共通CSSファイル（サイト全体で使用するスタイル）

・ページ専用CSSファイル（各ページ固有のスタイル）

この分離により、保守性が向上し、今後ページが増えても管理しやすい構造になりました。

CMSのCSSは、Webが安定するまでは一部利用しますが、最終的には CMS に依存しない構造にしていく予定です。

■ 技術的な作業内容

今回のサイト制作では、以下のような作業を行いました。

・HTML / CSS / JavaScript の全面書き直し

・CMS側の既存CSSの優先度調整（!important の整理、競合解消）

・レスポンシブ対応（スマホ時の余白・画像サイズ調整）

・ページ固有CSSの分離と構造化

・画像の最適化（Squoosh による圧縮）

・SEO内部対策（metaタグ、alt属性、サイトマップ）

・Google Search Console の登録

・FujiSSL による HTTPS 化

・ドメイン管理と DNS の調整

・サイト全体のリンクチェックと表示確認

・製品紹介ページの構成整理（表組み、比較表など）

CMSのCSSは、特定のブロックだけスタイルが強く効いてしまうなどの問題があり、Chrome の検証ツールで優先度を確認しながら一つずつ修正していきました。

■ サイト内容について

今回制作した NPO法人JRS の公式サイトでは、無機繊維廃材の適正処理や再資源化に関する情報を掲載しています。

主なページ構成は以下の通りです。

・トップページ

・団体概要

・無機繊維リサイクルの説明

・製品紹介（ブロッケージ工法・農材製品など）

・生産・施工体制

・お問い合わせフォーム

・活動報告（今後追加予定）

今回の制作にあたり、特に以下の技術内容について学ぶことが多かったです。

● JRSブロッケージ工法  

落綿（ロックウール端材）を現場で再利用する循環型の施工技術で、単なる層間ふさぎ材ではなく、専用受金物・変位追従・遮煙安定などを「工法として成立させる」点が特徴です。

従来の板状ロックウールとは異なり、工法全体で性能を発揮するため、産廃削減やCO₂削減にも寄与するとのことでした。

● ゼロ・フェノール技術を活用したリサイクル農材  

回収したロックウール廃材を粉砕 → 高温焼去 → 再成型することで、フェノール樹脂を含まない安全な農材として再生する技術です。

農業用途での安全性向上や、廃材の再資源化に大きく貢献するとのことで、こちらも作業を通じて理解が深まりました。

なお、Webのコンテンツ自体は、まだオーナーからの情報提供待ちの部分があり、現時点では未完成のページもあります。

今後、情報が揃い次第、順次更新していく予定です。

■ サイト紹介

今回制作した NPO法人JRS の公式サイトはこちらです。

無機繊維リサイクルに関する情報を扱っている団体ですので、興味のある方はぜひご覧ください。

👉 NPO法人JRS（公式サイト）  

https://jrs-3r.jp/

今後も必要に応じて機能追加や調整を行っていく予定です。

ではでは～☆ミ