「モバイルファーストデザイン」は、ウェブデザインの手法の一つで、デザインの初期段階からモバイルデバイスに焦点を当て、その後にデスクトップなどの大きな画面に適応させるというアプローチを指します。この手法は、主に以下の理由から重要視されています。

モバイルトラフィックの増加

モバイルデバイスからのウェブアクセスが急増しており、多くのユーザーがスマートフォンやタブレットを使用してウェブサイトにアクセスしています。モバイルファーストデザインは、モバイルユーザーのエクスペリエンスを向上させることに焦点を当てます。

検索エンジン最適化（SEO）

Googleなどの検索エンジンは、モバイルフレンドリーなウェブサイトを評価の指標としています。モバイルファーストデザインは、検索結果のランキング向上に寄与します

デバイスの多様性への対応

ユーザーが様々なデバイスを使用するようになり、デバイスの多様性に適応できる柔軟なデザインが求められます。モバイルファーストデザインは、異なる画面サイズや解像度に対応しやすくします。

//break point
$w_sp:  750px;
$w_tb:  960px;
$gnav_sp:  1100px;
$inner_max:  1366px;

@mixin mediaSP {  /* -750 */
  @media all and (max-width: $w_sp) { @content; }
}
@mixin mediaPC {  /* 751- */
  @media all and (min-width: ($w_sp + 1px)) {@content;}
}
@mixin mediaTB {  /* 751-960 */
  @media screen and (min-width: ($w_sp + 1px) ) and ( max-width: $w_tb ) {@content;}
}
@mixin overTB {  /* 961- */
  @media all and (min-width: ($w_tb + 1px)) {@content;}
}
@mixin gnavSP {  /* -1100 */
  @media all and (max-width: $gnav_sp) { @content; }
}
@mixin gnavPC {  /* 1101- */
  @media all and (min-width: ($gnav_sp + 1px)) {@content;}
}
@mixin mediaMAX {  /* 1367- */
  @media all and (min-width: ($inner_max + 1px)) {@content;}
}

ページの読み込み速度

モバイルデバイスは通常、デスクトップよりも低速なネットワークで接続されることがあります。モバイルファーストデザインは、ページの読み込み速度を最適化し、ユーザーがより速くコンテンツにアクセスできるようにします。

<picture>タグは主にレスポンシブデザインの一環として使用されます。異なるデバイスや画面サイズに対応するために、適切な解像度やサイズの画像を提供できます。これにより、不要なデータの転送が減り、モバイルデバイスなどでのページ読み込み速度が向上します。

<picture>
　　<source srcset="<?php echo get_template_directory_uri(); ?>/assets/images/top/service01_sp.webp" media="(max-width: 750px)"/>
　　<source srcset="<?php echo get_template_directory_uri(); ?>/assets/images/top/service01_pc.webp" media="(min-width: 751px)"/>
 　<img src="<?php echo get_template_directory_uri(); ?>/assets/images/top/service01_pc.webp" alt="コーディングベース">
</picture>