第3回：コードが読めない、まず読むファイルが分からないという壁

AIと一緒にコーディングとFigmaを勉強しながら、頼まれたWebページを作っています。その学習の途中を最初から順に書いています。第3回です。

---

第3回は技術的な詰まりというより、コードを理解しようとすること自体の入口のハードルの話です。

実装をAIに手伝ってもらいながら触っていると、フォルダもファイルもどんどん増えていきます。サイト1つでも、けっこうな数になる。この中の、どれを読めば全体が分かるのか／どこを直せばどこが治るのか、が全く見えない。

これがコードを理解しようとする入口で一番のハードルでした。技術的に難しい・簡単以前に、「読むべき範囲が分からないと、読み始められない」という問題です。

ここを救ってくれたのもAIでした。

「全体は気にしなくていいから、とりあえずこのファイルとこのファイルだけ見れば理解できますよ」みたいに、読む範囲を絞ってくれる。これで読むハードルが一気に下がりました。

もう一つ、Reactを勉強していたときに「確かに」と思ったのが、機能ごとに、その機能に関わる技術をひとまとめに書くという発想です。サイトで言うと、あるセクションで使われているHTMLとCSSが同じところに書かれている。これが自分にはすごく分かりやすかったです。

逆に言うと、これまでHTMLとCSSが別ファイルでバラバラの場所にあったのは、自分にとっては地味にストレスだったんだな、と気づきました。

Reactのような言語を作れるレベルのバリバリのエンジニアでも、たぶん同じストレスを感じていたから「機能ごとに集約しよう」という設計になったんじゃないか。そう思ったら、Reactを作ったエンジニアの人たちが、ちょっと他人に思えなくなりました。

コードが書けないデザイナーがAI時代にやるとよさそうなのは、ゼロからコードを書けるようになることではなく、AIに「どこを見ればいいか／どこを直せばいいか」を聞いて、読む範囲を毎回絞ること なのかもしれません。

サイトの実装は引き続き進行中です。続きはまた書きます。

---

【カジュアル面談をお待ちしています】

Webデザイナーとして10年ほど、制作会社と葬儀業界の事業会社にインハウスで勤め、2023年に独立しました。ずっと「デザインまでが自分の担当で、実装はエンジニアの仕事」だと思っていました。いまはAIに頼りながら、React / TypeScript / Tailwind を自分で読み書きして作れるようになるための学習中です。直近はスマホサイズで公開まで通しました。まだ途中です。

こういう「学習中の人間」が、採用する側からどう見えるのかを率直に知りたいと思っています。現在地を正しく知りたいです。

いまは事業側で、現場に入って人の声を聞きながら改修や制作をしていく方向に行きたいと考えています。ただ正直なところ手を広げすぎていて、専門性としてどう見せるのがよいか自分でも決めきれていないのが悩みどころ。

いまやっていること：現場に入りながら実績を積んでいる途中

独立後は身近な事業者の課題に、企画から実装まで並行で関わっています。

塗装会社（家業）── ショート動画の企画〜運用、採用まわりのツール補助

中古車販売 ── 集客・顧客対応を LINE / 配信ツールで自動化

飲食業の現場 ── 店舗のPCへローカルAIを導入する提案

業務自動化まわりの構築・運用（共同案件）

派手な数字を出せる段階ではありませんが、AIで何を巻き取り、何を人が担うかを切り分けて、現場で回る形に落とすことを、実際に手を動かしながら積み上げています。

行きたい方向：事業側で体験を設計する方へ。ただし見せ方はまだ決めきれていません

やりたいことの芯は、「行動が変わる導線を作る」感覚（LPで培ったもの）と、AIで自分で手を動かせる幅を、事業側で体験そのものを設計する立ち位置で活かすことです。受託で言われたものを作るより、事業の中で「どこを直せば人の行動が変わるか」を考えて、そのまま手を動かせる場所に行きたいと思っています。

一方で、正直に書いておきたいことがあります。上に書いたとおり、いま手を広げすぎていて、専門性として見せづらい状態です。これを就職活動でどう見せるのがよいか、自分でも決めきれていません。