ここまで見てる？実装のポイント〜河村編〜

こんばんは！
木曜日に抜糸しました、河村です。

先週、不注意でドアの角が顔に刺さり、縫いました。
そんなことある？！と自分でバカさにびっくり。笑

結構目立つところをやっちまったので、綺麗に治ると良いな〜と思っています。

ヘッダーのお話

さて、今回のテーマは、実装時に確認すべき細かーい点について。

ちょうど、カリキュラムの課題を行っていただく中で感じる、
多くの方が気に留めていない、しかししっかり確認すべき箇所があります。
それがヘッダーです。

え？確認してるよ？と思うかもしれません。
もっと具体的にいうと、
・ヘッダーはAstra・ページはElementorで実装する場合における、
・画面幅1024〜922pxでのヘッダー
です。

どういう状況なのか

ヘッダーはAstra・ページはElementorで実装する場合における、
画面幅1024〜922pxでの「画面」がどういう状況なのかというと、

ヘッダーはPC版、ページはTAB版が表示されている状況
です。

え？ヘッダーもページも、PC/TAB/SPそれぞれ実装してるよ？
パソコンではPC、タブレットではTAB、スマホではSPのビューで編集した画面が表示されるんじゃないの？？

なぜそんな状況になるのかというと、
AstraとElementorのブレークポイントが違うからです。

ブレークポイントとは

AstraにもElementorにも、PC/TAB/SP用の編集ビューがありますが、
そもそも何をもってデバイスを判断しているかというと、画面幅です。

同じデバイスであっても、画面幅には「幅」がありますよね。
PCは必ず画面幅●pxと決まっているわけではなく、
同じPCでも1280pxの画面だったり、1440pxの画面だったり、1920pxの画面だったり。
TABやSPも同様に、いろいろな画面幅のデバイスがあります。
※PCではブラウザの幅を自由に変えられるので、「ブラウザ幅」と思っていた方が正確かもしれません。

だからWeb制作においては、
画面幅が●px以上だったらPC、▲〜△pxだったらTAB、■px以下だったらSPと判断することにしようと、範囲で決め打ちします。
この、デバイス判断の切り替わりのことをブレークポイント（break point）と言います。

ブレークポイントは、自分でコーディングする場合は自分で決められますが、
WordPressテーマやElementorなどのノーコードツールでは、基本的にはツールごとに決められた値が存在します。

ブレークポイントの違い

Astraのブレークポイントは、
・922px以上がPC
・921〜545pxがTAB
・544px以下がSP

Elementorのブレークポイントは、
・1025px以上がPC
・1024〜768pxがTAB
・767px以下がSP

です。（2025年11月現在）

AstraではTAB/SPでモバイルヘッダー（ハンバーガーボタン＋Off Canvasメニュー）となるので、
PCかTAB/SPかで大きな差が出ます。

そこで、モバイルヘッダーとなる921pxまでの画面幅で表示される内容を、
ブレークポイントに照らし合わせて整理してみると、

画面幅1025px以上の場合：ヘッダー・ページともにPC版が表示される
画面幅1024〜922pxの場合：ヘッダーはPC版、ページはTAB版が表示される
画面幅921px以下：ヘッダー・ページともにTAB版が表示される

となり、画面幅1024〜922pxの時だけ、ヘッダーとページで異なるデバイス用の内容が表示される状況になるわけです。

何が問題なのか

ここまで、
・どんな状況のヘッダーを気にすべきなのか
・どうしてその状況になるのか
を説明してきましたが、内容が混在すること自体が問題ではありません。

1024〜922pxはPCとしてはかなり小さい幅です。
ページの方はTAB版が表示されるので良いのですが、
ヘッダーはPC版が表示されてしまうため、内容によっては非常に崩れやすいのです。

例えば、課題で制作する「MetaLounge」のHP。
これくらいの内容であれば、画面幅921pxでも綺麗に表示されます。

しかし、仮にもう少しメニュー項目や文字数が増えると・・・
このようにメニューが2行になったり、問い合わせボタンに改行が入ってしまったりします。

かなり限定的な状況ではありますが、存在する以上見られないとは言えないので、
調整の余地があるのであれば、調整したいところです。

どうしてもPC版ヘッダーとしての調整が難しい場合は、
・Astraのブレークポイントを変更する（要PHP）
・見られる頻度が低い幅のため、仕方ないと切り捨てる
などの判断が必要です。

切り捨てるにしても、あらかじめわかっていてきちんと説明ができる状態でいることは、
クライアントと信頼関係を築く上で非常に重要です。

めちゃくちゃ細かいところではありますが、
しっかりチェックしましょう！

デザイナーは細かくあれ

・ヘッダーはAstra・ページはElementorで実装する場合における、
・画面幅1024〜922pxでのヘッダー
をきちんと確認しようというお話でした。

限定的な状況だし、それくらいスルーしても良いんじゃ？
細かすぎね？もしかしてめんどくさいやつ？
と思うかもしれません。

が、デザイナーとしてであれば、どんなに細かくても細かすぎることはない、と思います。
クライアントの立場になって考えてみてください。
細かいところに気付ける、細部にこだわれる人の方が、信頼できると思いませんか？

だから、デザイナーは細かくあれ！
鈴木先生が作ってくれたアイキャッチのように、米粒に書いてある字を見るかの如く、
細部にまで目を光らせましょう。