AIでスクロール読了率を表示するプログレスバーを作る【CSS＋JS生成】
AIでスクロール読了率プログレスバーを生成する方法。scrollYとscrollHeightを使ってwidthを動的に変化させるCSS+JSをプロンプト例・コード付きで解説します。
AI活用
ChatGPT・Claude・Geminiなど生成AIツールの実践的な使い方を解説します。Web制作・ライティング・業務効率化での活用例を中心に、初心者でもすぐ試せる方法と、現場で使えるプロンプトのコツを紹介しています。
AIでテキストが1文字ずつ打ち込まれるタイピングアニメーションを作る【CSS＋JS生成】
AIでタイピングアニメーションを生成する方法。1文字ずつ表示するJS・カーソル点滅CSS・複数フレーズのループまでプロンプト例・コード付きで解説します。
AIで星評価（レーティング）UIを作る【CSS＋JS生成】
AIで星評価UIを生成する方法。ホバーで点灯・クリックで確定するインタラクションをCSS+JSで実装。プロンプト例・コード付きで初心者向けに解説します。
AIでボタンのホバーエフェクトを作る【CSS生成・5パターン】
AIでボタンのホバーエフェクトを5パターン生成する方法。スライド・アウトライン・矢印・リップル・フロートの各CSSをプロンプト例・コード付きで解説します。
AIでローディングスピナーをデザインする【CSS生成】
AIでローディングスピナーのCSSアニメーションを生成する方法。@keyframesとborderを使ったスピナーをプロンプト例・コード付きで初心者向けに解説します。
AIで画像クリックで拡大表示するライトボックスを作る【CSS＋JS生成】
AIで画像クリック拡大ライトボックスを生成する方法。フェードアニメーション・ESCで閉じる・背景クリック対応のCSS+JSをプロンプト例・コード付きで解説します。
AIでh1タイトルをグラデーションにする方法【CSS自動生成】
AIを使ってh1タイトルをグラデーション文字にするCSSを自動生成する方法を紹介。既存HTMLへの追加と、HTMLごと生成する2パターンのプロンプト例・コード例を解説します。
AIで入力フォームのバリデーションUIを作る【CSS＋JS生成】
AIでフォームバリデーションUIを生成する方法。必須チェック・メール形式チェック・エラー表示のCSS+JSをプロンプト例・コード付きで解説します。
AIでスライドショーのボタン・インジケータをデザインする【CSS＋JS生成】
AIでスライドショーの左右ボタン・ドットインジケータをデザインする方法。既存HTMLへのCSS+JS追加と、HTMLごと生成する2パターンのプロンプト・コード例を紹介します。
AIでスクロール固定エリア内に展開するコンテンツを作る【CSS＋JS生成】
AIでスクロール固定サイドバー内のアコーディオンUIを生成する方法。position:stickyと開閉アニメーションのCSS+JSをプロンプト例・コード付きで解説します。
AIでホバーすると浮き上がるカードデザインを作る【CSS生成】
AIでホバー時に浮き上がるカードデザインのCSSを生成する方法。translateYとbox-shadowを使ったホバーエフェクトをプロンプト例・コード付きで解説します。
AIでモーダルウィンドウを作る【CSS＋JS生成】
AIでモーダルウィンドウを生成する方法。背景オーバーレイ・フェードアニメーション・×ボタンで閉じる機能まで、CSS+JSのプロンプト例とコードを紹介します。
AIでハンバーガーメニューを作る【CSS＋JS生成】
AIでハンバーガーメニューを生成する方法。三本線が×に変化するアニメーションとナビの開閉をCSS+JSで実装。プロンプト例・コード付きで解説します。
AIでタブ切り替えUIを作る【CSS＋JS生成】
AIでタブ切り替えUIを生成する方法。data属性でタブとコンテンツを紐付け、アクティブタブの強調とコンテンツ切り替えをCSS+JSで実装。プロンプト例・コード付きで解説します。
AIでスクロールしたら要素がフェードインするアニメーションを作る【CSS＋JS生成】
AIでIntersection Observer APIを使ったスクロールフェードインアニメーションを生成する方法。CSS+JSのプロンプト例・コードを初心者向けに解説します。
AIで数字がカウントアップするアニメーションを作る【JS生成】
AIで数字がカウントアップするアニメーションのJSを生成する方法。requestAnimationFrameとIntersection Observerを使った実装のプロンプト例・コードを紹介します。
AIでホバーするとツールチップが表示されるUIを作る【CSS生成】
AIでCSSのみのツールチップを生成する方法。ホバーで上部に吹き出し表示、三角形の矢印、フェードアニメーションまでプロンプト例・コード付きで解説します。
AIでページ内リンクをスムーススクロールにする【CSS＋JS生成】
AIでページ内リンクをスムーススクロールにする方法。固定ヘッダーのオフセット調整まで含めたCSS+JSのプロンプト例・コードを初心者向けに解説します。
AIでダークモード切り替えボタンを作る【CSS＋JS生成】
AIでダークモード切り替えボタンを生成する方法。CSS変数を使った色管理とlocalStorageで設定を保存する実装のプロンプト例・コードを紹介します。
AIでコードブロックにコピーボタンを追加する【CSS＋JS生成】
AIでコードブロックにコピーボタンを追加する方法。Clipboard APIを使ったコピー処理とフィードバック表示のCSS+JSをプロンプト例・コード付きで解説します。
生成AIを使いこなすための「プロンプト」完全ガイド｜重要ポイントと実践的な作り方
生成AIのプロンプト（指示文）を上手に作るためのポイントを、例題と合わせてわかりやすく解説。AIと対話しながらプロンプトを磨く実践的な方法も紹介します。
主要AIツール10選を徹底比較｜コード生成・画像生成・文章生成の得意分野と料金まとめ【2025年最新版】
ChatGPT、Claude、Gemini、Midjourney……主要生成AIツール10種類を厳選し、コード生成・画像生成・文章生成などの得意分野と料金プランを一覧表で徹底比較。目的別のおすすめAI選び方ガイドも掲載。
