f:id:tatsuaki_w:20171020131108p:plain

みなさん、日頃色々なWebサイトを閲覧していると思いますが、今日は私の考えるダメなWebサイトの共通点を洗い出しました。

コンテンツ制作者の皆さんは自分の制作物に当てはまらないかチェックしていただいて、より良いインターネッツライフを提供していただければと思います。

もちろん私の主観的な内容がふんだんに取り込まれていますが、「主観的に見ても好みの範囲だな」という内容は一番下の[入れるかどうかは好み]欄にしました。

それではご査収ください。

PC・スマートフォン共通のチェック

こんなリンクは嫌ですよね。

コンテンツ内画像をタップすると勝手に別ウィンドウが開く
- wordpressのブログの標準設定でそうなっている場合があります
勝手に音を出す
4G回線で見たときに読み込みに１０秒以上かかる
- WebGL等のリッチコンテンツは仕方ないので、楽しいloadingがあるといいですね
郵便番号から住所を勝手に補完してくれない
「半角数字は入れられません」とか言うなら勝手に変換してくれマジで
誰も望んでないのに勝手に「通知を許可しますか？」って出す
- ユーザーが通知を求める挙動をしてから出してください
見た目とタップ領域が合っていない
- タップしやすいようにタップ領域が多少広めにしておく等のおもてなしは最高
スクロール追従コンテンツが、コンテンツと激しく被る
テキストが選択・コピーできない
OGP情報が設定されていない
- SNSでシェアした瞬間に何も出なくて悲しい気持ちにさせないでくれ
モーダルのコンテンツ外をタップしても閉じない
ファーストビュー全画面なのはかっこいいんだけど、下にコンテンツあるのか気づけない
- ２秒スクロールしなかったら「scroll👇」みたいなの出すとかはせめて欲しい

f:id:tatsuaki_w:20171020181943p:plain

スマートフォンでのチェック

横スクロールが発生している
- これスクロールが食われて最悪
小さめ端末(iPhoneSE)で見ると要素がはみ出ている
- youtubeやadsenseなどの埋め込みがはみ出がち
- それによって横スクロールが発生するという場合も
iPadで見るとレイアウトが崩れる
ボタン等の触る可能性のある要素が、画面の下ギリギリにある
- ものによってはブラウザのメニューと被って押せない
スクロールなしの要素固定型サイトで、画面の下の要素が切れている
- facebookのアプリ内WebViewで特に注意な
画像アップロードすると勝手に横に回転する
- iPhoneで撮った写真はmetaに写真の向きが入ってるのよね。厄介。

f:id:tatsuaki_w:20171020182026p:plain

横スクロールをさせるコンテンツがある
- macだとミスってブラウザバックしちゃう
- windowsだとそもそも横スクロールがタッチパッドで出来る端末が少ない
レスポンシブじゃないのに最小サイズ(min-width)が設定されていない
- ブラウザのサイズを縮めると要素がはみ出たりする
小さめの画面の際に固定ヘッダーが横スクロールしてもついてこない
- たいがいfixedでwidth100%とかで作ってた要素ははみ出ると思ったほうが
演出的効果もないのにマウスオンした状態で見た目が変わるけど、リンクでもなんでもない
クリック出来る要素なのにマウスカーソルが指にならない
「こちらはスマートフォン専用サイトです」とURLが書いてあるだけ
- QRコードを画面においてもらえると助かります。

モーダルがESC押すと閉じる(個人的にはめっちゃ嬉しい)
コンテンツが切り替わってるけど、ブラウザバックで戻れない
- どこまで戻れるようにするかは結構判断難しい
スマホを横向きにした際に「このコンテンツは縦向き専用です」という表示を出す
- 横向きのときにモーダルがどっかいくとかがあるある
文字間行間ぎゅうぎゅう
- 人間いつだってline-height: 1.5em;くらいは欲しい
勝手に進むスライドショーはマウスオンで止まってほしい
スクロール制御タイプのサイトでスムーズに動かない
- こればっかりはスムーズな範囲が好みによるので難しい
- 個人的にはスクロール制御してくるサイトはあまり好きじゃない
お問い合わせがフォームでなくメール
- しかもリンクかと思ったらメールが最悪な
- メールにするならメールのアイコン付けてほしいな
シェアボタン付けてくれ
住所があったらグーグルマップのリンクが欲しい
入力項目の不備は「送信する」ボタンを押す前に、入力欄から離れた瞬間に言ってくれるとありがたい
- これ状況によっては実装コスト高めなので、現場と相談