2026.07.06（月） / 17:47

AIを活用して、このブログのようにポートフォリオサイトをシンプル設計にする（育てたくなるサイトにすることが目的）

ID: 39171
Published: 2026-07-06 17:47
Modified: 2026-07-06 19:31
Author: khiro
Categories: デフォルト
Tags: My Portfolio

現状のMy portfolioは、確かにきれいだ

https://freelance-blog.onrender.com

しかし、まず自分が更新したいと思わない

もっと直感的に、ブログのようにしたい

今思い浮かんだアイディア

昼寝した後だから、頭が冴えている

これが天才の動き方である

自尊心の足しになった

デザインはこのブログのようにする

ただ、左サイドバーは、職務経歴・技術ブログ・制作物の3点のみ

いや、それと、簡単なプロフィールと関連リンクと最近の更新履歴

それによって、モチベーションが保てる

開発のモチベーションが

なんだかんだいって、このブログの過去の記事を見ていて思うが、

プログラミングを話題にしている記事は毎日ではない

毎日やっていれば、とんでもないところまで行けるはずだ

以下の登山イメージのように

設計から実装、テストまで一気通貫で解決できる希少価値の高い技術力

これを証明するようなポートフォリオにする

そのためのシンプルデザイン

それを…

わかった

以下の手順で無双しよう

これまでのMy portfolioに関するブログ記事にタグをつける
そのタグのページから記事URLをコピー（昨日やったみたいにURLだけ抽出してもらう）
NotebookLMに読み込ませる
どんなポートフォリオのデザインにしたいかのデザインカンプをLMに作成してもらう
納得できなかったら、チャッピーにも相談する
codexにそのデザイン通りにコーディングしてもらう
気になる点があれば微調整

これでいこう

これで勝てる

手順1

抽象的なタイトルの記事に紛れてMy portfolioについて触れられていたので、それもタグをつけておいた

手順2

https://ki-hi-ro.com/tag/my-portfolio

3ページもある

でも、量は質を凌駕するという言葉を信じよう

完了

手順3

手順4

デザインの設計書ができた

ポートフォリオサイト「ラジカル・シンプル」デザイン設計仕様書

1. 設計思想：ラジカル・シンプル（引き算の美学）

マニフェスト：情報の重心を「丹田」に置く

本サイトは、過剰な装飾というノイズを削ぎ落とし、情報の機能性を最大化させる「引き算の美学」を体現する。設計の根幹には「お腹（丹田）で考える」思想を据える。頭で考えすぎた情報の拡散を抑制し、重心を低く保つことで、閲覧者に「揺るぎない実力」を直感させるインターフェースを構築する。

デザイン原則

1. クライアント利益への最短経路: 自分が学んだことの羅列（足し算）を禁じ、発注者が知りたい「何を作れるのか」という解に直結する情報のセレクトを行う。
2. 認知的迷いの排除: 制作工程の定型化とAI活用により「過度に悩む時間」をゼロにする。インターフェースも同様に、ユーザーに思考を強いない極限の明快さを追求する。
3. 自尊心の視覚化: 「完了実績」こそが信頼の唯一の根拠である。嘘のない資産データを論理的に配置し、制作者の自尊心をインターフェースの説得力へと変換する。

2. 視覚的アイデンティティ：モノトーン・スタイル

カラーパレット定義

「ki-hi-ro.com」のトーンを継承し、情報への集中を妨げない無彩色で構成する。

/* Color Palette */
--bg-primary: #FFFFFF;
--bg-secondary: #F8F9FA;
--text-main: #212529;
--text-sub: #6C757D;
--border-color: #DEE2E6;
--action-color: #000000;
--action-hover: #343A40;


UI要素の精密スタイリング

「細部へのこだわり」を実測値で定義する。ボタン等のインタラクションには物理法則（作用・反作用）を適用し、クリックに対する確かなフィードバックを設計する。

* グリッド・システム: 8px単位（8/16/24/32/48）の厳密なマージン管理。
* シャドウ（Box-shadow）: 物理的浮遊感を感じさせる極薄の定義。 box-shadow: 0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1);
* ボタン・アクション: hoverで不透明度を調整し、active（押下時）には物理的な反作用を模した transform: scale(0.98); を適用する。

3. 情報構造とナビゲーション（左サイドバー）

構成要素（優先順位順）

1. 簡易プロフィール: 「出社せず、自尊心を守り抜く」生存戦略の提示。
2. 職務経歴: 具体的な退職理由を含む、嘘のないキャリアデータ。
3. 技術ブログ: 「他人に説明できる能力」の証明。
4. 制作物: 課題解決の具現化としてのプロダクト。
5. 関連リンク・更新履歴: GitHub連携および日々のコミットメント。

ナビゲーション動作仕様

ユーザーが迷わず資産を探索できるよう、以下のコマンド形式で動作を制御する。

COMMAND: SET_SIDEBAR_POSITION = "FIXED_LEFT"
COMMAND: LOCK_NAV_VISIBLE = "TRUE"
EXECUTE: CATEGORY_JUMP [WEB_APP, PYTHON_AUTOMATION, WORDPRESS]
COMMAND: UPDATE_INDICATOR = "ACTIVE_SECTION_HIGHLIGHT"


4. コアコンテンツ仕様：「課題解決型」グリッドレイアウト

対応可能業務の分類

単なるスキルセットではなく、発注者のビジネス課題を解決する「商品」として3カテゴリを定義する。

* Webアプリ開発: FastAPI/React等を用いた、設計からデプロイまでの一気通貫実装。
* Python業務改善: CSV変換、自動化ツール、データ処理による実務効率化。
* WordPress制作: 自作テーマ開発、REST API連携による高度なカスタマイズ。

信頼を担保する「資産データ」

数値化された実績を、サイトの「背骨」として強調配置する。

* 制作物: 10件以上の完了実績
* Pythonソースコード: 30件以上の実装サンプル
* 技術ブログ: 385記事以上（総思考量：1500記事以上）

5. ページ詳細レイアウト

トップページ（ダッシュボード）

* 状態制御: is_logged_in フラグが True の場合のみ、最上部に「新規制作物登録」アクションを表示。
* 情報整理: 最新の works と blogs をセクションで厳密に分離し、情報の濁りを排除。

詳細ページ（武勇伝構造）

* レンダリング: Markdownによるテキスト主体の可読性重視レイアウト。
* コンテンツ構造: 制作物詳細には以下の「武勇伝（Heroic Story）」を必ずインポートする。
  1. 解決した課題: どのような不便を解消したか。
  2. 制作期間: どの程度のスピードで完遂したか（実測値の提示）。
  3. 使用技術: なぜその技術が最適解であったか。

6. 技術的バックエンド連携と運用仕様

WordPress自動同期システム

Googleスプレッドシートをマスターリストとし、WordPress REST APIを用いた高度な同期フローを構築する。

1. Master List: Googleスプレッドシートで同期対象のURLを厳密に管理。
2. Slug Extraction: 各URLから独自slugを抽出し、APIキーとして使用。
3. Request Security: サーバーからのBot検知を回避するため、以下のUser-Agentを偽装（Spoofing）してリクエストを送る。 User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36
4. Sync Logic: 既存記事は「更新」、新規は「登録」、WP側で削除されたものはDBから「削除」。

パフォーマンスと環境制御

* Render Starterプラン ($7/mo): 無料プランのスリープを解除。発注者のアクセス時の「待ち時間」を排除し、機会損失をゼロにする。
* Production Logic: is_production フラグを立て、本番環境では同期ボタンや管理用UIを一切非表示にする。

7. 開発マイルストーン：100日チャレンジの思想

継続的成長の可視化

本サイトは「サグラダ・ファミリア」と同様、完成することなく成長し続ける。

* GitHub Contribution Heatmap: 日々のコミット履歴をフロントエンドに配置。常に「動いている」証拠として機能させる。

量から質を生むマインドセット

「1000本のアプリ制作」という圧倒的な量を目標に掲げる。失敗や試行錯誤も含めてすべてを作品として公開し、完成のハードルを下げ、アウトプットの密度を高める。それが資本主義社会において「ありのままの自分」で生き抜くための最強の営業資産となる。

よしとしよう