色カラー
色彩を中心とした通信サイト

レスポンシブ・WEBデザイン

KNACK OF DESIGN

スマホとパソコンでサイトの表示を変える

スマホからの訪問者が増加

スマートフォンが相当普及してきたので、ネットへのアクセスの仕方も変わってきています。ちょっと前まではパソコンからのアクセスの方がたくさんありましたが、今では(2013年秋現在)パソコンとスマホで半々くらいの比率になっています。

パソコン用に作られているページをスマホで見るとストレスを感じやすいです。文字が小さかったり画面の左右幅が入りきらない状態で表示されるサイトはスマホに対応したページを用意するべきなのですがページ数が100以上にもなる静的サイトだと、修正するのは大変な作業になります。スマートフォンとパソコン、それとタブレット、なるべく最小限の労力でそれぞれのデバイスで見やすく表示する方法を考えてみました。

スポンサーリンク


スマホサイトへ最適化

PCサイトをスマホで見たときに多くのサイトで感じることは、表示が小さくなってしまって文字が読みづらいこと。これが最もイライラを覚えることだと思います。テキストサイズの最適化、これが一番の改善点です。この他にスマホサイトに手直しするときの修正ポイントとしては、

  • シンプルなデザインにする
  • 一画面に表示される情報量をコントロール
  • 左右幅を100%にして画面全体を使って表示

といったことが挙げられます。

シンプルなデザインにすることで、通信速度による表示スピードの遅さをカバーできます。CSSで装飾している画像を読み込まないようにしたり、シンプルなCSSだけで作れるデザインに変えるだけでも速くなります。また、スマホの画面は小さいので一画面に表示される情報量をコントロールする必要があります。

カラム数の図

レイアウトの構成を2列、3列から1列にすることでスマホでも見やすくなります。サイドバーなどはメインコンテンツの下に表示するようにレイアウトを替え、優先度の高いものから表示させるようにします。

レイアウトの左右幅を数値指定して固定化しているサイトだと不必要な白スペースができてしまいます。これはスマホ画面の左右幅から数値指定された幅に比率をあわせて表示するためです。左右幅を100%使って表示させるように指定・変更することで余分なアキができず画面全体を使って表示されます。

スマホ最適化

最適化への手順

  • METAタグにviewportを設定する
  • CSSを振り分ける

スマホ対応サイトはこの2つを押さえておくだけで見やすさがだいぶ違います。

■ viewport

METAタグのviewportの設定はてっく煮ブログさんの記事が役立ちます。とりあえずスマホに対応させたいなら <meta name="viewport" content="width=device-width"> とメタタグを入れておけば文字は大きくなります。

レイアウトの幅を数値指定している場合には
<meta name="viewport" content="width=640">
といったようにレイアウトの幅と数値を揃えてを指定することで余白ができるのを防ぐことができます。viewportには他に次のような設定があります。

width="200〜10000の範囲":表示領域の幅(device-widthとすると画面の幅に合わせる)
height="233〜10000の範囲":表示領域の高さ(device-heightとすると画面の高さに合わせる)
initial-scale="minimum-scale〜maximum-scaleの範囲":初期のズーム倍率
minimum-scale="0〜10の範囲":最小倍率
maximum-scale="0〜10の範囲":最大倍率
user-scalable="yes or no":ズームの操作
複数の指定する場合はカンマで区切って記述。
<meta name="viewport" content="width=640, initial-scale=1, minimum-scale=0.5, maximum-scale=2">

■ CSS

CSSは複数の外部CSSを用意して画面サイズごとに振り分ける方法と、1つのCSSファイルの中ですべて指定する方法があります。PCサイトとスマホサイトでがっつりデザインを変えたい場合は外部CSSを、部分的に替えるなら1つのCSSで管理した方が使い勝手がいいと思います。

外部CSSで振り分ける場合は

<link media="only screen and (max-device-width:640px)" href="スマホ用.css" type="text/css" rel="stylesheet">
<link media="screen and (min-device-width:641px)" href="PC用.css".css" type="text/css" rel="stylesheet">

このように、max-device-widthで指定サイズより小さい画面のときに読み込むスマホ用のCSSと、min-device-widthで指定サイズより大きい画面のとき読み込むPC用のCSSに分けます。

1つのCSSファイルに追加して書く場合は

@media screen and (max-width: 640px)
{
〜〜〜 スマホ用のCSS 〜〜〜
}

このように、max-widthで指定した数値以下の画面サイズのときに適用されるスタイルシートを作ります。CSSは上から順に読み込んでいき同じクラス名は上書きされるので細かく振り分けない場合には一番最後に記述しておくとスマホ用のCSSとしての管理が楽です。

ざっくり書きましたが新しいブラウザならこれでスマホ対応のサイトになります。


色カラーのサイトを最適化

スマホ・タブレットでも読めるサイトへ

2カラムの横幅固定のレイアウトはスマホでみたときには縮小表示され、かなり文字が小さく読みづらいものです。サイトをスマホ対応するために、既存のCSSファイルにスマホ向けスタイルシートの追加とMETAタグでviewporを設定しました。

いままでの統一表示サイト

スマートフォン向けにMETAタグ、viewportを設定。
<meta name="viewport" content="width=685">
と記述し表示の左右幅を685に指定。この幅はメインコンテンツの表示幅です。

既存のCSSには
@media screen and (max-width: 685px) {
〜〜〜 スマホ用のレイアウト&装飾のCSS 〜〜〜
}
を加えて、同じclass名でも画面サイズで読み込むスタイルシートを切り替わるようにしました。スマホ用に最適化することで画面いっぱいに表示できるようになっています。max-width: 685pxは画面表示がこのサイズより小さい場合に適用されるようにした記述です。PCサイトでもブラウザ面積を小さくした場合には反応します。

CSSでスマホとタブレット端末のアクセスでは1カラムで表示するようにしました。

スマホ最適化

サイドバーは下段にまとめて表示するようにしました。

スマホ最適化サイドバー

見せ方を変えることで文字を大きく表示させることができ修正前よりも読めるようになりました。

ついでに微調整

要素の区切りをよりはっきりさせるために余白を開ける調整しました。PCモニターは昔よりも画面サイズが大きくなってきたこともあり、横幅を増やして余白を多くとるように変更を加えました。

余白調整の図

サイトのヘッダーの位置も修正。ラインを揃えることでまとまりがでます。

高さのズレ修正画像

最近ではモニターの大きさにゆとりがあるのでギュウギュウに詰め込むよりも行間を大胆に開けたりして読みやすさを意識したレイアウトに変えていった方がよいかなと思っています。

以上のことをスマホ対応として行った修正です。METAタグでviewportの設定することでスマホに対応したサイトと認識されます。そこからの微調整は制作者の腕の見せどころになるかと思います。


スポンサーリンク
あなたのカラーイメージを診断します

色の効果を知ろう

白のイメージ黒のイメージ灰のイメージ青のイメージ赤のイメージ緑のイメージ黄のイメージ橙のイメージ桃のイメージ紫のイメージ茶のイメージ金のイメージ銀のイメージ

iro-color

色の好き嫌い調査の結果2014
色のアンケート2


色のアンケート3

役立つ色の資格の資料請求
色に詳しくなるBOOK
このサイトに広告を載せませんか

共通認識される色の性質

金平糖時計