05個人サイト・企画・デザイン・実装
KENLIN.CC
技術、写真、思考をひとつの編集体として束ねるウェブサイト。AI と対話しながら設計を見直した。
2026
DESIGN PUBLICATION
01
このサイト自体も、ひとつの作品。
写真で培った感覚を、自分のサイトにも活かしたい。
写真、技術プロジェクト、自己紹介を、ひとつの場所できちんと見せたい。このサイトは作品を置くだけの場所ではなく、サイト自体も自分の作品だと考えている。
テンプレートの文章と画像を差し替えるだけにはしたくなかった。企画、情報構成、見た目、実装、公開まで自分で決め、AI と一緒に形にした。
写真で培った感覚を、自分のサイトにも活かしたい。
写真
技術
自己紹介
このサイト自体も、ひとつの作品。
02
内容を整理してから、サイトの構成を決める。
JP・中文・EN で、同じ導線を使う。
まず、作品、日誌、写真、自己紹介、連絡先を整理し、それぞれに分かりやすい入口を用意した。日本語は /、中国語は /zh、英語は /en に置き、言語を切り替えても同じページを読み続けられるようにした。
構成を決める段階で、AI は Spring Boot と Vue でフロントとバックを分ける案を出した。Next.js と Vercel の関係を理解してから、内容が中心のこのサイトには Next.js が合うと判断した。提案はそのまま採用せず、自分で理由を確認して選んだ。
ROUTE SYSTEM
JP / · 中文 /zh · EN /enHome
Work
Journal
Photography
About
Contact
三つの言語JP / · 中文 /zh · EN /en
JP /・中文 /zh・EN /en。三言語に共通する六つの入口。
03
写真、書体、細い線で、自分らしい見た目に。
雑誌のような雰囲気と、読みやすさを両立する。
最初に AI が出した表紙は工業的な雰囲気で、自分の好みとは違った。自分の考えと写真を持ち込み、プレビューを作って何度も調整した。写真、紙の質感、余白を中心にする方向へ変わっていった。
見出しには明朝体を使い、本文は読みやすく保つ。朱色で要点を示し、緑の線で流れをつなぐ。大きな画面では並べ、小さな画面では同じ順番で縦に読む。
VISUAL LEDGER
求めたこと / 決めたこと01
写真と紙の質感
写真と技術を一緒に見せ、読みやすさを保つ。
02
書体と要点
明朝の見出し、読みやすい本文、意味のある色。
03
スマートフォンでの閲覧
写真と文章を順番に並べ、キーボードでも操作できる。
04
四つ目の版で、ようやく目指す形に近づいた。
普通すぎる、写真集に寄りすぎる、テンプレートっぽい。その全部を試した。
最初は普通すぎて、二つ目は写真集のようになり、三つ目はテンプレートに近づきすぎた。四つ目で、写真、技術、自己紹介のバランスが見えてきた。
VERSION LINE
V1 / V2 / V3 / V4- 01
V1
普通すぎる
最初のサイトは普通すぎた。
- 02
V2
写真集に近い
写真集に寄りすぎて、技術が目立たなかった。
- 03
V3
テンプレートに近い
テンプレートのようで、自分らしさが足りなかった。
- 04
V4
現在の方向
写真、技術、自己紹介のバランスを整えた。
各版の方向を振り返る。下の画像は残しているデザインプレビュー。
05
AI と一緒に作り、方向は自分で決める。
相談し、プレビューを見て、実際の画面で確かめる。
フロントエンドの実装は多くの部分で AI と協力した。まず作りたいものを説明し、作業に合う道具を選び、実際の画面が自分の考えに近いかを確認する。
画像のプレビューは役立つが、実際のサイトも自分で見る必要がある。要件、技術選定、デザインの判断は自分が担当した。詳しい協力の仕方は AI ワークフローにまとめている。
SITE LOG
DISCUSS / PREVIEW / CHECK- 01DISCUSS
考えを伝える
要件と参考にしたい方向を説明する。
- 02PREVIEW
プレビューを見る
プレビューを見て、デザインと実装を調整する。
- 03CHECK
自分で確かめる
実際のページで、読みやすさと操作を確かめる。
方向はプレビューで相談し、結果は実際のサイトで確かめる。
06
作りたいサイトを、使えるサイトにしていく。
現在
01
写真、技術、自己紹介を、ひとつの入口にまとめた。
これからも調整は続ける。新しいレイアウトを増やすだけでなく、作品が見やすく、文章が読みやすくなる変更を重ねたい。
現在
KENLIN / 06写真、技術、自己紹介を、ひとつの入口にまとめた。