IT / DX 企業向けコーポレートサイトのデモ実装です。ターミナル風デザインで「技術力の可視化」を狙った、Michiel Tech Lab 制作の B2B IT 企業向けサンプルとして公開しています。
デモサイト: https://gravio.michieltechlab.com/
注記: 本サイトは実在の企業ではなく、Michiel Tech Lab がポートフォリオ提示目的で制作した架空のサンプルです。
- B2B 法人 × IT / DX 推進訴求のど真ん中: ソフトウェア開発会社・SaaS スタートアップ・IT コンサル会社を想定したコーポレート構成
- ターミナル / CLI 風の独自デザイン: 量産型の「青系コーポレートテンプレ」との決定的な差別化
- 技術スタックの可視化: クライアントが「この会社は本当に技術があるのか」を判断できる情報設計
- 想定提案単価: 200,000〜400,000円
| 項目 | 内容 |
|---|---|
| コンセプト | ターミナル × CLI × ダークモード × ミニマル |
| カラーパレット | 漆黒（#0a0a0a）／グリーンアクセント（#00ff41）／オレンジアクセント（#ff6b00） |
| フォント | JetBrains Mono / Space Mono / IBM Plex Sans JP |
| 背景演出 | 極細グリッドライン + モノスペースタイポグラフィ |
| セクション構成 | ヒーロー／サービス／技術スタック／開発フロー4ステップ／実績／会社情報／CTA |
- HTML5（セマンティック要素・OGP 対応）
- CSS3（CSS 変数・Grid・Flexbox・カスタムアニメーション）
- Vanilla JavaScript（軽量・フレームワーク非依存）
- Google Fonts（JetBrains Mono / Space Mono / IBM Plex Sans JP）
- ビルドツール不使用（静的 HTML / CSS / JS のみ）
gravio/
├── index.html # 1ページ完結型・全CSS/JS埋め込み
├── images/
│ ├── hero.jpg
│ ├── cta-bg.jpg
│ ├── work-01.jpg
│ ├── work-02.jpg
│ └── work-03.jpg
├── .gitignore
└── README.md
- 表示速度: 1ページ完結で初回表示 0.5 秒以下
- エンジニア採用にも直結: ソースコードそのものが採用応募者へのアピールになる
- サーバー非依存: Cloudflare Pages / Vercel / Netlify で月額無料ホスティング可
- セキュリティ: WordPress 比で攻撃対象が極小（管理画面・DB なし）
- カスタマイズ自由度: デザインシステムを IT 企業のブランドに合わせて自在に拡張可能
「ベース8割＋カスタム2割」で IT 企業向けに即納品可能です。
- 会社名・サービス名・技術スタックの差し替え
- 事業内容・開発フローのフェーズ数・各フェーズ文言のカスタマイズ
- 採用ページ・ブログ機能・問い合わせフォームの追加
- コーポレートカラーへの置き換え（CSS 変数1か所のみで全体変更可能）
# シンプルにブラウザで開く
open index.html
# または簡易サーバーで確認
npx serve .
# → http://localhost:3000Michiel Tech Lab（みちぇる）
- 税理士法人16年出身 × エンジニア（2005年〜2020年税理士法人勤務）
- 「経営の言葉がわかるエンジニア」をコンセプトに活動
- Claude Code 活用で、高品質サイトを短納期で提供
- 30日間の無償修正保証付き
- HTMLベース構築（STUDIO / WordPress 非依存）
本サンプルに関するご依頼・カスタム制作のご相談は、各プラットフォームよりお気軽にどうぞ。
- ココナラ: https://coconala.com/users/
- ランサーズ: https://www.lancers.jp/
※当リポジトリ・サイト上では直接の依頼受付・外部決済誘導は一切行っておりません。
- ソースコード（HTML / CSS / JavaScript）: MIT License
- 画像ファイル: ポートフォリオ掲示目的のみ。商用再利用・二次配布は不可
- ロゴ・企業名・実績コンテンツ: 架空設定のため実在企業との関連なし
© 2026 Michiel Tech Lab. Portfolio sample created with Claude Code.