マーク
サイトURL読み込み用QRコード

モバイル

お問合せフォームへ

お問合せ

Eメール
トップ > ホームページ > レスポンシブデザイン2022/02/13

レスポンシブデザイン


今このページをご覧頂いている皆様にはこのページはどのように見えているでしょうか。ホームページを閲覧するためにはパソコン・タブレット・スマホ・テレビ等をインターネット回線に接続し、私どもがサーバーに公開した「レスポンシブデザイン」というコンテンツ(このページ)の内容をそれぞれのデバイス(媒体)、パソコンであったりタブレットやスマホに読み込み、各デバイスに接続あるいは組み込まれたモニターに表示された内容を閲覧されていることでしょう。 レスポンシブデザインイメージ

このページの内容自体はどのデバイスで読み込んでも一意のもので、パソコンにはAのページ、スマホにはBのページ内容といった振り分けはしていません(一部大手企業や特別な意図を持ってデバイスごとにページの内容を用意して使い分けている例もあります)。Windowsパソコンでご覧の場合はリンクのない部分を右クリックで表示されるサブメニューから[ページのソースを表示]をクリック、あるいは[Ctrl+U]のショートカットキーでページを構成するテキストファイルを確認することができます。Macの場合は[option+command+U]。

ただし、弊社のホームページでは端末の大きさによって映し出す内容が微妙に変化するように作ってあります。例えばパソコンでご覧の場合は上部のヘッダーと呼ばれる部分にマーク・見出し1とロゴタイプ・モバイル用QRコード・問い合わせフォームリンクアイコンが表示されていてその下にメニュータブが並んでいます。が、モニター幅639ピクセル未満のタブレット・スマホで見るとQRコードとメニュータブは消えてしまい代わりにハンバーガーメニューと呼ばれるボタンが出てきます。これはスマホなど小さい画面サイズではメニュータブを表示すると邪魔になりスクロールしなければ本文をみることができずユーザビリティーを損なうからです。また、右上のメールリンクアイコンも実は変化していて、ハンバーガーメニューアイコンが表示されると同時にリンク先が変わり、パソコンやiPadでは入力項目を自由に設定できるメールフォームのリンクが開き、スマホのように小さい画面ではフォーム入力に困難が生じるため、閲覧者のメールアプリを宛先が自動入力された状態で起動させて要件だけ入力すれば問い合わせが出来るようにしています。(メールアドレスがスパムメールの標的になるのを回避するため通常利用するメールアドレスではなく転送専用の一時的なアカウントを設定しています)

当サイトのトップページを見ていただくと明確にその変化をご確認いただけます。