この写真の記事へ

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

西村 文宏

西村 文宏

ホームページ作成 ガイド

応用情報技術者

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

...続きを読む

小さいスマートフォン端末なら、ブラウザの横幅は320px

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

ほかのギャラリーを見る

ハートマークも文字として定義されているので、色やサイズはCSSで自由に装飾できる (Edgeでの表示例)
EdgeではWebkit用の記述も有効になっている例
一度無効化されたボタンでも、再度有効な状態に戻せるようにする
よく使われるサンプル用ドメイン名のスペルミスを狙った危険なウェブサイトもある
アクセスするたびに異なる画像が表示される
ページ移動や別ウインドウを表示することなく、任意のメッセージや別ページの内容を表示できる

カテゴリー一覧

All Aboutサービス・メディア

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