【来年、ウェブ制作は大きく変わりそう】

（今朝社内に投げた雑文の共有）

先日突然発表されたGemini3によるウェブサイトの生成精度がかなり高い、という話題で持ちきりである。「ウェブ制作はAIによってかなり自動化される」というのは2年以上前から言われていたが、いよいよ到来しそうだ。

今は刺激的な側面が強調されているので、Gemini3が現在のウェブ制作においてどこまで実用的かの細かな検証はまだ必要だが、この勢いの進化スピードだと、1年以内に以下のような状況が増えそうである。

・検討用のデザインバリエーション、ベースデザイン案はほぼポン出し
・Figmaを挟まず、いきなりソースコードを出力

これによって、例えば以下の職能の人も、議論用の叩き台デザインくらいなら、簡単に出せるようになる。

・エンジニア
・ライター
・営業
・マーケター

例えば営業が「御社だったらこんなデザインですね」と2～3案持っていく、みたいなことが1時間以内の準備でできるようになったりする。

また、ライターがコンテンツを書き、そのまま簡易的にデザインに当てはめた状態まで作る、ということも可能になるだろう。

こうなってくると、ウェブデザイナーと呼ばれる人たちの介在価値は以下になる。

・顧客ビジネスやターゲットを理解したうえで、どんな表現が適切かを提案する力
・顧客とディスカッションしたり提案したり説得したりする力
・コンテンツに対して、どんな表現だとターゲットに「刺さるか」を考える力
・生成AIでは詰め切れない細部をチューニングする力
・ライターやエンジニアに対して「こうした方がいい」と調整を促す力
・AIが出力したアウトプットに対して「これではダメだ」とさらに高いレベルを追求する目
・プロンプトのもとになる、たくさんのデザイン用語を知っている
・参考デザインの知識が豊富で、このビジネスならこれがイイだろう、がパッと発想できる

逆に以下のような部分の価値は、遅かれ早かれ薄れていくだろう

・時間をかけて自分の手でベースデザインを作る力（ベースはAIでポン出し）
・パッと見て綺麗なデザインを自分の手で作る力（綺麗なバランスはAIで整えてくれる）
・デザインのバリエーションを作る力（展開こそAI）
・色彩・空間・形を自分の手で作るセンスを磨く（見極めができるなら、自分で作れる必要はない）

もちろん、これらの能力を身につけるために「自分の手で作る経験」があった方がいい、というのはある。なのでやる意味がないとは、今は思わない。

ただもう少し長い目で見ると、デザイナーになった時からAIがある人たち、つまり「目で見て選別する工程の中で鍛えられた人たち」が台頭しそうな時代がやってきそうに思う。

デザイナーは、その仕事への愛着から「自分たちのこだわりや能力は重要に決まっている」と過剰評価してしまう傾向がある。しかし、この過剰評価して市場感覚とズレているままだと、ビジネスやターゲット理解、それにともなう提案力などが重要視される世界になると、より不利に働くだろう。

彼らがよくいう「AIが浸透しても上位数%は生き残れる」という話も、実は感覚的にズレてて、上位0.1%かもしれない、という可能性を見ておく必要がありそうである。

また、ウェブ制作という観点で言えば、ますます「コンテンツを作れる人」「考えられる人」の重要度が増してくる。もちろん、コンテンツそのものは生成AIで作れる流れだが、顧客ビジネスを踏まえて、

・どんなコンテンツを作るのがイイか
・どんなコンテンツであるのが妥当か
・どんなコンテンツだとターゲットに刺さるか

を考えられることが価値になる。（ちなみにここでいうコンテンツには、映像や写真や音声も含まれる）

長らくBtoBに関わっているが、いかにHOWが簡単にできるようになっても、このあたりのWHO/WHATそしてWHYの定義が自分たちでできない、という企業は非常に多い。

その支援をしているベイジという会社も、自社のことになると途端に客観的に判断できなくなる面は確かにある。組織の内側が解像度高く見えているがゆえに、自分たちを客観視したり、自分たちを律したりするというのは難しい。

その意味で客観的な視点から判断・提案ができる支援企業は引き続き必要になるだろう。ただ、その支援というのは、「行動」の代行ではなく「頭脳」の代行に、より本質的、戦略的になっていくだろう。

ウェブ制作のワークフローという意味では、フロントエンドエンジニアの関わり方も変わってくる。

AIドリブンなウェブ制作の特徴は、「ビジュアルとソースコードが同時に作られる」である。これが、人の手でウェブサイトを作るフローとの大きな違いになる。

なので、ウェブサイトを作る時は、エンジニアとデザイナーが一緒に話をしながら出力する、というプロセスになるように思う。そしておそらく、細部の調整は必要になるはずなので、それをエンジニアで対応する。

大規模サイトとしての統合や、CMS組み込みとかは、まだしばらくはAIでは細かなところができない可能性があり、エンジニアの仕事としては引き続き残るだろう。（それもあと数年かもしれないが）

そしてこうしたデザインや開発の前段のフローに、コンサルとライターによる、コンテンツ制作がある、という流れがより確定的になりそうだ。

例えばベイジが今やっているような、ターゲットやビジネスを言葉で定義した戦略資料と、ある程度でき上ったコンテンツがあれば、あとはデザインとソースコードのベースはほとんどの部分をAIに作らせることができる。

デザイナーとエンジニアのオペレーション部分の仕事は、今以上に楽になるだろう。作って悩む時間がかなり無くなるので、1か月に一人で回せる案件が、1～2つだったのが、3～5とかになる可能性が高い。

しかしそれは、オペレーションの経済的価値を失っていくこととほぼイコールである。

そして、ますます頭脳労働部分が価値になっていく。
AIが出したものを適切にジャッジしたり、説明したり、引き上げたり、ビジネス的な結果に繋げたりする力が価値になる。

ベイジは2027年までに「コンサルシフトする」を社内の合言葉のようにしている。しかし、こうしたベイジの方針と関係なく、市場の流れ自体が、その方向に確実に向かっている。

本当に、2026年にウェブ制作が大きく変わり、2027年はある種"コンサル的"になってないとビジネスが成り立たない、価値が発揮できない、となりそうな予感がする。ウェブ制作にとっては機会と危機の両方が考えられる。そういう時代には、マーケティングやビジネスや顧客に向き合ってきたこれまでのベイジの取り組みが、より一層価値を帯びるかもしれないが、それすらAIに駆逐されるかもしれない。 November 11, 2025

【ANYCOLOR #採用情報！】
<エンジニア領域、拡大につき募集強化！>

ANYCOLORでは、以下4件のエンジニア採用を積極的に行っております。
興味のある方は各ページの募集要項をご確認のうえ、ぜひご応募ください！

■Webフロントエンドエンジニア
https://t.co/ZO1egE8eP7

■Webサーバーサイドエンジニア
https://t.co/7O7GeuVIbT

■業務支援システム開発エンジニア
https://t.co/Xmr3lFsLXO

■データエンジニア
https://t.co/GnmP8beEgU November 11, 2025

画像→ウェブサイトのプロンプトはこちら↓

指示

あなたは世界最高峰のUI/UXデザイナー兼フロントエンドエンジニアです。 添付したウェブサイトのデザイン画像（スクリーンショット）をもとに、ReactとTailwind CSSを使用して、そのデザインをピクセルパーフェクトに近いレベルで忠実に再現したウェブサイトを作成してください。
技術スタック要件

Framework: React (Functional Components, Hooks)

Styling: Tailwind CSS (CDNや設定なしで動くクラスを使用)

Icons: lucide-react を使用（画像内のアイコンに最も近いものを選択）

Images: 画像部分は https://t.co/50L0qhExAZ から、雰囲気がマッチする高品質な画像URLを選定して使用するか、CSSのみで表現可能な図形・グラデーションで代用してください。

Fonts: Google Fontsからデザインに最も適したフォント（例: Noto Sans JP, Roboto, Montserratなど）を読み込んで適用してください。

デザイン再現の重要ポイント

以下の要素を画像を元に詳細に分析し、コードに反映してください：

カラーパレット: 背景色、テキスト色、アクセントカラー、グラデーションを画像からスポイトするように正確に抽出し、Hexコードで指定してください。

レイアウトと余白: セクション間の余白、文字の行間、要素の配置バランスを忠実に再現してください。

雰囲気とエフェクト:
ドロップシャドウ、角丸（Border Radius）、透明度（Glassmorphism）
ホバー時のインタラクション（ボタンが光る、浮き上がるなど）
背景の装飾（光の効果、グリッド線、抽象的な図形など）

レスポンシブ: PC表示だけでなく、モバイルでも美しく崩れないようにレイアウトを調整してください。

出力形式

プレビュー可能な単一のファイル（App.jsxなど）として出力してください。

すべてのコンポーネント、スタイル、ロジックを1つのファイルに含めてください。

エラーなく即座に動作する完成されたコードのみを出力してください。

ステップ

画像を視覚的に分析する（色、構造、フォント、雰囲気）。

必要なコンポーネント構造を設計する。

Tailwind CSSを用いてデザインを実装する（妥協せず細部まで作り込む）。

完成したコードを出力する。 November 11, 2025

あ、タグとかつけたら見つけてもらえるかな？

20代後半、経験7ヶ月のフロントエンドエンジニアといえるかも自信がない者です。
やる気はあんまりないけど、ものづくりが好きなので、開発は好きです。

似ている方、ぜひフォローしてください☁️

#フロントエンドエンジニア
#React November 11, 2025

# 指示
あなたは熟練したフロントエンドエンジニア兼クリエイティブコーダーです。
以下の要件に基づき、Webブラウザで動作する「サッカー用3D作戦盤シミュレーター」のプロトタイプコードを作成してください。

# 技術スタック
- HTML5 / CSS3
- JavaScript (Vanilla JS)
- Three.js (CDN経由で読み込み、最新バージョンを使用)
- 必要に応じてDat.GUIやTweakpaneなどのUIライブラリを使用しても良いが、今回はカスタムCSSで「Blender風UI」を再現することを優先する。

# アプリケーション概要
画面を左右に分割し、左側で2D操作、右側で3D確認ができる作戦ボードアプリ。
デザインと操作感は3D制作ソフト「Blender」のUI（ダークテーマ、プロパティパネル）を模倣してください。

# 詳細要件
## 1. レイアウト (Blender風UI)
- 全体: ダークグレー（#2b2b2b, #333など）を基調とした配色。
- 左パネル (2D View):
- 画面の約40%を占有。
- サッカーコートの2D俯瞰図（CanvasまたはSVG）。
- 選手（丸アイコン）とボールを配置。
- 中央パネル (3D View):
- 画面の約40%を占有。
- Three.jsによる3D描画エリア。
- 右パネル (Properties):
- 画面の約20%を占有。
- 「Outliner（オブジェクト一覧）」と「Properties（選択中のオブジェクト座標）」を表示。
- Blenderのような階層ツリー表示（Scene Collection > Home/Guest > Player）。

## 2. 機能要件 (2Dと3Dの同期 - 最重要)
- 双方向シンクロ:
- 左側の2Dビューで選手アイコンをドラッグ＆ドロップすると、リアルタイムで右側の3Dモデル（円柱など）が同じ座標に移動する。
- 座標変換: 2Dの(x, y)座標を、3D空間の(x, 0, z)座標に適切にマッピングする。
- オブジェクト:
- ホームチーム（赤系）: 11名 (GK含む)
- アウェイチーム（青系）: 11名 (GK含む)
- ボール（白）: 1個
- 3Dビュー操作:
- カメラの回転・ズーム・パンが可能（OrbitControlsを使用）。

## 3. ビジュアル詳細
- コート:
- 緑色の芝生風カラー（#4CAF50など）。
- サッカー特有のライン（センターサークル、ペナルティエリア、ゴールエリア、センターラインなど）を白線で描画。
- 選手モデル:
- 簡易的な円柱（Cylinder）またはポーン（Pawn）形状。
- 選択された選手は、2D/3D双方でハイライト（黄色の枠線など）される。

# 出力形式
- `index.html` 1つのファイルに、HTML、CSS、JavaScriptをすべて記述してください。
- 画像テクスチャは使わず、Three.jsの基本的なマテリアルと色、およびCanvas描画で完結させてください。 November 11, 2025

@luv_cheesecakes いい感じにできないフロントエンドエンジニアあんまり価値ないと思ってる(暴言) November 11, 2025

Geminiでヤバいって言ってるWeb制作のフロントエンドエンジニアの人いたらウチに入ってくれよやることあるよ… November 11, 2025