令和7年に手打ちHTMLサイトを作った際の覚書

2025.03.18

個人サイト作りたい

「人に見せる」ことを前提としない環境、自分のなかで需要と供給を完結できる環境が欲しいと感じていた。他人の評価、閲覧数が可視化されることなく、一から十まで自分の中で積み上げていく形でのアウトプットをしたかった。

社会の存在を大前提としたサービスだ。自律ですが、情報を際限なく取り込もうとしてしまうので、あえてあまり見ないようにしている。

個人サイトという特異な形態

どうせなら、自分のやることの記録を1か所にまとめておきたい。ばらばらに何かを置いておくのは気持ち悪いけれど、特定のサービスに依存するということはしたくなかった。ある日突然サービス終了してデータが丸ごと吹っ飛ぶとか、ありえない話ではないと思うので。

もろもろ考えあわせ、自分にとって最も適しているのは、個人サイトという形であると考えた。

構想──という名の迷走

したかったこと

まずサイトに何を載せたいのかを洗い出す。

今回の場合 : トップページ・ブログみたく文章を載せるページ・曲を載せるページ・小説を載せるページなど。

次にそれを実現する方法を考える。

私の希望としては

  • レスポンシブである
  • スマホからもある程度更新できる
  • 細部まで好みのデザインにできる
  • カスタマイズ性が高い
  • メンテナンスが楽
  • 何かあったときに対処できる

──欲張り!

コンテンツが載せられればいいので、HTML。極力メンテナンスしやすいのがよい。
サイトいじりが好きだとはいえ、別にIT能力が高いわけではないので、あれこれ工夫して技術を導入するよりも、できるだけ自分の手が届く範囲に収めておきたかった。

成年向けのものを書くつもりもなく、凝ったプログラムを運用する/できるわけでもないため、用途的には静的サイトのホスティングサービスで事足りる。広告もつかないし一石二鳥。

デザイン(一番楽しい工程)

まずpinterestをざっと眺める。己の琴線に引っかかるデザインを都度収集しながら、コンセプトをぼんやりと決めていく。
今回は、レトロ + クラシック + タイポグラフィ + アナログ風 というようなイメージでした。

カラー

「レトロ」というイメージに沿って、若干くすみ系かつ彩度高めの色で揃えた。
クリーム地に紺色という組み合わせが好きなので、実はこの文字も限りなく黒に近い紺色になっている。

フォント

昔の英字新聞のようなタイポグラフィがやりたい + 日本語フォントのアルファベット・数字はちょっとばかり物足りない → フォント混植 ……?
いろいろと探した結果、しっぽり太ゴシックZT Chintzyという組み合わせに落ち着いた。
また、フォントを探すときは、ここらへんのサイトにお世話になった。

加えて小説はどうしても明朝体で表示させたかったので、その部分だけしっぽり明朝を使っている。

ちまちまとつくる

原型

以前作って消したサイトのデータが残っていたので、そこからコピーしてきて、不要なものを消しつつ新たに構成し直した。
<head>内の要素やらフッターやらはわりと適当。こんなサイトでSEOなんぞ気にする理由もないので、多少粗相があっても問題ないかなと。

のちのち追加した要素

リンクカード

本当は画像も入れられればいいかと思ったのだけれど、表示するためのデータを持ってくるのが何やら面倒そうなのと、あとはそもそも自分の記事にサムネイルがないので、全部まとめてリンクタイトルとサイト名だけの表示にした。クリックすると凹むのがこだわりポイント。
ちなみに自動変換などの技術はないので、こちらもすべて手打ちで写している。いつか間違えて大事故起こしそう。

カラーパレット

ヘッダーのデザインとしてカラーパレット使ったらおしゃれかなあと思い、思い付きで実装してみた。

Flexboxいまいちよく理解できていなくて、というかこういう場合にFlexboxがふさわしいのかも分からないんだけど、とりあえず見た目がどうにかなったのでよし。