Story HPストーリーHPプロジェクトAI仕組みラボのホームページ制作
2026.10.30 / 制作事例

未来クエスト|診断から学びへ

未来クエストに、16問のセルフチェックを追加しました。 お金との向き合い方を、4つの視点で振り返ります。 結果からブログと、今日試せる一歩へつなぐ設計です。

現在は改訂プレビューとして公開しています。

16問のセルフチェックを試す

未来クエストの改訂プレビュー、青空と白・金の景色に「お金を知る」「未来を選ぶ」を大きく置いたトップページ
改訂プレビューのトップページ(2026年11月5日撮影)/改訂プレビューの実画面/画像を押すと拡大

まずは、お金の悩みから

当初は、ものの見方や対話などの学びを広く案内していました。 今回は、お金を最初のテーマにして、ブログや動画で学びを広げる方向へ整えました。

お金のことを知りたいけれど、何から学べばいいか分からない。 そんな方が、自分の今の行動を振り返れる入口を用意しています。

トップには、「お金を知る」「未来を選ぶ」という言葉を置きました。 最初の画面から、セルフチェックをはじめるボタンへ進める構成です。

16問で、学びの入口を見つける

IQGセルフチェックは、お金に向き合う日々の行動を尋ねる16問です。 発想・工夫、対話・つながり、伝える・聴く、整理・判断の4つの視点を、各4問で振り返ります。

「できている」「ときどき」「これから」「まだ分からない」の4つから、今の自分に近いものを選びます。 買う前に別の方法を考える、分からない言葉を質問する、手数料を確かめる。 日常の具体的な場面で答えられる設問にしました。

名前やメールアドレスの登録は不要です。 回答は画面を開いている間だけ扱い、送信や保存をせずに結果を表示します。

IQGセルフチェックの質問画面、4問ずつ進み、今の自分に近い選択肢を選ぶ
4問ずつ進むセルフチェックの質問画面(2026年11月5日撮影)/改訂プレビューの実画面/画像を押すと拡大

結果の先に、次の一歩を

結果には、4つの視点ごとの回答の内訳を表示します。 「これから」「まだ分からない」が多かった視点から、学びの入口を案内する設計です。 同じ数の視点があれば、候補を並べて自分で選べます。

たとえば、対話・つながりの視点なら、相談したいことを一つ書き出す。 整理・判断の視点なら、今月の明細を一つ開いてみる。 その場で試せる行動と、詳しく読めるブログを添えました。

気づいたことを、次に何をするかへつなぐ。 診断コンテンツを設けるときに大切にしたのは、その先の学びまで用意することでした。

セルフチェックの結果画面、回答の内訳と、次に学ぶ視点・ブログへのリンクを表示した例
学びの入口と回答の内訳を示す結果の表示例(2026年11月5日撮影)/説明用の回答による表示例/画像を押すと拡大

青・白・金で、学びの未来を描く

以前の鉛筆・水彩のやさしい画風から、青空、白、金、濃紺を合わせた写真調の世界観へ変更しました。 トップ、4つの視点を説明する図解、ブログの画像まで、同じ色と光の雰囲気で揃えています。

明るい空と、ノートを開く人の姿。 これから学んでみようと思える、前向きな雰囲気を目指しました。 人物や景色は、学びの未来を描いたイメージです。

図解に入れるのも、選択肢を考える、誰かに相談する、説明を読む、数字を確かめるといった場面です。 本文と画像が、同じ日常の行動を伝えるようにしました。

お金の選択を4つの視点で説明する実際の図解、考える、相談する、言葉にする、数字を確かめる場面を同じ世界観で表現
本文と同じ日常の行動を伝える図解(2026年11月5日撮影)/改訂プレビューの実画面/画像を押すと拡大

スマホでは、選びやすさから

16問は、4問ずつ進む形です。 回答済みの数を示し、前の質問へ戻って見直せるようにしました。 未回答があれば、その場所を案内します。

パソコンで横に並ぶ選択肢は、スマートフォンでは2列に。 通常本文は18pxを基本にし、質問と選択肢を読みながら押せる大きさを確かめました。

トップ画像と4つの視点の図解も、PC用とスマホ用をそれぞれ用意しています。 スマホでは縦に追える構成にし、文字や人物の位置まで画面に合わせました。

スマートフォン版のトップページ、縦構成の専用画像からセルフチェックへ進める実画面
スマートフォン用のトップページ(2026年11月5日撮影)/改訂プレビューの実画面/画像を押すと拡大
スマートフォン版の結果表示例、4つの回答の内訳と、今日試せる一歩を読みながら進める
スマートフォンで見る結果の表示例(2026年11月5日撮影)/説明用の回答による表示例/画像を押すと拡大

ブログと動画を、育てていく

改訂プレビューには、4つの視点に対応する入門ブログを4記事用意しました。 選ぶ前に考えること、相談すること、自分の言葉で説明すること、収入と支出を整理すること。 結果から読んでも、ブログ一覧から選んでも学べる構成です。

記事の最後には、その日に試せる小さな行動を添えています。 動画は準備中と分かる形で、今後の公開先を用意しました。

まずはお金から。 これから人間関係や子育てへテーマを広げるときも、学びを追加していけるホームページとして考えています。

改訂プレビューのブログ一覧、お金との向き合い方を4つの視点から学ぶ記事と、ブログ・動画の切り替え
4つの視点に対応するブログ一覧(2026年11月5日撮影)/改訂プレビューの実画面/画像を押すと拡大

事業と一緒に、サイトも育てる

今回の改訂では、コンセプト、文章、画像、セルフチェック、ブログへの道筋を一緒に整えました。 確認用に公開した全13ページで、16問の回答から結果、次のブログまで進める状態です。

ここで紹介しているのは、改訂プレビューで体験できる内容です。 現在の本番サイトへの反映前に、新しい学びの流れを試せます。

講座や学びの仕事で、訪問した方に自分との接点を見つけてほしい。 診断やチェックを、その後のコンテンツにつなげたい。 そんなときは、最初の問いと、答えた後の一歩を一緒に考えることからはじめられます。

未来クエストの改訂プレビューを体験する

事業とホームページを相談する

ホームページ制作 / 運営システム

伝わるデザインも、運営の仕組みも。

会社やお店の魅力を伝えるページから、登録フォーム、管理画面、更新マニュアルまで。必要な機能を一緒に整理し、公開後の使いやすさまで考えて制作します。

  • ホームページ
  • 店舗・会員登録
  • 商品管理
  • 管理画面
  • マニュアル

ホームページ制作費

11万円〜

税込・初期制作費

制作範囲・機能・規模に応じてお見積もりします。

制作内容と料金を見る →

公開後の管理・サポートは、別途月額プランが必要です。ホームページ管理+AI仕組みラボは通常月額16,500円(税込)、紹介割引で月額11,000円(税込)。月額プランは1年間継続で、Codexなど外部ツールの利用料は別途です。

記事制作・投稿も任せるAIライター運営代行は、月額33,000円〜(税込)。担当者によって料金・対応範囲が異なります。

公開後の運用プランを確認する →