『お品書きページの編集』内に「ヘッダ画像をアップロード」という項目があります。
サークルカット・店舗外観・お品書き等と比べると、来訪者にとっての重要度は高くないため、
必須項目ではなく、任意で設定いただくもので問題ありません。
サークル詳細ページの見た目を少し工夫したい方向けの機能となります。
こちらのヘッダ画像について、かでぃ🍫ちょこ様に詳細な検証記事を制作していただきました。
以下よりぜひご覧ください。
————————
はじめまして。普段Blueskyで活動しているかでぃ🍫ちょこと申します。
頭割りさんには第５回から一般参加者、
ピクリエ番外編からはサークル「TwilightTales」の ちょこぱい名義でサークル参加者としてお世話になっています。
今回主催者様よりお声がけいただき、この記事を執筆することになりました。
まず最初に、ピクリエ様で推奨されている幅800px高さ56pxサイズで私がお品書き用に作成したヘッダ画像がこちらです。
今回はこちらのヘッダ画像をサンプルにして説明したいと思います。
◇ヘッダの確認方法とデバイスからの見え方◇
「お品書きページの編集」からは設定したヘッダを実際の表示で確認することはできません。
イベント当日第三者が目にすることになるものは、
サークルの配置完了後会場に入場できるようになったら確認できます。
会場に入り、自分のスペースをクリックすると表示されます。
設定したヘッダ画像はデバイスによって見え方が違います。
スマートフォン（iPhone14）の場合：ヘッダ画像の中心を基準にトリミングされる。
パソコン（一般的な16:9サイズモニター）の場合：画像を中心にモニター幅まで拡大される。
このように推奨サイズ（幅800px高さ56px）で作成すると、ヘッダ画像全体が見切れてしまう可能性があります。
◇どのデバイスにも適したヘッダ画像サイズとデザインのご提案◇
スマートフォン、パソコンでの表示でヘッダの見え方の違和感を最小限にしたい場合、
画像のサイズは幅1920px高さ56pxがいいのではないかと考えています。
幅1920px高さ56pxで作り直したヘッダ画像
パソコンからの表示
※スマートフォンからの見え方は幅800px高さ56pxサイズのヘッダ画像の時と同じなので割愛します。
これはフルHDのパソコンモニターのアスペクト比である ”幅1920px高さ1080px”の幅のサイズと、
高さは元々のピクリエ様推奨サイズに合わせてあります。
デザインをするときはスマートフォンの場合ヘッダ画像の中心からトリミングされることを考慮して、
・重要なデザインやテキストは画像中心付近に配置する。
・総柄パターンなどのどこでトリミングされても違和感のないデザインにする。
このどちらかのレイアウトにすることを推奨します。
左右どちらかに偏ったデザインにするとスマートフォンから見たときにデザインが見切れてしまう可能性があります。
またスマートフォン・パソコン共に、人によってモニターサイズが異なる場合がある為、
画面の端ギリギリに重要なデザインを置くのは調整がとても難しいと思われます。
あくまで私の作業・表示環境における内容であり、最適解が異なる場合もありますのでご了承ください。
以上となります。
この記事がイベントにサークル参加する皆様のお役に少しでも立てれば幸いです。