サイトデザイン定点観測
サイト作りの考え方や技術構成について、これまで何度か書いてきました。
ここではサイトの見た目について、ふりかえってみようと思います。お役立ち情報とかはいつも通り特になく、ただただ思い出話をするだけです。
2020年（開設時）：とにかくこざっぱり
勤めていた会社を前年末で退職したことと、感染症禍によって予想外に自宅で過ごす時間が増えたことから、サイト作りを始めました。小説などの創作活動からはすっかり離れていたので、メインコンテンツは現サイトのthoughtsにあたるテキスト群のみ。あとはaboutやcontactだけの簡素なつくり。
Hugoの公式テーマストアから、いっさい装飾のない骨組みだけのテーマを適用して、少しだけ味付けしました。ダークモード／ライトモードの切り替え実装だけちょっと頑張ったかな。
data ディレクトリに置いたファイルから直近のものを読み取って、更新情報や近況として表示させてました。こんなふうにいろんなデータを呼び出せることに興奮して、勉強がてら毎日あちこちいじって遊んでた記憶があります。これだけコンパクトでも毎日なにかしらやることがあるあたり、やっぱりサイト運営って庭いじりに似てますね。
そういえば、サイトのフォント指定については明朝体とゴシック体の2種類のCSSを作って config.toml で切り替えられるようにしてたな。どっちにするか決めかねた末、「じゃあ簡単に切り替えられるようにしとこう」と結論づけたんです。今の自分なら迷わずゴシック体を選ぶけど、当時の気分としては明朝体のクラシックな雰囲気も捨てがたかったんですよね。
本来、他の閲覧者からすればフォントがちょこちょこ変わるサイトなんて見づらいだけなんですけど、この頃はサイトを作ってることをほとんど誰にも言わずどこにも宣伝せず、本当にただただ自分だけのためにやってたので、好き勝手いじくり倒してました。
ちなみに、ライトモード時の前景色は真っ黒やグレーではなくブルーブラックでした。万年筆が好きなので、そのインクのイメージで。これもまた地味なこだわりですね。
その後、いわゆる「記事」にするまでもない手軽なつぶやきを公開したくなっててがろぐを設置します。携帯サイト時代にやってた「リアルタイム日記」みたいで楽しくて楽しくて、引き続き毎日いじってました。
2022年：きれいめ
有機的な画像や色を使いたい気分がだんだん強まってきたので、思い切ってごっそり改装しました。
配色は手持ちの書籍から。
同シリーズのかわいい色の本も含めて素敵な配色ばかりで、ぱらぱらめくるだけでも創作意欲が湧くのでおすすめです。
このデザイン、今でもかなり気に入ってます。淡い緑色も柔らかい黄色も昔から大好きなので、見てて落ち着く。
ただ代償として、ダークモード／ライトモード切り替え機能を失いました。このデザインのダークモード版が全然イメージできなくて、撤去するしかなかったんですよね。ムキムキのデザイナーならうまく落とし込めたのかなあ。
しばらくは納得してたんですけど、やっぱり夜中に目が覚めた時とかにサイトを開くと眩しくて眩しくて……それで、スマートフォンから開くことの多いてがろぐのページだけダークモード対応のデザインに改装することにしました。
2024年：ダークモード一部復活
ここで、Flexokiのカラースキームを導入しました。
アナログのインクと紙の色合いに基づいて設計されているのがツボです。温かみがあって目に優しい。視認しやすい。読みやすい。そしてなにより可愛い！
統一感のあるきれいな配色にできるという意味では配色本も同じなんですけど、Flexokiはスクリーンでの読み書き特化で、どの色をどう使ったとしても一定以上の読みやすさが担保されるのがすごく良かったです。文字色や背景色などの割り当て例が公式サイトに載ってるから、色選びに迷うこともないし。
個人で使ってるScrapboxもUserCSSで全部Flexoki配色に変えました。好きすぎて。
2025年：再びさっぱり
使えば使うほどFlexokiの良さを実感して、てがろぐ以外のページにも適用しました。この記事を書いている2026年6月時点のデザインとほぼ同じ。これで、サイト全体にダークモードが復活したことになります。
同人活動について書くセクション（上部メニューの『dojin』）も新設。なんとなく、就活・転職活動時にポートフォリオを作ってた時のこととかを思い出しました。制作実績として書ける物があるの、素直に嬉しい。
2026年：トーンを保ちつつ拡充
日記を設置しました（上部メニューの『diary』）。これは厳密にはコンテンツの話なんですけど、このセクションのデザインが気に入っているので書かせてください。カレンダー風！
自分は日記にタイトルつけない派なので、こういう日付だけのレイアウトで事足りるんですよね。しかも、これだとスマートフォンの小さい画面でもファーストビューにたくさん記事が並ぶので嬉しい（わたしが）。実装はだいたいClaudeがやってくれました。
また、観たものや読んだものについて書くセクションも作りました。個人的になにかとログを取るのが好きなので、眺めるだけでも楽しい。
- 本や映画などの種別ごとにアイコンがつく
- 鑑賞日順に並ぶ
- 複数回観た（読んだ）場合は別カウントになる
……みたいな感じ。暇なときにfilmarksやTwitterから鑑賞日などを掘り返して、少しずつ埋めていってるところです。ジブリ作品とかの「小さい頃から繰り返し観ててもはや鑑賞日とか覚えてるわけがない系」も破綻しないようにテンプレートを組んであります👍
その他、これまでのサイトデザイン全体を通して
色について
サイトをダークモードに対応させる場合、閲覧者の端末の設定に合わせれば簡単なんですけど、自分のサイトでは違う方針をとっています。
- 閲覧者の端末の設定にかかわらず、基本的にはライトモードで表示
- サイトメニューのボタンで切り替えたら、以降はその設定を踏襲
あくまでも表玄関はライトモード、みたいな位置づけです。
あともう1つ。これまでもこれからも、どれだけ改装するとしても「リンクテキストは青色」は貫くと思います。なんだかんだやっぱり直感的で分かりやすいし、完全に体感なんですけどサイトが軽く感じる気もするので。リンクが青色→ブラウザのデフォルト設定に近い→あんまりいじってなくてコードが軽量……みたいな連想に繋がるのかな？ なんかこれ前にもどこかで書いた気がするな。
フォントについて
すべての文字種のフォントをGoogle Fontsなどから細かく指定してた時期もあったんですが、読みやすさを重視するならデバイスやOSごとのデフォルトに勝るものはないよなあと感じて、やめました。
ただ、欧文だけは引き続きwebフォントを使ってます。ちょっと温かみが欲しくて。
「j」と「4」が好みだったので採用しました。細身ですんなりしたjとか、三角にならずに上端が離れてる4とか好きなんですよね。カワイイ。
こういう、温かみがあってちょっと可愛い系のサンセリフ体が好きなんだよな〜なんかどっかにまとまってないのかな〜と以前調べたところ、「ヒューマニスト・サンセリフ」という分類がちゃんとあるらしいと知りました。日頃から「自分ごときが思いつくことは絶対とっくに他の人が思いついてる」と思って生きてるんですけど、まさにそれが証明された感があって興奮しました（？）。
ちなみにサイト名「頬杖書房」のロゴは、一目惚れして買ったフォントをSVG化して使っています。
期間限定デザイン
ただいま6月はプライド月間ということで、ページの上下にプライドレインボーカラーを表示させています。これ、めちゃくちゃ気に入ってます！！✌️🏳️🌈🏳️⚧️ 実装のしかたについては別途まとめる予定です。
以上です
基本的にはそのときの気分に合わせて、自分のやりたいようにデザインをいじってきたんですが、こうして振り返ってみるとそれなりになんらかの価値観が通底している気がしますね。全体としては落ち着いたトーンで、地味なとこだけ妙に凝る、みたいな感じ。面白いから今後も定点観測していこうかな。
これからも淡々と楽しんでサイトを続けていこうと思います◎