ACTIVE
J.K. Lab
Character Brand Website
J.K.教授を通して、理念・人柄・実務経験を伝えるポートフォリオサイト。 制作物と開発過程を公開し、仕事を任せる相手として判断できる情報を提供する。
STACKS
これからは「何ができるか」以上に「誰と取り組むか」が重要になると考えた。そのため、自分の理念を象徴するJ.K.教授というアイコニックなキャラクターを中心に、ポートフォリオサイトを制作した。技術や成果物に加え、仕事への考え方や人柄を伝えることを目的としている。
訪れた人が、自分の人柄、これまで経験した苦労、今後目指していることを知り、「大事な仕事を任せる相手として、この人でよいか」を判断できる材料を提供したい。そのため、実務経験や制作物とともに、課題への向き合い方、判断の理由、失敗から得た学びを公開している。
J.K.教授は、自分の理念を映し、今後の個人開発の方向性を示すキャラクターとして位置づけている。企業におけるMVV（ミッション・ビジョン・バリュー）に近い役割を持ち、何を目指し、どのような姿勢で取り組むかを表現する。
人物像は、皮肉屋で、自信家でありながら自信のなさも抱える、おっちょこちょいなチャレンジャー。こうした特徴を含めて、自分の人柄や挑戦への姿勢を伝える存在として設計した。
サイトでは立ち絵を中心にキャラクターを提示し、実務経験・制作物・開発ログへ進める構成にしている。キャラクターが表す理念と、実際の仕事や開発における行動の両方を確認できることを重視している。
- キャラクターデザインと世界観の設計
- Webサイトの情報設計とUIデザイン
- Next.js、TypeScript、SCSSによるフロントエンド実装
- PythonによるContact APIの実装
- TerraformによるAWSインフラの構築と管理
- CodeBuildを使ったテスト、ビルド、デプロイの自動化
個人で継続して管理できるよう、運用負荷を抑えた構成を採用した。通常のページはNext.jsで静的に生成し、Amazon S3とCloudFrontから配信している。常時稼働するアプリケーションサーバーの管理を不要にしている。
問い合わせ処理はAPI Gateway・Lambda・SESへ分離した。インフラはTerraformで管理し、テスト・ビルド・デプロイはCodeBuildで自動化している。フロントエンド、API、インフラ、公開までのフローを一貫して構築した。
Blogは型の付いたBlockデータとして管理している。一つの記事データから一覧・本文・サイトマップ・記事ごとのOGPを生成し、更新時の重複作業を減らした。画像やコードなど、内容に応じた表示形式をコンポーネントとして追加できる構成にしている。
今後のCMS化も検討しているが、現時点では運用コストとAIエージェントとの相性を考慮し、コンテンツをリポジトリ内で管理してSSG（静的サイト生成）で配信する構成を意図的に採用している。
UIは、訪問者が求める情報への導線を最優先に設計している。キャラクターのテーマカラー・配置・キャラクター性を維持しながら、実務経験・制作物・開発ログへ迷わず進める構成を重視した。PC・タブレット・スマートフォンでの表示を確認し、立ち絵と文字の大きさ、カード内の情報量、セクション間の余白を調整している。
発光・浮遊・フェードインなどの演出を取り入れつつ、リンクやボタンを視覚的に区別し、操作できる場所を明確にした。キーボード操作や動きを減らす設定にも対応し、演出と操作性の両立を図っている。
公開時には、静的に生成したHTMLとCloudFrontで扱うURLの違いによるページ表示の問題が発生した。また、Contact APIではCORS設定後もプリフライトリクエストがLambdaへ到達し、問い合わせを送信できない問題があった。
それぞれ、CloudFront FunctionによるURLの書き換えと、APIルーターの見直しで対応した。ローカル環境での動作確認に加え、配信設定やAPIを含む本番環境での検証が必要であることを確認した。
実務経験・制作物・開発ログを継続して更新し、取り組んだ課題、判断の根拠、得られた学びを蓄積していく。今後の個人開発についても、目的と開発過程を公開する。理念と実際の取り組みを合わせて伝え、仕事を依頼する際の判断材料を充実させる方針である。