lud7n

みなさん、日々の業務のログはどのようにして残していますか？

「今日何をしたか」を記録することは、日々の振り返りや進捗管理において非常に重要です。しかし、蓄積されたデータが膨大になればなるほど、それらを俯瞰して自分の成長やスキルの変遷を正しく把握することは難しくなります。

私自身、この1年間個人的に日報を書き続けてきましたが、溜まったテキストデータは「点の情報」のまま、振り返られる機会を待っている状態でした。

そこで今回、この1年分のコンテキストをすべて Claude Code にインプットし、私自身のスキルスタックや経験プロジェクトを可視化する「ポートフォリオサイト」を作成してみました。

最新のAIエージェントが、1年間の泥臭い記録から何を読み取り、どのようにアウトプットを形作っていったのか。そのプロセスと、実際にやってみて得られた知見を共有します！

今回、ポートフォリオの核となるデータとして用意したのは、1年間書き溜めた業務日報です。日報には「業務内容」だけでなく、その日の「学び・気づき」や「タスクの進捗状況」、時には現場でのリアルな葛藤といった、マニュアルには残らない「生きた情報」が詰まっています。

※下記は3/5の私の日報です。一部内容をマスキングしていますが、毎日これくらいの量を記載しています。

あえて今回は「AIに細かな仕様を指示しない」という実験的なアプローチをとってみます。

まず、結合した日報データをClaude Codeが参照できるディレクトリに配置し、ターミナルから以下のプロンプトを投げました。

「これらの日報をもとに、ポートフォリオをスタイリッシュなデザインで作成してみて」

指示はこれだけです。普通であれば、セクション構成やカラーパレット、表示すべきプロジェクトの優先順位などを細かく指定するところですが、Claude Codeの理解力にすべてを委ねてみました。

【作成中の動き】

▸
文脈の解析

Claude Codeは1年分の日報を高速でスキャンし、頻出するプロジェクト名（例：DoC_Core）や、自分のロール（Figmaデザイン、フロントエンド実装など）を自動で分類・抽出していきました。
▸
スタイリッシュなUIへの落とし込み

単なる情報の羅列ではなく、Tailwind CSSを駆使したモダンなUIが提案されました。日報に記載されていた「Figma修正」や「プロジェクト管理」といった具体的なアクションが、見栄えの良いカード型レイアウトやタイムラインとして再構成されていく様は圧巻でした。
▸
継続の可視化

特筆すべきは、日報の中に含まれる「気づき」や「備考」から、その時々の筆者の熱量を汲み取り、ポートフォリオに「成長の軌跡」としてのストーリー性を付与してくれた点です。

なお、合計で4分41秒でした。速すぎますね。

完成したポートフォリオの全貌

Claude Codeが生成したサイトは、想像しているよりずっとハイクオリティでした！特に、1年分の日報という「非構造なデータ」から、私の業務の輪郭を非常に正確に描き出していた点が凄いな～と思いました。

▸
「デザイン × 開発」のハイブリッドな訴求

日報の中で頻出していた「Figma修正」「UIデザイン案の作成」といった記述を漏らさずキャッチし、サイトのトップには "Software Engineer & UI/UX Designer" という肩書きが冠されました。 4年間のデザイン専攻というバックグラウンドを、Aboutセクションで「デザインと開発、両軸でプロダクトを作る」という力強いキャッチコピーと共に構成してくれたのは、まさに文脈を読み解くAIならではの仕事です。
▸
「動的な成長」を感じさせるタイムライン

"Career" セクションでは、2025年4月の入社から現在に至るまでの歩みがタイムライン形式で自動生成されました。

4月：研修リーダーとしてのチームビルディング

8月：実務参加・DoC開発チームへ配属

10月：フルスタック実装・UIデザインも担当

12月：複数機能の並行開発

1月： AIチームへの参画とAWSインフラ調査

このように、日報の「日付」と「内容」を紐付け、単なる実績リストではなく「いつ、どのような挑戦をしたか」という成長の軌跡（ストーリー）として再構成されています。

▸技術スタックの解像度使用技術のセクションでは、React 19、MUI v7、Prisma といった実務のメインスタックだけでなく、日報の端々に登場していた TanStack Query や Zod、さらには趣味の競技プログラミングまでが適切にカテゴライズされていました。これらは私が明示的に指定したわけではなく、Claude Codeが日報の「業務内容メモ」から自律的に抽出したものです。

▸モダンで洗練された実装技術的にも、以下の機能が盛り込まれた非常に実用的なコードが出力されました。

レスポンシブ対応：モバイルで見ても崩れないレイアウト。

インタラクティブな演出：スクロールに応じたアニメーションや、マウス位置に追従するカードのグローエフェクト（背景が光ってます）。

さらなる高みを目指すための展望

今回の試みで「日報 × Claude Code」の凄まじいポテンシャルを実感しましたが、同時に「もっとこうすれば、さらに面白いものが作れそうだ」という課題も見えてきました。

▸「AIに読ませる」ことを意識した日報の構造化今回は既存の日報をそのまま投入しましたが、最初からAIが解析しやすいフォーマット（例えば、特定のタグ付けやJSONに近い構造）を意識して書くことで、データの抽出精度はさらに向上するはずです。

例：苦労したポイントには [Issue]、学んだことには [Insight] と接頭辞をつけるなど。

▸定量データの可視化（グラフ連携）現在はテキストベースの抽出がメインですが、日報内の工数記録やコミット数、タスク完了数などを抽出し、Chart.jsなどで動的なグラフを表示させれば、より「エンジニアとしての成長」を定量的に証明できるポートフォリオになります。

例：「月ごとの言語別コミット比率」や「Figma修正回数の推移」をグラフ化する。

▸
自動更新（CI/CD）パイプラインへの組み込み

今は手動でシートを結合してClaude Codeに渡していますが、これをSlackやNotionなどの日報投稿をトリガーにして、GitHub Actionsなどでポートフォリオが自動更新される仕組みを作れたら最高です。「日報を書くだけで、常に最新のポートフォリオがWebに公開されている」という状態は、エンジニアにとって究極の効率化かもしれません。
▸
マルチモーダルな情報の統合

今回、日報に添えていた「スクリーンショット」などは活用しきれませんでしたが、マルチモーダル対応を強化すれば、「当時のデザイン案とその時の思考プロセス」をセットで表示させるなど、より説得力のある実績紹介が可能になります。

おわりに

今回、1年分の「業務日報」を Claude Code に読み込ませてみて一番驚いたのは、日々の雑多なメモが、これほどまでのクオリティで「自分を表現するポートフォリオ」に供養されたことです。

一見するとただの作業ログや個人的な気づきの羅列でも、AIというフィルターを通すことで、自分でも気づけなかった「成長の文脈」が可視化される。これは、ドキュメント作成のパラダイムシフトだと感じました。

この経験から、以下のような未来がすぐそこまで来ていると確信しています。

「スキルシート」は書くものではなく、生成するものへ

半期ごとの目標設定や、転職・異動時のスキルシート作成に頭を悩ませる時間はもう不要かもしれません。日々のログさえあれば、AIが最適なフォーマッティングで実績をまとめてくれるはずです。

デザインのこだわりで、さらに化ける

今回は「スタイリッシュに」という一言でここまでのサイトができましたが、次はセクションごとのアニメーションや、より複雑なデータビジュアライゼーションを細かく指示してみるのも面白そうです。

「日報は面倒な義務」ではなく、「未来の自分を形作るためのデータ集め」。そう考えると、明日からの日報が少しだけ楽しくなりそうです。

皆さんも、お手元に眠っている「雑多なメモ」を、一度 Claude Code で供養してみてはいかがでしょうか？