About Blog Contact

Notionモバイル版がUI刷新!新ホーム画面の導入で「情報アクセスの鈍さ」は解消されるか

スマートフォンでNotionを利用する際、目的のページに到達するまでの「階層の深さ」が大きな壁となっていました。

PC版の多機能なデータ構造をそのままモバイルで扱うと、サイドバーの開閉やページの遷移が重なり、情報へのアクセス速度が著しく低下します。思考の速度とツールのレスポンスに解離が生じていた、とも言えるでしょう。

こうした構造的な課題に対し、2026年5月4日に発表されたのが新しい「ホーム」タブです。

スワイプ操作で完結する4つの主要機能

今回のアップデートにより、アプリを起動してすぐに4つの主要な機能へアクセスできるようになりました。

画面上部のタブをスワイプすることで、以下のコンテキストを瞬時に切り替えられます。

  • 最近のページ直近で編集・閲覧したドキュメントをリストアップします。
  • チャットNotion AIエージェントとの対話や、チーム間のコミュニケーションを統合します。
  • ミーティングNotionカレンダーと同期し、直近のスケジュールや関連する会議ノートを提示します。
  • インボックス自分宛の通知やワークスペースの更新情報を集約します。

従来のUIでは、サイドバーから各項目を「探す」手間が発生していました。 新UIでは、親指一本の操作で必要なセクションへ移動できる点が、設計上の大きな転換点です。

実務におけるUXの変化:現場での活用例

この機能統合は、分刻みのスケジュールで動く現場において、物理的な操作コストだけでなく心理的な「切り替えコスト」を削減します。

例えば、移動中に「デザインシステムの変更履歴」や「最新のブランドガイドライン」を急ぎで確認したい場合。 あるいは、会議の合間にAIエージェントへ「ユーザーインタビューの要点整理」を指示しておきたい場合。

これまでは「アプリ内のどこにそのページや機能があるか」をその都度、脳のメモリを使って検索する必要がありました。

しかし、ホーム画面がすべての入り口として機能するため、思考を途切れさせずに作業へ入ることが可能です。

PCの前で作業しているときと同等のレスポンスで、プロフェッショナルな情報をハンドリングできる点が、この刷新の最大の利点です。

導入にあたって留意すべき点

機能が集約された一方で、考慮すべき側面も存在します。

一つは、操作体系の変化です。 これまでのタップ中心のナビゲーションからスワイプを多用する形式に変わったため、指が動きを覚えるまでは一時的な負荷が生じる可能性があります。

また、ホーム画面に情報が凝縮されることで、視覚的な密度が高くなります。 人によっては、この情報の多さを「ノイズ」だと感じることもあるでしょう。

自分にとって必要な情報だけが表示されるよう、適宜設定を整理するなどの「使いこなし」が、利便性を最大化する鍵となります。

まとめ

今回のモバイル版ホーム画面の刷新は、単なるビジュアルの変更ではありません。

場所を問わないワークフローを構築するための、合理的な再設計です。

小さな画面の中での迷走を減らし、必要な情報へ一直線に向かう。 この新しいインターフェースは、現代のスピード感あるビジネス環境に適合していくはずです。

最新版へのアップデートにより、その操作性をぜひご自身で確かめてみてください。

Claude Securityが実装!セキュリティ業務の自動化とプロダクト開発効率アップ

プロダクトを世に送り出す際、安全性の確保とリリースの迅速化を両立させることは、現場にとって非常に大きな負担です。

ソースコードに潜む脆弱性を一つひとつ確認する作業には、専門的な知識と膨大な時間が必要となります。 この工程に時間がかかることで、新しい機能の実装や改善が予定通りに進まない状況は、多くのチームが直面する課題です。

外部の専門家によるセキュリティ監査を待つ時間は、数週間に及ぶこともあります。 この待機期間は、市場の期待に応えたいという意欲を削ぎ、結果として競合に対する優位性を損なわせる要因となります。

こうした現場の停滞を解消し、本来の創造的な業務に集中できる環境を整える手段として、2026年4月30日、Anthropicは**「Claude Security」のパブリックベータ版を公開しました**。

Claude Securityが提供する実用的な価値

本ツールは、単なるプログラムの解析にとどまりません。 AIがコードの論理構造を深く解析し、脆弱性を特定した上で、具体的な修正案を提示します。

主要な機能は以下の4点に集約されます。

  • 高精度な脆弱性検知
    最新モデル「Claude Opus 4.7」を搭載しています。 従来の単純なパターン照合では見逃されていた、コード間の複雑な因果関係に起因する脆弱性を正確に特定しましょう。
  • 修正パッチの自動生成
    問題箇所の指摘だけでなく、具体的な修正コードを生成します。 Claude Codeと連携することで、修正作業の完了までに要する時間を大幅に短縮しましょう。
  • 既存運用フローへの統合
    SlackやJiraへの通知、定期的な自動スキャン機能を備えています。 日常的な業務工程を中断させることなく、セキュリティ管理を並行して進めていきましょう。
  • 外部プラットフォームとの連携
    CrowdStrikeやPalo Alto Networks、Wizといった主要なセキュリティプラットフォームにOpus 4.7の機能が組み込まれています。 現在お使いのインフラを維持したまま、導入コストを抑えて運用を開始しましょう。

開発資源をUXやデータ活用へ転換する

セキュリティ対策に要する工数を削減できることは、その時間をプロダクトの品質向上に充てられることを意味します。 脆弱性対応に費やしていた時間を、インターフェースの細かな調整や、新しいユーザー体験の検証に振り向けていきましょう。

特に、顧客データを活用したパーソナライズ機能の実装において、安全性の確保は欠かせない条件です。

Claude Securityによってセキュリティ検証が自動化されることで、高精度なレコメンド機能や個別最適化された施策を、リスクを最小化した状態で迅速に形にできます。 システムの信頼性が担保されることで、より自由で高度なデータ活用に挑戦していきましょう。

導入の検討と実施

本機能は現在、Enterpriseプランを契約している組織から順次提供されています。 AIが自律的にタスクを遂行するこれからの開発環境において、セキュリティの自動化は業務効率に直結します。

管理画面からClaude Securityの設定を有効にし、まずは既存のリポジトリに対してスキャンを実行してみましょう。 現在の状況を正確に把握することが、より良いプロダクト作りの第一歩となります。

技術的な懸念を早期に解消し、チーム全員が本来の目的である「価値提供」に全力を尽くせる環境を構築しましょう。

Posted in AI

Notion AIカスタムエージェントの無料試用期間が2026年5月3日に終了

Notion AIで特定のタスクを自動実行できる「カスタムエージェント」の無料試用期間が終了します。

これまで追加費用なしで利用できていたこの機能は、2026年5月3日をもって無料提供が停止されます

現在、業務の中でこの機能を活用している方や、導入を検討している方は、5月4日からの新しい運用ルールを確認しておく必要があります。

5月4日からは「使った分だけ」のスマートな運用へ

2026年5月4日からは、新しく導入される「Notionクレジット」によって、実行回数に応じた費用が発生します。

予定されている価格は、1,000クレジットあたり10ドルです。

有料化への移行に際して、実行ごとのコストが明確になります。

これは、無制限なリクエストによるシステムの負荷を抑え、より安定した処理速度と信頼性を確保するための措置とされています。

ビジネス用途で安定した動作を必要とするユーザーにとっては、運用の予測が立てやすくなるという側面があります。

カスタムエージェントの具体的な機能と活用事例

カスタムエージェントは、ユーザーが設定した特定のルールに基づいて、データの整理や分析を自動で行う機能です。

特にデザイナーやマーケターの業務においては、次のようなタスクの自動化に有効です。

  • ECサイトに投稿されたレビュー内容を分類し、商品改善の改善案をテキストで生成する
  • 複雑なマーケティングデータの中から、あらかじめ指定した特定の指標のみを抽出する
  • 非構造的な議事録やメモを、データベースの定義に沿った形式へ自動で整理して格納する

一度設定を完了させれば、手動でプロンプトを入力することなく、ワークフローの中で一貫した処理を継続できます。

完了すべき検証作業

無料期間が終了する5月3日までは、BusinessプランおよびEnterpriseプランのユーザーであれば、追加コストなしで機能の作成やスキルの学習が可能です。

この期間を利用して、現在行っている自動化タスクが「1,000クレジットにつき10ドル」というコストに見合っているかを検証しておくことが重要です。

自動実行の精度を高め、コストを支払ってでも継続すべきタスクを今のうちに確定させておくことで、5月4日以降に不要な支出が発生するのを防ぐことができます。

なお、データベースのプロパティを自動で入力する基本的な「AI Autofill」機能については、引き続きプラン内の特典として提供される予定です。

変化を味方につけるために

5月4日からの有料化は、自身の業務フローにおける自動化の必要性を再確認する機会となります。

現在使用しているエージェントの設定を見直し、最も費用対効果の高いタスクに絞って運用を継続できるよう、今のうちに準備を進めましょう。

Notion AIを無料でお試ししませんか?

AIで業務をスピードアップ。執筆、分析、生成など、すべてこなすNotion AI機能を含むビジネスプランが最大6か月無料で利用できます。チームでNotionを使うならNotionビジネスで業務を円滑に。

Notionビジネスプランを見てみる

マウスホバーで下層ページを表示!Notionのページ移動を効率化する「パンくずリスト」の機能がアップデート

Notionで情報を蓄積していくと、ページの階層が深くなり、目的の場所を探すのに時間がかかることがあります。

別の階層にある資料を確認したいときに、サイドバーから探し直したり、前のページに戻る操作を繰り返したりすることに、不便さを感じている方も多いのではないでしょうか。

先日、こうしたページ間の移動をスムーズにするため、画面上部に表示される「パンくずリスト」の機能が更新されました。

(adsbygoogle = window.adsbygoogle || []).push({});

マウスを合わせるだけで下層ページを表示

今回の改善により、パンくずリストに表示されているページ名にマウスを合わせる(ホバーする)と、そのページの中に含まれるサブページやデータベースの項目が一覧で表示されるようになりました。

これまでは、一度そのページに移動してから次のページを選ぶ必要がありましたが、今回の更新によって、現在のページを離れることなく下層のページを直接選択して移動できます。

mimihokuro

mimihokuro

Notionは基本的にクラウド経由なので、ページを移動するたびにページの読み込みが発生します。行きたいページまで階層を行き来するだけでストレスを感じましたが、このアップデートで行きたいページに不要なプロセスを挟むことがなくなったので、これは神アップデートと言っても過言はなさそうです。

データベース内のページはパンくずリストには表示されないので注意。

作業の継続性を高める仕組み

この機能は、単にクリックの回数を減らすだけでなく、作業の集中状態を維持するのにも役立ちます。

例えば、一つの書類を作成している途中で、別の階層にある過去の記録をすぐに参照したい場面があります。

従来のようにサイドバーで目的の場所を探す手順を省くことができるため、本来の作業を中断する時間を最小限に抑えられます。

視線の移動を少なくし、必要な情報へ直接アクセスできる環境が整いました。

機能を効果的に利用するために

便利な機能ですが、運用の状況によっては注意も必要です。

一つのページに非常に多くのページが並んでいる場合、表示されるリストが長くなり、目的の項目を選択しにくくなる可能性があります。

この機能をより活用するためには、ページ内の情報を適切に階層化し、整理された構造にしておくことが推奨されます。

つまり、情報の配置が整っているほど、パンくずリストからの移動はより確実で素早いものになります

ページ移動という日常的な操作が改善されることで、Notionでの作業全体がより円滑に進むようになります。

画面上部のパンくずリストを実際に操作して、新しい移動の仕組みを確かめてみてください。

Notion AIを無料でお試ししませんか?

AIで業務をスピードアップ。執筆、分析、生成など、すべてこなすNotion AI機能を含むビジネスプランが最大6か月無料で利用できます。チームでNotionを使うならNotionビジネスで業務を円滑に。

Notionビジネスプランを見てみる

Notion AIに「Claude Opus 4.7」が搭載。高度な推論とプラットフォーム統合の利便性向上が可能に

Notion AIにAnthropic社の最新かつ最上位モデル「Claude Opus 4.7」が実装されました。

今回のアップデートは、複数の手順を必要とする指示や、高度な論理構築が求められるドキュメント作成において、処理の正確性を大幅に高めるものです。

最新モデルの搭載によって向上した具体的な機能と、Notionというプラットフォームで利用する上での利点について、事実に基づき解説します。

推論能力の向上と論理的一貫性の確保

Claude Opus 4.7は、与えられた情報から結論を導き出す「推論」の性能が大幅に強化されています。

多くの条件を含む複雑な指示に対しても、文脈を詳細に把握し、文末まで論理的な一貫性を保ちながら回答を生成することが可能です。

これにより、情報の重要度を正確に判断した上での詳細な構成案の作成や、長文ドキュメントの記述において、精度の高い結果が得られるようになっています。

ツール操作の安定化とプラットフォームへの影響

Notion AIは、ドキュメントの整理やデータの抽出を行う際、内部的にプログラム(ツール)を動作させています。

今回のモデル更新により、ツール操作におけるエラー発生率が従来の3分の1にまで減少しました。

この進化は、Notionの各機能に以下の好影響を与えています。

  • Q&A機能の精度向上: ワークスペース内の膨大なページ群から情報を探し出す際、情報のつながりを深く理解し、より正確な回答を提示します。
  • データベース自動化の信頼性: ページの本文を解析してプロパティ(カテゴリや期限など)を自動更新する際の失敗が減り、運用の安定性が高まっています。
  • AIプロパティの正確性: 複雑なデータ抽出や要約において、指示したフォーマットを正確に維持して出力します。

Claude単体利用と比較した統合環境の利便性

場合によっては、Claude MCP経由でNotionと連携するほうがいいのでは?と考えるかもしれません。

外部のチャットツールでClaudeを単体利用する場合と比較して、Notion AIにはドキュメント管理環境と一体化しているからこその利点があります。

情報の移行コストの排除

外部ツールでは、Notionの情報をコピーしてAIに貼り付け、得られた回答を再度Notionに戻すという手順が発生します。

Notion AIでは、開いているページを直接参照して処理を開始できるため、この作業工程を省略できます。

それに、Claude MCP経由でのNotionを参照する場合には、必要以上にトークンを消費する可能性が高いため、NotionをAIによって頻繁に手を加える場合はNotion AIを利用するほうが圧倒的にコスパが良くなります。

ワークスペース全体の知識の活用

単体のAIは、その都度アップロードした特定のファイルしか参照できません。

対してNotion AIは、ワークスペース内の過去の議事録、マニュアル、プロジェクト資料を横断的に検索し、それらを根拠とした回答を生成できます

例えば、ブログのトーンを統一したい場合、単体でAIを利用する場合は都度対象のファイルをアップロードしてトーンを合わせるように指示をする必要がありますが、Notion AIの横断的な検索力によってその手間が減るためパフォーマンスが高くなりやすくなります。

システム構造への直接的な関与

文章の生成のみならず、データベースのプロパティの自動入力や、Notion独自の数式(Formula 2.0)の生成、ボタン機能との連動など、Notionのシステム運用に直接関与できる点は、単体利用にはない特徴です。

mimihokuro

mimihokuro

ClaudeにもClaude CodeやClaude Designといったエンジニア・デザイナーに特化したモデルも発表されているので、ドキュメント管理やブログなどテキストベースで特化したいならNotion AIとして使うのが良いと思います。

機能の特性に基づく活用

今回の更新内容と実務での検証を踏まえ、効果的な活用方法をまとめました。

本モデルの最大の利点は、高度な戦略の策定や複雑なデータの集約において、論理的な飛躍が減少することにあります。

事実に基づいた深い分析が必要な場面では、正確さを維持しながら作業を支援する機能として非常に有効です

一方で、高度な処理を行う分、回答の生成にかかる時間は軽量モデル(Haiku等)よりも長くなる傾向があります。

そのため、作業の性質に応じた「モデルの使い分け」が効率化において重要です。

【活用法】目的に応じたモデルの選択

作業内容に合わせて最適なモデルを選択することで、全体の生産性を最適化できます。

  • **Opus 4.7が適している作業:**論理性と正確性が不可欠な計画策定、長文の深い分析、高度な条件設定が必要な執筆。
  • **軽量モデル(Haiku等)が適している作業:**短い文章の修正、単純な要約、迅速な回答が求められるやり取り。

高い精度が必要な場合はOpus 4.7を、処理速度を優先する場合は軽量モデルを選択することで、Notion AIの機能を最大限に引き出すことが可能です。

まとめ

Claude Opus 4.7の搭載により、Notion AIはより複雑で高度な業務を支援する機能を備えることとなりました。

Q&Aの精度向上やデータベース操作の安定化など、Notionというツール全体の利便性が向上しています。

論理性が求められる複雑な課題の処理において、この新しいモデルの活用を推奨します。ワークスペースと最上位モデルが統合されたことで、ドキュメント作成の効率は大幅に向上する見込みです。

Notion AIを無料でお試ししませんか?

AIで業務をスピードアップ。執筆、分析、生成など、すべてこなすNotion AI機能を含むビジネスプランが最大6か月無料で利用できます。チームでNotionを使うならNotionビジネスで業務を円滑に。

Notionビジネスプランを見てみる

Google Chromeの新機能「Gemini in Chrome」がついに日本にやってくる!日本を含むアジア太平洋地域でも順次展開を発表

インターネットで情報を探している際、多くのタブを同時に開いて作業をすることはありませんか。

例えば、あるトピックについて調査をしながら、別の画面でスケジュールを調整し、さらに別の画面で連絡事項の下書きを作成するといった状況です。

こうした複数の作業を並行して行う場合、画面やタブを切り替える動作が頻繁に発生します。この切り替え作業は、無意識のうちに作業効率を低下させ、それまで維持していた集中力を削いでしまう要因となります。

現在開いている画面から移動することなく、必要な情報の処理や関連する操作を完結させたい。

そうした要望に対応する新しい機能**「Gemini in Chrome」が、ついに日本を含むアジア太平洋地域でも順次展開されることが発表されました。**

今回は、ブラウザでの作業環境を向上させるこの機能について詳しく解説します。

サイドパネルで利用できるAI支援機能

Gemini in Chrome は、ブラウザのサイドパネルから直接AI(人工知能)を呼び出し、ユーザーの作業を多角的に支援する機能です。

特別なソフトウェアを個別に立ち上げる必要はなく、ブラウザのサイドパネルを有効にするだけで、現在閲覧しているウェブページの内容に基づいた高度な操作が行えます。

  • **情報の整理と要約:**専門的で長い文章の内容を短くまとめ、重要なポイントを即座に抽出できます。また、複数のタブにまたがる情報をサイドパネル上で一括して比較検討することも可能です。
  • **Googleサービスとの直接連携:**ページを離れることなく、Google カレンダーへの予定登録、Google マップでの場所確認、Gmailでの下書き作成が行えます。さらには、視聴中のYouTube動画の内容に対して具体的な質問を投げかけ、回答を得ることも可能です。
  • **画像の変換・編集:**画像生成・編集モデル「Nano Banana 2」により、ウェブ上の画像をテキストでの指示に基づいて、その場で加工・編集できます。

mimihokuro

mimihokuro

実はFirefoxのような他のブラウザではサイドパネルからAIを呼び出す機能があったのですが、Chromeは実装がされておらず、個人的にはまだかまだかと待ち焦がれていました。

作業効率を向上させる3つの主要な特徴

この新機能が日々のPC作業において、具体的にどのような利便性をもたらすのか、その詳細を3つの項目に整理しました。

1. 作業の継続性を高める操作体系

これまでは「調べる」「記録する」「送信する」といった工程ごとに、異なるアプリケーションやタブへ切り替える必要がありました。

Gemini in Chromeは、これらをサイドパネル内で一括して処理できるように設計されています。

例えば、解説動画を視聴しながら不明な点をサイドパネルで確認し、得られた回答をそのまま同じ画面上で資料に反映させるといった、一連の動作が途切れることなく実行可能です。

2. 文脈に応じた情報提供(Personal Intelligence)

本機能は、単一の質問に対する定型的な回答を返すだけではありません。「Personal Intelligence」により、過去のやり取りの経緯や、現在どのページを見ているかといった「文脈(コンテキスト)」をふまえた情報を提供してくれます。

これにより、ユーザーが状況を一から説明し直す手間を省き、より適切かつ精度の高い回答を得やすくなります。使えば使うほど、ユーザーの意図を汲み取った支援が可能になる点が大きな特徴です。

3. 画像の生成・加工プロセスの簡略化

最新の画像モデル「Nano Banana 2」が、ブラウザ上での画像処理を直接サポートしてくれるようになります。

例えば、ウェブサイト上の素材の色調を変更したり、特定の要素を追加したりといった作業が、専用の画像編集ソフトウェアを起動することなく、指示文の入力のみで完結します。

ブラウザ内ですべての処理が完結するため、ファイルの保存や再アップロードといった付随的な手間が大幅に削減されます。

情報の閲覧から活用へ

今回のアップデートは、ブラウザの役割を「情報を閲覧するツール」から「情報を処理し、具体的に活用するための環境」へと広げるものです。

頻繁な画面切り替えによる視覚的・心理的な負担を軽減し、ユーザーが本来時間をかけるべき思考や実務作業に専念できる環境が整いました。

今回の発表はGoogle愛用者(特にGemini派)にはとんでもなく嬉しい発表でしたが、「順次」ということで、執筆時点(2026年4月21日)ではまだ日本では使えませんでした。

とはいえ、いよいよChrome上でGeminiが使えるということで、ブラウジングがますます便利になることは間違いありません。

Chromeアップデートが走りましたら、また追記していきたいと思います。

4月27日時点で私の環境で実装が確認できました!まだ確認できていない場合はChromeのアップデートを確認してみてください。それでも表示されない場合はまだ展開待ちの状況なので今しばらくの辛抱です。

適用されるとChromeの右上にボタンが表示されます

Posted in AI

便利すぎるGemini AIエージェントで変わる仕事のかたち――効率を爆アゲする『自分専属秘書』

「AIとチャットする」という体験が日常になってから、数年が経ちました。

最近では「AIエージェント」という存在が、私たちの仕事をより効率的にしてくれています。

かく言う私もデザイナーやマーケターとして働いていると、繰り返し行うような単純作業に時間を取られて「考える作業」に集中できない。そういう感覚、覚えがある方も多いのではないでしょうか。

そんな状況を変えてくれるのが、Geminiアプリに実装されたタスク処理型AIエージェントです。

2026年4月時点の日本国内における最新情報をもとに、この新しいツールが何者で、何をしてくれるのかを整理していきます。


GeminiのAIエージェントはいつから使えるようになったのか

日本でGeminiのタスク処理型AIエージェントが本格的に使えるようになったのは、2026年2月のことです。

それ以前もGoogle Workspaceとの連携はありましたが、今回の進化の核心は「指示を待つ」だけでなく、「自ら手順を組み立てて実行する」という自律性の高さにあります。

単なる会話相手だったGeminiアプリが、実務をこなすアシスタントへと変わった転換点と言っていいでしょう。


タスク処理型AIエージェントは何ができるのか

GeminiアプリのAIエージェントは、提示したゴールに対して、最適なツール(Google検索、Gmail、ドキュメントなど)を自ら選択して作業を完結させる機能を持っています。

たとえば「競合他社の最新情報をリサーチして、チームに共有して」と一言伝えれば、Geminiが裏側で検索を走らせ、内容を整理し、共有用ドキュメントを作成するところまで自動で行います。

スケジュール機能はあるか

現在のGeminiにはスケジュール機能が備わっており、「毎朝9時に昨日の市場トレンドを報告して」といった設定が可能です。

これは個人的に感動した機能で、例えば、毎日Geminiに関する記事をGoogleの公式ブログから自動で収集することで、新聞感覚で最新情報を見ることができます。

ただし、以下の制約は把握しておく必要があります。

  • 定期タスクの最短サイクル: 現在の仕様では「24時間(毎日)」が最短
  • リアルタイム性: 分単位・時間単位での自動実行は2026年4月現在も試験段階。基本的にはデイリーのルーチンワークが主な用途

レポートの出力先はどこか

Geminiがまとめたリサーチ結果やレポートは、デフォルトでは「Geminiとのチャット画面」に表示されます。実務で活用するなら、以下のツールへの出力指定が現実的です。

出力先

おすすめの活用シーン

Google ドキュメント

長文レポート、記事の下書き、構成案の作成

Google スプレッドシート

数値データの集計、競合リストアップ、価格調査

Gmail(下書き)

チームへの報告、ニュースレターの原案作成

Google Keep

クイックメモ、ToDoリストの更新

Google ドライブ

整理されたPDFやテキストデータの直接保存

これらを組み合わせることで、「作業の受け皿を用意する手間」そのものをなくせます。


今すぐ任せてみたい7のタスク例

私が実際に活用していたり、活用できそうなタスク例を7個挙げます。

  1. 毎朝のトレンド収集: 特定のデザインキーワードに関する最新記事を3つ要約し、ドキュメントにまとめておく
  2. 競合の価格・施策チェック: 特定の競合3社のサイトを毎日確認し、新着キャンペーンや価格変更をスプレッドシートに追記する
  3. 打ち合わせの事前準備: カレンダーの予定を確認し、翌日の打ち合わせ相手の最近のリリース情報をKeepにメモする
  4. SNSの熱量分析: 特定のハッシュタグやキーワードに関するポジティブ・ネガティブな反応を分析し、レポート化する
  5. SEOの欠落要素チェック: 上位表示サイトと自社サイトを比較し、不足しているトピックをリストアップする
  6. 議事録からのタスク抽出: ミーティングの書き起こしから、今日やるべきタスクだけを抜き出してKeepに保存する
  7. 海外デザイン事例の紹介: 毎日夕方に海外デザインアワードの評価事例を1つ探し、日本語で解説してメール送信する

AI エージェントを使う上で必要な設定

エージェント機能を使い始めると、「Geminiアプリのアクティビティ」設定をオンにするよう案内されます。

参照:Google Gemini ヘルプ — Geminiアプリでのアクティビティの管理

この設定が必要な理由は、エージェントが「過去に何を頼まれたか」「どんな文脈で動いているか」を記憶し、継続的にタスクを遂行するためです。

アクティビティ設定をオンにすることで、GeminiはあなたのWorkspace(メールやドキュメントなど)に安全にアクセスし、一貫性のある作業を実行できるようになります。プライバシーを担保しながらAIを「自分専用のアシスタント」として機能させるための、重要な前提設定です。


現時点でできないこと、そして今後の展望

2026年4月現在、Geminiアプリ単体ではまだ難しいことがあります。

  • 外部SNSへの直接投稿: XやInstagramへの「投稿完了」までは、セキュリティと利用規約の関係で現時点では不可(下書き作成までが限界)
  • APIのないサイトでの自動操作: ログインが必要なサイトでのボタン操作のような自動化はまだ不安定
  • 高頻度タスク: 標準のスケジュール機能では最短でも1日1回という制約がある

ただし、これらは順次緩和される予定です。特にFigmaをはじめとする外部デザインツールとの直接連携や、音声トリガーによる複雑なタスクチェーンの実行は、近い将来の実装が期待されています。


まとめ

私たちはこれまで、情報を集めたり整理したりする「作業」に多くの時間を使ってきました。しかし本来の価値は、整理されたデータを見て「何を提案するか」「どんな形にするか」という判断と決断にあるはずです。

誰が行っても同じ結果になる処理はGeminiエージェントに任せ、生まれた時間をクライアントの課題に向き合うことや、新しいアイデアを考えることに使う。それは手を抜くことではなく、より人間らしい仕事に集中するための、合理的な選択です。

まずは明日、一つだけ小さなルーチンをGeminiに任せてみることから始めてみてください。

オススメは、追いたい情報の『朝刊化』です。

Posted in AI

Gemini Canvas × Antigravityで完結。Webデザイナーが考える「0→100」最速サイト制作フロー

AIを活用したサイト制作は「指示出し」から「自動建築」のフェーズへ。

本業でECサイトの設計からコーディングまで一人で担うWebデザイナーの私が辿り着いた「Googleエコシステム最強の制作ワークフロー」を徹底解説します。

なぜ「Gemini」を選ぶのか?

現在、CursorやChatGPT、Claude Artifactsなど、多くのAIツールが存在します。

特にAIエディタの代名詞とも言える「Cursor」は強力ですが、現場で私がGeminiをメインに据える理由は、Googleの圧倒的な「連携力」と「コストパフォーマンス」にあります。

主要AIツールとの比較

ツール名得意分野サイト制作における役割課金体系のメリット
Gemini (Canvas)0→1のアイデア・プレビュー設計・プロトタイプ作成Google AI One(月額約3,000円)で完結
Antigravity自律的なプロジェクト構築実装・環境構築・デプロイ上記プランでIDE内AIも高いレート制限で使える
Cursor高度なコード補完・推論コーディング特化月額$20〜。独自モデル等に強み
Claude / ChatGPT部分的なロジック生成補助的なコード修正単体契約が必要な場合が多い

ポイント: Cursorは非常に優れたエディタですが、プロトタイプを作る「Canvas」と、実装を行う「Antigravity」を一つのGoogleアカウント(一つのサブスク)でシームレスに行き来できる体験は、Geminiだからこそできる高速フローです。

制作効率を10倍にする「右脳と左脳」の役割分担

「右脳」を担うGemini Canvas:直感的なデザイン生成

Canvasの最大の武器は、「コードを書かずに、プレビューを見ながらデザインをこねくり回せる」点です。

  • リアルタイム・スタイリング: AIが即座に反映し、プレビュー画面で確認可能。
  • 曖昧な指示の具現化: 「もっと春らしく」「20代女性に刺さる配色で」といった感性的なオーダーを視覚化。
  • デザインの「こねくり回し」: デザイナーが一番時間をかける「0→1」の試行錯誤を、数分という驚異的なスピードで回せます。

「左脳」を担うAntigravity:論理的な実装と自動建築

Googleが開発した次世代AI IDE「Antigravity」は、VS Codeをベースにしながらも、ディレクトリ構造を自律的に理解してくれるので、一度の指示で関連ファイルをディレクトリ内で探して編集してくれる優れたエディターです。

  • Windows環境での親和性: WSL2やPowerShellを介した環境構築も、AIエージェントがコマンドを提案・実行してくれるため、環境構築のストレスが激減します。
  • 構造化のプロ: Canvasで作った「一枚岩のコード」を、Next.jsのApp Routerに基づき適切にコンポーネント分割し、適切なディレクトリへ自動配置することもできます。
Google Antigravity

Google Antigravity

Experience liftoff with the next-gen agent platform

cover

【実践】0から100まで駆け抜ける「4ステップ・ワークフロー」

ここからは、私がオススメする制作フローを詳しく解説します。

STEP 1:Geminiで「プロジェクトの設計書」を作る

AIに丸投げするのではなく、最初にCONTEXT.mdという詳細な設計書を作らせるのが成功の8割を決めます。

  • 内容の緻密化: 技術スタック(Next.js, Tailwind, Framer Motion等)の指定、ディレクトリ構成のルール、カラーパレットの16進数指定までをこの1ファイルに集約させます。
  • AIへの制約: 「このルールを逸脱するな」という強い指示を書き込むことで、後の工程での「AIの勝手な解釈」を防ぎ、制作の一貫性を保ちます。

STEP 2:Canvasで「ビジュアル」を仮確定

設計書を元に、Canvas内で動くプロトタイプを作成します。ここでは「構造」よりも「見た目」を完璧にすることに集中します。

  • 1ファイルに集約: Canvasは単一ファイルでのプレビューが得意なため、あえてコンポーネント分割せず「Visual.tsx」という巨大なファイルにすべて記述させます。
  • 対話型修正: 「ヘッダーのロゴを左に寄せて」「スマホの時だけこの要素を非表示にして」といった微調整をプレビューを見ながら繰り返し、理想のビジュアルを確定させます。

直接コードを編集するほうが早い、軽微な修正が発生することもあります。その場合、わざわざプロンプトで指示すると逆に効率が悪いので、STEP3が完了した後に修正するのも手です。

STEP 3:Antigravityで「自動建築」を開始

ここが一番の快感ポイントです。用意した「設計書」と「Visual.tsx」をAntigravityに読み込ませます。

  • 自律的なプロジェクト初期化: npx create-next-app からライブラリの npm install まで、AIがコマンドを生成します。コマンドの実行承認をポチポチ押すだけで、目の前でプロジェクトの骨組みが出来上がっていきます。
  • コンポーネントの解体と再構築: AIがVisual.tsxを解析し、Header.tsxHero.tsxといった部品に切り分け、設計書で指定したフォルダへ自動的に収納していきます。人間がコピペを繰り返す時代は終わりました。

STEP 4:AIエージェントによるデバッグと仕上げ

自動構築が終わった直後の「あと一歩」を、対話形式で詰めていきます。

  • 局所的エラーの解消: 「画像のパスが通っていない」「Lucide Reactのアイコン名が間違っている」といった細かい不備を、Antigravityのチャットで指摘して直させるか、直接修正します。
  • レスポンシブの最終調整: 実機やブラウザのデベロッパーツールで確認し、気になる箇所の微調整をAIに依頼。この「仕上げ」の精度が、プロの仕事としてのクオリティを左右します。

【実例紹介】AIと作った次世代プロトタイプ

さて、ここまで大きな制作の流れをご紹介しました。

今度は、この後ご紹介するGemやプロンプトでどんなものが作れるのか、イメージを用意しました。

それぞれCanvasで作成したときのイメージを共有リンクとして貼り付けてあるので、全容をご覧ください。

例1. 可愛らしいインテリアECサイト

20~30代女性をターゲットとしたインテリアECサイトをCanvasで作成しています。

例2. 堅実なシステム開発会社のコーポレートサイト

シンプルな構成ですが、カウントアップを加えた遊び心のあるトップページになっています。

例3. スタイリッシュなデザイナーのポートフォリオサイト

シンプルかつスタイリッシュなビジュアルに余白を大きく設けたデザイナーらしさのあるページです。

例4. モダンなエンジニアのポートフォリオサイト

フリーランスとしてWeb制作会社から高単価案件を獲得するためのプレゼンテーションツールをイメージ。

実装力をアピールするような演出とスタイリッシュさが目を引くデザインになっています。

このポートフォリオのメインビジュアルには、高度なアニメーションを実装できるThree.jsを指定して作成させています。

それでは、ここからサンプルページを作成したプロンプトと流れをご紹介します!

現場で即戦力になる「専用Gem」と「秘伝のプロンプト」

これまでの解説でフローの重要性は理解いただけたかと思います。

しかし、一番の壁は「AIにどう指示すれば、高品質な設計書が出てくるのか?」という点ではないでしょうか。

そこで、私が実務で磨き上げた「設計サポート専用Gem」と、コピペで使える「プロンプトサンプル」を公開します。

STEP 1:Canvasで「設計書」を作る

この最初のステップで「設計書(CONTEXT.md)」をどれだけ緻密に作れるかが、後のクオリティを左右します。

ただ、非デザイナーや「実はデザイン苦手なんよ・・・」というデザイナーの方にも安心で便利な設計書作成サポートGemをご用意しています。

‎Google Gemini

Meet Gemini, Google’s AI assistant. Get help with writing, planning, brainstorming, and more. Experience the power of generative AI.

cover

前述しましたが、できるだけGeminiに伝える情報に高い粒度を保たせるために、Geminiは一つ一つ丁寧にヒヤリングします。そのため、無料プランで使うとすぐにレート制限に達してしまう可能性が高いので、有料プランで使うのがオススメです。

レート制限が気になるよ、という方は、以下の指示書(プロンプト)サンプルを希望に合わせて調整して、 CONTEXT.mdというマークダウンファイル(指示書)を作らせてください。

ジャンル別に3つの実例を用意したので、作りたいものに近いものを選んでみてください。

パターンA:インテリアECサイト(B2C)

▼ プロンプト例(Canvasに入力)

以下の要件定義に基づき、Webサイト構築のための詳細な設計書(CONTEXT.md)を作成してください。
出力内容は、開発AIが迷わず実装できるレベルまで詳細化してください。

【1. プロジェクト基本要件】
・サイトの種類: インテリアECサイト「トップページ」
・ターゲット: 20代〜30代の一人暮らしを始める女性(仕事で忙しいが、部屋にはこだわりたい層)
・技術スタック: Next.js (App Router), Tailwind CSS, Lucide React, Framer Motion
・レスポンシブ対応: 完全レスポンシブ必須(スマホ・タブレット・PC)。モバイルファーストで設計すること。

【2. デザインシステム定義】
・カラーパレット:
 ・Primary: <em>#F5EBE0 (やわらかいベージュ系)</em>
 ・Secondary: <em>#D1FAE5 (淡いミントグリーン)</em>
 ・Accent: <em>#E5B1B1 (くすみピンク)</em>
 ・Text: <em>#374151 (チャコールグレー)</em>
・フォント: Noto Sans JP (本文), Montserrat (見出し)
・UIルール:
 ・角丸: rounded-lg (少し丸みを帯びた形状)
 ・シャドウ: shadow-sm (控えめで上品な影)
 ・余白: ゆったりと取る (Tailwindの gap-8, py-16 等を活用)
 ・ブレークポイント: Tailwind標準 (sm, md, lg, xl) を使用し、デバイスごとに最適なレイアウトを定義すること。

【3. セクション構成と機能要件】
1. Hero: 画面いっぱいのスライダー。キャッチコピー「私らしい、春の部屋。」。CTAボタン配置。スマホでは画像比率を調整。
2. Category: 「ソファ」「テーブル」「照明」等のアイコンナビゲーション。横スクロールまたはグリッドで表示。
3. Concept: ブランドメッセージ。背景に薄いテクスチャ画像を使用。
4. New Arrivals: PCでは4カラム、スマホでは2カラムのグリッド。
5. Ranking: 1〜3位のランキング表示。王冠アイコン付き。
6. Instagram: グリッドレイアウトで画像表示。
7. Newsletter: メールアドレス入力フォームと登録ボタン。

【4. ディレクトリ・コンポーネント設計】
・ディレクトリ構成: Next.js App Routerの標準構成(/app)。
・コンポーネント分割ルール:
 ・共通パーツは /components/ui (Button, Card等)
 ・セクション単位は /components/sections (Hero, Features等)

【出力形式】
上記を整理し、エンジニアへの実装指示書として使えるマークダウン形式(CONTEXT.md)で出力してください。

パターンB:IT企業コーポレートサイト

▼ プロンプト例(Canvasに入力)

以下の要件定義に基づき、Webサイト構築のための詳細な設計書(CONTEXT.md)を作成してください。

【1. プロジェクト基本要件】
・サイトの種類: システム開発会社のコーポレートサイト
・ターゲット: 企業のDX担当者、IT部門の責任者(信頼感と技術力を重視)
・技術スタック: Next.js (App Router), Tailwind CSS, Lucide React
・レスポンシブ対応: 完全レスポンシブ必須。ビジネスマンが移動中にスマホで見ることも考慮。

【2. デザインシステム定義】
・カラーパレット:
 ・Primary: #0F172A (深いネイビー、知性と信頼)
 ・Secondary: #3B82F6 (テックブルー)
 ・Background: #F8FAFC (清潔感のある白グレー)
・フォント: Noto Sans JP (本文), Inter (英数字)
・UIルール:
 ・角丸: rounded-sm (シャープでビジネスライクな形状)
 ・ナビゲーション: PCはヘッダーメニュー、スマホはハンバーガーメニューに切り替え。

【3. セクション構成と機能要件】
1. Hero: オフィス風景の動画背景+「技術で、未来を実装する。」。
2. News: 最新のお知らせ3件。
3. Service: 「Web開発」「アプリ開発」「コンサルティング」の3本柱。
4. Strengths: 数字で見る実績。カウントアップアニメーション。
5. Case Study: 導入事例のロゴスライダー。
6. Contact: 大きな電話番号とお問い合わせフォームへの誘導。

【4. ディレクトリ・コンポーネント設計】
ディレクトリ構成: 一般的なNext.js構成。

パターンC:デザイナーのポートフォリオサイト(クリエイター)

▼ プロンプト例(Canvasに入力)

以下の要件定義に基づき、Webサイト構築のための詳細な設計書(CONTEXT.md)を作成してください。

【1. プロジェクト基本要件】
・サイトの種類: Webデザイナーのポートフォリオサイト(トップページ)
・ターゲット: 制作依頼を検討中のクライアント、採用担当者
・技術スタック: Next.js (App Router), Tailwind CSS, Framer Motion

【2. デザインシステム定義】
・カラーパレット:
 ・Base: #FFFFFF (白)
 ・Text: #1A1A1A (ほぼ黒)
・フォント: Noto Sans JP (本文), Playfair Display (英語見出し)
・UIルール:
 ・余白: 極めて広く取る。スマホでは適切な余白に調整。
 ・線: 1pxの極細線を使い、グリッド感を強調

【3. セクション構成と機能要件】
1. Hero: タイポグラフィ重視。ふわっと現れるアニメーション。
2. About: 簡潔なフィロソフィーとプロフィール。
3. Works: 制作実績をグリッド(PC: 2カラム, SP: 1カラム)で表示。
4. Skills: 使用可能ツールをシンプルにリスト化。
5. Contact: SNSリンクとシンプルなフォーム。

【4. ディレクトリ・コンポーネント設計】
・コンポーネント分割ルール: WorkCard, SkillBadgeなどの粒度で分割。

プロンプトを実行して出力された「設計書」の内容を精査します。
これがこのプロジェクトの「憲法」になります。

これがあるだけで、後の工程でのAIの「勝手な判断」や「デザインのブレ」を徹底的に防げます。

ちなみに上記で紹介したプロンプトはあくまで例なので、より具体的な構想やルールがあればより詳細に書くことでクオリティーを高められます。

STEP 2:Canvasで「見た目だけの完成品」を作る

次に、STEP 1で作った「設計書」を元に、Canvasでデザインを作ります。 ここでの最大のポイントは、「設計書のデザイン要件は守るが、ファイル分割ルールは一旦無視する」ことです。

▼ デザイン作成のコツ Canvasに対しては、以下のように指示します。

設計書(CONTEXT.md)の要件(デザインシステム、セクション構成)に基づいて、サイトのデザインを作成してください。

【条件】
・ReactとTailwind CSSを使用すること。
・重要: 設計書で定義したディレクトリ構成は一旦無視し、すべてのコードを1つのファイル(Visual.tsx)にまとめて記述すること。
・コンポーネント分割はしないでください。ベタ書きで構いません。
・最重要: 完全なレスポンシブ対応(モバイルファースト)にしてください。Tailwindのプレフィックス(md:, lg:)を必ず使用してください。

ここでは、STEP 1で決めた世界観と、「スマホで見ても崩れないこと」を完璧に再現することだけに集中してください。

STEP 3:Antigravityで「合体&自動建築」

ここが最大の山場であり、一番気持ちいい瞬間です。

Canvasで作った「設計書(STEP 1のCONTEXT.md)」と「デザインコード(STEP 2のVisual.tsx)」の2つを用意し、一つのディレクトリに入れたら、Antigravity(エディタ)で該当のディレクトリを開きます。

Antigravityのチャット欄に、この2つのファイルを読み込ませます(「@(メンション)」でファイル名を選択してください)。

その状態で、以下のプロンプトを投げてください。

▼ 自動建築プロンプト(Antigravityに入力)

あなたはシニアフロントエンドエンジニアです。
現在のディレクトリは空です。以下の2つの資料を元に、プロジェクトを0から構築してください。

【入力資料】
1. 設計書: CONTEXT.md(技術スタックと構成ルール)
2. デザイン: Visual.tsx(見た目の正解データ)

【タスクフェーズ】
1. 環境構築
・CONTEXT.md の技術スタックに基づき、Next.jsプロジェクトの初期化コマンドを実行してください。
・TypeScript, Tailwind CSS, ESLint は有効にしてください。
・必要なライブラリ(Lucide React, Framer Motion等)をインストールしてください。

2. 実装
・初期化されたプロジェクトに対し、CONTEXT.md で定義されたディレクトリ構成を作成してください。
・Visual.tsx のコードを適切に分割し(Header.tsx, Hero.tsx 等)、各ファイルに配置してください。

【実行指示】
まずはフェーズ1(環境構築)のコマンドを提案・実行し、完了後にフェーズ2(実装)へ進んでください。

これを送信すると、AIは「設計書」というルールに従って、デザインコードという「素材」を切り刻み、適切なファイルに自動で振り分けてくれるので、人間がエディタを行き来してコピペする必要はゼロです。

環境構築のプロセスでは、いくつかのコマンド実行が必要で、構築完了までノンストップで実行できれば良いのですが、Antigravityではセキュリティのため、コマンド実行前に「承認」ボタンのクリックが必要になります。

承認をポチポチと押して見守るだけで、環境構築からファイルの整理整頓まで全てAIがやってくれます。

STEP 4:AIエージェントで仕上げる

自動構築が終わったら、最後に「エンジニア」としての仕上げです。 おそらく、自動構築直後は「画像のパスが通っていない」とか「リンクが空っぽ」といった細かい不備があるはずです。

ここは、AntigravityのAIエージェント(チャット)を使って、対話形式で詰めていきます。

  • 「ヘッダーのロゴ画像が表示されていないので、public/images フォルダを作ってダミー画像を配置し、パスを通して」
  • 「商品カードをクリックしたら、商品詳細ページ(/products/[id])に遷移するようにリンクを修正して」
  • 「スマホで見た時、ハンバーガーメニューが開かないバグを直して」

このように、全体構造ではなく「局所的な修正」にフォーカスして指示を出すのがコツです。

ここまで来れば、Gitでコミットしてデプロイするまであと一歩です。
※ここではGitでのコミット、デプロイの方法については割愛します。

サイトが完成してデプロイできたらお祝いしましょう!🎉
お疲れ様でした!

さていかがでしたでしょうか?

「サイトを作りたいけどデザインがなぁ・・・」と悩んでなかなか前に進めなかった方は、ぜひぜひ、この手順を試してみてください。
「今までの苦労は何だったんだ…」ってなること間違いなしです!

futureshopの新しいレビューオプション「future Review」って?機能・費用・メリット・デメリットをわかりやすく解説

ネットショップで商品を買ってもらうために、「口コミ(レビュー)」がとても重要なことは皆さんご存知の通りです。しかし、ただレビュー欄があるだけでは、お客様はなかなか書いてくれません。

今回は、futureshop(フューチャーショップ)の有料オプション機能である「future Review(フューチャーレビュー)」について、何ができるのか、いくらかかるのか、本当に導入すべきかを、専門用語を使わずにわかりやすく解説します。

「標準のレビュー機能と何が違うの?」「月額費用のもとは取れるの?」と悩んでいる店長さんや担当者さんの参考になれば幸いです。

future Reviewって? 標準機能との違い

futureshopには最初から「レビュー機能」がついていますが、future Reviewはそれを「もっと集まる」ようにパワーアップさせた機能です。

標準機能とfuture Reviewには、以下のような大きな違いがあります。

機能標準レビュー機能future Review (オプション)
投稿できるもの文章のみ文章 + 写真(最大5枚)
集め方手動でメールを送る自動で依頼メールを送る
ポイント特典一律で付与「写真ありならポイントアップ」ができる
お店からの返信できない返信できる
アンケートなし投稿時にアンケート(ハッシュタグ)を取れる

future Review

購入者の声を集める「レビュー機能」を標準搭載。レビュー投稿によるポイント付与機能や、レビュー掲載の承認機能にも対応しています。

cover

注目すべき3つの機能

特に売上アップに効果的な3つの機能を詳しく見ていきましょう。

写真投稿機能(スマホ対応)

洋服や食品、インテリアなどでは、「文章で100文字書かれる」よりも「写真が1枚ある」ほうが、お客様は安心して購入できます。

future Reviewでは、画像を最大5枚まで投稿できて、ユーザーがスマホで撮った写真をそのままレビューと一緒に投稿することもできるようになります。

レビュー依頼メールの自動配信

レビューを集める一番のコツは「忘れられないうちに頼むこと」ですが、毎回手動でメールを送るのは大変です。

この機能を使えば、「商品発送から◯日後」に自動で「レビューを書いてくれませんか?」というメールを送ってくれます。

もちろん送信のタイミングも調整できます。

お店からの返信機能

投稿されたレビューに対して、お店からお礼やコメントを返信できます。

「スタッフさんから返事が来た!」という体験はファン作りにとても効果的ですし、もし厳しい意見をもらった場合でも、誠実に対応している姿を見せることで、他のお客様からの信頼感アップにつながります。

返信すると、ユーザーが登録しているメールアドレス宛に返信があったことを通知する機能もあるので、ユーザーにも返信を気づいてもらいやすいです。

実際に使ってみて感じたポイント

ここからは、EC運営する私が実際にfuture Reviewを使ってみて感じたポイントについてお話ししていきたいと思います。

これは良いね!と思ったポイント

レビューページへ遷移しなくてもすべてのレビューが見れる

標準のレビュー機能だと、レビューページが別で用意されるので、レビューを全部見たい場合にはページ遷移が必要でしたが、future reviewではページ遷移することなく商品ページで完結します。

例えば、すべてのレビューを見たいとなると別ページ(ドメイン/p/reviews/商品番号)に移動して見なければいけないですし、レビューが多いとページ分けされるので、2ページ目(ドメイン/p/reviews/商品番号?pageNo=2)以降、読み進めるには毎回ページ読み込みをしないといけません。

そのたびにページの読み込みが完了するまでの待ち時間が発生するので、ユーザーとしてはストレスの原因に。

でも、future Reviewは商品ページにすべてのレビューデータを読み込み、かつページを移動することなく読み進められるので、ページの読み込み待ちによるユーザーのストレスも軽減できます。

この機能はレビューが多い商品ほど恩恵を受けやすいと思います。

「レビューが膨大になるとページの表示も遅くなるのでは?」と疑問に思う方もいるかもしれませんが、見たところ、非同期処理というページの読み込みを阻害しにくい方法が取られているようです。つまり、重要な商品情報は優先的に表示されて、レビューは後から見えるようになる、と考えていただくと分かりやすいかもしれません。

レビューの絞り込みや並び替えができる

future Reviewでは今までできなかったレビューの絞り込みや並び替えができるようになります。

星の数(スターレーティング)で絞り込みしたり、評価の高い順に並び替えしたり、ユーザーが知りたい情報にアクセスしやすくなったのは良いポイントかなと思います。

今後のアップデートではレビュー検索やレビューのピックアップ表示機能などの実装が予定されていますので期待大です。

レビューパーツへのアンカーリンクがデフォルトで付いてくるから手間がかからない

サイトによっては商品ページ内でレビューパーツをページ下部に置いて、ページ上部のアンカーリンクで誘導しているサイトもあると思います。

ただ、その方法はfutureshopの標準にはない機能なので、自分で実装する必要がありました。

ここに会話の内容を入力します。私もfuture review導入前は自分で実装したんですが、スターレーティング(星評価)の表示用パーツを作って、その中にページ内リンクを作って、レビューパーツをレイアウトパーツで囲って、パーツにID割り振ってそこまで移動できるようにして・・・という作業が地味に手間がかかりました・・・🥹

みみほくろイメージ

future Reviewでは嬉しいことに、ページ内リンクがそれぞれ用意されていて、マニュアルに沿って設置するだけで、簡単にレビューパーツへの誘導ができるようになります🎉

これは残念…と思ったポイント

ここからは私が感じた、future Reviewを導入する前に注意すべきポイントをご紹介します。

全レビュー一覧が見れない

future reviewではすべての商品レビューをまとめて見るページが用意されていません。(標準機能で言う「ドメイン/p/reviews」)

サイトの商品全体の評価の高さが売りで、「とりあえずレビュー全体を見せたい!」となっても、レビューまとめページにユーザーを誘導することができなくなります。

トップページなどでレビュー表示する際に「ドメイン/p/reviews」を利用することがありますが、future Review導入にあたって標準のレビュー機能を停止することになるのでこの方法は使えなくなります。

レビューの編集ができない

ユーザーにとっては致命的な欠点といえるかもしれませんが、一度レビューを投稿すると、後から編集することができません。これはユーザーも管理者もできないので、管理者が削除するか非公開にするしかなくなってしまいます

一度書いたレビューを後から追記するユーザーも少なくなく、例えば最初は商品が届いたときの感想を書き、何日か使ってみてから使用感について書いてくれるパターンがあります。

future reviewでは現時点で編集する機能がないのが惜しいところなので、熱烈なファンが多いショップは地味にイタいのではないでしょうか。

また、編集できないので、後から画像の追加も削除もできませんので、future reviewを導入する場合は注意書きを入れておくといいでしょう。

ここに会話の内容を入力します。画像付きでレビューを投稿してもらっても、後から見たら見られたくないものが写ってた…ということもあります。その場合、レビューの掲載を取り下げても、レビュー投稿で付いたポイントは自動でマイナスにはならないので、お客さんに説明の上、手動でポイントをマイナス処理する必要も出てくるので注意です。

みみほくろイメージ

商品ごとのレビューページがなくなるためSEOに影響がある

オリジナルブランドを持っていて、指名検索が多いサイトは痛手になりそうなポイントです。

Google検索などで「ブランド名 口コミ」と調べると、その商品のレビューページ(標準機能で言う「ドメイン/p/review/商品ページ」)が表示されやすかったと思いますが、それが使えなくなるため、SEOに少なからず影響があります。

商品ページにすべてのレビューが表示されるので、口コミを調べられたときに商品ページが出やすくなる可能性は高くなりますが、Googleが認識するまではしばらく自然検索による流入は減るかと思われます

アンケートみたいにできるタグ機能はプリセットがないから一から手作業でめんどくさい

future Reviewでは、レビュー投稿と一緒にアンケートのようなものが作れる「タグ」を設置できるようになります。

例えば、年齢や性別、自社製品を知ったきっかけなど、タグを使って、購入したユーザーのことを知ることができます

ただ、よくあるプリセットのようなものが用意されておらず、まっさらの状態から始めることになるので、すべて一から手作業で登録する必要があります。

ここに会話の内容を入力しま性別なら「男性」「女性」といった具合に一つ一つ登録しないといけないので個人的には手間がかかりました・・・す。

みみほくろイメージ

アンケートのようなもの、と言いましたが、商品ページに表示されるものなので、どんなタグを設置しようか悩む場合は他のユーザーにとって参考になりそうなタグをイメージして設置するのが良いのではないかと思います。(使用感とか誰にプレゼントするのかなど)

タグは登録順に並ぶから後から自由に並び替えができない

先程のタグ機能に関してですが、グループにまとめることができます。

例えば、「性別」というグループを作って、それに「男性」タグや「女性」タグを所属させる、といった具合です。

まとめるというところまではいいのですが、所属させたタグを後から自由に並べ替えることができず、タグの登録順で並ぶので、順番も気にして登録する必要があります。

2025年12月時点での仕様なので、これから改善される可能性はあるので、導入されたタイミングによっては執筆内容と異なる場合がありますのでご留意ください。

ここまで良いと思ったポイントと注意すべきポイントをご紹介しましたが、まだまだリリースしたばかりで、今後のアップデートでたくさんの機能が実装される予定なので楽しみです!

ここに会話の内容を入力します。個人的に気になっているのは「AIによるレビュー要約」機能です。待ち遠しい・・・!

みみほくろイメージ

詳しくはfuture Reviewの公式ページの「開発中機能の一覧」をご覧ください。

future Review

購入者の声を集める「レビュー機能」を標準搭載。レビュー投稿によるポイント付与機能や、レビュー掲載の承認機能にも対応しています。

cover

費用対効果(コスパ)を計算してみよう

future Reviewは有料のオプションです。導入して元が取れるのか、計算してみましょう。

料金体系(税別)

※2025年12月時点の情報です。

  • 初期費用: 20,000円
  • 月額費用: 4,000円〜(月の注文件数によって変わります)

料金形態が改良されまして、最安プランでは月間注文件数が300件までで月額4,000円でしたが、月間注文件数1,000件までで月額そのまま4,000円と太っ腹な変更がされました。

月間注文件数月額費用
~1,000件4,000円
~3,000件6,500円
~5,000件12,500円
~100,000件25,000円

future Review

購入者の声を集める「レビュー機能」を標準搭載。レビュー投稿によるポイント付与機能や、レビュー掲載の承認機能にも対応しています。

cover

元を取るための目安

一番安い月額4,000円のプランの場合で考えてみます。

  • 例えば、1件注文が入ると1,500円の利益が出るお店の場合…
  • future Reviewのおかげで月に3件、注文が増えれば元が取れます。

写真付きレビューがあることで、「買うのを迷っていた人」が購入してくれる確率は確実に上がります。

月に100件以上注文があるお店なら、導入しても十分に利益が出る可能性が高いです。 料金形態が改良されてハードルがグッと下がり、かなりコスパが良くなりました!

先ほど挙げた残念な点がクリア・許容できれば導入をオススメします。

運用の注意点

便利な機能ですが、導入する前に知っておいてほしい注意点が2つあります。

「承認」の手間がかかる場合がある

投稿されたレビューは「お店が確認してから公開する(承認制)」となります。

futureshop標準のレビュー機能では自動で承認するか手動で承認するか選ぶことができましたが、future Reviewは手動承認一択なので、定期的に管理画面を見て承認ボタンを押す作業が必要になります。

レビュー投稿の注意ページには、レビュー掲載には数日かかることを入れておくのがオススメです。

返信運用ルールを決めておく

「お店からの返信」はお客様に喜ばれますが、全てのレビューに返信するのは大変です。

  • 星3つ以下のご意見には必ず返信する
  • 写真付きの投稿には丁寧にお礼を書く

といった返信ルールを決めたり、文章に悩んだらGeminiやChatGPTなどのAIに返信文の案を考えてもらうなど、無理のない範囲で運用しましょう。

まとめ:導入をおすすめするショップ

オススメするショップ

  • アパレル・食品・コスメ・家具など、写真や感想が購入の決め手になる商品を扱っている。
  • 「サイズ感」や「使い心地」など、文章だけでは伝わりにくい商品の魅力を伝えたい。
  • リピーター(ファン)を増やしたい。

オススメしないショップ

  • 型番商品(どこで買っても同じ家電や文具など)で、価格の安さだけで勝負している。
  • 月の注文がまだ50件未満など、レビューが自然に集まる段階ではない。
  • レビューの管理や返信をする時間が全く取れない。

最後に

さて、いかがでしたでしょうか?

私が実際に触ってみての感想だったので、他にも魅力的なポイントや惜しいポイントもあるかもしれませんが、「future Review」は、月額4,000円から始められる「お客様の声を資産に変えるツール」です。

迷っている場合は、「自分の商品ページに写真付きの感想があったら、もっと買いたくなるかな?」と想像してみてください。答えが「YES」なら、導入する価値は十分にあると思いますよ。

🚀

futureshopでの制作に困っていませんか?

future Reviewを導入したけど自社のECサイトとサイズや色など雰囲気が合っていない、技術的な調整が難しいなど、futureshopに関するお困りごと解決をお手伝いいたします。
futureshopを使ったECサイトを運営するWebデザイナーの『mimihokuro(みみほくろ)』にぜひご相談ください。

Meta広告カスタムコンバージョン設定ガイド(URLルール&イベントコード両対応)

Meta広告(Facebook広告、Instagram広告)を運用していて、「購入」や「リード獲得」といった標準イベントだけでは、ビジネスの“本当の成果”を捉えきれていない…と感じたことはありませんか?

「特定の資料請求ボタンだけ計測したい」「あのサンクスページへの到達をコンバージョンにしたい」。 そんな、あなたのビジネス専用のゴール(コンバージョンポイント)を自由に設定できるのが「カスタムコンバージョン」機能です。

この機能を使いこなせば、標準イベントでは捉えきれないビジネス固有の成果を定義でき、Meta広告の“頭脳”である機械学習の精度が劇的に向上し、広告の最適化が次のレベルへと加速します。

この記事は、Meta広告の成果計測をさらに一歩先へ進めたい、すべてのウェブ担当者やマーケター、開発者の方々に向けて書かれています。

この記事を読み終える頃には、以下の2つの主要な設定方法をマスターし、すぐにでも計測を改善できるようになるでしょう。

  • 【コード不要】 最も手軽な、サンクスページなど特定のURLをゴールにする方法
  • 【要コード】 ボタンクリックなど、特定のアクションをピンポイントで計測する方法

始める前の最重要チェック:Metaピクセルは設置できてますか?

カスタムコンバージョンを設定する前に、絶対にクリアしなければならない前提条件があります。 それは、Metaピクセルのベースコードが、計測したいサイトの全ページに正しく設置されていることです。

ベースコードは、サイトの<head>タグ内に設置される計測の土台です。これがなければ、カスタムコンバージョンは一切機能しません。GTM(Googleタグマネージャー)経由での設置も一般的です。

Metaイベントマネージャを開き、ピクセルが「アクティブ」になっていることを必ず確認してから、次のステップに進んでください。

アプローチ1:【コード不要】最短ルートで設定する「URLルール」

これは、特定のページ(例:購入完了ページ、資料請求サンクスページ)への「到達」をコンバージョンとして設定する、最もシンプルで迅速な方法です。ウェブサイトのコードを一切触る必要はありません。

⚙️ Meta側での設定手順(3ステップ)

  1. イベントマネージャを開く Meta広告マネージャの左側メニュー(すべてのツール)から「イベントマネージャ」を選択します。
  2. カスタムコンバージョンを作成 対象のデータソース(ピクセル)を選択した状態で、左側のメニューから「カスタムコンバージョン」をクリックし、「カスタムコンバージョンを作成」ボタンを押します。
  3. 設定項目の入力 以下の項目を慎重に設定します。
    • 名前: 後から見ても一目でわかる名前(例:「資料請求完了(サンクスページ到達)」)を入力します。
    • データソース: 対象のMetaピクセルが選択されていることを確認します。
    • コンバージョンイベント:すべてのURLトラフィック」を選択します。これが「全てのページアクセスを監視する」という意味になります。
    • ルール:
      • ドロップダウンで「URL」を選択します。
      • 条件を「次を含む」(または「次と等しい」など)から選択します。
      • コンバージョン地点となるページのURLの一部または全部を入力します(例: thank-you/contact/complete.html)。
  4. 作成作成」ボタンをクリックすれば完了です!

この設定により、指定したURLルールに合致するページにユーザーがアクセスするたび、設定したカスタムコンバージョンが計測されます。

アプローチ2:【要コード】ピンポイントで計測する「イベントコード」

この方法は、「サンクスページが存在しないボタンクリック」や「特定のフォーム送信アクション」など、URLの遷移だけでは計測できない複雑なアクションをコンバージョンとして設定する、より高度な手法です。

サイト側での**「イベントを送信するコード」の設置と、Meta側での「そのイベントをコンバージョンとして定義する」設定**の2つのステップが必要です。

ステップ1:サイト側の準備(イベントコードの設置)

まず、計測したいアクションが発生した瞬間に、「今、イベントが起きたぞ!」とMetaに知らせるためのコードをサイトに設置します。

例1:標準イベント(リード獲得)を設置する場合 資料請求のサンクスページなどで、ピクセルベースコードの(通常は</body>タグの直前)に以下のコードを設置します。

// 標準イベント「リード」を送信
fbq('track', 'Lead');

例2:GTM(Googleタグマネージャー)を使用する場合 GTMの「カスタムHTML」タグなどを使うのが便利です。特定のボタン(例:IDが contact-button)がクリックされた時に、以下のコードが実行されるようトリガーを設定します。

<script>
// ここにGTMのトリガー設定(例:クリックトリガー)
// が必要です。
  
// 「Click_ContactPage」という名前のカスタムイベントを送信
fbq('trackCustom', 'Click_ContactPage');
</script>

例3:HTMLのonclick属性を直接使用する場合 GTMを使わず、サイトのHTMLに直接記述する方法です。特定のボタン(例:資料請求ボタン)のHTMLタグに onclick 属性を追加し、クリック時にイベントが発火するようにします。

<!-- 例:IDが 'downloadButton' のボタンがクリックされた時 -->
<button id="downloadButton" onclick="fbq('trackCustom', 'DownloadClick');">
  資料ダウンロード
</button>

例4:パラメータを使用してイベントを区別する場合(重要) ページ内に「資料ダウンロード」ボタンが複数ある場合、どのボタンが押されたかを区別する必要があります。この場合、イベントにパラメータを渡します。

<!-- ページ内に複数のダウンロードボタンがあるケース -->

<!-- 資料Aのボタン -->
<button onclick="fbq('trackCustom', 'DownloadClick', { content_name: 'document_A' });">
  資料Aをダウンロード
</button>

<!-- 資料Bのボタン -->
<button onclick="fbq('trackCustom', 'DownloadClick', { content_name: 'document_B' });">
  資料Bをダウンロード
</button>

この例では、両方のボタンが同じ DownloadClick というイベントを発火させますが、content_name というパラメータに異なる値(’document_A’と’document_B’)を渡しています。これにより、Meta側でどちらのボタンがクリックされたかを区別できます。

サイト側の実装が完了したら、必ずイベントマネージャの「テストイベント」機能を使って、設定したイベント(LeadClick_ContactPage, DownloadClick など)と、設定したパラメータ(content_name など)が正しくMetaに届いているかを確認しましょう。

ステップ2:Meta側でのカスタムコンバージョン定義

イベントが無事にMetaに届いていることを確認できたら、いよいよそのイベントを「コンバージョン」としてMetaに公式認定させます。

  1. イベントマネージャを開く アプローチ1と同様に、「イベントマネージャ」 > 「カスタムコンバージョン」 > 「カスタムコンバージョンを作成」に進みます。
  2. 設定項目の入力 ここがアプローチ1と大きく異なる点です。
    • 名前: わかりやすい名前(例:「資料Aダウンロード完了」)を入力します。
    • データソース: 対象のMetaピクセルを選択します。
    • コンバージョンイベント:
      • 「すべてのURLトラフィック」ではなく、ステップ1で設定したイベント名を選択します。
      • (例:標準イベントの場合は リード、カスタムイベントの場合は Click_ContactPageDownloadClick
    • (オプション)ルール:
      • ここが重要です。 ステップ1の例4のようにパラメータを設定した場合、そのパラメータに基づいてコンバージョンを定義できます。
      • ルールを追加」をクリックします。
      • ドロップダウンから「イベントパラメータ」を選択します。
    • パラメータ(例: content_name)を選択(または入力)し、条件(例:「次と等しい」)と値(例: document_A)を指定します。
    • これにより、「DownloadClick イベント」かつ「content_name パラメータが document_A」の場合のみを計測する、特定のカスタムコンバージョンを作成できます。(「資料B」を計測したい場合は、同様に document_B を指定した別のカスタムコンバージョンを作成します)
  3. 作成

📈 最終チェック:正しく動いているか確認しよう

設定が完了したら、それが「絵に描いた餅」でないか、実際に機能しているかを確認する作業が不可欠です。主な確認方法は2つあります。

方法1:イベントマネージャの「テストイベント」機能(推奨)

Metaが公式に提供するテスト機能で、リアルタイムでイベント受信を確認できます。

  1. イベントマネージャ > テストイベント を開きます。
  2. 「ブラウザイベントのテスト」セクションに対象サイトのURLを入力し、「ウェブサイトを開く」をクリックします。
  3. 別ウィンドウで開いたサイト上で、設定したコンバージョンアクション(例:サンクスページへアクセスする、対象のボタンをクリックする)を自分で実行してみます。
  4. 「テストイベント」の画面に戻り、設定したカスタムコンバージョン名(およびその元となったイベントやページビュー)がリアルタイムで受信されていることを確認します。パラメータを設定した場合は、そのパラメータが正しく受信できているかもここで確認します。

方法2:Chrome拡張機能「Meta Pixel Helper」

開発者や日常的なチェックに便利な、Google Chromeの拡張機能を使った方法です。

  1. インストール: Chromeウェブストアから「Meta Pixel Helper」を検索し、ブラウザに追加します。
  2. サイトを開く: カスタムコンバージョンを設定したサイトのページ(アクションを起こす前のページ)を開きます。
  3. アイコンを確認: ブラウザのツールバーにあるMeta Pixel Helperのアイコンをクリックします。まず、ベースコードである「PageView」イベントが正しく発火しているかを確認します。
  4. アクションを実行: サイト上でコンバージョンアクション(例:ボタンクリック、サンクスページへの遷移)を実行します。
  5. 発火を確認: 再度アイコンをクリックし、設定したイベント(例: LeadDownloadClick)が緑色のチェックマークと共に表示されているかを確認します。イベント名をクリックすれば、送信されたパラメータ(例:file_name: 'document_A')も確認できます。
  6. 発火を確認: 再度アイコンをクリックし、設定したイベント(例: LeadDownloadClick)が緑色のチェックマークと共に表示されているかを確認します。イベント名をクリックすれば、送信されたパラメータ(例:content_name: 'document_A')も確認できます。 (注意:Pixel Helperは「イベント」が発火したかを確認するものです。それが「カスタムコンバージョン」としてMeta側で認識されたか(アクティブになったか)の最終確認は、方法1またはイベントマネージャの概要欄で行う必要があります。)

両方の方法でテストし、ステータスが「アクティブ」になれば成功です! 作成したカスタムコンバージョンが広告の「コンバージョン」目的などで選択できるようになり、あなたの広告運用は新たなステージに進みます。

結論:カスタムコンバージョンで、広告運用の解像度を上げよう

Meta広告のカスタムコンバージョンは、広告の成果をあなたのビジネスの「本当のゴール」と正確に結びつけるための、強力な武器です。

  • サンクスページがあるなら、手軽な「URLルール」(アプローチ1)ですぐに始められます。
  • より複雑なアクションを追いたいなら、「イベントコード」(アプローチ2)でピンポイント計測に挑戦しましょう。パラメータを活用すれば、さらに詳細な計測が可能です。

まずはご自身のサイトの計測したいポイントがどちらの方法に適しているかを確認し、本記事の手順に沿って設定を進めてみてください。

成果計測の精度を高めることが、広告運用の最適化に向けた最大の近道です。正確なデータをMetaの“頭脳”に学習させ、一歩先を行く広告配信を実現しましょう!

VScodeでfutureshopパーツ管理を劇的に効率化!ローカル擬似プレビュー環境構築ガイド

futureshop(特にコマースクリエイター)でのサイト構築・運用において、「共通ヘッダー」「フッター」「おすすめ商品リスト」といった「パーツ」の管理は頻繁に発生する業務です。

futureshopには、そんなときに便利な「パーツ」管理機能が存在し、一つ作れば様々なところで再利用することができます。

しかし、これらのHTMLパーツを修正するたびに、管理画面から編集して、ブラウザでリロードして表示確認する…という従来のフローは、非常に時間がかかり、非効率的です。

この記事では、高機能コードエディタ「Visual Studio Code (VScode)」と、いくつかの標準的なWeb技術(JavaScript)を使い、Futureshopのパーツ管理をローカル環境で擬似的に再現・プレビューする開発環境の構築方法を解説します。

この手法を採用することで、サーバーにアップロードする前に、自分のPC上でパーツの変更をリアルタイムに確認しながら、コンポーネントベースの効率的な開発フローを実現できます。

こんな方にオススメ!

  • Futureshopのサイト更新・デザインカスタマイズを担当するWeb制作者
  • パーツ修正のたびにFTPでアップロードする作業を非効率だと感じている方
  • ローカル環境で効率的にコーディングとプレビューを完結させたい方
  • VScodeをメインのエディタとして使用している方

提案する開発フローの全体像:ローカル擬似プレビューとは?

本記事で提案するのは、Futureshopの本番環境と全く同じものをローカルに構築するものではありません。そうではなく、VScodeとブラウザさえあれば実現できる、シンプルかつ効率的な「擬似プレビュー環境」です。

  1. パーツのコンポーネント化: Futureshopで管理しているヘッダー、フッター、商品リストなどの各パーツを、個別のHTMLファイル(例: _header.html, _footer.html)としてローカルPCに保存します。
  2. JSによるインクルード: プレビュー用のindex.html(ダミーのトップページなど)を用意し、JavaScript(fetch API)を使って、上記1の各HTMLパーツを非同期で読み込み、指定した場所に挿入(インクルード)します。
  3. リアルタイムプレビュー: VScodeの拡張機能「Live Server」を使ってindex.htmlをブラウザで開きます。これにより、_header.htmlなどのパーツファイルを編集して保存するだけで、ブラウザが自動的にリロードされ、変更が即座に反映されます。

この環境により、本番サーバーのパスや独自タグ(例: %SHOP_URL%)を気にすることなく、純粋なHTML/CSSのコーディングに集中できます。(※本番反映時にパスの調整が必要な場合があります)

構築に必要なツール

  1. Visual Studio Code (VScode): メインとなるコードエディタ。
  2. VScode拡張機能: Live Server: ローカル開発用サーバーを起動し、ファイル保存時にブラウザを自動リロードさせるための必須拡張機能。

ステップ別!ローカル擬似プレビュー環境の構築

Step 1: 開発用フォルダと「パーツ」HTMLファイルの準備

まず、ローカルPCにプロジェクト用のフォルダを作成します。ここでは futureshop-local-dev という名前のフォルダを作成する例で進めます。 その中に、プレビュー用のページ index.html、パーツをまとめる parts フォルダ、スクリプトを置く js フォルダ、スタイルを置く css フォルダを作成します。

フォルダ構成例

futureshop-local-dev/
│
├── index.html          # プレビュー用のメインページ
│
├── css/
│   └── style.css       # スタイルシート
│
├── js/
│   └── main.js         # パーツ読み込み用スクリプト
│
└── parts/
    ├── _header.html    # ヘッダーパーツ
    └── _footer.html    # フッターパーツ

次に、parts フォルダ内に、コンポーネントとなるHTMLファイルを作成します。ファイル名の先頭にアンダースコア _ をつけると、部分的なファイル(パーツ)であることが視覚的に分かりやすくなります。

<header style="background-color: #f0f0f0; padding: 20px; text-align: center; border-bottom: 2px solid #ccc;">
    <h1><a href="/">My Futureshop Site (Local Preview)</a></h1>
    <nav>
        <ul style="list-style: none; display: flex; justify-content: center; gap: 15px; padding: 0;">
            <li><a href="#">カテゴリ1</a></li>
            <li><a href="#">カテゴリ2</a></li>
            <li><a href="#">お問い合わせ</a></li>
        </ul>
    </nav>
</header>
<footer style="background-color: #333; color: white; padding: 30px; text-align: center; margin-top: 50px;">
    <nav>
        <ul style="list-style: none; display: flex; justify-content: center; gap: 15px; padding: 0;">
            <li><a href="#" style="color: white;">会社概要</a></li>
            <li><a href="#" style="color: white;">プライバシーポリシー</a></li>
        </ul>
    </nav>
    <p style="margin-top: 20px; font-size: 0.9em;">© 2025 My Shop. (Local Preview)</p>
</footer>

Step 2: パーツを呼び出す「プレビュー用ページ」の作成

次に、これらのパーツを読み込んで表示するための「親」となる index.html を作成します。

ポイントは、パーツを挿入したい場所に、目印となる id を持つ <div> タグ(コンテナ)を配置することです。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Futureshop ローカルプレビュー</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    
    <!-- ヘッダーパーツの挿入場所 -->
    <div id="header-container"></div>

    <!-- メインコンテンツ (プレビュー用のダミー) -->
    <main style="padding: 20px; max-width: 960px; margin: 20px auto; border: 1px solid #eee;">
        <h2>メインコンテンツエリア</h2>
        <p>ここはプレビュー用のダミーコンテンツです。</p>
        <p>ローカルで `_header.html` や `_footer.html` を編集・保存すると、このページのヘッダーとフッターが自動で更新されます。</p>
        
    </main>

    <!-- フッターパーツの挿入場所 -->
    <div id="footer-container"></div>

    <!-- パーツを読み込むためのスクリプト -->
    <script src="js/main.js"></script>
</body>
</html>

Step 3: JavaScriptによるHTMLインクルード処理の実装

ここがこの環境の核となる部分です。js/main.js ファイルを作成し、標準技術である fetch API を使って、各パーツHTMLを非同期で読み込み、index.html の指定コンテナに挿入する処理を記述します。

// DOM(HTML)の読み込みが完了したら実行
document.addEventListener('DOMContentLoaded', () => {

    // ヘッダーを読み込んで挿入する関数
    const loadHeader = async () => {
        try {
            // parts/_header.htmlを非同期で取得
            const response = await fetch('parts/_header.html');
            if (!response.ok) { // 読み込み失敗時はエラー
                throw new Error(`HTTP error! status: ${response.status}`);
            }
            const html = await response.text(); // 取得した内容をテキストとして読み込む
            const container = document.getElementById('header-container');
            if (container) {
                container.innerHTML = html; // コンテナにHTMLを挿入
            } else {
                console.warn('header-container が見つかりません。');
            }
        } catch (error) {
            console.error('ヘッダーの読み込みに失敗しました:', error);
        }
    };

    // フッターを読み込んで挿入する関数
    const loadFooter = async () => {
        try {
            const response = await fetch('parts/_footer.html');
            if (!response.ok) {
                throw new Error(`HTTP error! status: ${response.status}`);
            }
            const html = await response.text();
            const container = document.getElementById('footer-container');
            if (container) {
                container.innerHTML = html;
            } else {
                console.warn('footer-container が見つかりません。');
            }
        } catch (error) {
            console.error('フッターの読み込みに失敗しました:', error);
        }
    };

    // 複数のパーツ読み込みを並行して実行
    Promise.all([
        loadHeader(),
        loadFooter()
        // 他にも読み込みたいパーツがあればここに追加
        //例: loadRecommendList()
    ]);

});

このスクリプトは、index.html が読み込まれた直後に parts/_header.htmlparts/_footer.html の内容を取得し、それぞれ id="header-container"id="footer-container" の中に流し込みます。

Step 4: VScode「Live Server」でリアルタイムプレビューを実行

環境の準備は整いました。最後に、VScodeの拡張機能「Live Server」を使って、これをリアルタイムでプレビューします。

  1. VScodeの拡張機能タブ(左側のアクティビティバー)を開きます。
  2. 検索ボックスに「Live Server」と入力し、Ritwick Deyさんが作成した拡張機能をインストールします。
  3. インストールが完了したら、index.html ファイルを開いた状態で、VScodeの右下にあるステータスバーの「Go Live」ボタンをクリックします。
  4. 自動的にデフォルトブラウザが起動し、http://127.0.0.1:5500/index.html のようなローカルサーバーのアドレスで index.html が表示されます。

ブラウザには、index.html のメインコンテンツに加え、main.js によって読み込まれた _header.html_footer.html の内容が組み合わさって表示されているはずです。

この状態で、VScodeに戻って parts/_header.html の内容を少し変更(例: 「カテゴリ1」を「新着アイテム」に変更)して保存してみてください。 ブラウザが自動的にリロードされ、変更が即座にプレビューに反映されます。

ローカル開発の効率化と、本番環境への反映フロー

ローカルでの効率的な開発サイクル

この環境が真価を発揮するのは、CSSの調整やHTMLの構造変更を繰り返す時です。

  • CSSの変更: css/style.css を編集して保存すれば、即座にプレビューに反映されます。
  • HTMLパーツの変更: parts/_header.html のリンク構造を変更したり、新しい <div> を追加したりする作業も、保存するたびに結果を確認できます。
  • 確認の高速化: Futureshopの管理画面を開く必要も、FTPでアップロードする待ち時間もありません。VScodeとブラウザだけで開発サイクルが完結します。

ローカルからFutureshop本番環境への反映

このローカル環境は、あくまで開発とプレビューを高速化するための「下書き・検証用」です。ローカルで作業が完了したら、その成果をFutureshopの本番環境に反映させる必要があります。

管理画面へコピー&ペースト

  1. ローカルのVScodeで、完成したパーツファイル(例: parts/_header.html)を開きます。
  2. その中の HTMLコード全体をコピー します。
  3. Futureshopの管理画面(コマースクリエイター)にログインします。
  4. 該当するパーツ(例: 「共通ヘッダー」)の編集画面を開き、コピーしたHTMLコードを貼り付けて保存します。

注意点: ローカルで img/logo.png のように記述していたパスは、Futureshopの正しいパス(例: https://.../images/logo.png%TEMPLATES_URL%/images/logo.png といった独自タグ)に適宜修正する必要があるか確認してください。

さいごに

今回紹介した「ローカル擬似プレビュー環境」は、VScode、Live Server、そしてJavaScriptのfetch APIという標準的な技術だけで構築できます。

この環境を導入することで、開発中のトライ&エラーを安全かつ高速なローカル環境で完結させ、完成したコードだけを本番に反映する、というモダンで安全な開発フローを実現できます。

Futureshopのパーツ管理・デザインカスタマイズの効率化に、ぜひお役立てください。

【Nano Banana Pro】生成する画像のアスペクト比を操るテクニック/正攻法とおまけテクニック

Googleが発表したGeminiの『Nano Banana(ナノバナナ)』ですが、凄まじい精度で画像を生成してくれ、中には「Photoshopいらない!」なんて声も聞きます。

恐らくこの記事を読みに来てくれたあなたも、すでにNano Bananaを試して画像生成を楽しんでいると思います。

そんなNano Bananaですが、「Pro」モデルへの継続的なアップデートにより、文字の描画精度や構図の理解力はかつてない次元に達しています。

Webデザイナーとして、あるいはブロガーとして、アイキャッチ(サムネイル)制作のフローがガラリと変わったのを感じている方も多いのではないでしょうか。

でもNano Bananaで画像を作っている中で、こんな問題に出会ったことはありませんか?

「16:9で指定したはずなのに、微妙にサイズが合わない……」 「プロンプトに書いたのに、なぜか正方形になってしまうことがあるのはなぜ?」

今回は、Nano Banana Proがなぜ「お茶目なズレ」を生じさせるのかという技術的背景から、アスペクト比コントロールの正攻法、そして特定の条件下で役立つ補足知識までを徹底解説していきます。

アスペクト比コントロールの「正攻法」:思考モードを活用する

現在のNano Bananaにおいて、「思考モードによるプロンプト指定」によってアスペクト比をコントロールできるようになりました。

自然言語でアスペクト比を指定するだけで、**「ある程度」**指定のアスペクト比で生成してくれます。

  • 有効なプロンプト例:
    • 「アスペクト比を16:9にして、ブログのアイキャッチ用に生成して」
    • 「YouTubeのサムネイルサイズ(16:9)の横長で」
    • 「ポートレート(9:16)の縦長構図で」
  • 思考モードの特性: プロンプト内の比率指示を深く解釈し、指定された数値を実現するために最適なキャンバスサイズを数学的に導き出します。比率をプロンプトでコントロールしたい場合は、「思考モード」を選択してください。

逆に言うと、「高速モード」ではプロンプトだけでアスペクト比をコントロールすることはできません

プロンプトだけでコントロールしたい場合には「思考モード」はマストなのです。

実証データ:なぜ「16:9」で指定してるのに「ズレる」のか

先程、指定したアスペクト比に対して忠実ではなく「ある程度」と言ったのも、実はプロンプトで「16:9」と指定し、思考モードで実行しても、実際に出力される解像度は厳密な16:9(1.777…)ではありません

以下は私が調べた、指定したアスペクト比に対する実際の比率を簡単にまとめた表です。

指定比率生成される解像度 (px)実際の比率 (簡略整数比)
16:92752× 153643:24
5:42304×185636:29
4:32400×179275:56

なぜ最新のAIが、私たちの指示を「微妙にズラして」くるのでしょうか? そこには、AI特有の数学的なロジックが存在します。

AIの「職人気質なこだわり」:64ピクセル・グリッド

Nano Banana Proの画像生成エンジンは、画像を「一繋ぎの面」としてではなく、「64ピクセル(もしくは128ピクセル)単位」の小さなブロック(タイル)を並べて構築しています。

というのも、AIは「端数が出る中途半端なブロック」を処理するのを嫌います。

無理にサイズを合わせようとすると画質が低下したり、境界線にノイズが走ったりするため、AIは「最高画質」を維持できる、最も近い 2752px (64×43) を自動的に選んでしまうのです。

「ズレ」を味方につける運用方法

この微細なズレを前提とした上で、Webデザイナーの私が実践している実務的な運用方法をご紹介します。

  1. 「セーフエリア」を意識して生成する
    プロンプトに「被写体を中央に配置し、周囲に十分な余白(negative space)を空けて」と記述します。これにより、AIが出力する 1.79 という比率を、後に 1.77(16:9)へ切り抜いても、重要な要素が欠ける心配がなくなります。
  2. Canvas機能での微調整
    生成された画像に対して、Canvas上で「左右を少し描き足して比率を整えて」と指示(アウトペインティング)を出すことで、元のクオリティを維持したまま、より理想に近い比率へ近づけることができます。
  3. Windows標準ツールやPhotoshopでの仕上げ
    出力される 2752×1536 という解像度は非常に高精細です。これをWindowsの「フォト」アプリ等で開き、16:9(1.77)にトリミングして書き出します。Nano Bananaを使うとついてくる「ウォーターマーク」もフォトの「生成消去」機能で結構キレイに消してくれます。

【おまけテクニック】「高速モード」でアスペクト比コントロールする意外な方法

基本的には「思考モード」でのプロンプト指示でアスペクト比調整は解決しますが、「アスペクト比の確保のためだけに思考モードを使うのは生成クレジットがもったいないなぁ・・・」と思った方のためのTipsも紹介しておきます。

実は「高速モード」を選択している場合、プロンプトの比率を指定しても反映されません。

ですが、あるテクニックを使うと高速モードでもある程度の比率をコントロールすることができます

このテクニックは、Gemini 2.5の時代から検証されているもので、YouTubeチャンネル「Nano Banana Aspect Ratio Issue & Fix」で紹介された手法を参考にしています。

※注意:この手法は、「高速モード」でのみ機能する手法です。論理的指示が優先される思考モードでは効果がありません。

その方法というのが、**「希望の比率で作成した、真っ白(または真っ黒)な画像を最後にアップロードする」**という画期的なテクニックです。

この何もない「白紙画像」を、いわばサイズを指定するためだけの「ダミー画像」として利用することで、元画像の比率に関係なく、出力結果を理想に近いアスペクト比へと導くことができます。

コピペで使える「ダミー画像」活用プロンプト

それでは、実際にダミー画像を使ってNano Bananaのアスペクト比をコントロールする手順を見ていきましょう。

Step 1: ダミー画像の準備

まず、Windowsの「ペイント」や任意の画像編集ツールを使い、希望するアスペクト比の画像を作成します。今回は16:9の横長画像を目指すので、例えば「1600x900px」などでキャンバスを作成し、真っ白なまま保存します。

サイズを1600x900pxとしていますが、あくまで比率合わせのためのサイズ指定なので、このサイズで生成されるということではありません。

Step 2: 画像のアップロード

次に、Nano Bananaのプロンプト入力画面で、以下の順番通りに画像をアップロードします。

  1. 1枚目: メインで使いたいコンテンツの画像(比率は問いません)
  2. 2枚目(最後): Step 1で作成したダミー画像(16:9の白紙)

この「順番」が非常に重要です。

複数の画像をまとめて選択すると意図しない順序になる可能性があるので、一つずつアップロードすることをオススメします。

Step 3: アスペクト比を反映するためのプロンプトをコピー&ペースト

最後に、以下のプロンプトをコピーして、プロンプト入力欄に貼り付けてください。これは「1枚目の画像の内容を、2枚目の画像の比率に合わせて再描画してください」と具体的に指示するものです。

画像1の内容を画像2の上に再描画し、画像1の縦横比が画像2と一致するようにコンテンツを追加して調整してください。同時に、画像2の内容は完全に削除し、その縦横比だけを維持してください。空白の領域が残らないようにしてください。

この手順を踏むことで、Nano Bananaは1枚目の画像の本質的な内容を維持したまま、2枚目のダミー画像が持つ16:9に近いアスペクト比で再生成してくれるはずです。

このプロンプトは元の画像を希望の比率に拡張するイメージです。例えば、元の画像が正方形で生成したい画像が16:9の横長の場合、横方向に足りない部分を補足しようとします。
トリミングしたい場合はプロンプトを調整する必要があります。

補足:画像をトリミングしたい場合

先程はメイン画像を「拡張して」希望の比率に近いサイズにしていましたが、逆にメイン画像の一部を「削って(トリミング)」生成することもできます。

その場合には以下のプロンプトを使ってみてください。

画像1の内容を画像2の上に再描画し、画像1の縦横比が画像2と一致するようにコンテンツの上下を削除してトリミング調整してください。同時に、画像2の内容は完全に削除し、その縦横比だけを維持してください。空白の領域が残らないようにしてください。

こんな感じにできます。

プロンプトだけで生成した画像

白紙画像を使ってトリミング生成した画像

そのままトリミングしたわけではありませんが、元画像の上下が削られ、希望の比率に近い画像を生成することができました。

あくまで「おまけ」のテクニックですが、大量のバリエーションを高速に生成したい時などに役立つことがあります。

まとめ:AIの「クセ」を理解して最高の1枚を

Nano Banana Proにおけるアスペクト比のコントロール。それは「完璧な指示」を出すことだけではなく、「AIの仕組みを理解して一歩歩み寄る」ことでした。

  • メインは「思考モード」での自然言語による比率指示。
  • 「64pxの制約」による微細なズレは、後からトリミングで整えるのが正攻法。
  • 「白紙画像」ハックは高速モード限定の補助的なテクニック。

今回ご紹介した方法は、ブログのアイキャッチ画像やWebサイトのバナー、SNS投稿用の画像など、特定のサイズが求められるクリエイティブ制作において絶大な効果を発揮します。

ぜひ、あなたの作品作りにこの方法をお役立てください。

※なお、本記事で紹介している内容は、執筆時点の情報と筆者の実験に基づいています。生成AIの仕様は変更される可能性があるため、必ずしも同様の結果が得られることを保証するものではありません。

Posted in AI