スマホページの基本事項

Question

お世話になります。

コンビニ受け取りサービスを開始したのでスマホサイトの案内ページをゴールド内で作ろうと思っています。
スマホページは作ったことがなく初歩的なことで申し訳ありませんが教えてください。

PCのページと区別するためにhead等に記述したりする項目等ありますか？
指でズームできるページとそうでないページがありますがどちらがいいのでしょうか？普通に書くとズームできてしまいますが不都合とかありますか？
画像は横幅いっぱい（width : 100%）で表示させる場合、何pxくらいの画像にすればいいでしょうか？

よろしくお願いします。

Answer

ECマスターズの田中です。

＞PCのページと区別するためにhead等に記述したりする項目等ありますか？

区別する目的では特にありませんが、
タグで表示領域の幅やズーム倍率の指定が、
タグでショートカットのアイコンが
それぞれ指定できます。

特にタグは、ページを開いた時の見た目に関わりますので、たとえば

のようにご記載いただければと思います。
詳しい設定方法は、下記URLをご参照ください。
http://www.tagindex.com/html5/page/meta_viewport.html

ショートカットのアイコン（Web Clipアイコン）の指定方法は、下記URLをご参照ください。
http://www.tagindex.com/html5/page/link_webclip.html

＞指でズームできるページとそうでないページがありますがどちらがいいのでしょうか？

ズームできないと、画像の細かい部分が見えなかったり、
リンクが複数集まっている中で狙ったリンクをタップするのが面倒だったりと
不便が多いので、ズームできる方が良いと思います。

＞普通に書くとズームできてしまいますが不都合とかありますか？

特別な事情がない限り、不都合は特にありません。

http://2ndidea.com/accessibility/pros-cons-of-user-scalable-no/
上記URLにて、ズーム不可にすることによるメリット・デメリットが掘り下げられておりますが、
タップの反応が早くなること以外、
メリットは少ないことがおわかりいただけると思います。

＞画像は横幅いっぱい（width : 100%）で表示させる場合、何pxくらいの画像にすればいいでしょうか？

主にデバイスの解像度に合わせてご設定いただければと思います。
iPhone5/5sを想定するなら横幅640ピクセル、
6/6sやAndroid搭載の5インチ機種を想定するなら横幅750ピクセル、
6Plusや5インチ超えの機種を想定するなら横幅1080ピクセル、
といった形になります。

画像の横幅について、下記URLにて詳しいご説明をさせていただいておりますので
ご参照をお願いします。
https://ec-masters.club/forum/post_view.php?id=3152

Answer

ズームと画像に関しましてよくわかりました。ありがとうございます。

もうひとつ教えてください。
メインのページから案内のページへ飛ばす予定ですが、リンクのtarget は_blank と同じとどちらがよいのでしょうか？
スマホの場合、別窓で開くとタブを閉じたりする操作が面倒な気がするので同じ窓で戻る操作の方がいいように思うのですが。
よろしくお願いします。

Answer

ECマスターズの田中です。

確かに、スマートフォンの場合は、
別窓で開いた後に元のページに戻る操作が、同じ窓で戻るよりも複雑となっており、
また、元のページを放置して新しい窓をどんどん開いていく使い方が多いため、
下記URLのように、target="_blank" の使用を辞めようという論調もあります。
http://www.msng.info/archives/2015/06/no-more-target_blank.php

ただ、検索結果など、戻ろうとするとフォームの再送信が発生する場合や、
内部のリダイレクトが多重に発生した結果戻るが効かない場合など、
別窓で開かせて元の窓を残すほうが戻りやすい場合も少なからずあるので、
ケースによって使い分けていただきますようお願いします。

Answer

ご回答ありがとうございます。

＞ただ、検索結果など、戻ろうとするとフォームの再送信が発生する場合や、
＞内部のリダイレクトが多重に発生した結果戻るが効かない場合など

今回はフォームでもなく、戻れないこともないので_self で作るようにします。
参照サイトの中でのタブとかウィンドウとか・・・ってありますが確かにPCののようなタブなんてスマホにはないですね。

スマホサイトは苦手意識で避けてきましたが、そんなに特別でもない気がしてきました。また分からないことがありましたら質問させていただきますのでよろしくお願いします。