スマホ向けの選択デザインにはタブが有効なんじゃないか説(ただしAMPで苦悩)

2018年11月23日ブログ

みなさんどうもAMP！運営サイトのAMP用CSSに苦戦している@xi10jun1です。

運営サイトにて、スマホ向けにタブを作って、ボタンを押すだけでコンテンツ選択可能なデザインにしてみました。

中は表にしているのですが、これと同じ要領で記事内にも作ったらAMPでエラーになったんです・・・。

※この記事では解決策は出てきません

AMPではinputが使えない

いわゆるradioボタンですね。

radioボタンにしたタブを押すと左右にコンテンツ切り替わるようにし、且つAMPでもエラーが出ないようCSSでのみ作成したんです。

こうすると、スマホで何回も下にスクロールせずに、表などの似たようなコンテンツをボタンを押すだけで閲覧できるようになるので、ユーザビリティアップになるわけです。

特に表や縦長になる画像なんかは、下に何回もスクロールさせるのは好まれないのかなと。スマホ画面を何度も指で下にピッピラピッピラと動かすわけですから、ユーザー的には面倒ですよね。

ところがこれがAMPで使えなかったんですよ。

amp-bindで試したが

実は最近amp-bindと呼ばれるものが出てきました。

javascriptみたいな動的なコンテンツを、AMPでも使えるようになるとのこと。これを早速調べてやってみたんですが、動かない・・・。

動かないというか、厳密に言うとAMPのエラーになってしまう。

うーん。

まとめ：AMPでもタブがもっと楽に使いたい

やろうと思えばいい感じのCSSが作れそうなんですが、それにかけている時間がもったいない。

なので誰か僕より技術的に優れている人の完成形を待ちますか・・・。

AMPでも通常のPCやスマホページと変わらない動きが出てきたので、ユーザビリティを考えると積極的に導入したいですな。