ワタル@WEBコーダー

調理師→フリーランス主夫コーダー｜ 34歳 ｜ 3児の父 ｜ 趣味×毎日ランニング │ 2022年Web制作勉強→挫折→2023年3月デイトラ→Codeups｜制作会社３社様：業務委託│ HTML/CSS/WordPress構築｜岡山県在住｜#codolife8期 ｜#コードラッシュ｜ お仕事のご依頼はDMから

[ワタル@WEBコーダー @wataru_4635]

@scale_ceo 希望

[ワタル@WEBコーダー @wataru_4635]

今回イラレカンプが来たので、XDで開いて、ついにひろむさんの特典「XDcode」を使ってみました🔥

精度が高い😳

✅ 値が取れる
✅ スマコレとの相性◎

トップも2日ほどかかっていたのが、1日かからずに完成✨
スマコレのおかげで修正対応もかなり楽でした！
これが特典なのは正直すごすぎる…！

[ひろむ | 提案オタク @hiromu_wbung]

【講座公開いたします！】

Webアニメーションを武器に、
「楽しさ」と「収入」を両立させるための講座です

公開タイミングがズレてしまったので、
割引期間は少し長めに
【2025/12/26 23:59まで】にしています🙌

詳細は下記からご確認ください！！
https://t.co/7AePrCbxKu

[ワタル@WEBコーダー @wataru_4635]

@zaitakucoom @rindo_fx はらさん、おめでとうございます！
自分も同じ考えでした😊

[ワタル@WEBコーダー @wataru_4635]

動画拝見しました！

ここまで高精度にデザインカンプを再現できるのかと驚きました。
Claude Codeは触っていましたが、事前準備でオートレイアウトを整える視点はなかったので勉強になりました。

AIへの指示でここまで変わるのかと感動しました。
とても学びの多い動画でした！

[こう@コーディング一本で生活してます @Kou_bangkok]

🎁無料プレゼント企画🎁

コードの9割をAIに書かせて、
3ページ分のWebサイトを仕上げる方法。

『9割自動化
AIエージェント完全マニュアル』

━━━━━━━━━━━━━
▌ 動画で公開する全内容
━━━━━━━━━━━━━

▶ 3ページ分のWebサイトを"9割AIに任せて"仕上げる
実案件レベルのAIコーディング全手順

▶ AIの出力精度が天と地ほど変わる、
Figmaカンプ準備の「正しい型」

▶ 時給5,000円の壁を突破し10,000円超に到達した
9割AIに任せる実務フロー

▶ 初回出力"7〜8割止まり"を9割まで詰める、
AIへの修正指示の精度設計

▶ 非公開の自作AIエージェントの使い方

▶ Figmaから画像を1枚ずつ落とす手作業もゼロ、
必要な画像はAIエージェントが全自動で書き出す仕組み

▶ ピクセルパーフェクト仕上げを90%まで自動化する
Skills機能の仕組み

▶「書けなくていい。でも読めないといけない」
AI時代のコーダーに残る"唯一の武器"

━━━━━━━━━━━━━
▌ 動画と合わせて、もうひとつ
━━━━━━━━━━━━━

それがこちらです。

『魔法のプロンプト』

たった一文。
コピペでそのまま使えて、
Claude CodeでもCursorでも、
どんなAIに添えても効きます。

これを入れたAIは、
「言われた通りに直す」モードから、

「なぜそのズレが起きたのかを自分で考え、根本から直す」モードに切り替わる。

同じ修正指示でも、
この一文があるかないかで、出力は別物になります。

━━━━━━━━━━━━━
▌ いま現場で起きていること
━━━━━━━━━━━━━

コーダーの世界は、すでに二つに分かれ始めています。

■ AIに9割任せている側

・コーディングの9割をAIが回している
・「書く作業」は消え、「指示と判断」だけが仕事になる
・同じ時間で2〜3倍の案件を捌ける
・納品は前倒し、クライアントの信頼が積み上がる
・労働時間はむしろ減り、収入は増えている
・時給が"手の速度"という物理的上限から解放されている

■ 自分の手で書き続けている側

・相変わらず手でコードを書いている
・作業量が増えても、時給は頭打ちのまま
・AIを触るたびに「使えない」で終わり、結局手書きに戻る
・周りがAIで3〜5倍速になる中、
同じ単価で同じ時間を切り売りし続ける
・1年後、AI活用組に案件を静かに奪われていく

両者の距離は、毎月少しずつ広がっています。

コードを書く力そのものが価値だった時代は、
すでに終わりに向かっています。

これからは、AIに的確に指示を出せる人のところに、
仕事も単価もすべて集まります。

━━━━━━━━━━━━━
▌ 動画の受け取り方
━━━━━━━━━━━━━

① いいね＆フォロー（@Kou_bangkok）
② プロフのLINEから動画を受け取る

[ワタル@WEBコーダー @wataru_4635]

@YukiYukiweb2022 めちゃくちゃいいねー！

[まさた｜Web制作をAIで自動化 @Masa_nmFL]

https://t.co/FSSgaeq2mh

[ワタル@WEBコーダー @wataru_4635]

とても楽しみにしています！
AIの情報がありすぎて追えないので嬉しいです！

[まさた｜Web制作をAIで自動化 @Masa_nmFL]

https://t.co/FSSgaeq2mh

[ワタル@WEBコーダー @wataru_4635]

@Masa_nmFL 次世代

[ゆうたろう｜コーダーの"できた"を広げる伴走者 @hirataro_89]

「Localでポチポチ初期設定」
これ、実はもうやらなくていいんです

現代のWordPress開発における
「俺的・最適解」を記事にまとめました

ぶっちゃけこれを知らずに
Gulpで消耗してるのはもったいなさすぎる…

開発体験が「革命的」に変わるので、
WordPressを触る全てのコーダーに読んでほしい😌

[ワタル@WEBコーダー @wataru_4635]

@hiromu_wbung ひろむさん、ありがとうございます！
このリポストを見て、今回講座で学んだアニメーション用のmdをまとめて、Figmamcpの特典フォルダに追加しました✨
これをベースにどんどん改良していこうと思います！
アニメーションだけでなく、効率化や発想の広げ方まで学べて、本当に買ってよかったです！😌

[ひろむ | 提案オタク @hiromu_wbung]

特典追加しましたー！
その名も、【Figma MCP STARTER SET】です！！

Figma MCP触ったことないよ〜！って方でも

MCPの初導入→フル活用まで一瞬でできる
という内容…！

「ドラック＆ドロップさえ出来ればOK」
というハードルの低さで、

Figmaカンプからのコーディングに革命が起きます。
（私は1日15Pくらい構築できるようになった笑）

具体的にできること↓

1. フォント＆カラー情報の取得・変数設定・CDN読み込み
2. 画像の自動書き出し
3. コーディング
4. スクリーンショットとデザイン比較・自動調整
5. 品質チェック
・タイポグラフィ（フォント,サイズ,行間,文字間隔）
・色（カラーコード、CSS変数）
・画像（ファイル名、パス、alt）
・HTML/リンク（見出し構造、リンク先）

※コーディングの精度についてはリプ参照

わたくしが去年の8月頃からひたすら実務を通して
調整を重ねてきた内容になります😌

「自分にとって使いやすいもの」を追求し続けた結果、
皆さんにとっても使いやすい
＆
活用のハードルがめっちゃくちゃ低い
それでいて効率化度合いもめちゃ高いものになりました。

「全然AI触れてなくて…」って正直焦ってる方も
一瞬でぶち抜けます。

以上！！

[ワタル@WEBコーダー @wataru_4635]

やっと、ひろむさん(@hiromu_wbung )のGSAP講座を完走！🎉
説明が分かりやすくて、「そういうことか」と理解しながら進められました👏
改めてアニメーションって楽しいなと実感。
忘れないようにコードはスニペット化📝

グレースケールやクリップパスを使って、自分なりにアレンジもしてみました🎨

[ワタル@WEBコーダー @wataru_4635]

やっとひろむさん(@hiromu_wbung)のアニメーション講座 を進められました！
SVGアニメーションを学んだことで、
参考サイトを見ていても「この動き、いけそう👀」って思える場面が増えそう！
解説がとても分かりやすいです🙏

そして transform-box: fill-box; は知らなかった…
昔の自分に教えたい😅

[ワタル@WEBコーダー @wataru_4635]

@tsurupiyooo @r_ik_0203 レンズ

[ワタル@WEBコーダー @wataru_4635]

@hiromu_wbung ひろむさんありがとうございます！！
そう言っていただけると嬉しいです！
こちらこそアニメーションの話聞くのめちゃくちゃ楽しかったです！！

[ワタル@WEBコーダー @wataru_4635]

早速購入させていただきました！！🙌
ひろむさんのYouTubeやDiscordでいつも参考にさせていただいていたので本当に嬉しいです🔥

前半を少し触っただけですが、もう分かりやすくて楽しい😆

transform-origin × scale アニメーション で
奥行きの動きに感動…！！🤯✨

最後まで学ぶのが楽しみ！！🚀🎨

[ひろむ | 提案オタク @hiromu_wbung]

【講座公開いたします！】

Webアニメーションを武器に、
「楽しさ」と「収入」を両立させるための講座です

公開タイミングがズレてしまったので、
割引期間は少し長めに
【2025/12/26 23:59まで】にしています🙌

詳細は下記からご確認ください！！
https://t.co/7AePrCbxKu

[ワタル@WEBコーダー @wataru_4635]

予約しました！
とても楽しみです！！

[Tomoya Okada @__o_state]

【予約販売開始のお知らせ】
本日からColosoにて、以前告知したオンライン講座の予約販売が開始しました！

2つの事例と資料をもとに、制作フローの理解やアニメーションの基礎などを身につけられる講座になっていますので、ぜひチェックしてみてください！

https://t.co/03NclvmGtQ

[ワタル@WEBコーダー @wataru_4635]

@Kou_bangkok 同時

[ワタル@WEBコーダー @wataru_4635]

@rico_2mama_p 待ってるわ！
ダッシュして追いかけるから😁ww

[ワタル@WEBコーダー @wataru_4635]

🏃‍♂️昨日は地元・おかやまマラソンでフルマラソン初挑戦！
1週間前に膝を痛めてきつかったけど、なんとか完走できました🔥

沿道で子どもたちや親戚が応援してくれて、本当に力になった！
やっぱり走るって最高。
来年はコンディション万全で挑みます💪

#codelife

[ワタル@WEBコーダー @wataru_4635]

@rico_2mama_p りこるん久しぶりー！
ありがとう😊！

またメタライフいつでもいるからまた話そう！