Copilot"だけ"で止まっていませんか？ 受託Web制作・保守運用で本当に使えるAIツールの選び方
GitHub Copilot、Claude Code、ChatGPT、Geminiの4大AIコーディングツールを比較。MCP・A2A・UCPなど新プロトコルへの対応状況、受託Web制作での活用法、複数クライアントのコードベース管理の課題と解決策を解説。ツール選定の判断基準がわかります。
技術
カテゴリ別記事一覧（全22件）
受託案件でAIの「癖」を管理する | Cursor Project Rulesとbeadsの実務活用検証
AIコーディングツールの「文脈の断絶」問題を解決するCursor Project Rulesとbeadsを検証。受託Web制作で案件ごとのルールをAIに伝える方法、Claude Code CLAUDE.mdとの比較、導入ステップを解説。今日から使える実践的なアプローチを紹介します。
AIエージェント時代、Webエンジニアは「コードを書く人」から「システムを設計する人」へ
AIがコードを書く時代、Webエンジニアに求められるのは実装力ではなく設計力。AIの出力レビュー、アーキテクチャ設計、AIエージェント構築など、コーダーからアーキテクトへの役割変化と必要なスキルを解説。
AI時代の新しい仕事術：beadsで実現するエージェントとの協業
AIコーディングエージェントの「記憶がない」問題を解決するbeads。Gitベースの分散データベースで依存関係を管理し、複数セッションにまたがる複雑なプロジェクトでも一貫した協業を実現する新しいタスク管理手法を解説。
UCP・A2A・MCP・AP2 | AIエージェント連携プロトコルの全体像
AIエージェント連携の4大プロトコルを徹底解説。AnthropicのMCP、GoogleのA2A・AP2・UCPの役割と相互関係、技術仕様、実装アプローチを整理。GitHub・公式ドキュメントへのリンク付きで開発者の実装検討をサポートします。
Googleの新規格UCPとは？AIエージェント時代のEC開発に備える
2026年1月、GoogleがShopifyやWalmartと共同発表した新規格「UCP」を技術解説。MCP・A2A・AP2との連携、REST API・JSON-RPC対応、Checkoutなどコア機能、開発者が今すぐ準備すべき商品データ構造化とAPI設計のポイントを解説します。
Mermaid入門 第2回：実践編 - 図解で伝えるAI概念
MermaidでAI技術を効果的に図解する方法を解説。Model Context Protocol(MCP)や3Cスキルといった最新AI概念を例に、フローチャート、シーケンス図、クラス図などの実践的なコード例を紹介。コピペで使えるサンプル付き。
Mermaid入門 第1回：基本の使い方と環境構築
Mermaidの基本概念から環境構築、初歩的なチャート作成までを解説します。簡単で柔軟な図解ツールを学びましょう。
コピペでOK！CSSだけで要素を円周上（円形）に並べる方法
CSSだけを使って要素を円周上に配置する方法を、ステップごとに具体的なソースコードを添えながら解説します。
HubSpotを活用したA/Bテストの作成と効果的な活用方法を解説します！
HubSpotを活用したA/Bテストの作成方法と効果的な活用方法を解説。Webサイトページの改善に役立つ、HubSpotのA/Bテスト機能について詳しく解説します。
表示速度アップでコンバージョン率向上！効果と改善策を解説
ウェブページの「表示速度」は、コンバージョン率や離脱率、SEOに影響するだけでなく、ユーザーにとって価値のある体験を提供し、サイトの信頼性を築く上でも重要です。表示速度の重要性や改善方法などについて詳しく解説します。
HubSpotのフォームの作成方法と特長 | 具体的な手順を解説
HubSpotのフォーム機能を活用し、効率的にウェブサイトの訪問者情報を収集しましょう。HTML/CSSの知識がなくても簡単にフォーム作成可能。詳細な手順と特長を解説します。
CSSの「object-fit」で画像のサイズと縦横比を制御する
置換要素（img要素やvideo要素など）を表示領域に合わせてフィットさせることができるCSSプロパティ「object-fit」の意味や基本的な使い方を紹介します。
Webディレクターが選ぶ、今年のキーワード5選
Webディレクターの観点で気になったIT関連のキーワード5点を選出し、それぞれの解説を通して2023年を振り返ります。
Three.jsでなめらかに動く球体を作成してみる
今回はWebページ上で3Dコンテンツを簡単に描画することができるJavaScriptライブラリのThree.jsを活用して、球体がなめらかに動くアニメーションを作成しました。コードのポイントや、動きを実装するためのノイズの計算方法を解説しています。
Shopify｜「請求先」の電話番号入力を促すカスタマイズ
Shopifyの「デフォルトテーマのコンテンツを編集する」機能を利用し、チェックアウトページで「請求先」の電話番号入力を促すカスタマイズ方法を紹介します。
Visual Studio Code - マルチカーソルで連番を簡単に入力できる拡張機能
Visual Studio Code（VSCode）の拡張機能「Insert Sequence」を紹介します。単純な操作で大量の連番を一括入力できるため、手間やミスを減らし、作業効率を上げることができる優れものです。
HubSpotのブログで特定のタグを含む記事リスト（関連記事一覧）を作成する方法
今回はHubL関数の blog_recent_tag_posts を用いて、ブログの記事ページに特定のタグを含む記事リスト（関連記事一覧）をつくってみたので、ポイントを解説します。
【GA4 Tips】経路データ探索で特定のページだけを表示する方法
GA4の経路データ探索はコンバージョン経路を視覚的に解析しますが、ページパスの表示は20件までです。本ガイドでは、session_start後の特定ページを絞り、21件目以降のページも表示する方法を分かりやすく説明します。セグメント機能を利用し、PV数の少ないページパスの分析も可能です。
HubSpotのウェブチャットを設置する手順を解説します
HubSpotの管理画面を見ながら、ウェブチャットを設置する手順を具体的に解説します。HubSpotには無料のウェブチャット機能が備わっており、プログラミングやコーディングの知識がなくても簡単にウェブチャットが設置できます。
『てらこやサプリ』開発秘話【企画編】
こんにちは。採用広報の辻です。 先日、2月1日に当社2つ目となるアプリ、「てらこやサプリ」をリリースしました。 そこで、今回から「てらこやサプリ」の企画段階からリリースまでのお話をしていきたいと思います！ 「てらこやサプリ」のはじまり 当社は2019年に初めてのアプリ「てらこや都道府県」をリリースしました
Atomのマルチカーソルで連番を入力してくれるパッケージ「sequential-number」
こんにちは、フロントエンドエンジニアの尾形です。 CONTENTS はじめに 作業効率を上げてくれる「sequential-number」 基本的な使い方 他にもいろんな構文があります おわりに 参考 はじめに 今回は、Atomのパッケージの1つを紹介したいと思います。 アンタイプでは、Atomをメインのテキ
サイトのAI互換性を、
データで把握する。
GPT-4o・Claude・Geminiなど主要AIエージェントから見た
御社サイトの可読性を、W3C・Schema.org準拠の39項目で自動測定。