ご相談・お問い合わせご相談・お問い合わせ 電話0120-800-804

レスポンシブなホームページ制作をするときに覚えておきたいこと6選

Webサイト
レスポンシブなホームページ制作をするときに覚えておきたいこと6選

インターネットユーザーの多くがスマートフォンを利用している昨今において、レスポンシブなホームページ制作スキルは非常に重要な要素になりつつあります。しかし、スマートフォン向けのコーディングはこれまでのPC向けのコーディングと異なる要素が多々あり、慣れない場合は難しく感じることも多いことでしょう。そこで、レスポンシブなホームページ制作を行う際に、最低限これだけは頭に入れておきたいという事項を、この記事ではまとめてみたいと思います。

Viewportの設定

Viewportとは、スマートフォンの幅に対して、サイトの幅をどのように扱うかを指定するmetaタグです。
PCで表示した場合は特に変化を生じないmetaタグなのですが、スマートフォンで表示した際に、このViewportの指定をもとに、表示が調整されます。

Viewportの設定の例としては、以下のようなものがあります。

<設定例1>
meta name=”viewport” content=”width=device-width”


表示される画面の幅が、端末の横幅に合わせて変化します。
そのため、この設定をした状態で、幅320pxの端末で幅640pxの要素を表示したりすると、画面からはみ出て横スクロールが発生します。
こうした事態を避けるため、この設定を採用するのであれば、できる限りパーセンテージを使った汎用的なサイズの指定が必要となります。

<設定例2>
meta name=”viewport” content=”width=640″

こう指定した場合、その端末がどんな実際はどんな横幅の端末であっても、幅が640pxであると見なされて処理されます。
320pxの小型の端末であっても、640pxの小型の端末であっても、その端末の横幅が640pxであると見なしてくれるのです。
そのため、コーディングする際は、横幅が640pxであることを意識するば、どんな横幅の端末でも崩れなくコーディングすることができます。
ただし、viewportで指定した数値と実際に表示する端末の横幅が大きくずれていると、文字が読みにくかったりするというデメリットが生じます。

基本的には、設定例1の書き方がメジャーになりつつあります。
しかし、設定例1の書き方は、端末によって見え方が変わってくるのは避けられないので、厳密にデザインをコーディングに反映するためには、設定例2の方が望ましい場合もあります。
このあたりは、案件ごとに、ケースバイケースで判断するようにしましょう。

メディアクエリーの書き方

メディアクエリーとは、CSSの書き方で、端的な言い方をすると、ウインドウサイズが指定した範囲の数値である場合のみ適用するCSSを指定する手法となります。
PCとスマートフォンでは、コードの書き方の特性に違いが生じますので、このメディアクエリーを利用して、PCのみに適用するスタイル、スマートフォンのみに適用するスタイルを指定するのです。
例えば、以下のような記述をすると、幅640px以上の端末ではスタイルAが、幅639以下の端末ではスタイルBが適用される形になります。

@media screen and (max-width:640px) {
/* スタイルA */
}

@media screen and (min-width:641px) {
/* スタイルB */
}

レスポンシブ特有の単位の書き方

サイズをしているするときの書き方について、従来であれば、pxや%が良く利用されていたと思います。
レスポンシブデザインで、特にviewportを端末依存とする場合、%を利用した割合を利用した記述が望ましいのですが、それだけでは不足する場合が考えられます。

そこで覚えておきたいのが、vwやvhといった単位。

vwは指定したviewportの横幅に対する割合、vhは指定したviewportの縦幅に対する割合となります。
例えば、640pxの横幅の端末でとmetaを指定した場合で、10vwと指定すると、その要素は64pxとなります。
同様の状況で、320pxの横幅の端末で、10vwと指定した場合、その要素は32pxとなります。

エミュレーターはGoogle Chromeが便利

Google Chromeのエミュレーターは、F12を押下することで、検証ツールを起動することができます。
さらに、この検証ツールにおいては、エミュレーターモードを利用することができ、iPhone 5やiPhone 6、Galaxyなど主要な端末のエミュレーションを行うことができます。
サーバーにアップして端末で確認するという手間が省けますし、実際に適用されているCSSの確認作業を行いながら進めることができますので、非常に便利なツールです。
しかし、Google Chromeのエミュレーターだけでは、端末独自の仕様や、端末に実装されているフォントの有無などには対応できません。
そのため、エミュレーターを過信しすぎず、一度は実機で確認することをおすすめいたします。

読み込み時間を考慮する

スマートフォンユーザーの読み込み時間の許容範囲は、PCユーザーのそれよりも短いことが多く、表示に時間がかかるホームページは離脱されやすい傾向にあります。
また、スマートフォンのほとんどは、PCよりも通信速度が遅いため、それも考慮して読み込み時間がどの程度かかるのかを考える必要があります。
また、近年では、データ通信の容量に制限があるプランがほとんどで、制限を超えてしまうと通信制限がかかってしまう都合上、あまりデータ量が多いホームページは敬遠されやすくなります。

読み込み時間を短縮するためには、以下のようなことを意識するとよいでしょう。

・ 画像はできるだけ利用せず、CSSで表現できる箇所はできる限りCSSで表現する
・ アイコンなども可能な限り、Webフォントなどを利用して表現する(Font Awesome[http://fontawesome.io/]というWebフォントが非常に便利です。)
・ 画像を利用する場合は圧縮をかけてサイズを小さくすることを心がける

スマートフォンホームページでよく使われる要素をまとめておく

その他、ナビメニューや固定ヘッダーなど、スマートフォンでよく使われる要素は、すぐに参照できるようにまとめておくといざという時に大変役に立ちます。
あの機能を実装するのはどうすればよかったっけ…と過去のサイトや検索による調査を行うのは積み重なると意外と時間の浪費につながります。

しっかりマスターしてユーザーフレンドリーなホームページを目指しましょう

スマートフォン向けにホームページを制作することは、昨今のインターネットの利用状況を鑑みるに、必要不可欠な対応といえるでしょう。
スマートフォン向けにホームぺージを制作することで、ユーザーに情報を伝えやすくなるのはもちろんのこと、検索エンジンからも高い評価を得ることができると言われています。
PCのコーディングと比較してややこしい要素が多いスマートフォン向けホームページ・レスポンシブホームページですが、これからの時代には必須のスキルといえますので、少しずつマスターしていきましょう。

ReEight MAGAZINE

いいねして最新情報をチェック!

矢印アイコン
無料サイト診断サービス

WEBサイトに関してお困りなことはありませんか?

私たちは制作だけではなく、SEO、マーケティング、ブランディング、など
WEBに関して総合的な知見を持ち合わせており、
WEBサイトを最大限に活用するためのノウハウを蓄積しております。
御社が抱えている事業課題を私たちならきっと解決できると考えています。

お気軽にお問い合わせください。

フォームでのお問い合わせ

メールご相談・お問い合わせ

お電話でのお問い合わせ

電話
0120-800-804受付時間10:00〜18:00

WEBサイトに関することなら
お気軽にお問い合わせください。

フォームでのお問い合わせ

お見積り依頼やご相談・ご質問は
お問い合わせフォームをご活用ください。

メールご相談・お問い合わせ

お電話でのお問い合わせ

お急ぎの方や詳しく話を聞きたい方は
お電話ください。

電話
0120-800-804受付時間10:00〜18:00
サイトマップ プライバシーポリシー Copyright © re-eight.inc. All Right Reserved.