LOG-001BUILD / WEB

Setting up
7okenm.com

7okenmの本拠地をつくる。

ドメインだけ持っていた7okenm.comを、自分の作品・ツール・検証結果を残せる場所として設計し、公開するまでの記録。

まず、場所をつくる。

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に実装案とコードを出させ、実際の画面を見て違和感を伝え、修正し、ビルドと動作を確認して公開する。

単にコードを生成して終わりではない。

  1. 何を作るか決める
  2. 仕様と安全性を詰める
  3. コードを生成・修正する
  4. PCとスマートフォンで確認する
  5. GitHubとCloudflare Pagesで公開する
  6. 公開後も改善する

この一連を、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そのものも更新し続ける一つのプロジェクトとして扱っていく。

VIEW ALL NOTES↗