電話のアイコン

04-2000-8162

ブログ・ニュース

日々の仕事

意外と見落としがちなスマホ表示の際の注意すべき7つのチェックポイント

レシポンシブデザインに対応しているホームページでも、業種によっては今でもPCからのアクセスが約85%に達するものもありますが、多くのホームページはスマホやタブレットからのアクセスが年を追うごとに増えています。スマホやタブレットからのアクセスが約半分程度、当社がお世話させていただいているクライアント(B to C向け事業)では約80%がスマホやタブレットからのアクセスというサイトも実際にあり、世間一般で言われている特にスマホが重要だということはその通りだと思います。

しかし、スマホがこれだけ重要と言われながら、実際の制作の現場では見落とされがちな点があることを日々感じています。それはお付き合いさせていただくクライアントさんとのやり取りでもそうですし、過去にチームメンバーが関わったものとは全く関係がないホームページを見ている時にも感じることです。つまりWeb制作会社でさえ、見落としていることでもあると言えます。

具体的には新規でホームページを作成、もしくはリニューアルする際、工程の終盤になってWeb制作会社からチェックの確認の依頼を受ける時、PCでしかチェックをせずスマホでのチェックが漏れることです。

スマホが出てくる前は、当たり前ですがスマホのチェックはなくチェックはPCのみだったので、この流れを引きずっているのかもしれないですが、とにかくスマホでのチェックがPCに比べると甘い、もしくはそもそも見ていないという傾向があることを強く感じます。

今回は、具体的に細かく見落とされがちなスマホでのチェックポイントをお伝えすることで、少なくともこのブログを読んでいただいた方のホームページでは、訪れてくれたユーザに意図通りに表示し見やすく使いやすいホームページとなるための参考になればと思っています。

1. テキストリンクやボタンなどの周りはしっかり余白が取られているか

一番感じるのがこれです。PCと同じ感覚でスマホレイアウトでも配置してしまったことが原因だと思うのですが、特にテキストリンクの場合は、PCではマウス操作なので全く問題なくても、スマホでは指でタップするためにテキストリンクの周りのスペースに気を配ってあげないとタップしづらい、時には別のテキストリンクを過ってタップしてしまうなど、ユーザにとって非常にストレスがかかるものとなります。これは画像で作成したボタンでも同じことが言えますが、ボタンが複数ある場合はボタンとボタンの要素が近すぎてタップしづらいということがないよう、しっかりと調整する必要があります。

2. PCとスマホで同じ画像を使用する際、スマホで見た時に小さすぎないか

PCとスマホで同じ画像を使うことについては、基本的な作りとしては問題がないですが特に文字が入った画像の場合、スマホで見た時に小さすぎて読めないといったことがしばしば起こります。ここは実際にスマホで確認し文字が判読可能かどうかをしっかりチェックする必要があります。また、トップページや下層ページのメイン画像を少し横長の画像で作成した場合、PCでは良いバランスに見えてもスマホでは縮小されるために、画像が思いの外、小さくなり特にメイン画像として配置している時に、メインの画像としては相応しくない小さなサイズになり、非常にバランスが悪く感じる場合もあります。このような時は、ひと手間かかりますがスマホ用の画像を別途作成し、PCとスマホで画像を切り替えるといった対応が必要です。

3. 電話番号はタップして直接電話できるようになっているか

テキストで電話番号を配置しているが、スマホで見た時はそれをタップして直接電話をかけられる方がユーザにとってはありがたいですよね。この電話番号にリンク設定していないことも良く見かけます。非常にもったいないとので、もし設定漏れがある場合はリンク設定をすべきですが、設定に際して注意点があります。PCではクリックしても電話出来ないため、PC表示の際はリンクされないように設定する必要がありますのでご注意ください。

4. 画像が画面の枠から飛び出していないか

PCでは問題なく表示されている画像でも、スマホでは適切な設定を行わないと画像が縮小されずに、画面からはみだしたようになってしまうケースがあります。もし、このような状況になっている場合でも、cssで適切な設定をするだけで簡単に修正できます。

5. 画像がぼやけていないか

Retinaディスプレイなど最近は高解像度のディスプレイが普及していますが、その高解像度のディスプレイにあった画像サイズではないためにおこる現象です。簡単にいうと小さいサイズの画像を、無理やり大きく引き伸ばしているようないイメージです。一概にいえないですが750〜800ピクセルくらいを目安にして作成するときれいに見えるようになります。

6. ページ内スクロールは意図通りの位置に止まっているか

ヘッダーを固定しているホームページで良く起こることですが、長いページなどにおいて、見せたいコンテンツへの誘導ボタンを設置しページ内スクロールを設定した際、本来は該当コンテンツの見出しが見える位置でストップさせたいのに、固定したヘッダーが見出しなどにかかってしまうことがあります(場合によっては完全に隠れてしまうことも)。これは固定したヘッダーの高さを考慮していないことが原因になりますが、cssやjs等で適切に設定することで意図通りの位置に止めることが可能となります。

7. フォントサイズは適正か

そもそも論ですが、フォントが小さく文章が読みづらいということもあります。Googleが推奨するフォントサイズは16pxとなっています。もちろんそれ以下で運用している情報サイトなどもありますが、実際にスマホで確認し、あまりにも小さく読みづらいということがないようにチェックすることが大切です。

いかがでしたでしょうか。他にもありますが、実際に現場で感じる見落としがちなことについてまとめてみました。既存のホームページの見直し、もしくはリニューアル時のチェックポイントとして少しでも参考になれば嬉しい限りです。

「日々の仕事」ブログでは、ホームページ制作の現場において実際の出来事、思うことなどを中心にホームページのご担当者さまのお役に立つような情報を発信していますので、ぜひ他の「日々の仕事」も合わせてご覧ください。
他の「日々の仕事」はこちら

よく読まれる記事

お客さまの想いや、
お悩みをお聞かせください。

お悩みをかかえているようでしたら、ぜひお聞かせください。
ホームページのことはわからないことが沢山あると思います。
それは皆さん同じです。
身近な例を用いるなど、できるだけホームページのことを分かりやすくご説明することを大切にしています。

お問い合わせ

ホームページに関するご依頼やご相談に関することは、こちらのお問い合わせフォームをご利用ください。

お問い合わせはこちら

※オンラインでの無料相談実施中

会社案内ダウンロード

お客さまの社内で検討する際など、そのまま配布できる会社案内をPDFにてご用意しております。

お電話でのお問い合わせはこちらから

04-2000-8162

04-2000-8162

平日10:00〜18:00
(土日祝日は休みをいただいています)

少しでもお客さまのお役に立つような情報発信を心がけている、埼玉県所沢市のWeb制作会社スピンスレッドの意外と見落としがちなスマホ表示の際の注意すべき7つのチェックポイントの詳細ページです。埼玉県所沢市のWeb制作会社スピンスレッドは、データ分析を通したサイト設計とユーザ視点による制作、そしてお客さまの体制に合わせた運用方法のフォローを通し、お客さまのビジネス課題を解決します。ホームページの新規作成、またはホームページのリニューアルはもちろん、既存のホームページの改善もお任せください。