ゲーム霧とコンクリートご提案運営者
PLEN日本語
お問い合わせ

MS Gravis.

木材と樹脂の加工に使う刃物を販売し、その研磨と木工機械のサービスも手がける、スキェルニェヴィツェの会社のウェブサイトです。ダイヤモンド工具は自社で製造しています。取引先は、ウッチ県とマゾフシェ県の家具工場や木工所です。

公開中のサイトを見る msgravis.pl
MS Gravisのウェブサイトのファーストビュー。暗い背景に、家具業界向けの刃物とサービスを伝える白と赤の見出し。その横にパネルソーでの作業の写真と、電話番号を記した赤いボタン。

火花

始まり

取り決めはメールで届きました。4ページの構成、白を添えた黒と赤のパレット、そして会社が自らを語る三つの言葉、精度・納期・経験です。

目標は一つ、電話でした。だから電話番号はどのページでも最初のボタンで、ほかのすべてはその後ろに並びます。

製品写真は一枚もありませんでした。カタログに頼れない以上、設計を支えるのはタイポグラフィ、グリッド、そして電話から引き渡しまでの仕事の流れです。

没入

つくり方

三つの方向性から選ばれたのは暗い案でした。黒、赤のアクセント、そして画面半分に大文字で組んだ見出しです。カタログの代わりに、画面は依頼の4つのステップを案内します。

ロゴはチラシの写真しか残っていなかったため、ベクターに起こし直しました。同じデータから印刷用のファイルと、レーザーで焼き込むためのDXFも作っています。

トップページ、刃物のラインナップ、研磨、機械サービスはセクションを共有します。同じ案内が2か所に出ても、直すのは1か所です。構造は、会社が予告しているオンラインショップも受け止められるようにしてあります。

実体

中のしくみ

ページの中身も構成も、型の付いた二つの設定ファイルにあります。セクション名、ページ名、カタログの項目名を打ち間違えれば、サーバーに届く前にビルドが止まります。

各セクションには「クライアントの確認待ち」の覚え書きを添えられます。その覚え書きが公開中のページに残っているあいだ、ビルドはサイトを検索エンジンに開放させません。未確認の内容は世に出ない仕組みです。

会社情報、営業時間、対応する20の都市は構造化データで検索エンジンに届きます。変更のたびに、5つのアドレスすべてで性能とアクセシビリティの自動チェックが走ります。

技術的な判断
コードに関心のある方へ
Next.js 16、React 19、TypeScript

ページは静的にプリレンダリングされるため、訪問者は最初のリクエストから完成したHTMLを受け取れます。

二つの設定ファイルにまとめたコンテンツ

刃物のカタログ、セクションの一覧、各ページの構成が並んでいます。内容を変えるためにコンポーネントを触る必要はありません。

セクション・ページ・カタログの型

セクション名やカタログ項目の名前が違っていれば、本番に届く前に型チェックで止まります。

安全装置付きのインデックス切り替え

「確認待ち」の覚え書きが残るセクションがあると、検索エンジンへの公開を試みた時点でビルドが止まります。

リンクプレビュー専用のrobots.txt

メッセンジャーやFacebookでのリンクプレビューは、検索エンジンに何を許すかとは関係なく働きます。

JSON-LD LocalBusinessとWebSite

住所、営業時間、対応都市が、検索エンジンの理解できる形で届きます。