スマホ対応サイトの作り方と6つの注意点(画像)

西村 文宏

西村 文宏

ホームページ作成 ガイド

応用情報技術者

初心者向けの「わかりやすさ」を重視した解説に定評があるウェブ系テクニカルライター。ウェブの黎明期に趣味で始めた個人サイト製作からその「楽しさ」に魅了され、作成方法に関する様々な情報を発信。企業や団体のウェブサイト製作・解説書籍の執筆なども行っている。

...続きを読む
Androidバージョン別シェア
Androidバージョン別シェア
スマートフォンエミュレータ
スマートフォンエミュレータ
段組を使わない方が見やすい
段組を使わない方が見やすい
タップできる幅が広いリンク
タップできる幅が広いリンク
スマートフォンっぽいデザイン
スマートフォンっぽいデザイン
スクロールバー表示の有無
スクロールバー表示の有無
大きなページは自動で縮小される
大きなページは自動で縮小される
Androidバージョン別シェア(2013年8月)
Androidバージョン別シェア(2013年8月)
スマートフォン対応サイト
スマートフォン対応サイト
画面の幅が狭くても閲覧でき、リンクをタップしやすいスマートフォン用サイトの例
画面の幅が狭くても閲覧でき、リンクをタップしやすいスマートフォン用サイトの例
モバイル端末専用に別サイトを用意した例
モバイル端末専用に別サイトを用意した例
段組を極力使わずにデザインされている方が操作しやすい
段組を極力使わずにデザインされている方が操作しやすい
タップしやすい(押しやすい)形状のリンク
タップしやすい(押しやすい)形状のリンク
スマートフォン用アプリによくあるデザイン
スマートフォン用アプリによくあるデザイン
高精細さを活かせる画像(右側)を用意しておくと、より綺麗に見える
高精細さを活かせる画像(右側)を用意しておくと、より綺麗に見える
縦置き・横置きで横幅は変わる
縦置き・横置きで横幅は変わる
Viewportの指定がないページは自動で縮小表示される
Viewportの指定がないページは自動で縮小表示される
HTML5文法チェッカーを使う
HTML5文法チェッカーを使う
モバイルフレンドリーテスト
モバイルフレンドリーテスト
Windows版Chromeの開発者ツールを使って、モバイル端末での表示をエミュレートしたところ
Windows版Chromeの開発者ツールを使って、モバイル端末での表示をエミュレートしたところ
スマートフォン向けサイト(右側)が用意されていても、望めばPC用サイト(左側)を閲覧することもできる
スマートフォン向けサイト(右側)が用意されていても、望めばPC用サイト(左側)を閲覧することもできる
左:PC上での表示確認/右:実機での表示
左:PC上での表示確認/右:実機での表示
段組を極力使わずにデザインされている方が操作しやすい
段組を極力使わずにデザインされている方が操作しやすい
タップしやすい(押しやすい)形状のリンクだと使いやすい
タップしやすい(押しやすい)形状のリンクだと使いやすい
スマートフォン用アプリでよく使われるデザインを採用すると分かりやすい
スマートフォン用アプリでよく使われるデザインを採用すると分かりやすい
Viewportの指定がないページは自動で縮小表示される
Viewportの指定がないページは自動で縮小表示される
小さいスマートフォン端末なら、ブラウザの横幅は320px
小さいスマートフォン端末なら、ブラウザの横幅は320px
スクロール可能でもスクロールバーは表示されず(左)、ユーザがスクロール操作をしている最中にだけ細いスクロールバーが現れる(右)
スクロール可能でもスクロールバーは表示されず(左)、ユーザがスクロール操作をしている最中にだけ細いスクロールバーが現れる(右)
実機での表示(右側)とまったく同じ表示になるわけではないが、レイアウトなどの大まかな確認には便利
実機での表示(右側)とまったく同じ表示になるわけではないが、レイアウトなどの大まかな確認には便利
スマートフォン向けサイト(右側)が用意されていても、望めばPC用サイト(左側)を閲覧することもできる
スマートフォン向けサイト(右側)が用意されていても、望めばPC用サイト(左側)を閲覧することもできる
続きを少しだけ見せておくデザインなら、横方向にスクロールできそうだと気付きやすい
続きを少しだけ見せておくデザインなら、横方向にスクロールできそうだと気付きやすい
この写真の記事を読む
Androidバージョン別シェア
スマートフォンエミュレータ
段組を使わない方が見やすい
タップできる幅が広いリンク
スマートフォンっぽいデザイン
スクロールバー表示の有無
大きなページは自動で縮小される
Androidバージョン別シェア(2013年8月)
スマートフォン対応サイト
画面の幅が狭くても閲覧でき、リンクをタップしやすいスマートフォン用サイトの例
モバイル端末専用に別サイトを用意した例
段組を極力使わずにデザインされている方が操作しやすい
タップしやすい(押しやすい)形状のリンク
スマートフォン用アプリによくあるデザイン
高精細さを活かせる画像(右側)を用意しておくと、より綺麗に見える
縦置き・横置きで横幅は変わる
Viewportの指定がないページは自動で縮小表示される
HTML5文法チェッカーを使う
モバイルフレンドリーテスト
Windows版Chromeの開発者ツールを使って、モバイル端末での表示をエミュレートしたところ
スマートフォン向けサイト(右側)が用意されていても、望めばPC用サイト(左側)を閲覧することもできる
左:PC上での表示確認/右:実機での表示
段組を極力使わずにデザインされている方が操作しやすい
タップしやすい(押しやすい)形状のリンクだと使いやすい
スマートフォン用アプリでよく使われるデザインを採用すると分かりやすい
Viewportの指定がないページは自動で縮小表示される
小さいスマートフォン端末なら、ブラウザの横幅は320px
スクロール可能でもスクロールバーは表示されず(左)、ユーザがスクロール操作をしている最中にだけ細いスクロールバーが現れる(右)
実機での表示(右側)とまったく同じ表示になるわけではないが、レイアウトなどの大まかな確認には便利
スマートフォン向けサイト(右側)が用意されていても、望めばPC用サイト(左側)を閲覧することもできる
続きを少しだけ見せておくデザインなら、横方向にスクロールできそうだと気付きやすい
※記事内容は執筆時点のものです。最新の内容をご確認ください。
※OSやアプリ、ソフトのバージョンによっては画面表示、操作方法が異なる可能性があります。

あわせて読みたい

カテゴリー一覧

All Aboutサービス・メディア

All About公式SNS
日々の生活や仕事を楽しむための情報を毎日お届けします。
公式SNS一覧
© All About, Inc. All rights reserved. 掲載の記事・写真・イラストなど、すべてのコンテンツの無断複写・転載・公衆送信等を禁じます