ひさしぶりに自分のウェブサイトを作ったときに考えたこと

調べたいことをひたすら検索する日々。知の共有という巨人の肩に乗って楽させていただいています。受け取るだけではなく、共有する場所がほしくなりました。文章を置く場所といえば今ならMediumなのかな。いろいろ考えていたら作りたくなりました。

インターネットアーカイブで古いウェブサイトを巡りつつ作成。楽しい楽しい。インターネットって楽しいものだった…！という気持ち。初心わするべからず。古いインターネットっぽくて原始的な感じにしたい…！と思いました。青と紫のリンク。こんにちは、世界。ようこそインターネットへ。ようこそ私のホームページへで検索したら、そこにはインターネットが残っていました。

ここから先は作ったときのメモです。

全体のテーマ

あたまの中にあったキーワードです。インターネット。原始的。かるい。見やすい。プライバシー。

日付表記

世界中で日付表記形式が統一されたらいいのにな、といつも思います。ハイフン区切り表記の「YYYY-MM-DD」は国際規格で可読性があると思っています。macOSのVoiceOverは年月日で読み上げてくれます。iOSのVoiceOverは数字を読み上げるのみでした。

ダークモード

macOSやiOSにダークモードが登場したときは嬉しかったです。夜はまぶしいのが苦手なので。自分で作って使っているものは大体ダークモード対応してきました。このウェブサイトもダークモード対応しました。背景に対して文字の明度が高いと膨張しているように錯覚するためコントラスト比を下げました。

ホーム画面のSVG

文字だけのウェブサイトにするつもりでしたが、書籍でいうカバーみたいなものがほしくなって作成しました。ほぼcircleとrectで作りました。月はmaskを使えばcircleだけで表現できるのですがコードをシンプルにしたかったのでパス化しました。ダークモード時に表示を変化させるのが面白そうなのでやってみました。モチーフは自分のデスクトップ環境です。SVGの楽しさと便利さに気づきました。

色の管理

ソフトウェアを開発するときみたいに色を管理したかったのですが、それはCSSのカスタムプロパティでできました。hsl()をはじめて使ってみて便利だと感じました。色相角度（H）、彩度（S）、明度（L）の組み合わせで色を指定するので、黒に少し青を混ぜたいときhsl(240, 4%, 4%)という感じに書けて便利でした。

パーマリンク

投稿のパーマリンクをどうするか悩みました。クールなURIは変わらないという有名な言葉があります。その言葉の背景には当時のネットサーフィン環境などが影響しているように思いますが、いまでもURIは変わりにくいものが良いと思います。

blogという単語の歴史は短いため、使い勝手がよさそうなpostsにしました。最初は/posts/2020/02/20112233/のように日時を含んだ形式で考えていました。タイトルは含みません。なぜなら毎回タイトルを考えたくなかったからです。英語の記事はタイトルから自動的にスラッグを作って/posts/2020/02/foo-barのようなパーマリンクにしているケースが多く見られます。日本語の記事を書く場合はスラッグを考える作業が増えることになり、タイプミスの機会も増えます。

最終的には/posts/1/という連番形式にしました。日時情報をソースファイルの変数だけで管理できて、ファイル名は連番を振ればおわり。パーマリンクに該当するソースファイルを見つけるのも楽です。

デメリットがいくつか思いつきます。まず、どんな内容のページか予想できません。しかし、最近はクライアント側でOGPが利用されたり、スクレイピングされたりするケースが増えてきました。長いリンクが勝手に短縮されることもありますし、あまり気にしなくてもいいか、と思いました。あとは検索エンジンには向いてないかもしれません。検索エンジンの方向を向いて作っていないので気にしなくてもいいか、と思いました。

ナビゲーション

メニューは分かりやすさを求めて日本語表記にしました。Aboutは「はじめに」Postsは「投稿」としました。インターネット初期から利用されているであろう「About」というメニュー名は便利すぎです。英語圏の方がうらやましいです。

「About」を、どんな言葉に置きかえるか悩みました。「ウェブサイトについて」は長い…。iOSのタブナビゲーションを参考にして、4文字程度までにしよう、と思いました。

よくよく考えてみると「About」に書く内容って、技術系書籍の「はじめに」と同じことに気づきました。

アクセシビリティ

どのようなウェブサイトにも左上にブランドロゴがあります。最近はインラインSVGを使っているパターンが多いように感じます。世界的な大手サービスのウェブサイトを見ていると、つぎのようなパターンがありました。

戦乱の世でした。どうするのがよいか悩みました。悩んだ末、画像にaria-labelでウェブサイトの名前をつけました。aria-hiddenにすると、そこには画像が存在していないことになります。ロゴはひとつの箇所でしか使用しておらず、そこに画像が存在することで発生するかもしれないコミュニケーションを残す方向で考えました。

ホームのカバー画像

SVGに含まれるテキストはパス化していないためマシンリーダブルです。テキストの内容は気分で変えるかもしれません。ターミナルウインドウに表示されているテキストである、という文脈がないと、テキストだけ読み上げられても困る気がしました。<svg>の<title>と<desc>は、<img>のaltに対して、どういう位置付けのものか、よく分かりませんでした。

リスト要素のロール

リスト要素のlist-styleをnoneにすると、Safariではlistロールが外されることを知りました。role="list"を加えて意味付けし直しました。穴を掘って、穴を埋めている気がしました。CSS側で完結させる場合は、擬似要素::beforeでゼロ幅スペースを使うハックがあるみたいです。

リンクの下線

色覚に頼らなくてもリンクであることが分かるように、下線を使おうと思いました。ハンブルク大学の研究で示唆されているように、リンクの下線が読みやすさを低下させる可能性を考えました。控えめな下線にしてみました。下線を細くし、文字から離して、コントラストを抑えました。ちょっとコントラスト弱くしすぎたかも…。

結局、自分自身が一番多く触れることになるので、自分の好きなように作りました。フォントについて書きたいことがあるのですが、長くなってしまったので別の投稿にしようと思います。