Yudai
12/9 ふりかえり
2025年12月09日
日報
見出しはありません
要約
アプリ100本ノック（30分）
読書（30分）
Figma Make の調査とドキュメント作成
Layermate の調査とドキュメント作成
Indeed のAPI 仕様書調査
久しぶりの100本ノック。アプリ開発でインプットしなければと再開した。
ユーザーのユースケースを考慮し検索性が工夫されていていい。情報量は多くなるが、見やすさも担保されている。
アプリ開発カリキュラムと社内勉強会の発表のためにインプット中。Layermate で構造整理された UI を Figma Make に読み込ませ、デザインシステムを入れて作ってもらうとかなり完成度の高いものができるのではと模索中。
ご提示いただいたQiita記事は、「Figma MCPを活かすためのデータ作りとプロンプト 20パターンの検証で分かったこと」というタイトルの記事です（リンク先の内容が変わっているか、あるいは最初の私の推測が外れて別の記事になっています。取得した内容に基づき要約します）。
要約：Figma MCPで高品質なコード生成を実現する方法
Figma Dev ModeのMCP（Model Context Protocol）機能を使って、Figmaのデザインから高品質なReact/Tailwindコードを生成するための「Figmaデータの作り方」と「プロンプト」を検証した記事です。
最も良い結果を得るには、Figma側の4つの設定をすべて有効にし、かつ詳細なプロンプトで指示する必要があります。
推奨Figma設定（4要素すべて有効化）
Auto Layout（最重要）: これがないと絶対配置（absolute）のコードになり、保守性が皆無になる。必須。
Variables: 色やサイズなどの変数を管理。ただし、プロンプトで指示しないとvar(--slate-50)のような独自変数のまま出力され、Tailwindの標準クラス（bg-slate-50）にならない。
Layer Names: Header, Navなど意味のある名前にすることで、可読性とデバッグ性が向上する。
Annotations: デザインの意図や型定義の改善に寄与する（優先度は低め）。
推奨プロンプト（包括的な指示）
単に「作って」と頼むのではなく、以下を明示する必要があります。
Variables Mapping: FigmaのVariablesをTailwindの標準クラスにマッピングするよう指示する。
Semantic HTML: divばかりではなくheader, main, navなどを使うよう指示する。
Interactive Elements: ホバー状態やトランジションを追加するよう指示する。
Code Quality: TypeScriptのインターフェース定義や、.map()を使ったデータ駆動の実装を指示する。
「Variables」の罠:
プロンプトで明示的に変換を指示しない場合、Variablesを設定していると、逆にセマンティックなHTML化が阻害されたり、標準Tailwindクラスへの変換が行われない現象が見られました。適切なプロンプトと組み合わせることで初めて効果を発揮します。
「Auto Layout」は絶対条件:
これ以外の要素をいくら頑張っても、Auto Layoutがかかっていないと実用的なコード（レスポンシブ対応可能なFlex/Gridレイアウト）は生成されません。
新規プロジェクト: 最初からVariablesとAuto Layoutを完備して進めるのがベスト。
既存プロジェクト: 最低限、主要なコンポーネントにAuto Layoutを適用してから生成にかけるべきです。
この記事は、AIによるコード生成の品質は「AIの性能」だけでなく、「入力データ（Figma）の品質」と「指示（プロンプト）の具体性」の掛け算で決まることを実証しています。
ご提示いただいたnote記事は、こぎそ（@kgsi）氏が運営する**「デザイナー向けメンタープラン」**の活動内容と成果を、開始から約1年経った時点で振り返ったものです。
以下に要約します。
1. 活動の背景と対象者
背景: デザイン会社、事業会社（さくらインターネット、SmartHRなど）、AIベンチャーなど多様な環境での経験を持つ著者が、キャリアやスキルに悩むデザイナーを支援。
対象者:
社内に相談相手がいない「一人目デザイナー」
チームに先輩がおらずリード役を求めている人
Webデザイナーからプロダクトデザイナーへの転身を目指す人
異業種からの挑戦者
2. プランで提供している3つの支援
目標設定: 「何をやりたいのか」「どうなりたいのか」をヒアリングし、現実的な期間と具体的な目標を定める。
ポートフォリオ支援: 現状のスキルを可視化するツールとしてポートフォリオを活用。意匠力だけでなく、「思考プロセスの言語化」や「見せ方」を添削し、本人の強みを引き出す。
スキル別課題提供: バナー模写、Webサイト制作、UI模写と言語化（note記事化）など、個々の課題に応じたフィードバックサイクルを回す。
3. 成果と価値
実績: ポートフォリオ改修によるBtoBプロダクトデザイナーへの転職成功や、未経験からのWebデザイナーデビューなど具体的な成果が出ている。
価値: 客観的なフィードバックと「壁打ち相手」がいることで、視界が晴れ、デザイナーが迷わずに前に進める環境を提供している。
このプランは、単なるスキルアップ講座ではなく、「孤独なデザイナーの並走者」として、キャリア設計から具体的なアウトプットの改善までをトータルでサポートするサービスとして機能しています。
このnote記事は、元美容師で未経験からデザイナーに転身した山下しょうや氏が、3年間で「ギャラリーサイトに掲載されるレベル」に成長するまでに実践した行動と失敗談を赤裸々に綴ったものです。
きれいな成功譚ではなく、スクール通学、早期離職、1人目デザイナーの孤独などを経て得た**「実用的なキャリアの作り方」**がまとめられています。
1. 【1年目】スクール学習と「自分ごと化」への転換
スクールの活用: コーディング基礎とWebサイト制作コース（計8ヶ月）を受講。「とりあえず形にする」までの強制力を得た点は良かったが、それだけでは「自分のやりたいこと」は見つからなかった。
脱・作業的トレース: ただ数をこなす模写（トレース）はモチベーションが続かず効果が薄かった。代わりに**「名刺作り」や「架空ブランドのロゴ」など、自分が熱量を込められる制作**に時間を割くことで、ツールの習得と「こだわり」の楽しさを学んだ。
挫折: Wantedly経由で制作会社に内定をもらうも、実力不足を痛感し早期に離職する経験をする。
2. 【2〜3年目】「1人目デザイナー」の苦悩と「事業会社」での飛躍
小さな会社での奮闘: 1人目デザイナーとして幅広い業務を経験したが、全てを抱え込みすぎて疲弊してしまう時期があった。
事業会社への挑戦: 成長環境を求め、プロのフィードバックが得られる事業会社へ。客観的な視点やチームでのデザインを学び、ここでの経験がスキルの質を大きく引き上げた。
3. 成長のための重要なマインドセット
「好き」を燃料にする: 「課題だからやる」のではなく、「これを作りたいからやる」というスタンスに変えることで、細部へのこだわりや思考の深さが生まれ、結果としてスキルが定着する。
失敗を糧にする: 制作会社での挫折や、独りよがりなデザインで失敗した経験も、振り返ることで次のステップ（環境選びやスキルの補完）につながる。
記事では、キャリアを前に進めるために**「自分の未来を言語化するワーク」**が推奨されています。
3年間のテーマを決める
例：1年目は「基礎を固める」、2年目は「強みを見つける」など、ざっくりとしたテーマを設定する。
3年後のキャッチコピーを作る
テンプレート：「私は、[どんな] 人のために、[何を] デザインするデザイナーです。」
例：「私は、世界観に悩むスタートアップのために、ブランドとUIを一気通貫でデザインするデザイナーです。」
最初の3ヶ月でやることを「3つだけ」決める
数字で管理でき、行動ベースで書けるものに絞る。
例：「毎週バナーを1枚作る（計12枚）」「ポートフォリオの初版を公開する」「noteで週1回勉強ログを書く」
デザイナーとしてのキャリアは一直線ではありません。センスの有無よりも、**「自分の『好き』や『失敗』をどう振り返り、次の具体的な行動（制作や環境選び）に変えられるか」**が成長の鍵となります。
コメント
クラシルほんと使いやすいんですよね〜！
模写するとなぜ見やすいのかのかがちゃんと見えてくるのが面白いですよね🔍🌟