ワタナベウェブサービス内容 > スマートフォン対応

スマートフォン対応

パソコン用に作成したホームページはもちろん、スマートフォンで閲覧可能です。
しかし、ホームページの内容がスマートフォンの狭い画面で表示されるため、文字などがすごく小さくなり、見づらいのはあると思います。そういう時のために、ホームページをスマートフォンに対応するとよいです。

パソコン用ホームページをスマートフォンで見れるか

もちろん見れます。
ただ、パソコン用ホームページがスマートフォンの小さい画面に縮小して表示されるようになります。文章部分は、基本的にはある程度大きめに表示されるようになりますので読みづらいということはありません。(※レイアウトによっては、一部の文字が小さく表示される場合もあります。)

近年はスマホの画面が大画面化してきまして、今後も大画面のものが増えて行きますため、特にスマホ対応しなくてもよいという選択も大いにアリだと思います。
スマホでパソコンのホームページを見たほうが見やすいという人も結構いらっしゃるという理由もあります。予算の面でもよいと思います。

これでOKな場合は、特にスマートフォン対応というものを行わなくてOKですが、スマホで見た場合に見やすいようにされたい場合は、下記の方法を取るようになります。

ホームページをスマートフォンに対応する方法

1). パソコンホームページとは別に、スマートフォン用ホームページを作る

ホームページをパソコンホームページ、スマホ用ホームページの2本立てで運営するようになります。
ホームページを2ヶ作るようになりますので、制作金額が高くなりがちなため、この方法は、大企業など、ホームページに予算を大きく割ける会社で採用されることが多いです。

また、運営面ですが、ホームページを更新(内容を変更)するときに、パソコンホームページとスマホホームページの2ヶを直さないとならないのが大変かなと思います。

これらの面で、どちらかというと、小中規模のホームページの場合は、下記2).のほうがよく使われています。

※追記
下記に記載いたしますように、今はこちらの方法は使用しないほうがベターになると思います。検索エンジン対策の面の為です。

2). パソコンホームページをそのままで、スマートフォンに対応させる

パソコンのホームページのHTMLファイルを、スマートフォンと共通で使用し、スタイルシート(CSS)ファイルをパソコン用、スマートフォン用で切り替えることにより1つのホームページをパソコン用、スマホ用の両方で使用できるようになります。
専門用語で言いますと、「レスポンシブWEBデザイン」というものになります。

私のこのホームページもこの方法で作成しております。
このホームページでブラウザの横幅をだんだん縮めて行くと、レイアウトが変化すると思います。このような見せ方になります。
私のホームページで申し上げますと、左側のメニューがスマホ画面では、一番下に来るようになります。

この方法のメリットは、ホームページが1つで済みますため、更新、メンテナンスの面が便利です。
デメリットはPC、スマホ共用のため、多少見せ方に制約があるのはございます。
しかし更新の利便性などのメリットが大きいと思います。
Googleでもこの方法を推奨しておりますので、検索エンジン対策の面でもこちらの方法のほうが有利になります。

1点注意点ですが、複雑なレイアウトのホームページはこれが難しくなりますので、シンプルなレイアウトの場合に可能になる方法です。(最近はスマートフォン対応を考慮してホームページを設計することが多いため、複雑なレイアウトのホームページは減ってきています。)
私のホームページと、弊社の制作実績のページにいくつかこの方法で作成したホームページがございますので、よろしければご参考ください。

私のホームページをスマートフォンで見た場合の見え方はこのようになります。



なお、画面上部のメニューですが、下記のような横に棒が3本並んだメニュー開閉ボタンも使用されることも多いです。


私のホームページは、クリック数(画面タップ数)を少なくページ移動できるようにするために、このボタンを使用していませんが、もちろん、このボタンを使ってのスマートフォン対応も可能です。

携帯ホームページについて

携帯(ガラケー)はだんだん少なくなって来ていますので、今ホームページを作るなら、携帯ホームページは作らないでよいと思います。

もし携帯ホームページを作るならですが、携帯サイトはパケット通信代金の制約がございますので(パケット無制限の契約をしていないと、通信料がものすごく高くなってしまう)、データを出来るだけ軽く作らないとなりませんため、携帯ホームページはほぼ文字のみのホームページになります。

そのため、スマートフォン用ホームページとは別に、携帯ホームページとして別途作るようになります。

↑