maru@web制作

LP/企業サイトのコーディング×WordPress実装。FLOCSS/BEMで保守性高く、CV導線と表示速度も意識して組みます。業務委託4社と提携中｜納期厳守｜ご相談はDM へ| 趣味 :アニメ、映画、韓ドラ

[maru@web制作 @webma55]

試した人いますか？
ぜひ！コメントで教えてください！

[maru@web制作 @webma55]

【必見】Web制作のスピード感、
もう別次元に入ってます。

Figma Shaders、知ってますか？

6月末に出たばかりの新機能で、
プロンプト打つだけで
光る演出とか3D表現とか
ノーコードで作れるようになりました。

正直、自分もLPの初稿にかかる時間が
体感で半分以下になってます。

やってることはシンプルで、

・Claude Codeでベース作る
・Figma Shadersで質感を足す
・仕上げの判断だけ自分でやる

AIが土台を爆速で出して、
人間はクライアントの意図と
最終判断をやる。

この役割分担が一番強いです。

正直これから
「AIを上手く操れる人」と
そうじゃない人の差が
一気に開くと思ってます。

#web制作

[maru@web制作 @webma55]

FigmaのデザインをAIにコード化させる時、
僕が実際に使ってるプロンプトを公開します。

これを使うようになってから
手修正がほぼなくなりました。

特に効くポイントはこの4つです。

①「Mobile Firstで書いて」
PCから書くとスマホ表示が崩れがちです。
スマホを基準に書いて
PCに広げる順番にすると
レスポンシブの修正が激減します。

プロンプト例：
「Mobile Firstで、スマホ→タブレット→PCの
順に表示を整えるCSSを書いて」

②「FlexboxとGridを使い分けて」
横並びのボタンやナビはFlexbox、
ページ全体の骨組みはGrid。
この使い分けをAIに任せると
構造がきれいになります。

プロンプト例：
「1次元の配置はFlexbox、
2次元のレイアウトはGridで実装して」

③「アクセシビリティを考慮して」
これを入れるだけで
画像のalt属性・色のコントラスト比・
キーボード操作対応まで
最初から含めて生成されます。

納品後に指摘されてから直すより
最初から入ってる方が圧倒的に楽です。

④「クラス名はBEMで統一して」
BEMは「block__element--modifier」という
クラス名の付け方のルールです。

例：card__title--large

AIは指定しないと命名がバラバラになるので
ルールを1つ決めて指示するだけで
後から見返した時の読みやすさが全然違います。

この4つを入れたプロンプトでベースを作らせて
「構造が正しいか」「表示が崩れてないか」の
最終判断は人間がやる。

この役割分担が2026年の
Web制作のスタンダードです。

実際に使ってるプロンプト全文が欲しい方は
「プロンプト」とコメントしてください。

#Web制作 #ClaudeCode

[maru@web制作 @webma55]

@med_design_lab ありがとうございます！！

[maru@web制作 @webma55]

このアカウント作ってから、気づいたら1年経ってた笑

フリーランスとしてもかなり成長できた1年だったと思う。
最初は不安しかなかったけど、続けてよかったなって。

これからも、もっと成長できるように頑張ります！

#MyXAnniversary #web制作

[maru@web制作 @webma55]

@suu_san3310 ありがとうございます！！

[maru@web制作 @webma55]

Web制作の常識が変わりました。

Claude Fable 5がリリースされました。

何がすごいか。

コーディング性能のベンチマークで
全モデルをぶち抜いています。

SWE-Bench Pro（実際のコーディング課題）
・Claude Fable 5：80.3%
・Claude Opus 4.8：69.2%
・GPT-5.5：58.6%
・Gemini 3.1 Pro：54.2%

差がえぐいです。

Web制作への影響を話します。

①コーディング作業が更に速くなる
今まで複数回指示が必要だったことが
より少ない指示で完結するようになります。

②複雑な実装が一発で通るようになる
レスポンシブ・アニメーション・
複雑なレイアウトも
精度が上がって手直しが減る。

③GitHub Copilotと連携可能
VSCodeで直接Fable 5が使えるようになった。
Cursorとの使い分けが重要になってきます。

④Claude Pro・Maxユーザーは今すぐ無料で使える
導入期間中は追加料金なしで使えます。

正直に言います。

AIを使いこなしてる人と
使ってない人の差が
今日からさらに広がります。

使いこなせるかどうかで
2026年下半期の収入が変わると思ってます。

みなさんはもうFable 5試しましたか？

#Web制作 #ClaudeFable5

[maru@web制作 @webma55]

@oelyac83ZP80141 ありがとうございます😊
これからも、頑張ります🔥

[maru@web制作 @webma55]

@yute7ka31 ありがとうございます😊
いつの間にか1年経ってたみたいです笑

これからも頑張ります！！

[maru@web制作 @webma55]

@ico_WEB_design ありがとうございます😊
継続してよかったなと思います！

[maru@web制作 @webma55]

@carmatch_szok よろしくお願いします！

[maru@web制作 @webma55]

この投稿したら、フォロワー増えるらしい、、？

#ブルバ１００ #ブルバ

[maru@web制作 @webma55]

@CryptoFox2025 ありがとうございます😊
フォロバさせて頂きました！

[maru@web制作 @webma55]

@nobura2024 効果すごいです笑

[maru@web制作 @webma55]

@businessmilen よろしくお願いします！

[maru@web制作 @webma55]

@spMXUnRCwjrFxr8 ありがとうございます😊フォロバさせて頂きました🙇‍♀️

[maru@web制作 @webma55]

@LIVENOWOhori 相馬さんの動画見てました！
応援してます🔥

[maru@web制作 @webma55]

@iscpjapaninfo ありがとうございます😊
僕もフォローさせていただきました！

[maru@web制作 @webma55]

@Star8882sc ぜひ！やってみて下さい！🔥

[maru@web制作 @webma55]

Web制作で「なんか遅い」と感じてる人へ。
原因は模写をしてないだけかもしれないです。

特に駆け出し〜中級者におすすめのやり方を、実務目線でまとめました。

ポイントは「ただ写す」のではなく「意図を盗む」こと。

・デベロッパーツールでHTML構造をしっかり読む
・FlexboxとGridを正しく使い分ける（骨格はGrid、中身はFlexbox）
・gap、clamp()、Container Queriesなどの現代CSSを意識して真似る
・Mobile Firstで最初からレスポンシブ対応を考える
・ホバーやシンプルな動きも少し取り入れる

これを続けると「Figmaで作ったデザインが綺麗に実装できる」だけでなく、「自分で考えて組める」ようになってきます。

僕自身、コーディング模写を始めてから納品後の修正が減り、案件の回転も良くなりました。

AIにベースのコードを出させた後は、
「この構造でメンテナンスしやすいか」「パフォーマンスに問題ないか」を人間が判断する。
この役割分担が2026年の実務スタンダードです。

Web制作やってる皆さん、
コーディングの模写はやってますか？
おすすめの練習方法や使ってるサイトがあれば教えてほしいです！