おはようございます！
11月1日 金曜日。晴れ🌞
最高気温23℃。涼しいけど半袖で居られる涼しさです。
金曜なので週間天気を載せておきましょうかね～。
※Yahoo!天気より
さすがに最低気温が20℃を超える日はもうないですね♪
ふぅ～
今日は夜から雨が降るのか～、今めっちゃ晴れてるのに信じられん。。
まあ、なにはなくとも勉学に勤しむとします。
今日の教材はこちら、
今日からなんと！Chapter4です。
Chapter3の内容スキップしすぎ？
いや、前回まではLesson22の「ニュースサイトやメディアサイト･･･」の内容でしたが、
以降のChapter3の内容を列挙しますと、
Lesson23 美容・健康系のサイトは悩み解決のコンテンツを活用しよう
Lesson24 不動産サイトは技術面でサイトを見直そう
Lesson25 旅行・宿泊施設サイトはニーズに幅広く答えよう
Lesson26 B2Bサイトは扱う商材で様々な対策を考えよう
って感じなので、もし近い未来↑に当てはまるサイトを作るってなったときにまた学ばせて頂こうかなと思います。
なにより先に進みたい。。
完璧より完了。完璧は求めちゃいけません（って自分に言い聞かす）。
よしやっていこう！
Chapter4 適切な内部対策でSEOの効果を高めよう
Lesson27 スマホ時代の画面設計のポイントを理解しよう
Googleはモバイルファーストを推進している。モバイルファーストとは、Webサイトのインデックス登録や検索順位決定を行う際に、パソコンサイトではなくスマートフォンのサイトを基準に評価を行う方針のこと。
詳しくは👇のLesson7にてまとめております。ご参照ください。
画面設計はスマホサイトをベースとする
多くの人がスマートフォンを日常的に利用している現代では、Webサイトへのアクセスもスマートフォンが主流となった。
Googleは、Webサイトの評価において、スマートフォンでの表示を優先する「モバイルファーストインデックス（MFI）」を採用。そして、2023年5月にはほぼすべてのサイトがMFIに移行したとアナウンスした。
つまり、
Google「スマホを意識していないWebサイトなんてもう知らない！( ๑`³´)ﾌﾟｲｯ」
ってこと。
まあ、実際は評価はされるはされるけど、なにせ「モバイルファーストインデックス」ってことです。
スマートフォンの画面の特徴を理解して設計する
スマホ画面をベースにWebサイトを作るときのポイントを以下にまとめる。
①スマホ画面は小さいため、見せ方の工夫が必要
スマホでは一度に表示できる情報量が限られているため、情報設計を工夫し、不要な要素は極力排除すること。
②スマホは指で操作するため、操作しやすいようなレイアウトが重要
ボタンはタップしやすい大きさにする。リンクエリアは十分に確保するなど、タッチ操作に最適化されたデザインが必要。
③通信環境が遅い場合があるため、ページの読み込みを速くするための工夫が必要
モバイル通信でサイトにアクセスする場合、通信速度が遅くなることがあるため、画像などの最適化や軽量化を行い、ページの表示速度を向上させる。
スマホサイトのSEOの６つの注意点
＜ポイント①：スマートフォンへの対応は必須＞
改めて、スマートフォンなどのモバイル端末に対応させたWebサイト作成は必須。作成方法は３つ。
・レスポンシブルWebデザイン
スマートフォン、タブレット、パソコンなど、様々なデバイスの画面サイズに合わせて、Webサイトのレイアウトを自動で調整する手法。1つのHTMLを様々な画面サイズに適応させる。
・ダイナミックサービング
1つのURLに対して、アクセスしてきた端末の種類によって、最適なHTMLを表示する技術。複数のHTMLを用意し、端末の種類によって異なるHTMLを配信する。
・セパレート
主にスマートフォンサイトとパソコンサイトを別のURLで分ける。
＜ポイント②：モバイルユーザビリティをチェックする＞
スマートフォンやタブレットなどのモバイル端末で快適に閲覧できるような工夫が必要。そのような状態のWebサイトを「モバイルフレンドリーなWebサイト」という。
＜モバイルフレンドリーであるためのポイント＞
・レスポンシブルWebデザイン
・シンプルなレイアウト
・フォントサイズの調整
・タップしやすいボタン
・画像の最適化
・ページの読み込み速度
・横スクロールを避ける
＜ポイント③：重要なコンテンツはスマホサイトでも掲載する＞
「ダイナミックサービング」または「セパレート」でWebサイトを作成する場合でも、重要なコンテンツは必ずスマホサイトにも表示させる。（割愛しない）
＜ポイント④：ナビゲーションとサイトの内部リンクの最適化＞
小さな画面という制約の中で、いかにユーザーにストレスなく情報を提供できるか。ユーザーに使いやすいナビゲーション設計が重要。
また、小さい画面であってもPCサイトと同じ数の内部リンクを設定していることも重要。
※「レスポンシブルWebデザイン」でWebサイトを作成する場合は気にしなくてよい。。（多分）
＜ポイント⑤：速さと操作性を意識する＞
「コアウェブバイタル」
Googleはスマートフォンでの操作性を評価する指標として、「コアウェブバイタル」というものを導入している。
■コアウェブバイタルで評価される3つの指標
１．Largest Contentful Paint (LCP)
ユーザーがページ内で最初に視覚的に認識する最大のコンテンツが表示されるまでの時間
２．First Input Delay (FID)
ユーザーが初めてページと対話しようとしたときの応答時間
例）ボタンをクリック～ブラウザが反応
３．Cumulative Layout Shift (CLS)
Webページの読み込み中に、要素が意図せず移動したり、サイズが変更されたりすることで、レイアウトが不安定になる現象を数値化した指標
＜ポイント⑥：スマートフォン特有の見せ方に注意する＞
＜スマートフォン特有の表示方法＞
・ハンバーガーメニュー
3本の横線が重なったようなアイコンをクリックするとメニューが展開
・アコーディオンメニュー
クリックすると項目が展開・縮小する、アコーディオンのような動きをするメニュー
・カルーセル
複数のコンテンツを横方向にスライドして表示
よしよし。今日も学べた。
ちょっとLesson27の途中なんですけど、無理やり終わらせます。
あとは「PCからスマートフォンページを見る方法」なのでね。
これは学ぶというより手順なので最悪毎回調べればいいことなので、割愛します。
これをスローガンに今後も学びを進めてまいります。
さあさあ、今日は華金ですよ。
秋の夜長を存分に堪能するためこれにて終了です。
おつかれさまでした～(*´з`)ﾉ
コメント