Web制作会社

(Web制作会社 / ターゲット：大手企業の担当者・スタートアップ / 目的：高単価案件の受注・ブランディング)

■ 制作概要・コンセプト

「Webの限界」を突破する、アヴァンギャルドな実装力

Web制作会社のポートフォリオサイトは、それ自体が最強の営業ツールであり、技術力の証明書です。守りに入ったテンプレート的なデザインではなく、あえて「崩し（ブロークングリッド）」や「3D表現（WebGL）」を取り入れ、訪問者の既成概念を壊すインパクトを狙いました。「この会社に頼めば、競合を圧倒するクリエイティブが手に入る」という期待値を最大化し、価格競争に巻き込まれない高付加価値なブランディングを確立しています。

■ デザイン戦略（配色・フォント）

配色：ダークモード (#121212) とネオン・グラデーション

色彩心理： 黒背景（ダークモード）は、コンテンツへの没入感を高め、発光するようなネオンカラーのグラデーションを際立たせます。これは「先進性」「デジタル」「夜明け（新しい始まり）」を象徴し、クライアントの挑戦的な姿勢とリンクさせました。

フォント：Monument Extended (欧文) + 游明朝体 (和文)

見出しには、横に大きく広がったワイドフォント「Monument Extended」を使用。画面からはみ出るほどのサイズで配置し、読む文字ではなく「見るグラフィック」として扱いました。
対照的に、本文には繊細な「游明朝体」を使い、力強さと知性の強烈なコントラスト（対比）を生み出しています。

■ UI/UX設計（レイアウトの意図）

WebGLとカスタムカーソルによる没入体験

マウスの動きに合わせて画像が歪む（ディストーションエフェクト）や、背景の粒子が反応するインタラクションを実装。
カーソルをオリジナルの円形デザインに変更し、リンクに重なると変形するマイクロインタラクションを追加。ユーザーの操作そのものをエンターテインメント化し、滞在時間を延ばすUX設計です。

SPA（Single Page Application）風の遷移

ページ遷移時に画面が白くならず、滑らかに次の画面へ繋がるシームレスな遷移（Barba.js等を使用）を実現。
アプリケーションのような快適な操作感を提供し、技術力の高さを無言のうちにアピールしています。

■ マーケティング・SEO視点

※クリエイティブとSEOの両立（Technical SEO）

WebGL/Canvasのパフォーマンス最適化

高度なアニメーションは表示速度を低下させ、SEOに悪影響を与える諸刃の剣です。
今回は、オフスクリーンレンダリングやシェーダー（GLSL）の軽量化を徹底。Core Web Vitalsの指標（LCP/FID/CLS）をすべて「良好」の範囲に収め、「動きがすごいのに、爆速で表示される」という技術的SEOの最適解を導き出しました。

ポートフォリオの構造化データ（CreativeWork）

実績詳細ページには Schema.org/CreativeWork の構造化データを埋め込みました。
検索エンジンに対し、単なる画像ではなく「制作物（作品）」として認識させ、画像の検索結果やDiscover（Google砲）での露出を狙う戦略です。

「地域名 × Web制作」での指名検索獲得

競合ひしめく「Web制作会社東京」などのビッグワードだけでなく、「BtoBサイト制作実績」「採用サイトブランディング」 といった、目的特化型のキーワードでLPを作成。
ホワイトペーパー（「失敗しないリニューアルの教科書」など）のダウンロード導線を設置し、今すぐ客だけでなく、将来の見込み客（リード）情報を獲得するMA（マーケティングオートメーション）連携も行っています。

アクセシビリティとマシンリーダビリティの確保

視覚的なインパクトを重視しつつも、スクリーンリーダー（音声読み上げ）やクローラーが情報を正しく取得できるよう、セマンティックなHTMLコーディング（WAI-ARIA）を徹底。
「おしゃれだけど読めない」を排除し、Googleの評価アルゴリズムに好かれる内部構造を構築しました。

【用語解説】

MA (Marketing Automation)： 顧客情報の収集・管理・育成を自動化するツールや仕組み。
WebGL： Webブラウザ上で、プラグインなしに3次元グラフィックス（3D）を表示させる技術。
SPA (Single Page Application)： ページ遷移を行わず、単一のページ内でコンテンツを書き換える仕組み。高速でアプリのような挙動になる。
Core Web Vitals： Googleが重視する3つのユーザー体験指標（LCP:読み込み、FID:応答性、CLS:視覚的安定性）。
WAI-ARIA： Webアクセシビリティを向上させるために、HTMLに役割や状態を記述する仕様。