レスポンシブ設計｜PC・タブレット表示

PCでQRを常時表示する理由：PCで開いた人は、結局動画を送るためにスマホに移動します。名刺TOPの右下にQRを出しておけば、その場で読み取ってスマホで続けられます。スマホ表示のときは場所を取るので、従来どおり右上のボタンからの表示のままです。

InstagramのQRは切替で出す：QRを2つ並べると、読み取る側のカメラがどちらを拾うか分かりません。スマホ版と同じく画面に出るQRは常に1つにして、下の切替でInstagramに変わるようにしています。ただしPCで見ている人はその場でクリックしてフォローできるので、上に「Instagramをフォロー」ボタンを置きました。PCでのQRは「相手にモニターを見せて読み取ってもらう」ときの手段です。

ナビの位置を変える理由：スマホは親指が届く画面下、PCは視線が最初に行く左端が定位置です。タブレットはどちらとも言えないので、画面上部に置いています。

本文の幅を制限する理由：1行が長すぎると、目が次の行の頭に戻れなくなって読みづらくなります。日本語だと40〜45文字あたりが上限で、600px はその範囲に収まる幅です。

実装の順番：スマホ幅を基準に作り、min-width のメディアクエリで広い画面を上書きするのが手戻りが少ないです。利用の大半はスマホなので、そこが一番きれいに仕上がる作り方を選びます。

PWAとの関係：ホーム画面に追加して使う想定なので、実際にはスマホ幅の表示がほとんどです。PC対応は「崩れない・恥ずかしくない」水準で十分で、ここに時間をかけすぎない方がよいと考えています。