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

ブログ

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

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

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

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

AMPではinputが使えない

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

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

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

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

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

amp-bindで試したが

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

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

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

うーん。

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

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

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

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

~注目:M&Aマッチングサービス~

現在、景況感の悪化に伴い、M&Aマッチングサービスで事業やサービス、メディアを売却する動きが出ています。下記記事に詳細をまとめましたので、資金繰りの案としてご検討ください。

[2020年最新版]事業や資産の売却(資金繰り)に使えるM&A(事業継承)マッチングサービスまとめ

スポンサーリンク


※このメッセージは1年以上前の記事(当記事最初の更新は2018年11月23日)に出るものです。最新の情報と異なる可能性がありますので、公式サイトへアクセスするか別途お調べください。

ブログ

Posted by jun