TECHNICAL ARTICLE
多言語静的ポートフォリオの設計
ビルド工程を増やさず、情報量、多言語、公開データ、障害時表示を管理するための設計。
データと表示を分ける
プロジェクトと翻訳をJavaScriptデータとして管理し、カードのHTMLを共通レンダラーで生成します。内容追加時の重複編集を減らせます。
Publicデータだけを取得する
GitHub APIには認証トークンを埋め込まず、Publicリポジトリと公開イベントだけを問い合わせます。Privateリポジトリは取得対象にしません。
失敗を前提にする
APIが失敗してもセクションを消さず、保存済みの案内またはGitHubプロフィールへの導線を表示します。
SEOをHTMLに残す
title、description、canonical、OGP、JSON-LD、sitemapは静的HTMLとXMLに持たせ、JavaScriptが動かない環境でも主要情報を伝えます。
トップを入口にする
トップでは要約だけを見せ、記事からケーススタディ、プロジェクト詳細、商用相談へ段階的に案内します。
アクセシビリティを後付けにしない
見出し順、skip link、ボタンのタップ領域、キーボード操作、画像の代替テキスト、言語選択を初期構造に含めます。
公開前の検査
翻訳キーの欠落、内部リンク、JavaScript構文、画像サイズ、API失敗時表示を検査します。時間とともに変わる学歴情報は一か所から更新できるよう分離します。