[LINE]画像カルーセルのボタン表示位置

アレな話だけど。

話の大枠

「画像カルーセル」は俗称。

正式には「カードタイプメッセージ」の「イメージ」。

301 Moved Permanently

画像内にアクションラベルを設置できるんだけど、その位置ってどうなってんの、って話。

「MEN」のところ

重ねて平気な画像だったらいいけど、画像内に文字を盛り込みたいとか、予め表示位置を知っておきたい場合は珍しくない。

そこらへんの話。

注意点

スクリーンショットからざっくりで計算してるのと、いろんなデバイスで確認したわけじゃないということを踏まえておいてほしい。つまり、大体。目安。

ちなみにiPhone11でチェック。

測った

クリックで原寸大

比率やら実数にはめ込むと以下の感じになる。

スクリーンショット比率横:1024縦:1024横:1200
画像:横6001.11102411381200
画像:縦54019221024540
アクションラベルの高さ870.16148165154
下からアクションラベルまで480.09829196
割り切れないのとかは四捨五入

番外編:ECAI

ECAIの機能で作る場合、画像が1:1になる。

ECAI「画像カルーセル」

縦横の比率に加えて諸々が違う。

スクリーンショット比率幅:1024
画像:横60011024
画像:縦60011024
アクションラベルの高さ820.14140
下からアクションラベルまで500.0885
割り切れないのとかは四捨五入

誤差っぽく見えるけど、本家の物を使い回すとズレるのは間違いない。

まとめ

ピクセル単位で攻めることはないだろうけど、だからといっても目安がないと始まらない。把握しておくのが無難。

デザインに関して他所に口を出せるほどのものはないけど、とりあえず、文字やら画像をてんこ盛りにしてもユーザーからすればゴチャゴチャしてしんどいだけなので、シンプルめで余白をしっかり取るのがいいんじゃないかなって。

とりあえず、アクションラベルは最大15文字入れられること、ラベル自体の色は今のところ変えられないことを念頭にやればなんとかなるんじゃないかなって。

コメント

タイトルとURLをコピーしました