クラウド / システム
このポートフォリオは、完成して終わりのパンフレットではありません。観察とフィードバックをもとに、範囲を絞った改善を重ねる、小さなエンジニアリングシステムです。
ここでは、何を変え、なぜ変えたのか、どんな制約があったのかを記録します。細かな文言修正や日常的な更新ではなく、設計上の判断や目に見える改善を取り上げます。
ページを分け、アプリの紹介とナビゲーションを改善
メインメニューから個別ページを開く構成に変更しました。元の銀河背景と霧の演出はそのままに、既定の言語も英語を維持しています。
- プロジェクト欄で自作アプリKraftwerkを詳しく紹介し、入力画面と実際のトレーニングの推移を掲載しました。
- Kraftwerkを含め、固定フッターから著作権表記、更新履歴、RSS、プライバシーにアクセスできます。
- モバイルメニューの操作部品をメニュー内に収め、画面が低い場合もスクロールできるようにしました。
- ページの種類と4言語を横断し、フッターの位置とリンクを確認する再利用可能なブラウザーテストを追加しました。
知識を、使える形に
記事アーカイブに、プライバシーに配慮したアクセス分析の仕組みを紹介する記事を追加しました。静的なRSS 2.0フィードにより、CMSや動的な配信エンドポイントを追加せず、すべての記事を購読できます。
- 「A Static Site with a Pulse」を公開
- 記事の構造化データと専用シェア画像を追加
- すべての記事を含むRSSフィードを生成
- ホームとフッターからRSSを見つけやすく
動きは、控えめに
銀河の背景に、ときどき流れ星が現れるようにしました。見え方、軌道、頻度を何度か調整し、約1分に1回、自然に一方向へ流れる演出に落ち着きました。
- 尾の向きを飛行方向に合わせて調整
- 2種類の軌道を、控えめな間隔で交互に表示
- CSSだけで実装
- 「視差効果を減らす」設定では装飾アニメーションを停止
つながりやすく
連絡先のセクションを、サイト全体と同じガラス調の面、銀河、シアンの色合いで作り直しました。直接連絡する方法とSNSのプロフィールを、わかりやすく操作しやすいリンクにまとめています。
- メール、Instagram、Threadsを追加
- 人物の構造化データにSNSプロフィールを追加
- ネットワークをイメージした連絡先アイコンを導入
- モバイル表示とリンクの優先順位を改善
Kraftwerk、62回目のセッションに到達
非公開のトレーニング記録に最新セッションと種目別の数値を取り込みました。セッション数と日付をデータソースに連動させ、次回以降の取り込みでトップの概要が古いまま残らないようにしました。
- トレーニングのセッション62を取り込み
- 種目別のトレーニング量と回数の記録を更新
- セッション数と更新日をデータから表示
- PCとスマートフォンでトレーニング画面を確認
銀河を、サイト全体に
天の川の雰囲気を、最初の画面だけでなくポートフォリオ全体に広げました。不透明な長方形の背景を取り除き、背景を隠さずに読みやすさを保てるよう、コンテンツパネルのコントラストを調整しています。
- 動く銀河背景をすべてのセクションへ展開
- 背景の継ぎ目と長方形の境界を解消
- トップの写真を広げ、右端を自然な見え方に
- パフォーマンスと「視差効果を減らす」設定への対応を維持
WordPressから、堅牢な静的サイトへ
WordPressの記事や資料を引き継ぎつつ、クラウドネイティブな静的ポートフォリオとして作り直しました。明示的なファイル構成、再現可能なインフラ、攻撃対象領域の縮小を重視しています。
- CloudFront OACの背後にある非公開S3へ配信基盤を移行
- 記事、メディア、資格証明書、検索用メタデータを継承
- CloudWatchアクセスログと匿名の公開アクセス集計を追加
- バケットのバージョニング、レプリケーション、復旧手順を整備
- 外部リポジトリを使わず、ローカルGit履歴を整備
次は何を？
新しい機能、まとまった記事、設計上の改善が加わったときに更新します。リリース数を増やすことより、考えながら改善を重ねた過程を残すことが目的です。