Development

Next.jsのバージョン

Next.jsのバージョンを確認する方法をいくつか紹介します。

1. package.jsonで確認(最も一般的)

プロジェクトのルートディレクトリにあるpackage.jsonファイルを開いて、dependenciesセクションを確認します:

{
  "dependencies": {
    "next": "14.0.0",  // ← ここにバージョンが記載
    "react": "^18.2.0",
    ...
  }
}

2. コマンドラインで確認

プロジェクトのディレクトリで以下のコマンドを実行:

npm list next

または

npx next --version

yarn を使用している場合:

yarn list next

3. node_modulesで確認

node_modules/next/package.jsonを開いてバージョンを確認することもできます。

4. グローバルインストールされているNext.jsの確認

グローバルにインストールされているNext.jsのバージョンを確認する場合:

npm list -g next

最も簡単なのはpackage.jsonを確認する方法か、npx next --versionを実行する方法です。

pnpm

pnpmは、Node.jsのパッケージマネージャーの一つで、npmやYarnの代替として使われるツールです。

主な特徴

ディスク容量の効率化 pnpmは同じパッケージのバージョンを一度だけグローバルストアに保存し、各プロジェクトではそこへのハードリンクを作成します。これにより、複数のプロジェクトで同じパッケージを使っていても、ディスク容量を大幅に節約できます。

高速なインストール 既にグローバルストアにあるパッケージはダウンロードせずにリンクするだけなので、インストールが高速です。

厳密な依存関係管理 pnpmはnode_modulesの構造を厳密に管理し、package.jsonに明示的に記載されていないパッケージへのアクセスを防ぎます。これにより、依存関係の問題を早期に発見できます。

基本的な使い方

# インストール
npm install -g pnpm

# パッケージのインストール
pnpm install

# パッケージの追加
pnpm add <package-name>

# スクリプトの実行
pnpm run <script-name>

npmやYarnと同じような感覚で使えますが、内部の仕組みがより効率的になっているのが特徴です。モノレポ(複数のパッケージを一つのリポジトリで管理する構成)のサポートも優れています。

AIでLP作成

LP(ランディングページ)をAIで作る方法は、大きく分けて**「① 全自動生成ツールを使う(初心者向け)」「② 各工程で専用AIを組み合わせて作る(中級〜プロ向け)」**の2つのパターンがあります。

それぞれの方法とおすすめのツール、具体的な手順を解説します。


方法①:AIサイトビルダーで一気に作る(初心者・スピード重視)

「デザイン、構成、テキスト」をすべてAIが自動で生成してくれるツールを使います。プロンプト(指示文)を入力するだけで、数分で形になります。

おすすめツール

  1. Framer AI(デザイン性が高い)

    • 特徴: 「スタートアップ向けのLPを作って」と入力するだけで、かなりおしゃれなデザインと構成を生成します。Figmaのような操作感で後から修正も容易です。
    • 向いている人: デザイン重視の人。
  2. Wix ADI (Artificial Design Intelligence)

    • 特徴: いくつかの質問に答えるだけで、画像やテキストが入った完成状態のサイトを作ってくれます。
    • 向いている人: 日本語対応やサポートを重視する人。
  3. Mixo / Durable

    • 特徴: 事業内容を一行入力するだけで、秒速でLPを生成します。
    • 向いている人: とにかくテストマーケティング用に爆速で公開したい人。

方法②:各工程で最強のAIを使い分ける(クオリティ重視)

「構成・文章」「画像」「コーディング」それぞれに特化したAIを使うことで、売れるLP(成約率の高いLP)を作ることができます。

手順1:構成・コピーライティング(ChatGPT / Claude)

まず、LPの骨組みと文章を作ります。

  • 使うツール: ChatGPT (GPT-4), Claude 3.5 Sonnet
  • プロンプト例:

    あなたはプロのWebマーケターです。 以下の商品のLP構成案と、各セクションのコピー(見出し・本文)を作成してください。

    商品: オンライン英会話スクール ターゲット: 忙しい30代のビジネスマン 強み: 1日10分、AI講師が相手 フレームワーク: PASの法則(Problem, Agitation, Solution)を使ってください。

手順2:素材・画像の生成(Midjourney / DALL-E 3)

フリー素材ではなく、オリジナルの画像を生成して独自性を出します。

  • 使うツール: Midjourney(高品質な写真・イラスト)、DALL-E 3(ChatGPT内で手軽に作成)、Canva(Magic Media機能)
  • ポイント: 「日本人、ビジネスマン、悩んでいる顔、高品質な写真」などの指示で、ヒーローイメージ(トップ画像)を作成します。

手順3:デザイン・実装(v0.dev / Relume / 既存ツール)

ここが一番手間がかかる部分ですが、AIで大幅に短縮できます。

ITコンサルティング

ITコンサルティングのLP を、ターゲット「IT活用に悩む企業」、目的「コンサル申し込み」を軸に、そのまま使える構成案+コピー案 を作ります。

必要であれば、このあと デザイン案、HTML/CSSのコード化、AI画像生成 までできます。


ITコンサルティングLP:構成案(フル版)

以下はそのままLPとして使えるレベルで作りました。


① ファーストビュー(トップ)

IT活用の悩みを“成果につながる仕組み”へ。

中小企業のDX・業務改善を成功に導くITコンサルティング

  • 無料相談受付中(30分オンライン)

  • IT戦略立案/業務改善/システム導入支援/AI活用

  • “現場で使えるIT”だけを提案

▶ 無料相談を申し込む(CTAボタン)


② なぜIT活用がうまくいかないのか?(共感セクション)

  • ITツールを導入したのに、現場が使いこなせない

  • システムが複雑になり、結局手作業が減らない

  • どのツールを選べば良いかわからない

  • コストだけ増えて効果が見えない

  • ITに詳しい人材が社内にいない

その悩み、“経営と現場の間”をつなぐコンサルが解決します。


③ 提供する価値(ベネフィット)

**「ITを導入すること」ではなく、

“成果につながる仕組み”を作ることがゴールです。**

  • 業務のムダが減り、担当者の作業時間が30〜70%削減

  • IT投資の効果が数値で見える

  • 営業・バックオフィスが効率化

  • 社員のITスキルに依存しない仕組み化

  • 経営者が本業に集中できる状態を実現


④ サービス内容(メニュー)

◆ ITコンサルティング(単発/月額)

  • IT活用診断(業務改善ポイント洗い出し)

  • IT戦略・ロードマップの作成

  • DX計画の立案

  • ITツール選定(SFA、CRM、ERP、MA、勤怠、会計 etc.)

◆ 業務改善コンサルティング

  • 現場ヒアリング

  • 既存業務フローの可視化

  • ボトルネック解消

  • 自動化(RPA、AI、API連携)

◆ システム導入支援

  • 要件定義

  • ベンダー選定

  • 導入プロジェクト管理

  • 社員向けトレーニング


⑤ 実績・事例(テンプレ)

● 製造業(50名)

  • 業務プロセスを再設計

  • 情報共有の仕組みを構築
    作業時間を40%削減、ミス80%減少

● 建設業(20名)

  • 見積〜請求業務を自動化
    年間300時間の削減

● 小売・EC企業

  • CRM活用でリピート率向上
    売上120%に改善

⑥ 他社コンサルとの違い(差別化ポイント)

1. 現場を理解した実行支援型

提案だけで終わらず、導入・運用まで伴走。

LPビルダーツール

LPをAIで作る方法についてご説明しますね。

AIでLP(ランディングページ)を作成する主な方法

1. Claudeを直接活用

このチャット上で、以下のような流れでLPを作成できます:

  • 目的やターゲット、商品・サービスの情報を教えていただく
  • 私がHTML/CSS/JavaScriptを使ったLPのコードを生成
  • プレビューを確認しながら、修正・調整を繰り返す
  • 完成したコードをコピーして、サーバーにアップロード

2. AI搭載のLPビルダーツール

専門ツールを使う方法もあります。最新の情報を調べてみますね。現在、様々なAI搭載のLP作成ツールが登場しています。主なものとして:

海外ツール:

  • Mixo - 事業アイデアを1行入力するだけでLP全体を数十秒で自動生成
  • Instapage - ドラッグ&ドロップで操作でき、AIが見出しやCTAを自動生成
  • v0 - 自然な言葉で指示するだけでプロ級のLPを生成

国内ツール:

  • smartLP - 国産ツールで、LPOをAIが自動実行し、マーケティング機能も充実
  • Jimdo AIビルダー - 質問に答えるだけで構成やデザインを自動生成

デザインツール:

  • Canva - AI画像生成やAI文章生成機能を搭載

3. このチャットで直接作る(おすすめ)

今すぐに始められる方法として、このチャットで直接作成することも可能です。例えば:

「美容サロンのLPを作りたい。ターゲットは30代女性で、フェイシャルエステを宣伝したい」

といった情報を教えていただければ、すぐにコードを生成してプレビューもお見せできます。

Nanobanana

Nanobananaの使い方について、詳しい情報を検索します。Nanobananaの使い方を詳しくご説明します。

基本的な使い方

1. アクセス方法

現在、NanobananaはGoogle AI StudioやLMArenaなどのWebプラットフォームから利用できます。アプリのインストールは不要です。

2. Google AI Studioでの利用手順

ステップ1: ログイン Google AI Studioにアクセスし、Googleアカウントでログインします

ステップ2: モデルの選択 モデル選択から「Nano Banana」または「Gemini 2.5 Flash Image Preview」を選択します

ステップ3: 画像とプロンプトの入力 チャット欄の「+」マークから編集したい画像をアップロードし、どのような編集をしてほしいか入力します

ステップ4: 生成・保存 簡単な内容であれば数十秒で画像が生成されます

プロンプト例

3Dフィギュア作成

この写真をもとにキャラクターフィギュアを生成してください。
フィギュアの後ろに、そのキャラクターのイラストが印刷された箱を置いてください。

スタイル変換

柴犬の子犬がバタフライを追いかける、かわいいスタンプ風イラスト。
パステルな草原で、線ははっきり、セルシェーディング、背景は白

できること

人物はそのままで背景だけを夕焼けの海に変更するなど、元の画像の一貫性を保ちながら部分的に編集することができます。服装・髪型・背景などを自然に変更でき、複雑な指示も簡単なフレーズで理解し、数秒で高品質な画像を出力します。

料金

無料版では登録時に数十枚分のクレジットが提供されますが、制限があります。有料版では毎月定額で追加クレジットが利用でき、高解像度や高度な編集機能が解放されます。

コツ

日本語でも使えますが、英語プロンプトの方が細かいニュアンスに強い場合があるため、併用がおすすめです。また、具体的な情景描写を入れると生成精度が向上します。

Xの自動化

X(旧Twitter)の投稿を「AIエージェント」として自動化するには、単に決まった時間に投稿するだけでなく、「情報収集 → 内容の決定 → 文面作成 → 投稿」という自律的なサイクルを構築する必要があります。

以下に、実装に必要な準備、アーキテクチャ、そして具体的なコード例(Python)を解説します。


1. 必要なもの・準備

まず、Xの自動化には以下のハードル(主にAPI有料化)があります。

  1. X API Key (有料)
    • Freeプラン: 書き込みのみ(月1,500件)。テスト用には使えますが、本格運用には制限がきついです。
    • Basicプラン ($100/月): 一般的なBot開発にはこれが必要になることが多いです。
    • 注意: APIを使わずブラウザ操作(Selenium等)で自動化するのは、Xの規約違反でアカウント凍結リスクが高いため推奨しません。
  2. OpenAI API Key (またはAnthropicなど)
    • AIに投稿内容を考えさせるために必要です。
  3. 検索ツール (任意だが推奨)
    • 最新ニュースを元に投稿させたい場合、AIはリアルタイム情報を知らないため、Tavily APIGoogle Search API などを持たせます。

2. AIエージェントの仕組み(ワークフロー)

単なるBotではなく「エージェント」にするためには、以下のフローをプログラムします。

  1. トリガー: 定期実行 (cron) や 特定のニュース速報など。
  2. 情報収集 (Observe): 特定のキーワードでWebニュースやトレンドを検索。
  3. 思考 (Think): 集めた情報を元に、「今のフォロワーにとって何が有益か?」をAIが考える。
  4. 生成 (Act): Xの140文字(日本語)制限に合わせて、ハッシュタグ付きで文章を作成。
  5. 実行: X API経由で投稿。

3. 実装例 (Python)

ここでは、**「最新のAIニュースを検索し、要約して感想付きでポストするエージェント」**の最小構成を紹介します。

必要なライブラリ:

pip install tweepy openai tavily-python python-dotenv

コード (agent.py):

import os
import tweepy
from openai import OpenAI
from tavily import TavilyClient
from dotenv import load_dotenv

# .envファイルからキーを読み込む
load_dotenv()

# 1. 各クライアントの初期化
# X (Twitter) API v2 Client
x_client = tweepy.Client(
    consumer_key=os.getenv("X_CONSUMER_KEY"),
    consumer_secret=os.getenv("X_CONSUMER_SECRET"),
    access_token=os.getenv("X_ACCESS_TOKEN"),
    access_token_secret=os.getenv("X_ACCESS_TOKEN_SECRET")
)

# OpenAI & Tavily (検索用)
openai_client = OpenAI(api_key=os.getenv("OPENAI_API_KEY"))
tavily_client = TavilyClient(api_key=os.getenv("TAVILY_API_KEY"))

def run_agent_post(topic="生成AI 最新トレンド"):
    print(f"🕵️ '{topic}' について調査中...")
    
    # 2. Web検索 (Tavilyを使って最新情報を取得)
    search_result = tavily_client.search(query=topic, search_depth="basic", max_results=3)
    context_text = "\n".join([f"- {res['content']}" for res in search_result['results']])

    print("🧠 投稿内容を生成中...")
    
    # 3. AIによる投稿文生成
    # プロンプトエンジニアリング:文字数制限とペルソナを設定
    prompt = f"""
    以下のニュース情報を元に、X(Twitter)の投稿を作成してください。
    
    【ニュース情報】
    {context_text}
    
    【制約条件】
    - 日本語で130文字以内(厳守)。
    - 専門家のような少し辛口だが有益な視点を入れること。
    - 最後に適切なハッシュタグを2つだけつけること。
    - URLは含めないでください。
    """

    response = openai_client.chat.completions.create(
        model="gpt-4o",
        messages=[
            {"role": "system", "content": "あなたはSNSマーケティングとAI技術の専門家です。"},
            {"role": "user", "content": prompt}
        ]
    )
    
    tweet_text = response.choices[0].message.content.strip()
    print(f"📝 生成されたツイート:\n{tweet_text}")

    # 4. Xへ投稿
    try:
        x_client.create_tweet(text=tweet_text)
        print("✅ 投稿成功!")
    except Exception as e:
        print(f"❌ 投稿エラー: {e}")

if __name__ == "__main__":
    run_agent_post()

4. さらに高度化するアイデア

実装のレベルを上げると、より人間らしい運用が可能です。

チャットボット


チャットボット設計:用途別ガイド

チャットボットは用途によって、目的・対象ユーザー・会話フロー・技術選定を変えて設計する必要があります。

設計の基本方針

どの用途でも以下の3点を明確にすることが重要です。

  1. 利用目的とKPI:問い合わせ削減率、CV数、自己解決率など
  2. 想定ユーザーとニーズ:誰が、何に困って、どんな質問をするか
  3. ボットタイプの選定:シナリオ型・FAQ型AI・生成AIから最適なものを選ぶ

用途別の設計ポイント

1. FAQ・問い合わせ対応

目的:問い合わせ削減、自己解決率向上

設計のポイント

  • 問い合わせログから頻出質問を洗い出し、Q&Aペアを整理する
  • シナリオ階層は3〜5程度に抑え、素早く答えにたどり着ける構造にする
  • 解決できない場合の有人チャット・フォームへのエスカレーション導線を用意する

適した技術:シナリオ型、FAQ型AIボット(正確性重視)


2. 接客・マーケティング

目的:CV増加、商品理解促進

設計のポイント

  • ゴール(商品診断、資料請求、申込など)を明確にし、誘導する会話フローを設計
  • 質問に答えるだけでなく、選択肢やレコメンドでユーザー行動をガイドする
  • ボットの人格・トーン(フレンドリー/ビジネスライクなど)をブランドに合わせて統一

適した技術:生成AIボット、シナリオ+AIのハイブリッド型(柔軟な対話が必要)


3. 社内ヘルプデスク・ナレッジ検索

目的:社員の検索時間削減、問い合わせ分散

設計のポイント

  • 対象領域(人事・総務・ITなど)と対応範囲を明確化し、社内FAQやマニュアルを優先的に取り込む
  • 回答スピードと検索性を重視し、誤回答時の確認・更新フローを整備
  • 使い方ガイドを最初に表示し、短文で分かりやすい回答を返す設計

適した技術:FAQ+生成AI(RAG型)で社内ドキュメントを横断検索


用途別設計早見表

用途 目的 適したボット 重要ポイント
顧客FAQ 問い合わせ削減 シナリオ型・FAQ型AI 正確なQ&A整理/浅い階層/有人連携
接客・マーケ CV増加 生成AI・ハイブリッド ゴール逆算フロー/レコメンド/人格設計
社内ヘルプ 検索時間削減 FAQ+生成AI(RAG型) 対象領域明確化/文書連携/更新体制

成功の鍵

どの用途でも、以下の流れと改善サイクルを前提に設計することが重要です。

基本フロー:挨拶 → 使い方ガイド → 質問対応 → 代替手段(有人対応・フォーム)

継続改善:ログを分析しながら、回答精度と会話フローを継続的に改善する


Module Java Script

.mjs の意味

  • Module JavaScript の略

  • ES Modules(import/export を使うモジュール方式)で書かれた JS ファイルであることを示す

ファイルの拡張子 .mjs は、ECMAScript Modules (ES Modules / ESM) として扱われる JavaScript ファイルであることを明示するための拡張子です。

主に Node.js 環境において、従来の読み込み方式(CommonJS)と区別するために使われます。

主な特徴とポイント

  1. ES Modules (ESM) の強制

    • Node.js では通常、.js ファイルは CommonJSrequire / module.exports を使う方式)として扱われます。
    • .mjs 拡張子を使うと、そのファイルは強制的に ES Modulesimport / export を使う方式)として扱われます。
  2. 構文の違い

    • CommonJS (.js のデフォルト):
      const fs = require('fs');
      module.exports = function() { ... };
      
    • ES Modules (.mjs):
      import fs from 'fs';
      export function myList() { ... };
      
  3. Strict Mode(厳格モード)がデフォルト

    • .mjs ファイル内では、自動的に 'use strict'; が適用された状態になります(変数の宣言漏れがエラーになるなど、安全なコードになります)。

なぜ作られたのか?

JavaScript の標準仕様(ES2015/ES6)でモジュール機能(import/export)が決まりましたが、Node.js にはそれ以前から存在する独自のモジュール機能(CommonJS)がありました。

JWT(SON Web Token)とは

JWT(JSON Web Token)とは、
ユーザーの認証情報や属性情報などを安全にやり取りするための、コンパクトなトークン形式のことです。
Webアプリ・API・モバイルアプリなどで幅広く使われています。


◆ JWTの基本構造

JWTは「ドット」で区切られた 3つの部分 から構成されます:

xxxxx.yyyyy.zzzzz
  1. Header(ヘッダー)
    ・署名方式などのメタ情報
    ・例:{"alg": "HS256", "typ": "JWT"}

  2. Payload(ペイロード)
    ・ユーザーIDや有効期限などの「クレーム(claims:情報)」
    ・例:{"sub": "12345", "name": "seiichi", "exp": 1735640000}

  3. Signature(署名)
    ・偽造されていないことを保証するための署名
    ・サーバー側が秘密鍵で作成する


◆ JWTがよく使われる理由(メリット)

✔ サーバーレスでセッション管理できる

サーバーでセッション情報を持つ必要がなく、トークン自体に必要な情報が入っているため、
負荷が軽い

✔ API間の認証に向いている

フロントエンド(ブラウザ)→バックエンドAPI
モバイルアプリ → サーバー
マイクロサービス間 など
どこでも使える。

✔ JSON形式で扱いやすい

扱いやすく、構造がシンプル。


◆ JWTの注意点(デメリット)

⚠ 一度発行したら無効化しにくい

セッションのようにサーバー側で即無効化できない。
→ 対策:短い有効期限(exp) を設定し、リフレッシュトークンを使う。

⚠ ペイロードは暗号化されていない

Base64URLエンコードされているだけで、誰でも読める。
機密情報(パスワード・カード番号など)を入れてはいけない。


◆ どんな場面で使われる?

  • Webログイン(SPA + API)

  • モバイルアプリの認証

  • API Gateway や Auth0 などのIDサービス

  • マイクロサービス間通信