スマホサイトはこう作る!スマートフォン用サイト制作時に知っておきたい10のコツ

読了時間:約 14分3秒

スマホサイトはこう作る!スマートフォン用サイト制作時に知っておきたい10のコツ

スマートフォンサイトの制作では、「小さい画面に合った見やすいレイアウト」と「3G回線でもストレスなく開けるよう極力軽くすること」が重要です。

 

今回は、スマートフォンに対応したサイトをつくるときにぜひ知っておきたい10のコツをご紹介します。

もちろん、このブログのスマホサイトでも全部取り入れていますよ!

1.思う存分、HTML5でマークアップしよう!

HTML5をパソコンのブラウザに対応させようとすると、IE対策のためにhtml5shiv.jsを読み込ませたりなど、未対応ブラウザへの対処をしなければならなりません。

 

でもスマートフォンならHTML5に対応したブラウザが搭載されているので、HTML5で思う存分マークアップできます!

 

もし「HTML4やXHTMLなら書けるけど、HTML5はまだよくわからなくて…」というかたには、『WebデザイナーのためのHTML5移行ガイド』という本がおすすめです。

 

この本は、「手っ取り早くベストプラクティスを知りたいけれど、なぜそうするべきなのかは理解しておきたい」という人にピッタリですよ!

 

HTML自体を知らない人向けではありませんが、今までHTML4やXHTMLを使っていて、「そろそろHTML5に移行しなくちゃ」と思っている人には、かなりおすすめの本です。

 

2.CSS3をうまく使って、画像をできるだけ減らそう

HTML5と同様に、パソコンのブラウザでは対応状況を考えるとまだまだ使いづらいCSS3ですが、スマートフォンならほぼ対応しています。

 

いままで画像を使っていた装飾などをCSS3で代用できれば、その分容量が軽くなりますので、スマホ用サイトではCSS3をうまく取り入れましょう!

 

CSS3初心者は、まずCSS3ジェネレータを使って書いてみると、「こうやりたい時はこう書くんだな」ということが理解しやすいです。

CSS3 GENERATOR

【CSS3】これはやばい!覚えなくてもすぐに使える便利なCSS3ジェネレータまとめ。 – NAVER まとめ

3.Viewportを設定する

スマートフォンのサイト制作では、metaタグにViewportの設定をします。

 

Viewportとは「ブラウザの表示領域」のことで、例えばiPhoneのViewportのデフォルトの横幅は980pxとなっています。

 

このままだとスマートフォンの小さな画面では、コンテンツがかなり小さく表示されてしまい見にくいので、スマートフォンで見やすい大きさに調整します。

[html]<meta name="viewport" content="width=device-width,initial-scale=1.0">[/html]

このようにmetaタグに設定すると、横幅がスマートフォンの画面にピッタリおさまるようになり、横向き(横長の画面)にしても最適な大きさで表示されます。

4.ホーム画面用アイコンをつくる

スマートフォンのホーム画面に置くブックマークのアイコンは、機種ごとに最適なサイズが異なります。

ホーム画面のアイコン

それぞれの機種に合ったサイズのアイコンを作って、下記のように指定しましょう。

[html]<link rel="apple-touch-icon" href="images/57×57.png" /> <!– iPhone3G/3GS、iPod touch、Android用 –>
<link rel="apple-touch-icon" sizes="72×72" href="images/72×72.png" /> <!– 初代iPad、iPad2用 –>
<link rel="apple-touch-icon" sizes="114×114" href="images/114×114.png" /> <!– iPhone4/4S用 –>
<link rel="apple-touch-icon" sizes="144×144" href="images/144×144.png" /> <!– iPad3用 –>[/html]

また、iOSでアイコンに光沢の効果を付けたくない場合は「apple-touch-icon-precomposed」と指定します。

(Androidでは「apple-touch-icon」でも光沢加工は付きません。)

5.format-detectionを設定する

スマートフォンのブラウザでは、電話番号の表記があると自動的にリンクにして、タップするだけで発信できるようになっています。

 

便利な機能ではありますが、電話番号でない数字までリンクにしてしまい、タップすると電話をかけようとしてしまうのでちょっと迷惑… (´ε`;)ウーン…

 

metaタグに下記のように記載しておけば、数字の文字列があっても電話番号のリンクになりません。

[html]<meta name="format-detection" content="telephone=no">[/html]

6.アドレスバーを隠す

スマホの小さな画面は、できるだけ広く使いたいもの。

そこで、画面が読み込まれたらアドレスバーを上に引っ込めちゃいましょう。

スマホのアドレスバー

下記のJavaScriptで実装できます。

[js]<script type="text/javascript">
window.onload = function() {
setTimeout(function() {
scrollTo(0, 1);
}, 100);
}
</script>[/js]

7.画像が画面からはみ出さないようにする

このブログでは記事中の画像の横幅は542pxにすることが多いので、このままだとスマホでは画面からはみ出してしまいます。

 

このような場合は、CSSで下記のように画像の幅を設定しておけば、画面からはみ出しません。

[css]img {max-width:100%; height:auto;}[/css]

8.画像を高解像度ディスプレイに対応させる

ロゴマークなど画像を使うときは、2倍のサイズでつくって半分の大きさで表示させると、iPhone4/4Sなどの高解像度ディスプレイでも画像が荒れません。

スマートフォン

たとえば、幅100px・高さ50pxで画像を表示させたい時は、幅200px・高さ100pxで画像を作っておき、

[html]<img src="example.png" width="100" height="50">[/html]

とします。

 

また、背景画像の場合はCSSで

[css]img.example {
background:url(example.png) top left no-repeat;
-webkit-background-size:100px 50px;
background-size:100px 50px;
}[/css]

と設定すればOKです。

9.スマートフォン用のリセットCSSをつくる

ブラウザごとの表示の違いを解消するために使うリセットCSSですが、スマホサイトにはスマホ用のリセットCSSを用いるのがベストです。

 

例えば、スマホではリンクをタップしやすいようにaタグに display:block を入れますが、パソコンでは不要です。

 

逆に、パソコンでは多くのブラウザの挙動を統一するためにリセットCSSにいろいろ詰め込みますが、その多くはスマートフォンには不要だったりします。

 

リセットCSSには「これが正解」というものはありませんが、私は以下のスマホ用リセットCSSを使っています。

[css]body {line-height:1; margin:0; font-family:arial,sans-serif;}
h1, h2, h3, h4, h5, h6, p {margin:0;}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {display:block;}
hr {display:block; height:1px; border:0; border-top:1px solid #cccccc; margin:1em 0; padding:0;}
ul {list-style:none; padding:0;}
li {padding:0;}
input, select {vertical-align:middle;}
a {display:block;}
a {-webkit-tap-highlight-color:transparent;}[/css]

(参考:iPhoneサイト制作(スマートフォンサイト制作)最適化のために最低限必要なreset.cssをつくってみよう | HTML5でサイトをつくろう

10.メディアクエリを使わない、という選択肢を考えてみる

メディアクエリ(Media Queries)とは、デバイスの表示領域などによって条件分けし、デバイスごとにCSSを対応させる手法です。

 

つまり、パソコン用サイトのHTMLをそのまま使い、不要なところはCSSで display:none にするなどしてスマートフォンに最適化します。

スマートフォン

手軽にスマートフォン用サイトを作ることができるので、時間がないときなどによく使われる方法ですが、不要なものまで読み込んでいるので「できるだけ軽くしてサクサク閲覧できるサイトにしたい」というときはメディアクエリに頼らないほうがいい場合もあります。

 

特に、「スマホの時は非表示にしよう」というコンテンツが多かったりすると、一旦読み込んでからCSSで非表示にしているだけなので、3G回線で閲覧しているスマートフォンにはムダに重いサイトとなってしまいます。

 

もしWordPressでサイトを構築しているなら、デバイスごとに自動的にテーマごと切り替えるプラグインがいくつかあるので、それを使うと手軽で効率的です。

(このブログではMobile Theme Switcherを使っています。)

 

WordPressで高速化のプラグインなどを入れて「できるだけ早く表示させたい」と尽力されている方は、ぜひスマホにはスマホ専用のテーマを使ってみてください。

スマホ用テーマではいらない部分をごっそりカットして、必要なものだけを記述すれば、スマホサイトがぐんと軽くなりますよ!

 

ただし、静的サイトの場合や、スマホとパソコンで表示するコンテンツがほぼ同じ場合などは、メディアクエリを使ったほうが良かったりするので、「メディアクエリを使うべきかどうか」をサイトの特性を踏まえてよく検討してみましょう。

 

 

以上、スマートフォンサイト制作時に知っておきたい10のコツでした。

 

この記事がサイト制作の参考になれば幸いです。

RSSフィードを購読する

ITポケットでは、ビジネスや生活が向上するTipsを発信しています。
よろしければRSSフィードをご購読ください。

シェアする

このエントリーをはてなブックマークに追加

コメント

お仕事のご依頼について

コーポレートサイト、ECサイト、CMS、ブログなど、あらゆるWebサイトの制作をお手伝いいたします。

企画からデザイン、その後の運営や保守まで対応することが可能です。

自らECサイト運営を行っていることもあり、顧客目線でのサイトづくりが得意です。

得意なこと

HTML5 / CSS3 / JavaScript

WordPress

ECサイト(EC-CUBE / Zen Cart / カラーミーショップ)

各ブログのカスタマイズ

 

クライアントのご要望にお答えし、予算やケースにあった選択で、臨機応変に対応いたします。

ご相談・ご質問や、お見積もりのご依頼など、お気軽にお問い合わせください。

プロフィール

菊地翼

菊地翼(きくちつばさ)
WEBクリエイター。株式会社ウイングフォレスト代表取締役。マカー歴18年。IT・ガジェット・ライフハックと甘いものが大好き!

詳しくはこちら 

サイト内検索