Webサイトをリニューアルしました - 背景と設計
esplo.netのWebサイトをリニューアルしました。
式年遷宮の如く定期的に移植していますが、今回のテーマは「自前デザイン」「多言語対応」「移植性」です。
技術的詳細と実装は次回の記事に回し、まずは背景とこれらのテーマに関する詳細を見ていきます。
背景
一般にリニューアルは開発者の気分で行われることが多いですが、今回もご多分に漏れず気が向いたため実施されました。とはいえ一応解決したい課題があったので、移植前の状況にあった課題をまとめて紹介します。
記事や作ったものが散らばっている
ブログ記事はblog.esplo.netに置いていましたが、試しにZenn、note、dev.toを使ってみた結果、インターネット上のさまざまな場所に散らばってしまいました。昔に使っていたQiitaも残っています。また、作成したものはWorksのページに入れていましたが、ブログ記事と分離していたため、アクセスしにくい場所にありました。
今回のリニューアルでは一箇所に記事をまとめて視認性を高めつつ、一括管理して自分が何を書いたのかを忘れないようにしています[1]。
なぜプラットフォームを使わないのか
第一に、記事をMarkdownで記述し、かつ自分で管理したいという意図があります。これはVS Codeなどの優れたローカルエディタを使いたいこと、かつ一括変更したいことが理由です。
日本語校正にtextlintなどのツールが使えるのもそうですし、後述する多言語対応でも原稿がmarkdownであるメリットは大きいです。移植性も高いので、今回のような変化が必要な場合にも対応しやすいです。
現在主流のブログプラットフォームでは、記事を手元で管理できるものは多くありません。
第二に、多言語対応をしてみたかったという点があります。
WordPress製のブログサイトでは、ページ内での言語切り替え機能を持っていることが多いです。通常のブログプラットフォームでは、一言語のみに対応しており、必要な場合はアカウントごとに言語を分ける、などで対応が必要です。より簡便な管理と切り替えを実現したい、と悩んだ方もいるのではないでしょうか。
第三に、自由度の問題があります。
例えばZennは機能もデザインも良いのですが、基本的に技術的な記事のみ投稿が可能です[2]。他にも画像のキャプションを付ける機能、シリーズでまとめる機能などは、どれかのプラットフォームにあり一方にはない、あちらを立てればこちらが立たず状態でした。
これらの気になる点があったので、せっかくなのでブログシステムから構築することにしました。
自前デザイン
第一のテーマです。今回のリニューアルにあたり、悩んだのがサイトデザインです。テンプレートを使わず自分で作ってみようと考えたとき、タイポグラフィからレイアウトまで全てを考えないといけません。しょうがないので、これまでに読んだ本の知識を思い出しつつ組み上げることにしました。
なお、旧サイトはHugoのNotepadiumテーマそのままの画面でした。シンプルで見やすいテーマなので、技術ブログに適しています。しかし少々シンプルすぎて物足りなくなってきたので、印象を変えたいと思っていました。
旧サイトの画面 - Top
旧サイトの画面 - 記事詳細
グラウンドデザイン
まずは、どのような印象にしたいかを考えます。
メインコンテンツは技術ブログなので、逆張りして技術ブログっぽくない要素をアクセントとして加えることにします。いくつかの技術ブログを見た限り、対極にあるのは「明るい」「かわいい」「美味しい」あたりかと思いました[3]。食品紹介のサイトではよく見かけるので、お菓子っぽい要素をアクセントとして入れると印象を変えられそうです。簡素さを減らすという課題にも対応しています。
一方、文字主体のブログサイトなので読みやすさを保つ必要があります。そのため、シンプルなレイアウト、かつ背景と文字に十分なコントラストを維持しつつ、印象を変えることが要求されます。これらを意識しつつ、個別の要素を決めてゆきます。
配色
お菓子っぽい印象を持たせるため、背景色にスポンジケーキのようなクリーム色（#FFFCF0）、ヘッダーにストロベリーソースのようなピンク色（#FFC7ED）を置くことにしました。
使う色はペールトーンに寄せて高明度低彩度とし、明るさとかわいさを付与します。アクセントカラーとしてはベースカラーの補色になる青色（#466DE2）を使い、彩度高めの色で浮き上がらせています。また、利用する色は3色だけに絞りシンプルさを増しています[4]。
カラーパレット
使う部分としては、ベースカラーは背景色、メインカラーはヘッダーや一部の枠線、アクセントカラーは「もっと見る」など視線を誘導したい部分に使っています。なお、ベースカラーと本文色とのコントラスト比は10あり良好です。日付などおまけの要素で使われている薄い文字に対しても4.7あり、最低限の基準を満たしています[5]。
フォント
特殊なフォントは印象を変えるのに有用ですが、文字が多い部分に使うと読みにくくなってしまいます。そのため、ブログ記事の本文など、文字が多い部分はデフォルトのフォントを使いました。ブラウザの標準フォントは有用です。
ヘッダーやフッターなど、文字が少なく視線誘導したい部分にZEN丸ゴシックを適用しています。丸みのある、かわいく読みやすいフォントで、印象を和らげるのに役立ちます。
記事の表示
作品とブログ記事のサムネイル表示はカード状にしました。区切りに線を使うと強すぎ、一方で使わないと分かりにくかったため、間を取って立体的に浮き出るようにしています。実際は影を付けているだけですが、影によって影のない部分が浮き上がって見えるというのは、対比の力を感じますね。
ホーム画面で作品と記事は区別をしたかったので、下図のように見た目を変えていますが、中身は同じです。最も視線を誘導したいタイトル部分は濃い黒かつ太字にし、次に重要な概要は少し薄く、タグや日付は薄くしています。タグの囲みにはアクセントとしてメインカラーを薄く置いています。また、フチが尖っていると危ないので丸めています。
作品カード
記事カード
記事画面
今ご覧のこの画面も、サムネイルカードと同様のヘッダー情報表示としています。
本文は、読みやすいZennの画面を参考にします。また機能面では、Zennのようなstickyな目次[6]を添えた、Zenn的な本文表示としています。というのも、Zennのライブラリを使ってmarkdownをHTMLに変換しているためです。
次の記事、前の記事はよくあるので付けています。サムネイルカードを流用していますが、デカいので画像や概要は削っても良いかもと悩み中です。
ヘッダー・フッター
今のところ配置すべき情報が少ないので、メインカラーをベタ塗りしてデザイン要素として活用しています。
中身としては、右上の言語スイッチ、右下のSNSリンクなど、直接アクセスしたいニーズのありそうな要素を置いています。アイコンを多用し、文字を減らすことでシンプルさを保っています。
レスポンシブ対応
スマホの画面に合わせて作りました。ほぼ全てがflexまたはgridでできているので、画面サイズが変わっても妙なことにはなりにくいです。目次や横に長い要素は、スクリーンサイズで分岐しています。
なお、本文の幅は固定せず自由にしています。記事サイトでは固定していることが多く、横に長過ぎると読みにくくなること、デザインしやすいことが考慮されていると思われます。一方で大きいディスプレイで画面を広げても縦に長い記事になってしまう、という点で使いにくさもあります。今回は横長でも意外と読めるのではという仮定のもと、横幅は自由にしました。
アニメーション
現在は、ヘッダーのソースが垂れてくる部分に使っています。ほとんど使えていませんが、適切に活用したいと考え中です。
多言語対応
第二のテーマです。旧サイトは日本語のみの提供でしたが、今回は全要素を多言語対応しています。
コンテンツの翻訳
対応対象はユーザー層を鑑みて、日本語と英語のみにしました。
多言語対応を実現する方法はいくつかあります。Google翻訳をページ全体にかける方法が個人サイトでは広く利用されており、楽ちんです。一方、昨今のLLMの進歩により、高品質な翻訳が安価に行えるようになりました。
そのため今回は日本語で書いた原稿のMarkdownファイルを、丸ごとPerplexity API（llama-3.1-sonar-large-128k-online)に渡して英語に翻訳する方法を取りました。出来上がった英語版Markdownファイルを、日本語版と同様に表示して多言語対応を実現しています。
一方で翻訳品質は安定しておらず、指示が守られずmarkdown構文が壊れたり、勝手に要約されたり、途中で翻訳が切れたりします。プロンプトを工夫するとどうにかなるかもしれませんが、新しいモデルが出てくると信じて今は目に付いたものを投げ直しています。なお、GPT-4oではこれらの問題は見当たりませんでした。凄い。
URLの選択肢
表示言語の情報（ロケール）をどう扱うかも様々な選択肢があります。
サブドメイン、パス、クエリパラメーター、クッキーなど色々ありますが、今回はパスに含めて表現し、状態をブラウザ側で保持することにしました。コンテンツを完全に分離できることと、切り替えが比較的容易なためです。
canonical URLを開くと、自動でロケールを判断しリダイレクトしつつ、ヘッダーで切り替えを可能にしています。
移植性
作品記事およびブログ記事は、markdownファイルで記述しています。Hugoを使ったことがある方は分かりやすいと思います。これにより、次の利点が得られます。
高い移植性
他のサイトに持っていきたい場合も、markdownの内容をコピペすれば完了です。また、標準化されている記法なので、他の形式へ変換することも容易です。
ブログプラットフォームを使ったことがある方は、画像が移植できず面倒な思いをした方も多いのではないでしょうか。小規模なサイトであれば記事中の画像を全てCloudinary経由で配信すれば、コピペで完結させることができます。
文章校正の容易さ
ほぼ平文かつ広く知られている記述なので、様々なlinterを使うことができます。textlintをはじめとして、記事を書く際に役立つツールの力を簡単に借りることができます。
さらに、多言語対応でみたように、LLMからの出力をそのまま使えることも強みです。「markdown形式で返してね！」と伝えると、だいたい正しいmarkdownを吐くので、翻訳や文章校正の結果をコピペするだけでdeployできます。
管理の容易さ
複数の記事をまとめて置換することや、LLMからの結果を適用して気に入らなければ一部戻す、ということも簡単です。なにせMarkdownとGitとVS Codeが使えるので、普通のソースコードを扱う感覚で処理できます。エンジニアにとっては全く学習コスト無く強力なツールが使えるので、タイタンの肩に乗って苦労なく管理ができます。
拡張性
Markdown自体の表現力は一般的なブログプラットフォームより劣りますが、普通の記事を書く分には困りません。また、どうしても困る所はparserをいじってどうにかできます。markdown parserやプラグインは世の中に色々あるので、好きなものを使うことができます[7]。
やりすぎると移植性が失われるので乱用はできないですが、Escape Hatchがあり色々できるのは楽しいところです。
まとめ
ここまでで、サイトリニューアルに関する背景とテーマを見てゆきました。次回の記事では機能・実装の詳細・今後の課題について触れる予定です。
一部移植中 ↩︎
例外的に、はてなブログでは公式テーマの寿司ゆき、Popcorn by カタノトモコがあるので、かわいいデザインの技術ブログも見かけます ↩︎
沢山使うのは難しいので。なお、無彩色の文字が沢山あるので、これもパレットに乗せるべきなのか謎です ↩︎
w3.orgによると、最低限は4.5、7以上で優れているとされています。 https://www.w3.org/WAI/WCAG22/quickref/?versions=2.1#contrast-minimum ↩︎
Zennの目次はもっと綺麗ですが、真似するのが大変そうなので諦めました ↩︎
なお、Zennのライブラリはmarkdown-itを利用しています。 ↩︎
