Facebookのデバイス別仕様の差異で頭が痛い話
2016/02/01
こんにちは。昨日は横浜駅前の花時計でサンタのコスプレをしながら花の苗を植える活動をしてきて全身筋肉痛の@toon258です。あれってけっこう重労働なんだぜ…
筋肉痛でもパソコン仕事はできるってことで今日はこんなイベントページの作成を。
YAPのIT勉強会「あなたの街をスキャンします 〜オープンデータの活用術〜」
イベントページの画像表示サイズがPCとスマホで違う仕様に泣かされました。
いちユーザーとして普段Facebookを使っていての体感ですが、イベントの宣伝などが拡散されても、文字ってそんなに読まないんですよね。
フィードを読むときは「ネットに流れている有象無象の情報群を流し読む」モードで画面を見ていて、基本的に「文字を読んで情報を取り入れる態勢」は整っていない。
ぱっと目に入った情報で判断して、興味を惹かれた情報があるとパッとスイッチを切り替えて、ふーんへーえと思いながらちゃんと文字を読む。
しかし最初の流し読みモードの時でも、けっこう目に留まって印象に残るのが画像情報。
ということで、イベントページがシェアされて誰かのフィードに流れるシーンを考えるとアイキャッチ画像ってけっこう目に留まるよなあと思い、今回イベントのタイトルと団体のロゴを入れてみることにしました。
そこでアップしてみた結果がこちら。
パソコン用ページ
切れてる。
スマホ用ページ
切れてない。
おわかりだろうか。
どちらも同じイベントのトップページを表示させたものです。
アイキャッチ画像表示領域のサイズがPC用ビューとスマホ用ビューでそれぞれ違うんですね。タイトルの文字が上から下まですっぽり収まっているスマホ用ビューは縦横比がだいたい2：3ですが、PCビューはだいたい2：5で細長く、上・下の文字がバッサリと切り捨てられています。もはやサブタイトルがメインを張っています。
確かにPCの画面でスマホと同じ比率で表示させたら画像が大きすぎてアンバランスなため、適切な画面設計です。まあそれはそうなんだけど、双方のデバイスで同じ画像をちゃんと表示させるにはどうしたらいいのよっていうと、
横長のサムネイル状になることを前提に上下にあそびを作るように気をつけよう！
ってことですね。
もう、面倒臭いから今回はこのままでいいや…
＃イベント内容にご興味のある方はぜひ来てみてくださいー
（社会課題に関わる活動をしている方であればどなたでも大歓迎です）
YAPのIT勉強会「あなたの街をスキャンします 〜オープンデータの活用術〜」