Webサイトのリメイク（再構築）において、私たちが最も大切にしているのは「表面的なデザインを綺麗にすること」ではありません。その企業が持つ本質的な価値や強みを一度バラバラに解体し、ターゲットであるユーザーの心理に合わせて、最も伝わる形に並べ直すことです。
今回、茨城県内で独自の異形押出成形技術を持つ「株式会社協栄化成様」の公式サイトをリメイクするにあたり、私たちがどのような工夫を凝らし、情報の再構築を行ったのか。その舞台裏をご紹介します。
【リメイクした実際のWebサイトはこちら】 株式会社協栄化成様 公式サイト
1. 抱えていた課題と、情報の「解体」
協栄化成様は、合計27台の押出機を保有し、他社では断られるような複雑な形状や2色成形にも対応できる、極めて高い技術力を持ったBtoB（法人向け）の製造企業です。
しかし、リメイク前の情報構造では、その「強力なファクト（事実）」が、サイトを訪れた設計・調達ご担当者様に直感的に伝わりきっていないという課題がありました。
設計者が新しいサプライヤー（製造委託先）を探すとき、最も知りたいのは「自社が求める特殊な形状や素材に、本当に対応してもらえるか」という1点です。この疑問に最短ルートで答えるため、私たちはまず、同社が持つ膨大な設備データや対応素材、過去の実績をすべて机の上に広げ、要素ごとに解体していきました。
2. 現場のリアルを美しさに変える、ビジュアルの「見せ方」と「隠し方」
今回のリメイクでは、Webサイト上の「写真（ビジュアル）」にも独自の工夫を施しています。製造業のWeb制作において避けて通れない2つのリアルな課題を、クリエイティブの力で解決しました。
① 「稼働する現場の熱量」をモノクロでカッコよく表現する
素晴らしい技術が生まれる工場は、常に全力で稼働しています。そのため、現場にはさまざまな資材や工具があり、どうしても「混沌」とした状態になります。しかし、Webサイトの撮影用に稼働中のラインを止め、完璧に整理整頓するのは、クライアントの日常業務（営業利益）を阻害することになり、現実的ではありません。
そこで私たちは、現場のありのままの熱量を伝えるため、あえて写真を「モノクロ（白黒）」にするという選択をしました。
色情報を整理することで、雑多な背景のノイズが消え、稼働する機械の金属的な質感や、職人の真剣な眼差しが際立ちます。結果として、工場のリアルな空気感を残したまま、「メカニカルな美しさやカッコ良さ」を引き出し、企業としての職人堅気な信頼感をビジュアルで担保することに成功しました。
② 技術の核心（独自のノウハウ）を徹底して「隠す」プロフェッショナルな配慮
押出成形技術において、樹脂を形作る「ダイス（金型）の形状」やセッティングは、企業の命とも言える独自のノウハウが凝縮された最重要機密です。
高い技術力を証明するために設備を見せたい一方で、競合他社に技術的な手の内を見せるわけにはいきません。そのため、撮影時にはアングルやピントの位置を徹底的にコントロールし、「ダイスの核心部分が極力写らない・見えない」よう細心の注意を払いました。
クライアントの大切な資産（ノウハウ）を守りながら、技術の信頼性を伝える。これこそが、私たちが考えるBtoBサイト制作における「誠実さ」のあり方です。
3. 縦長LPに見せない「品格ある1枚もの」への集約
BtoBのWebサイトにおいて、過度な装飾や売り込み色の強い、いわゆる「縦長のランディングページ（LP）」のようなデザインは、かえって技術的な信頼感を損ねてしまうことがあります。
そこで今回は、ユーザーが迷わずにすべての重要情報へアクセスできるよう、一石屋のデザイン思想である「LPのようには見えない、品格のある1枚もの（シングルページ）」の構造を採用しました。
トップからスクロールしていく中で、「対応樹脂素材のリスト」「役割ごとにカテゴリ分けされた27台の設備一覧」「厳しい検査体制」といったファクトが、飾らない言葉で誠実に目に入る配置にしています。余計なページ遷移をなくし、情報を徹底的に引き算（減築）することで、サイト全体の読み込み速度とユーザーの閲覧ストレスを大幅に軽減しています。
4. 「アコーディオンFAQ」による心理的負担の軽減
情報を1枚のページに凝縮する際、すべての文章をそのまま展開してしまうと、ページが長くなりすぎてユーザーが読む気をなくしてしまいます。
この問題を解決するために、詳細な技術仕様やよくある質問は「アコーディオンFAQ」形式に整理しました。
設計者が「今、自分が気になっているピンポイントな疑問」だけをタップして展開できるようにすることで、ページ全体のすっきりとした美しさを保ちながら、情報密度の高さを両立させています。
5. 行動を促す「加工可否シミュレーター」の開発
今回のリメイクで最大の核となったのが、JavaScriptを用いたオリジナルの「押出成形・加工可否シミュレーター」の実装です。
設計者が「図面を送って問い合わせる」というのは、実は非常に心理的ハードルが高い行動です。「断られたら面倒だな」「まだ図面が確定していないから聞きづらい」という心理が働きます。そのハードルを下げるために、「今すぐ」その場で目安がわかる診断機能を設置しました。
<!– 実装したシミュレーターの設計項目 –>
・お客様の区分（法人 / 個人）
・ご希望の素材（PVC、ABS、PP、アクリル、PC、エラストマー等）
・想定ロット数
・形状の複雑さ（シンプル / 複雑 / 2色成形 / 他社で断られた形状）
このシミュレーターにおける最大の工夫は、その「判定ロジック」にあります。
もしユーザーが「他社で金型が作れないと断られた形状」や「2色成形」といった、一般的には難易度が高い条件を選んだとしても、システムは一発で「不可」とは返しません。協栄化成様の強みは『他社で断られた形状も創意工夫でカタチにする対応力』だからです。
そのため、これらの難易度の高い条件が選ばれた際には、
「◯ 加工できる可能性が高いです。詳細をお聞かせください。形状や用途によって最適なアプローチをご提案します」
という前向きな結果画面を表示し、「手書きの図面や写真で、まずは気軽に相談してみよう」と思える導線（ルート）を設計しました。
一方で、同社が対応していない「個人のお客様（individual）」からの選択に対しては、「× 誠に恐れ入りますが…」と事前に明記することで、ミスマッチによる無駄なやり取りを未然に防ぐ、誠実なフィルタリング機能も持たせています。
これにより、「無駄な問い合わせ処理に追われる現場の負担軽減」と「本質的な商談機会の最大化」をコード1本で同時に実現しました。
6. 先進的アプローチ：人間にも、AIにもわかりやすく（LLMOへの挑戦）
そして今回、私たちが裏テーマとして徹底的に追求したのが、「LLMO（Large Language Model Optimization：AI向け最適化）と、ジェネレーター（人間向け最適化）の両立」です。
いまや、設計者や調達担当者はGoogle検索だけでなく、「ChatGPT」や「Gemini」、「Perplexity」といったAIツールを使って『茨城県でABSの2色成形ができる工場を探して』とリサーチする時代になりつつあります。
AIがWebサイトの情報を正しく読み取り、協栄化成様を「おすすめのサプライヤー」として推薦するためには、サイト自体がAIフレンドリー（LLMO）に構築されていなければなりません。
そのため、今回の設計では以下の「二軸のわかりやすさ」を追求しました。
- 人間向け（ジェネレーター）：
専門的な知識がなくても、直感的に素材やロットを選んで瞬時に判定ができる「加工可否シミュレーター」を提供。ユーザーの図面送付に対する心理的ハードルを極限まで下げる。 - AI向け（LLMO対応）：
シミュレーターの裏側のソースコード（HTML/CSS/JavaScript）を、セマンティックで無駄のない、AIが解釈しやすいクリーンな構造で記述。さらに、サイト全体の設備一覧や対応素材も、AIクローラーが迷わずスクレイピングしてデータベース化しやすい「ファクトベースの構造」で配置。
この「人間への親切さ」と「AIへの親切さ」を両立させたハイブリッドな情報設計こそ、これからのBtoB Webサイトに求められる究極の形だと私たちは確信しています。
まとめ：言葉と機能を整え、企業の価値を正しく届ける
Webサイトのリメイクとは、魔法のような新しい何かを捏造することではありません。企業が元々持っている「本当の価値」を引き出し、それを必要としている人（今回の場合は、形状の実現に悩む設計者や、それを裏で探すAIアシスタント）に届くよう、ルートを綺麗に整えてあげる作業です。
すっきりと洗練されたデザインの裏側に、写真の工夫、緻密な情報解体、そして「LLMO×ジェネレーター」という先進的な仕組みを仕込むこと。これこそが、一石屋が提案するWeb制作・リメイクのアプローチです。
最後になりますが、今回のリメイクにあたり、技術的なファクトや現場の知見を惜しみなく開示し、共に素晴らしいサイトを作り上げてくださった株式会社協栄化成様に、心より感謝申し上げます。
本格的なBtoBリメイクの仕上がりを、ぜひ実際のサイトでご覧ください。
株式会社協栄化成様 公式サイト
