こんにちは、おかゆです。
今回はクリーンなレシポンシブデザインについて説明したいと思います。
まずは、レシポンシブデザインについて紹介したいと思います。
レシポンシブデザインとは
レスポンシブデザインとは、PCやモバイル（スマホ・タブレットなど）といったあらゆるデバイスサイズに応じてcssを切り替え、ひとつのhtmlで複数の見せ方を可能にする方法のことです。
https://seolaboratory.jp/89410/
上記引用で良い説明をしているのがネットの記事にあったので紹介させていただきました。
１つのhtmlで画面サイズに応じてサイトを見やすく変える方法の事をいいます。
メリット
調べた結果下記４つが大きなメリットだと思います。
- SEO効果が期待できる
PC、スマホ、タブレットなどのあらゆるデバイスから同じURLでアクセスできることからURLの正規化、サイト評価の統一など、SEO効果が期待できます。
もちろんURLがひとつに統一されるため、リンク効果が高まりやすいと考えられます。 - サイト修正がしやすい
一般的に「レスポンシブデザイン」は、css記述のみで済み、「動的な配信」や「別個のURL」のような複数ファイルの修正をするような手間が省けるため、サイト修正がしやすいというメリットが挙げられます。１つのhtmlで出来ている一番の利点。 - リソースが節約できる
上記と重複しますが、URLが統一されることにより、クロールするために必要なリソースを節約できるという点もメリットと言えるでしょう。
クロール：検索エンジンのロボットが、Webサイトを巡回しHTMLファイルなどの読みこみを行い、Webページを検索結果として表示させるためのデータベースに登録することです。 - リダイレクトの手間が省ける
最適なページにリダイレクトする必要がないため、「動的な配信」「別々のURL」で運用するより、読み込み時間の短縮も考えられます。
リダイレクト：WebサイトやページのURLを変更した際、古いURLにアクセスしたユーザーを自動的に新しいURLに転送することをいいます。今回の場合は携帯電用のサイトの転送する手間が省けます。
デメリット
- フィーチャーフォン（ガラケー）に対応してない
フィーチャーフォンは、レスポンシブデザインに対応してないため、「動的な配信」か「別個のURL」を使ってフィーチャーフォン用のコンテンツを配信するようにサイトを設定する必要があります。 - コストがかかる
レスポンシブデザイン用のcss等、必要に応じて新たなファイルや記述が必要となり、構築時間や費用がかかります。 - サイトの読み込み速度（表示速度）が遅くなる
PC用のHTMLコードやcss、画像など大きいファイルを読み込む場合もあるため、環境によってはスマホ・タブレット等でサイトの読み込み速度（表示速度）が遅くなる場合があります。
見本
レシポンシブデザインがどのような形なのか実際に見て確認してみよう。
下記に某授業のサイトをコードペンを使用して参考を貼り付けました！
右の「Result」の下にある「1x」「0.25x」を押してみてください！
1xがスマホ表示になっていて、0.25xがパソコン表示となってます。
レシポンシブデザインはこのように表示されます。
これだとスマホとパソコンの対応なのでタブレット用のブレイクポイントを作ってもいいと思います。
コーディング
まず、レシポンシブデザインのコーディングをする上で初めに、HTMLソースのheadタグ内に、meta要素のname属性値の一つである「viewport（ビューポート）」と呼ばれるメタタグをhtmlのhead内に下記のように記述します。
このタグがないとスマホ版とタブレット版はなど作ることが出来ないので必ず書くようにしましょう。
メディアクエリ
次にcssにメディアクエリを打ち込みます。
次にcssにメディアクエリを入れます。
まず、基本原則としてブレイクポイントの設定をモバイルファーストかPCファーストか選ぶようにする。基本はモバイルファーストでサイトを作ることが多いです。
モバイルファーストにする場合はこのように書きます。
コードの数が多く分かりづらいですが、cssの一番下側＠media()がメディアクエリとなっています。
メディアのあとの数値で幅の指定ができ、今回打ち込んだmin-width:740pxだと739pxを超えると表記の仕方を変更するよという感じになります。メディアのカッコ内にcssを打ち込むことで編集することが出来ます。
ブレイクポイント
おそらく、クリーンなフレキシブルデザインをする上で一番重要になるのがブレイクポイントの設置です。基本的には一番シェア率の高いスマホやデスクトップの画面サイズに合わせてブレイクポイントを置いていることが多いです。下記に良さそうなサイトがあったのでリンクを貼り付けておきます。
クリーンなレシポンシブデザインの基礎原則とは
このまとめがとても難しくてすごく悩みました。なのでAI様様を使い説明したいと思います。
AIにクリーンなレシポンシブデザインの基礎減速を聞くとこのように帰ってきました。
用語は解説を付けます。
- モバイルファースト（Mobile-First）: モバイルデバイスの画面サイズからスタートしてデザインを構築します。その後、大きな画面サイズにも適応させていくアプローチです。モバイルファーストのデザインは、シンプルで効果的なユーザーエクスペリエンスを提供することができます。
ユーザーエクスペリエンス：「体験・経験」のことで、ユーザーエクスペリエンスとは「ユーザーがひとつの製品・サービスを通じて得られる体験」を意味しています。 - シンプルで直感的なデザイン: 不要な装飾を避け、シンプルで直感的なデザインを重視します。情報を整理し、ユーザーが目的の情報を迅速に見つけられるようにします。
- レイアウトの柔軟性: 異なる画面サイズに適応できるように、柔軟なレイアウトを採用します。グリッドシステムやフレキシブルボックスモデルなどの技術を使用して、デバイスのサイズに応じてコンテンツを適切に配置します。
- メディアクエリ: メディアクエリは、CSSの機能を利用してデバイスの画面サイズに応じてスタイルを変更する方法です。これにより、異なるデバイスに適応したデザインを実現します。
- 画像とメディアの最適化: 画像やメディアのサイズを適切に最適化することで、ページの読み込み速度を向上させ、ユーザーエクスペリエンスを向上させます。
- タッチフレンドリー: モバイルデバイスではタッチ操作が主流なので、クリックイベントと同等の動作をタップで実現するようにします。リンクやボタンのサイズを適切に調整することも重要です。
- コンテンツの重要性: デバイスのサイズが変わっても、重要なコンテンツが際立つようにデザインします。優先順位の高い情報は、より目立つ位置に配置し、ユーザーがそれにフォーカスできるようにします。
これらの基本原則を遵守することで、ユーザーフレンドリーでクリーンなレスポンシブデザインを実現することができます。
AI様流石といった感じです。今まで話してきた内容と新たな言葉が少し入っていますが大体は理解できると思います。
以上で、まとめとさせていただきます。ありがとうございました！
コメント