reader-first-portfolio-architecture

読者ファーストのポートフォリオアーキテクチャスキル

目的

個人ウェブサイト、ポートフォリオ、ランディングページ、README ハブを、「ブログ」「プロジェクト」「職務経歴書」のような一般的なセクションではなく、読者が得られるものを中心に設計します。

原則

訪問者がまず気にするのは、あなたにプロジェクトや記事、職務経歴書があるかどうかではありません。気になるのは、次のようなことです。

• 何を学べますか？
• 何を使えますか？
• なぜこの人を信頼できるのですか？
• どのように依頼したり、連絡したりできますか？

一般的なセクションを置き換える

一般的なセクション	読者ファーストのセクション
ブログ	実績から得たガイド
プロジェクト	使えるツール
職務経歴書	成果と実績
お問い合わせ	連絡方法
プロフィール	活動の原則／仕事以外のこと／考え方

推奨するホームページのレイアウト

1. ヒーロー
   • 実績に裏付けられた一文を示します。
   • 何をしているのか、どのような実績があるのか、読者が何を利用できるのかを説明します。
2. ガイド
   • 実際のガイドのタイトルをすぐに一覧表示します。
   • 公開済み、作成中、予定などのステータスラベルを付けます。
   • すべてを「ブログを読む」の背後に隠さないでください。
3. ツール
   • 関連性の高いツールを直接一覧表示します。
   • 利点を伝える短い説明を添えます。
   • セットアップガイドやリポジトリへのリンクを付けます。
4. 成果と実績
   • 手法が読者の望む成果につながるかどうかを判断できるよう、実績を示します。
   • 箇条書きの前に、組織についての情報を加えます。
   • 箇条書きでは、責任ではなく成果に焦点を当てます。
5. お客様の声／他の人からの評価
   • コールアウトブロックを使い、簡潔な引用を掲載します。
   • 関連する場合は、引用者と役職を記載します。
6. 連絡方法
   • どのような問題について連絡してよいのかを説明します。

レイアウトのパターン

横幅を広く使い、不要な縦方向の積み重ねを減らします。

おすすめ：

• 大分類には 2x2 のグリッドを使う
• 実績のセクションは全幅にする
• ツールやガイドにはカードを使う
• 項目が多い場合、実績は 1 列にする

避ける：

• すべてを狭い中央寄せの列に配置する
• 内容が見えない空の「もっと見る」カード
• 中核となる価値を隠すナビゲーションタブ

チェックリスト

• 実際のガイドやツールのタイトルは、クリックしなくても見えますか？
• すべてのセクションが「読者はこれを使って何ができますか？」に答えていますか？
• プロジェクトの説明は、利用できるツールとして示されていますか？
• 実績は自慢ではなく、信頼を裏付けるために使われていますか？
• 「おもちゃのようなプロジェクトではない」といった否定的な表現を避けていますか？