前回はSEOを意識したheadの入力について紹介しました。
今回はSEOを意識したheadの入力について紹介したいと思います。
 |
【中古】1冊ですべて身につくHTML＆CSSとWebデザイン入門講座 /SBクリエイティブ/Mana（単行本） 価格:747円 (2024/12/16 23:17時点) 感想(2件) |
HTMLでのモバイルファーストの大切さとやり方
スマホやタブレットを使う人が増えた今、Webサイトをモバイル向けに作ることがとても大事です。この「モバイルファースト」という考え方を使うと、スマホでも見やすいサイトを作ることができます。本記事では、初心者でも分かりやすいように、HTMLを使ったモバイルファーストの基本と方法を紹介します。
モバイルファーストって何？
モバイルファーストとは、まずスマホで見やすいようにWebサイトを作り、そのあとでパソコン向けにデザインを広げていくやり方です。この方法はGoogleのモバイルファーストインデックスという仕組みとも関係していて、検索結果でも評価が上がりやすくなります。
詳しくはこちらのGoogleの公式ガイドも参考にしてください。
モバイルファーストのいいところ
- 使いやすいサイトになる
スマホに合わせて作ると、読み込みが速くなったり、操作が簡単になったりします。 - 検索で見つかりやすくなる
Googleはスマホ対応のサイトを優先して評価するので、検索順位が上がる可能性があります。 - どの端末でも見やすくなる
スマホだけでなく、タブレットやパソコンでもきれいに表示できるようになります。
モバイルファーストの作り方
1. HTMLの書き方をシンプルにする
スマホの画面は小さいので、HTMLは分かりやすくシンプルに書くのがポイントです。例えば、次のように書いてみましょう。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>モバイルファースト</title>
</head>
<body>
<header>
<h1>モバイルファーストの基本</h1>
</header>
<main>
<section>
<h2>モバイルファーストって何？</h2>
<p>スマホに優しい設計方法です。</p>
</section>
</main>
</body>
</html>
特に、<meta name="viewport" content="width=device-width, initial-scale=1.0">という部分は必ず書きましょう。これがないと、スマホで見たときに正しく表示されません。
詳しくはViewport設定のガイドをご覧ください。
2. CSSを使って画面サイズに合わせる
CSSの「メディアクエリ」という機能を使うと、スマホ用とパソコン用のデザインを切り替えられます。
/* 基本スタイル（スマホ向け） */
body {
font-family: Arial, sans-serif;
line-height: 1.6;
margin: 0;
padding: 0 1em;
}
h1 {
font-size: 1.5em;
}
/* パソコン向けのスタイル */
@media (min-width: 768px) {
body {
max-width: 750px;
margin: 0 auto;
}
h1 {
font-size: 2em;
}
}
まずスマホ向けのデザインを書いて、それからパソコン用のスタイルを追加します。これがモバイルファーストの基本です。
CSSのメディアクエリについては、MDNの解説ページを参考にしてください。
3. 画像を軽くする
スマホでは画像が重いと表示が遅くなります。画像のサイズを小さくしたり、WebPなどの軽い形式を使うと良いでしょう。また、<picture>タグを使うと、端末ごとに最適な画像を表示できます。
<picture>
<source srcset="example.webp" type="image/webp">
<img src="example.jpg" alt="サンプル画像">
</picture>
画像圧縮にはTinyPNGのようなツールがおすすめです。
4. Googleのテストツールを使う
Googleのモバイルフレンドリーテストを使うと、あなたのサイトがスマホで見やすいかどうかチェックできます。このツールは、改善が必要なポイントも教えてくれます。
また、ページ速度を測定したい場合は、PageSpeed Insightsも使ってみてください。
まとめ
モバイルファーストは、これからのWebサイト作りに欠かせない考え方です。HTMLやCSSを工夫するだけで、スマホでも見やすいサイトが作れます。さらに、検索での評価も上がる可能性があります。
ぜひモバイルファーストを取り入れて、みんなにとって便利なWebサイトを作りましょう！
