ファンサイトのリメイク中

サイトの要素選定

イメージを膨らませてもらうことを目標とした、読み物がメインのサイト。
雰囲気作りと読みやすさ、メンテナンス性を重視する。

レイアウトの初期化

html5doctor.cssを用いた。1からデザイン設計することで全体を把握する。
またデバッグ用にCSSで全ての要素にoutlineを振った。

フォントサイズ決定・レイアウト単位に使用

レスポンシブ対応として、rootにサイズ指定をして、レイアウトを含めremで調整する。
スマホを基本として設計。高解像度であるスマホ環境では12px程度でも詰め込むことができたが、少々読みにくいことと他サイトからの乖離が大きいことから、14pxを基本とする。
明解さと調整性から、10px + 1vw に設定。400CSSpxの端末では14pxとなる。
また、PCは試行のもと16pxを上限とし、逆算的にmediaqueryを600pxと置いた。
ウェイトを太めにすることで可読性を保ちつつ小さくかわいく。
参考として、読ませるサイトであるnoteなどはスマホ16px、PC18pxである。

検証環境の整備

開発はVSCodeを用いる。Nuxtをフレームワークとして静的ファイル出力をする予定だが、当初はカンプとしてのHTMLでデザインしながら決定していく。

まず.mdファイルの英語と日本語の間に勝手に半角スペースを入れやがるPrettierを処理。設定からdisable languageにmarkdownを追加。

そしてLiveServerを導入し、ホットリロードを可能に。更新すると自動で反映してくれるため試行錯誤には重宝。LocalIPを使用することで同じWifiネットワークのデバイスからもアクセスできるようになったので、PCとPixel3aのビューを確保。

Testディレクトリを作成し、HTMLテンプレートとざっくりとした長文を用意して開始。
途中でこの文書(.md)を読み込み表示するスクリプトを追加、テスト文章とした。

フォント策定

親しみと読みやすさから、丸ゴシック系を想定。自身の文体とも合っている。
格調もある丸明オールドや、端正さもある丸フォークなどが理想だが、そのためだけにウェブフォントの契約をするつもりはない。そもそもあるのか？

Google Fontsには、2021年にはFontworksの8書体が提供されており非常に魅力的であったが、サイトコンセプトに合うものはMOTOYAのKosugi MaruとM+FontsProjectのRounded 1cだけであった。
以前はM+を採用していたが、PCで縮小するがっさがさで読みにくくなるという欠点があり、今回は検証を通して安定していたKosugi Maruとした。
M+はウェイトが豊富であり、RegularしかないKosugiよりも表現力に優れるものの、複数ウェイトの用意は通信を圧迫する。1ウェイトの通信量はKosugiの方が僅かに小さかったが、400kbほどと無視できないサイズであった。
不要であればウェブフォントの廃止も考慮すること。ただし、当サイトはブランドサイトに近い扱いであり、パフォーマンスよりデザインの優先度は高い。

等幅なのがやや読みやすさ・見た目にマイナス。しかしウェブフォントにCSS自動カーニングは効かなかった。
句読点に違和感が顕著だが、JSで検出してのletter-spacingはちょっと組みたくない。

しかし文中の英字が詰まって見える。英ウェブフォントを組み合わせてみたところ、懐が広く端正なMontserratというフォントが上手くはまった。クセもありつつ丸い。ウェイトは揃っていたがKosugiに合わせるため500を指定して読み込み。PCスマホともに良好。

文章周りのスペース設定

line-heightは1.33、文ごとのマージンは0.8rem、見出し上に1.5remの空白。しっくりきた。段落や字下げは未実装、要検討。
見出しはh1h2h3の順で1.6, 1.4, 1.2remが収まりがよく、そこに装飾を加えた。目立たせながら1文字目あるいは2文字目を縦で揃えることを意識した。

色設計

モバ画像からカラーピックし、可読性や可用性の調整を加えベースカラー(明るい赤茶)、アクセントカラー(緑がかったブルー)、サブカラー(やや暗い金)をセット。合わせてフォントカラーを黒から#333に変更し優しい風合いに。
基本的な運用はベース70%とアクセント5%で、残りを文字色という割合。
ナイトモード的な色セットを作り、ベース(紺～黒)70%とサブカラー5%、残りを文字#cccとする計画。これはコンテンツ設計に関わる部分で、その置き換えと調整は後に行う。

ヒーローエリア

画面を50%程度使って固定のエリアを作る。そこでデモや画像を載せられるように。

背景にキャラ画像

ヒーローから引き続きでfilter:blur()をかけて文章の裏に。どのページにいるかとリッチさを表す。