What it does
できること
目的別に入口を整理
ポートフォリオ、写真、食べたもの、技術書という閲覧目的ごとに入口を分けました。ホームではすべてを説明しすぎず、初めて見る人が制作物へすぐ進める順序にしています。
- 現在地が分かる共通ナビゲーション
- ページ名ではなく得られる内容を説明
- 深いページからでも前後へ移動できる
スマートフォンを基準に設計
狭い画面では一列、広い画面では一覧性を高めるグリッドへ変化します。文字サイズ、行長、タップ領域を画面幅に合わせ、横スクロールを発生させません。
- 本文の一行を長くしすぎない
- 押せる領域は見た目より広くする
- hoverだけに情報を隠さない
Git更新から自動公開
GitHubのmainブランチを公開元とし、変更を送るとCloudflare Pagesが自動で新しいサイトを構築します。公開中の版と制作中の版をGitの履歴で管理できます。
- 変更理由が分かる単位で記録
- 公開前に型確認とビルド
- 失敗時は以前の版へ原因を切り分ける
Why I made it
きっかけと課題
写真は写真サービス、学習記録はメモ、制作物はローカルフォルダというように、情報が散らばっていました。誰かへ自分を説明するときにも、複数のURLやファイルを順番に開く必要がありました。
自分の活動を一か所へ集めるだけでなく、何を考え、どのように試行錯誤したかまで残せる『更新可能なポートフォリオ』を目標にしました。
Process
進め方・実装手順
- 01
コンテンツを棚卸し
掲載候補を目的、対象読者、更新頻度で分類し、主役をポートフォリオに決めました。
OUTPUT — サイトマップと優先順位 - 02
画面の骨格を作る
ホーム、一覧、詳細の順に情報の強弱を決め、画像がない場合でも成立するカードを設計しました。
OUTPUT — ワイヤーフレーム - 03
共通ルールを定義
色、文字、余白、角丸、影、動きを変数としてまとめ、ページごとのばらつきを減らしました。
OUTPUT — デザイントークン - 04
ルートとデータを分離
作品内容を共通データへまとめ、一覧と詳細が同じ情報源を使うようにしました。追加時の更新漏れを防ぎます。
OUTPUT — 再利用できるページ構造 - 05
公開フローを確認
型確認と本番ビルドを通した変更だけをGitHubへ送り、Cloudflare側の公開結果まで確認します。
OUTPUT — 継続的な公開手順
Problems & decisions
苦労したこと
01雰囲気と分かりやすさの両立＋
装飾を優先すると、何のサイトでどこを押せばよいか分かりにくくなりました。
最初の画面に肩書き、サイトの目的、主要な行き先を置き、装飾は情報の区切りと視線誘導に限定しました。
個性を残しながら、初見でもポートフォリオへ到達できる構成になりました。
02作品ごとの文章量がばらつく＋
短い紹介と長い研究記録が同じカード構造では読みづらくなりました。
一覧は要約を一定量にし、詳細では概要、手順、課題、再現方法へ段階的に深くなる構造にしました。
拾い読みする人と深く読む人の両方に対応できました。
03画像がない作品の見せ方＋
空の画像枠や『image』という仮表示は未完成に見え、内容への信頼も下げます。
画像の代わりにカテゴリ、技術、焦点を情報ビジュアルとして表示し、存在しないスクリーンショットを作らない方針にしました。
素材の有無に左右されず、全作品を同じ品質で紹介できます。
Reproduction guide
再現するための手順
未来の自分や、同じものを作りたい人が迷わないように、最短の再現手順を残します。
1. 誰に何を見せるかを一文にする
例として『採用担当者が3分で制作姿勢を理解し、興味のある作品を深く読めるサイト』のように定義します。
2. 一覧と詳細の役割を分ける
一覧は選択のために要約し、詳細は判断の根拠を示します。同じ長文を両方へ置かないようにします。
3. 共通データから描画する
タイトル、要約、技術、手順、課題などの項目を揃え、作品追加時はデータ一件を増やせば一覧と詳細へ反映される形にします。
4. 公開前の確認を固定する
スマートフォン幅、キーボード操作、404、画像代替文、リンク、型確認、本番ビルドをチェックリスト化します。
Reflection
振り返り
WHAT I LEARNED
- ポートフォリオのUIは作品を飾るためではなく、判断に必要な根拠へ案内するためにある
- 画像がないことを仮素材で隠すより、文章と情報設計で価値を伝える
- 更新手順が複雑なサイトは内容が古くなるため、データと表示を分離する