モバイルファーストで逃げたけど──iPad Pro問題を超えて3モードUIに再挑戦した話

“3モード設計”と言いながら、実質は2系統。そこにこだわった理由。

モバイルファーストで“逃げた”その後──3モードUIへの再挑戦

前回、iPad Proの横画面レイアウトに苦戦して「PC以外はモバイルファーストで統一」という方針に落ち着いたとお話ししました。

当時は「逃げた」と感じる部分もありましたが、実際には合理的で安定した判断だったと思っています。

ただその後、実運用とフィードバックの中で、次の課題が見えてきました。

そうして、もう一度UI設計を見直すことにしました。

今回採用したのは「PC」「タブレット」「モバイル」の3モード判定をベースにしながらも、
レイアウトは“PC専用”と“タッチ端末用”の2系統に分ける方式です。

CSSではメディアクエリで以下のように分岐しています：

JavaScriptでは DeviceDetector.js を使い、以下のように判定しています：

また、±16pxのヒステリシス処理と100ms以内の変化無視を入れて、安定した切り替えを実現しています。

PCモードでは：

タブレット・モバイルモードでは：

PCでは showDetailCards() を使って、1枚ずつ章を切り替える形式を採用しています。
切り替えは400msのフェード効果で、没入感を意識した静かな演出です。

モバイル・タブレットでは showMobileCards() を使い、すべての章を縦に並べて一括表示。
アニメーションは控えめにして、表示速度と操作性を優先しています。

PCモードでは、補足画像や背景画像、カットインアニメーション（GSAP）なども含めて、
情報とビジュアルの両方を活かせる設計になっています。

一方、タブレット・モバイルではこれらをすべて省略。
読みやすさと軽量さを優先した作りです。

今回の設計でポイントだったのは、「コード上はタブレットとモバイルを判別しているが、UIは共通にしている」という点です。

その理由は：

結果として、UIは以下の2系統で整理しました：

コード上はタブレットとモバイルを区別していますが、
UIレイアウトとしては両者を共通にしています。

理由は：

画面幅でスマホ／タブレット／PCを切り替える処理って、
「768px超えたら即タブレット」にしてしまうと、画面をちょっと動かしただけで表示がガタガタ変わってしまうことがあります。

そこで±16pxの“ゆらぎ”を許すヒステリシス処理を入れて安定させました。

```js
if (width <= 768 + 16) {
return 'mobile';
} else if (width <= 1400 + 16) {
return 'tablet';
} else {
return 'desktop';
}

一度は“モバイルファーストで逃げた”UI問題。

でもその先で得た気づきが、
「2系統のUI」＋「3モードの判定」という柔軟な設計に進化させてくれました。

無理に完全分岐を目指すよりも、
ユーザーの操作感に合わせてUIを整理した方が、結果的に読みやすく、使いやすくなったと感じています。