架空の精密金属加工会社のコーポレートサイト。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 7, 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 7.x（output: 'static' / base: '/portfolio/sample-seiko/'） |
| お知らせ | Astro のコンテンツコレクション（Markdown・src/content.config.ts の glob loader） |
| スタイリング | カスタム 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 |
- 信頼感 — 堅実で落ち着いた配色
- 清潔感 — 十分な余白と読みやすいタイポグラフィ
- 技術力 — 精密さを感じさせるレイアウト
作ったものは測る。ただし他人のサイトから取った数値は公開しない。 数値を出すときは、自分で測ったものを、計測条件と一緒に出す。
Noto Sans JP を、セルフホストで読み込んでいる。 外部のフォント配信サービスには接続していない。
ビルド時に、出力した HTML に出てくる文字だけを含む WOFF2 を生成している（scripts/subset-fonts.mjs）。
@font-face は2個だけなので Layout.astro にインラインで置き、外部 CSS を1本も増やしていない。
font-display: swap—— 最初の描画は代替書体で出るので、フォントの取得が初期表示を止めない- 本文用（400）だけ
<link rel="preload"> - ウェイトは 400 と 700 の2本。 CSS 上の 500 は 400 に、600 は 700 に寄る（CSS のフォントマッチング）
- 元データは
@fontsource/noto-sans-jp（SIL OFL 1.1）を devDependency として持っている。版が固定されるので、手で置いたファイルより再現性が高い
⚠ astro dev ではフォントが出ない。 生成が astro build の後に走るため。開発中は代替書体で表示される。
@fontsource が配る unicode-range 分割版をそのまま読む方法も試した。結果は悪かった。
@fontsource をそのまま |
ビルド時サブセット（採用） | |
|---|---|---|
| render-blocking な CSS | 226,681 B（gzip 68,935 B） | 8,295 B（gzip 2,080 B） |
@font-face の数 |
248 | 2（インライン） |
| dist のフォントファイル | 496 本 / 12.9 MB | 2 本 / 250,040 B |
| dist 全体 | 約 14 MB | 540 KB |
⚠ 分割版は @font-face が248個あり、Astro がそれを1本の CSS にまとめて <head> に置く。
サイト本来の CSS は 8KB しかないのに、書体の宣言だけで critical path に gzip 67KB 積むことになる。
Web フォントを避ける理由としてよく挙がる構造を、別の形で作ってしまっていた。
一度は「Web フォントを読み込まない」方針にしてシステムフォントへ寄せた。そのときの理由3つは、いずれも成立していなかった。
| 当時の理由 | 実際 |
|---|---|
| レンタルサーバーなので、外部から CSS を1本読むと render-blocking になる | 誤り。 それは Google Fonts のような第三者への接続の話で、セルフホストなら起きない。 フォントファイル自体は render-blocking ではない |
| 日本語のサブセット化は、更新のあるサイトで漢字が欠ける | Astro では起きない。 更新すれば必ずビルドが走り、サブセットも作り直される。 WordPress の前提を持ち込んでいた |
| セルフホストは配信設定が要る | 要らない。 ビルド時に同一オリジンへ吐かれる |
⚠ そして副作用のほうが重かった。 システムフォントだけのサイトは、「システムフォントしか使えない人のサイト」に見える。
ライセンスを設定していない。 つまり法的には全著作権留保で、閲覧はできるが再利用の許諾は出していない。 これは意図的で、置き忘れではない。 ポートフォリオなので、読まれるために公開している。
No license. This is a portfolio sample, published to be read, not reused. If you want something similar built → https://front-of-code.com