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