Highneeds

3D・Web・AIの実装を、事例とコードで追いかけるメディアです。

山口県山口市宮野上字森1814-1

コーポレートサイト

コンテンツ

  • 3Dサイト
  • スニペット
  • AIニュース
  • コラム

ツール

  • テンプレート配布
  • Web診断

サイト情報

  • 会社概要
  • お問い合わせ
  • プライバシーポリシー

© 2026 Highneeds

Highneeds
3DサイトスニペットAIニュースコラムブログテンプレートWeb診断

Highneeds

3D・Web・AIの実装を、
事例とコードで追いかける。

Three.js / WebGL を使ったサイトの実装解説、コピーして使えるコードスニペット、AIまわりの最新動向。 「実際どう作られているか」に寄せたフロントエンド開発メディアです。

3Dサイトギャラリーを見るスニペットを探す
1733Dサイト8スニペット142AIニュース3コラム

3Dサイトギャラリー

Three.js / WebGL を使ったサイトを、実装の中身まで踏み込んで紹介しています。

すべて見る →
注目

Vectr

WebGPUで組んだBtoBサイト。3DシーンをWeb WorkerのOffscreenCanvasに逃がし、メインスレッドを空けている。

Three.js WebGPUWebGLフォールバックOffscreenCanvasAstro
注目

CoffeeTech®

業務用コーヒー焙煎機メーカーのサイト。3Dヒーローと360表示を載せたWebflow製で、Site of the Day と Developer Award を同時受賞している。

WebflowGSAPJavaScript360ビュー

新着スニペット

コピーしてすぐ使える HTML / CSS / JavaScript のパーツ集。

スニペット一覧へ →

AIニュース

モデル・ツール・開発環境のアップデートを開発者目線で。

もっと見る →
No Image
2026/9/5GitHub Changelog公式

GitHub Copilot、VS Code 1.136 に PR を整える Agent Merge を追加

GitHubがCopilotの週次アップデートを公開した。VS Code 1.136ではレビュー指摘・失敗したチェック・マージコンフリクトを解消してPRをマージ可能な状態にするAgent Mergeがパブリックプレビューで登場。マルチルートワークスペース対応やチャットセッションの階層表示も実験的機能として加わった。

GitHub CopilotVS Codeエージェントリリース
No Image
2026/9/5Vercel Changelog公式

Vercel AI Gateway、OpenAI の GPT-6 Astra を利用可能に

VercelがAI Gatewayで OpenAI の GPT-6 Astra の提供を開始した。モデルIDは openai/gpt-6-astra で、AI SDK から指定して呼び出せる。コーディングエージェント向けのセットアップコマンドも用意され、Codex や Cursor と連携できる。長時間のエージェント作業を想定したモデルと位置づけられている。

ツール

読むだけでなく、そのまま使えるものも置いています。

テンプレート配布

Vite + WordPress など、実案件でそのまま使える開発テンプレート。構成を選んでダウンロードできます。

テンプレートを見る →

Web診断

URLを入力するだけで、SEO・構造化データ・アクセシビリティの観点からサイトをチェックします。

サイトを診断する →
注目

Hiroto Sato

日本のクリエイティブデベロッパーの個人サイト。ステッカーを触るインタラクションとページ遷移で Site of the Day を獲った。

WebGL3DGSAPBlender
注目

Lacoste — Polo Factory

ポロシャツができるまでを工場に見立てた3D体験。編む・刺す・染めるの各工程がそれぞれ操作できる機械になっている。

Three.jsWebGLゲーミフィケーションフルスクリーン
注目

Noomo Showcase

ショーリールを動画にせず、WebGLの3Dプレビューで並べたエージェンシーの作品集。SOTDとDeveloper Awardの二冠。

WebGLThree.jsGSAPスクロール連動
注目

TRIONN

インドのデザインスタジオの自社サイト。Site of the Day と Developer Award を同日に取った実装評価先行の3Dポートフォリオ。

Next.jsThree.jsGSAPLenis
注目

Lacoste Ace Breaker

ラコステの会員向けブロック崩し。テニスのラリーをゲーム化し、景品はローラン・ギャロスのチケット。

Three.jsWebGLブラウザゲームフルスクリーン
注目

Produx Design

Site of the DayとDeveloper Awardを同日に取ったブランディングスタジオのサイト。暗い緑2色の中で3Dを抑制的に使う。

Three.jsNext.jsGSAPフィルタ・エフェクト

ヒーローセクション

見出し・リード文・CTA2つのファーストビュー。背景はCSS変数で、グラデーションのままでも画像に差し替えても使えます。JavaScript不要。

レイアウト

サイトヘッダー（レスポンシブナビ）

ロゴとグローバルナビのヘッダー。狭い画面ではハンバーガーメニューに切り替わり、aria-expanded とキーボード操作にも対応しています。

レイアウト

サイトフッター（サイトマップ型）

リンクを分類して並べる多カラムフッター。カラム数は auto-fit で自動調整され、狭い画面では自然に段組みが崩れます。JavaScript不要。

レイアウト

ページネーション

前後リンクとページ番号のページネーション。現在地は aria-current、省略記号は読み上げ対象外にしています。JavaScript不要。

ナビゲーション

モーダル（native dialog）

ネイティブの <dialog> を使ったモーダル。フォーカストラップと背面スクロールの抑制はブラウザ任せなので、JavaScriptは開閉の数行だけで済みます。

UIパーツ

FAQアコーディオン（構造化データ対応）

details / summary だけで動くFAQアコーディオン。schema.org の FAQPage に対応し、JavaScriptは一切使っていません。

コンテンツ
VercelOpenAIモデルエージェント
No Image
2026/9/5GitHub Changelog公式

GitHub、スター推移を取得できるプライバシー配慮のAPIを追加

GitHubがリポジトリのスター数の推移をタイムスタンプ付きで取得できる新しいRESTエンドポイントを公開した。個々のスター付与ユーザーの情報は返さない。2026年前半にstargazer一覧の取得が管理者とコラボレーターに限定され、動かなくなっていたスター数トラッキングツールの受け皿となる。

GitHubAPIリリース開発ツール
No Image
2026/9/5GitHub Changelog公式

GitHub Actions、Dependabot アラート専用の権限とランナー廃止APIを追加

GitHub は GitHub Actions の9月初旬アップデートを公開した。GITHUB_TOKEN に Dependabot アラートを読むための vulnerability-alerts 権限を新設し、最小権限での運用がしやすくなる。あわせてランナーの廃止時期を照会する REST API と、再利用可能ワークフロー向けの job コンテキスト4種を追加した。

GitHubGitHub ActionsCI/CDセキュリティ

コラム

技術の使いどころと考え方を実務目線で。

もっと見る →
No Image
注目
2026/8/23

AIエージェントがジムの予約を消した件は、20年前からある認可の欠陥だった

オーストラリアでAIエージェントが予約システムの脆弱性を突き、他人の予約を取り消した事例。使われたのはOWASPが7年間1位に置き続ける基本的な認可漏れでした。何が起きたかを技術的に分解し、実装側とエージェント利用側それぞれの対応策をまとめます。

AIセキュリティAPIエージェント
No Image
注目
2026/8/23

WordPressサイト構築の注意点チェックリスト（随時更新）

Contact Form 7 を入れたら SMTP も入れる、から始まる WordPress 構築のチェックリスト。画像・パフォーマンス・セキュリティ・SEO・AIO最適化・本番移行・運用まで、毎回つまずくところを一箇所にまとめています。気づいた点を随時追記していきます。

WordPressチェックリストSEOパフォーマンス
注目
2026/8/22

Claudeの「エージェント」を分解する —— チャットボットではなく、ループを回す実行環境

Claudeのエージェント機能を、CLI / Agent SDK / Managed Agents / Client SDK の4レイヤーと、サブエージェント・Skills・MCP・Hooksといった構成部品に分解して整理する。設計の中心にあるのは「コンテキストをどう配るか」という問題だった。

AIエージェントClaude開発