Enludus
お問い合わせ

サイトを日本語にして、ポートフォリオとブログを置いた

enludus.com に日本語版、個人のポートフォリオ、そしてこのブログを追加しました。何をどう作ったかの記録です。

Enludus のサイトは、これまで英語だけでした。プロダクトの多くは日本語で使うものなのに、入口が英語だけなのはちぐはぐだったので、今回いくつかまとめて手を入れました。

何が変わったか

  • 日本語版を追加しました。 /ja が日本語、/ が英語です。右上の「JA / EN」でいつでも切り替えられ、選んだ言語は次回も覚えています。
  • ポートフォリオを置きました。 /portfolio に、つくったもの・できること・経歴をまとめています。
  • このブログを始めました。 プロダクトを作る中で考えたことや、学んだことを書いていきます。

作り方のメモ

トップページは Vite + React のままで、日本語版は同じコンポーネントに日本語の文言を流し込んでいます。文言は 1 つのファイルにまとめ、英語と日本語で項目がずれると型チェックで気づけるようにしました。

ポートフォリオとブログは、JavaScript をほとんど使わない静的な HTML として、ビルドのときに書き出しています。記事は Markdown で書いて content/blog/ に置くだけです。

md
---
title: 記事のタイトル
date: 2026-10-19
description: 一覧や検索結果に出る 1〜2 文の説明
tags: [タグ1, タグ2]
---

ここから本文。

見た目について

デザインは、毎日 1 つずつ美しいサイトをソースから解剖している学習ノート「LP Anatomy」でまとめた基準に沿って組みました。ポートフォリオには「地の色と墨の 2 色、差し色は 1 点だけ」「文字は巨大と極小の 2 極」という型を使っています。

決めたこと 値
色 地 #ebe7e0 と墨 #14171c、差し色はオレンジの点だけ
動き 常に動くのは技術名の帯 1 つ。登場の動きは 1 回きり
時間 0.3 秒 / 0.6 秒 / 1.4 秒の 3 段階
軽さ 日本語の Web フォントは読み込まず、端末のフォントを使う

動きを減らす設定にしている端末や、データセーバーがオンの端末では、動きはすべて止まります。

これから

プロダクトの設計で迷ったところや、うまくいかなかったことも含めて、残しておきたいことを書いていくつもりです。