まず、場所をつくる。
7okenm.comというドメイン自体は以前から持っていた。ただ、サイトとしてはほぼ何もない状態だった。
今回の目的は、特定のジャンルだけに限定されたサイトを作ることではない。ツール、実験、AI、IT、ゲーム、ガジェットなど、7okenmとして作ったものや試したものを残していける場所を作ること。
つくる。試す。気に入ったものを残す。
この短い言葉を、サイト全体の判断基準にした。
デザインも、サイトの中身にする。
見た目は企業サイトよりも、個人のアーカイブやエディトリアルなポートフォリオを意識した。
- Off White /
#f1f0eb - Black /
#111111 - 7oken Blue /
#2457ff - Inter Tight
- Noto Sans JP
- IBM Plex Mono
青は大量に使わず、ステータス、リンク、巨大な「7」など、視線を止めたい場所だけに置く。大きな英字と小さな管理番号、日本語の説明を組み合わせ、ツールページまで同じ空気感で揃えた。
サイトはコンテンツを置く箱でもあるが、情報設計、配色、文字、余白、レスポンシブ表示まで含めて、それ自体が最初の制作物でもある。
Astro + GitHub + Cloudflare.
技術構成はできるだけシンプルにした。
| 役割 | 採用したもの | 使い方 |
|---|---|---|
| サイト生成 | Astro | 静的HTMLを中心に構築 |
| 変更管理 | GitHub | ソースコードと履歴を保存 |
| 公開 | Cloudflare Pages | main へのpushから自動デプロイ |
最初から複雑なWebアプリにせず、必要になったときにページや機能を追加できる形を選んだ。ブラウザ内だけで動く小さなツールとも相性がいい。
AIと一緒にコードを作る。
実装ではAIをコード生成の相棒として使っている。
作りたいもの、必要な機能、見た目、優先順位はこちらで決める。AIに実装案とコードを出させ、実際の画面を見て違和感を伝え、修正し、ビルドと動作を確認して公開する。
単にコードを生成して終わりではない。
- 何を作るか決める
- 仕様と安全性を詰める
- コードを生成・修正する
- PCとスマートフォンで確認する
- GitHubとCloudflare Pagesで公開する
- 公開後も改善する
この一連を、7okenmの制作方法として残していく。
公開後に必要な基礎も整える。
サイト本体だけでなく、公開後に必要になる部分も少しずつ追加した。
- 独自ドメイン
7okenm.com hello@7okenm.com- favicon
- OGP画像
- canonical URL
- sitemap
- robots.txt
- 404 page
- Google Search Console
- ページごとの構造化データ
まだ完成ではない。ここからツールとNotesを増やしていくための土台ができた段階だ。
Now, make something.
サイトを作った次は、中身を作る。
実際に使えるツールを公開し、なぜ作ったか、どう判断したか、何がうまくいかなかったかをNotesに残す。完成品は SELECTED、制作過程は NOTES に分け、7okenm.comそのものも更新し続ける一つのプロジェクトとして扱っていく。