架空の精密金属加工会社のコーポレートサイト。Astro で一から作り、静的ファイルとして Xserver から配信している。
公開先 → https://front-of-code.com/portfolio/sample-seiko/
これはポートフォリオで、クライアント案件ではない。この会社は実在しない。
そして現在も手を入れている。 画像はプレースホルダで、写真は入っていない。 構成と実装は動くが、見た目は仕上げ前。
A sample corporate website for a fictional precision metal-machining company, built with Astro and served as static files from Xserver.
Live → https://front-of-code.com/portfolio/sample-seiko/
This is a portfolio piece, not client work — the company does not exist. I built it to have something real to point at. Astro is one of the tools I use, not the destination I push clients toward. It is a full multi-page site rather than a landing page, because the sites I actually deal with are multi-page.
Still in progress. The images are placeholders — there is no photography yet. The structure and the build work; the visual pass is not finished.
Notes for anyone reading the code: Astro 5, output: 'static', a content collection
for the news section, and a GitHub Actions job that builds and deploys over FTPS.
The contact form is a demo and does not submit anything.
作ったのは神戸。神戸は鉄鋼の街として栄えた土地で、いまも鉄工所や鉄に関わる会社が多く残っている。 会社は架空だが、業種と土地は架空ではない。
自分の下地もそちら側にある。高専では機械工学科で、情報学科ではなかった。 加えて、当時住んでいたマンションは、どうやら鉄工所の跡地に建っていた。
業種は、無難なデモの題材として選んだものではない。いちばん近くにあった実物を選んでいる。
| ページ | パス | 内容 |
|---|---|---|
| トップ | / |
ヒーロー、強み、事例、設備、お知らせ |
| 会社概要 | /company |
代表挨拶、会社情報、沿革、アクセス |
| 加工事例 | /works |
カテゴリフィルター付きの事例一覧 |
| 設備紹介 | /equipment |
設備一覧、品質管理体制 |
| お知らせ | /news、/news/[slug] |
コンテンツコレクション（Markdown） |
| お問い合わせ | /contact |
フォーム（デモ。送信は行わない） |
| プライバシーポリシー | /privacy |
個人情報の取り扱い |
「お知らせ」を入れているのが要点。 更新のある領域を含まない構成は、移行の検証台にならない。 サイトの移行で難しいのは、いつも変わり続ける部分だから。
| フレームワーク | Astro 5.x（output: 'static' / base: '/portfolio/sample-seiko/'） |
| お知らせ | Astro のコンテンツコレクション（Markdown） |
| スタイリング | カスタム CSS（CSS 変数） |
| 和文書体 | Noto Sans JP（Google Fonts） |
| ホスティング | Xserver（静的配信） |
| デプロイ | GitHub Actions → FTPS |
npm install
npm run dev # http://localhost:4321
npm run build
npm run previewmain に push すると GitHub Actions が build して Xserver へ配信する。
- FTPS（
security: strict） で転送する。平文 FTP は使わない - サードパーティの Action はコミット SHA で固定している（タグは動くため）。GitHub 純正の
actions/*はタグ参照 - ワークフローの
permissionsはcontents: readのみ
Settings → Secrets and variables → Actions で設定する。
| Secret | 内容 |
|---|---|
FTP_SERVER |
FTP ホスト名（例: sv***.xserver.jp） |
FTP_USERNAME |
FTP ユーザー名 |
FTP_PASSWORD |
FTP パスワード |
FTP_REMOTE_DIR |
アップロード先（例: /example.com/public_html/）末尾スラッシュ必須 |
手動で上げる場合は npm run build して dist/ の中身を転送する。
現在のフォームはデモで、送信は行わない。 送信操作でモーダルを表示するだけ。
本番で使う場合は、src/pages/contact.astro の <form> に action を設定する。
Formspree か、Xserver のメールフォーム機能のどちらでもよい。
- 神戸市周辺の中小製造業
- 既存サイトの作り直し先を検討している事業者
これはサンプル精工（架空企業）の配色であって、制作者のブランドカラーではない。
| 役割 | Hex |
|---|---|
| メイン（ダークネイビー） | #1a365d |
| アクセント（オレンジ） | #dd6b20 |
| 背景（ライトグレー） | #f7fafc |
- 信頼感 — 堅実で落ち着いた配色
- 清潔感 — 十分な余白と読みやすいタイポグラフィ
- 技術力 — 精密さを感じさせるレイアウト
作ったものは測る。ただし他人のサイトから取った数値は公開しない。 数値を出すときは、自分で測ったものを、計測条件と一緒に出す。
Web フォントを読み込んでいない。 システムにあるフォントだけで組んである。
理由は3つ。
- レンタルサーバー上の構成だから。 このサイトは Xserver に静的ファイルとして置いてある。CDN も edge も自動最適化もない。外部から CSS を1本読むと、それがそのまま render-blocking になる
- 日本語のサブセット化は、更新のあるサイトでは事故る。 お知らせを更新したときに、サブセットへ含めていない漢字が入ると欠ける。ニュース欄のあるコーポレートサイトで採る手ではない
- セルフホストするとフォントファイルの配信設定が要る。 レンタルサーバーでもできるが、渡したあとに触る人がいる前提だと、増やさないほうがいい
見た目は OS で少し変わる。 そのぶんを受け入れて、リクエストを増やさないほうを選んでいる。
ライセンスを設定していない。 つまり法的には全著作権留保で、閲覧はできるが再利用の許諾は出していない。 これは意図的で、置き忘れではない。 ポートフォリオなので、読まれるために公開している。
No license. This is a portfolio sample, published to be read, not reused. If you want something similar built → https://front-of-code.com