サイトの滞在時間を上げるため、あるいは適切なサービスを紹介するため、サイト内に診断ツールを導入したいという人は多いのではないでしょうか？
診断ツールの作り方はネット上でたくさん紹介されていますが、Javascriptを使ったものが多く、コードが理解できなかったり、WordPressなどCMSを利用していたりする人にとっては使いづらい面があります。
私にかつて診断ツールの作成を依頼されたクライアント様も、WordPressをご利用でした。Javascriptやプラグインの導入はサイトを重くするため、考案したのが「CSSだけで実装する軽量診断ツール」です。ブラッシュアップを重ねて、「WordPress版」「汎用版α」「汎用版β」の3種類を作り出しました。
動作をぜひご覧ください。
■ 執筆・制作のポイント
各診断ツールの特徴
| 比較項目 | ① WordPressブロックエディタ(Gridレイアウト版） | ② 汎用版α（Gridレイアウト版） | ③ 汎用版β（Checkbox Hack版） |
| 導入・制作の しやすさ | ★高 技術的難易度は低いが、作業工数は多い。 コード知識は不要だが、GUI操作（クリックや設定）が多く、コーダーにとってはHTML直書きより時間がかかる場合がある。 | ★ 中（HTML知識が必要） リンクタグ( <a>)ベースで構造が単純。テキストエディタの置換機能などが使えるため、量産や修正は早い。 | ★ 低（複雑な構成力が必要）inputとlabelのペアリングなど厳密な記述が必要。記述ミスで動かなくなるため注意が必要。 |
| コードの 動く仕組み | CSS :target 擬似クラスCSS Gridで配置し、ブロックごとのリンク機能でページ内ジャンプや遷移を行う。 | CSS :target 擬似クラスURLの末尾（ハッシュ #id）と一致する要素だけをCSSで表示させる。 | CSS :checked 擬似クラス隠したチェックボックスの状態を判定し、隣接セレクタ( +)で直後の要素を表示させる。 |
| メリット | ・保守性: 納品後、コードが読めないクライアント自身で画像やテキストを修正できる。 ・安全性: 独自コードによるバグの心配がない。 | ・UX: ブラウザの「戻る」ボタンで前の質問に戻れる。 ・効率:WordPress版と理屈は同じだが一気に作業ができる。 | ・UX: 画面遷移やスクロール発生がなく、アプリのようにサクサク動く。 ・表現: アニメーションがつけやすく、URLも汚れない。 |
| デメリット | ・作業効率: ブロック一つ一つにリンクを設定する単純作業の繰り返しが発生し、一括置換などができないため意外と手間がかかる。 ・表現力: 紙芝居のような滑らかな切り替えは苦手。 | ・挙動: クリック時に画面位置が対象要素までジャンプ（スクロール）してしまう。 ・履歴: ブラウザの履歴にログが残る。 | ・操作性: ブラウザの「戻る」が効かない（前の質問に戻れない）。 ・保守: HTML構造が複雑になりがちで、後からの修正時にミスが起きやすい。 |
WordPressを使っている人向けの超簡単診断ツール
WordPressを利用している方向けの超簡単診断ツールです。極力ブロックエディターを利用して、コードを最小限に抑えることにこだわりました。
学び直し診断ツール
リスキリングに興味はあるけれど、何から始めたらいいの？そんな人のために、学び直し診断ツールを用意しました。気軽にチャレンジしてくださいね。
Q.学び直しの一番の目的は？
Q.どっちのスタイルで勉強したい？
Q.どっちのスタイルで勉強したい？
Q.新しい技術に興味がある？
Q.将来どうやって活躍したい？
Q..タイムスリップするなら？
Q.今一番の悩みは？
あなたにおすすめなのは
「AI・プログラミング学習」！
新しいものが好きなあなたは、これからの時代を切り開くAIやプログラミングを勉強してみましょう。この分野は様々な動画サイトで手軽に最新技術を学べますよ。
あなたにおすすめなのは
「英語の資格取得」！
世界で活躍する基礎力をしっかり身につけたいあなたには、英語の資格を取るための勉強がおすすめです。日本でメジャーな英語の資格には、英検®やTOEIC®があります。まずは、二つの試験の違いを調べてみましょう。
あなたにおすすめなのは
「通信制大学入学」！
専門性の高い勉強をしたい、学士や博士号に興味があるという人は、通信制大学への入学をおすすめします。最近では、オンライン環境を利用して通学なしで卒業できる大学も登場しています。忙しい人でも、学び直しができるチャンスですよ。
あなたにおすすめなのは
「歴史漫画での学習」！
机に向っての堅苦しい勉強はちょっと苦手…という人におすすめなのは、漫画を使った勉強です。特にたくさんのタイトルが出版されているのが、歴史漫画のジャンルです。ストーリーを楽しみながら歴史の学び直しをしてみませんか？
あなたにおすすめなのは
「FPの資格取得」！
あなたにぴったりなのは、お金の勉強に最適なFP(ファイナンシャルプランナー)の資格取得です。FPになるための勉強をすれば、自分や家族の保険、貯蓄、投資などについて、自己判断できる能力が身につくでしょう。また、キャリアアップにもつながりますよ。
どんなサイトにも設置可能なCSS診断ツール（汎用版α）
WordPressバージョン
あなたにおすすめなのは
動画サイトでのAI・プログラミング学習！です。
新しいものが好きなあなたは、これからの時代を切り開くAIやプログラミングを勉強してみましょう。この分野は様々な動画サイトで手軽に最新技術を学べますよ。
TOPにもどるあなたにおすすめなのは
英語の勉強です。
世界で活躍する基礎力をしっかり身につけたいあなたには、英語の資格を取るための勉強がおすすめです。日本でメジャーな英語の資格には、英検®やTOEIC®があります。まずは、二つの試験の違いを調べてみましょう。
TOPにもどるあなたにおすすめなのは
通信制大学のガイド本です。
専門性の高い勉強をしたい、学士や博士号に興味があるという人は、通信制大学への入学をおすすめします。最近では、オンライン環境を利用して通学なしで卒業できる大学も登場しています。忙しい人でも、学び直しができるチャンスですよ。
TOPにもどるあなたにおすすめなのは
日本の歴史漫画です。
机に向っての堅苦しい勉強はちょっと苦手…という人におすすめなのは、漫画を使った勉強です。特にたくさんのタイトルが出版されているのが、歴史漫画のジャンルです。ストーリーを楽しみながら歴史の学び直しをしてみませんか？
TOPにもどるあなたにおすすめなのは
FP資格・お金の参考書です。
あなたにぴったりなのは、お金の勉強に最適なファイナンシャルプランナーの資格取得です。ファイナンシャルプランナーになるための勉強をすれば、自分や家族の保険、貯蓄、投資などについて、自己判断できる能力が身につくでしょう。また、キャリアアップにもつながりますよ。
TOPにもどるどんなサイトにも設置可能なCSS診断ツール（汎用版β）
こちらは、チェックボックスの仕組みを使ったCSS診断ツールです。URLが動かず、画面遷移の不自然さもありません。