オンライン即売会サービスpictSQUAREにサークル参加する方法vol.3/pictSPACEヘッダーの編集と店舗への頒布物の登録

前回までにpictSPACE店舗アカウントの開設を済ませました。vol.3の今回は設定したpictSPACE店舗ページのヘッダー画像サイズの編集について記述します。

vol.2 pictSPACEアカウントの開設

店舗用バナーの作成サイズ(デフォルト)

pictSPACEバナー設定 — デフォルト設定のｈ1000×ｗ200で作成してみたバナー

まずは(w)1000px×(h)200pxの画像を作成し、配置してみました。問題なさそうに思いましたが、Googlechromeのデベロッパーモード（F12）で確認したところ、QRコードが消えてしまったので再度作成していきます。

多くのサイトは様々なサイズで表示されますので、スマホ・タブレットでの表示についても確認しておけば見せたいデザインで表示されないという事態を減らせます。Googlechrome右上の設定ボタンからデベロッパーモードの表示、ブラウザキャッシュの削除などができますので活用しましょう。

高さを調整して再設定(ｈ)1000px×(ｗ)300px

画像のアップロードページには閲覧環境によって差がありますが、幅1000以上で作成とあります。また、画像は中心を起点に設置と記載されていました。レスポンシブでほどよく見せる為には、イラストの中心がセンターに配置された(w)1000px×(h)200px程度の画像を用意します。背景色を指定しない場合はデフォルト設定の#e0e0e0で表示されます。

今後変更されていく可能性がありますが、今のところ画像のアップロードについてはやや難ありの印象です。設定が変更されていないと感じたら、キャッシュを削除して様子を見ましょう。

センターずれのおこりにくい画像を作成

レスポンシブにオススメのバナーデザイン

センターのない繰り返し画像を使用する
上下に余白をとる

念のため上下に50pxずつ余白をとりました。この画像のQRコードは誘導したいサイト（和遊湘南サイトトップ）のものですが、人物イラストの場合は顔部分等、お好みで設定してください。

ヘッダー画像サイズまとめ

check

pictSPACEの店舗バナーは中心を起点に設置される
デフォルトのサイズは(w)1000px×(h)200px
センターのない繰り返し画像などを使用する
スマホサイズを確認したい場合はGooglechromeのデベロッパーモードなどを使用する

続いてpictSPACE店舗への頒布物の登録を記述します

頒布物の登録（画像サイズ）

pictSPACE店舗に頒布物としてアップロードできる画像の最大サイズは（jpg,png,gif）840×840です。それ以上のサイズは自動的に縮小されるのかなと思ったのですが、エラー表示が出るようなので、先に縮小してからアップします。画像の一括登録はできませんので、1点づつフォルダから指定してアップします。