スマホ専用サイトを作る前の前提知識｜初心者に分かりやすく解説

スマホ専用サイトを作る前に、知っておいていただきたいことが３つあります。

具体的には、下記の３つのことです。

■ スマホ専用サイトを作る前に、知っていただきたい３つのこと

それでは、「スマホ専用サイトを作る前の前提知識」を、１つずつ順番に、
ご説明させていただきますね！

【前提知識１】スマホサイトとパソコンサイトは、
基本的に作り方は一緒であること

そもそも、スマホは、「小型パソコン」です。

そのため、スマホを使って、現在 インターネット上に公開されているホームページは、問題なく見ることができます。

つまり、スマホサイトもパソコンサイトも、サイトの作り方は一緒ということです。


たとえば、ホームページを作るときに、文章を改行させたいときは br タグ を使いますし、文字の色を変更するときは font タグ を使いますよね。

だから、同じように、スマホサイトを作るときも、このようなタグは、そのまま使うことができるということです。




そのため、当サイトでお伝えしている「ホームページの作り方」を学べば、自然に、スマホサイトも作ることができるようになりますよ。

「スマホサイト作成」と言うと、難しく聞こえるかもしれませんが、、、スマホサイトもパソコンサイトも、作り方は一緒（HTMLを使って作るもの）であるため、まずこのことを覚えておいてくださいね。

【前提知識２】スマホサイトとパソコンサイトの違いは、
「人が使っている画面（モニター）の大きさ」であること

スマホサイトも、パソコンサイトも、サイトの作り方は一緒です。

では、スマホサイトとパソコンサイトは、何が違うのかというと、
人が使っている画面（モニター）の大きさが違います。




具体的には、スマホは画面（モニター）が小さいですし、パソコンは画面（モニター）が大きいですよね？ 人がホームページを見るときの、端末の画面の大きさが、最も大きな違いになります。

だから、スマホサイトを作る場合は、「スマホの小さな画面でも、キレイに表示されるような構成」にしてあげる必要があるということです。


たとえば、パソコンサイトの場合、サイドバーがあったほうが、訪問者は使いやすくなるのですが、スマホサイトの場合、サイドバーは必要ありません。

スマホサイトに、サイドバーを設置してしまうと、画面が圧迫されて、とても見づらくなってしまうからです。


また、パソコンサイトの場合、横幅を指定すること（たとえば、横幅は900pxという形で指定すること）が一般的なのですが、 スマホサイトの場合は、横幅を具体的な数字で指定しないほうが良いです。

その理由は、スマホにはいろいろな種類があり、小さな画面のスマホもあれば、大きな画面のスマホもあるからです。

だから、スマホサイトを作る場合は、横幅を具体的な数字で指定するのではなく、「width=100%」という形で、パーセンテージで指定するようにします。


横幅を具体的な数字で固定するのではなく、パーセンテージで指定することで、画面の大きさに合わせてサイトが広がるため、どのスマホでも、キレイにホームページが表示されるようになる、ということですね。

■ ホームページとスマホサイトの「横幅」に関する注意点

【前提知識３】スマホサイトの表示の確認は、
「Google Chrome」のブラウザを使うこと

パソコンを使って、スマホサイトを作っているときに、そのスマホサイトの表示を確認したい場合は、「Google Chrome」のブラウザを使うようにします。

具体的には、「Google Chrome」の画面の横幅を、縮めてあげればよいだけです。 これだけで、スマホの小さな画面サイズでの、表示の確認をすることができます。


ただ、「Google Chrome」の画面の横幅を、どれくらい縮めれば、スマホの画面サイズになるのかが分かりませんよね？

そこで、「Google Chrome」の拡張機能に、「Window Resizer」というものがあります。 この「Window Resizer」を使えば、簡単に、スマホの画面サイズに合わせて、「Google Chrome」の画面サイズを変更することができますよ。


「Window Resizer」のインストール方法は、まず、「Google Chrome」のブラウザで、「Window Resizer」 のページにアクセスします。



あとは、「Chrome に追加」のボタンをクリックするだけです。

そうすれば、「Window Resizer」を、いつでも使うことができるようになります。


なお、「Window Resizer」の使い方としては、「Google Chrome」のブラウザの右上に表示される、「Window Resizer」のボタン（マーク）をクリックします。

そして、ボタンをクリックすると、スマホの画面サイズを選ぶことができるので、それを選べば、自動的に、「Google Chrome」の画面が縮小されますよ。




この機能を使えば、スマホの画面サイズで、スマホサイトの表示の確認ができるので、とても便利です。

パソコンを使って、スマホサイトを作っているときに、そのスマホサイトの表示を確認したい場合は、このようなやり方で、表示の確認をします。


もちろん、スマホサイトを作っている途中で、そのスマホサイトのデータをレンタルサーバにアップして、自分が持っているスマホで、表示の確認を行ってもよいですよ。

ただ、スマホサイトを修正しながら、一回一回、スマホサイトのデータをレンタルサーバにアップしていく必要があるので、少し面倒かもしれませんね。


だから、まずは「Google Chrome」で表示の確認をしながら、スマホサイトを作っていって、ある程度完成したら、 レンタルサーバにアップして、ご自身のスマホで表示を確認する、、、という方法が良いかなと思います。

私がスマホサイトを作るときは、このようなやり方で、スマホサイトを作っています。

■ Window Resizer のポイント

それでは、次のページで、スマホサイトの作り方をお伝えします！

パソコンサイトを作れる人であれば、スマホサイトは簡単に作ることができるので、
ぜひ確認してみてくださいね。

当サイトで使用しているサンプルサイトのデータを、無料でダウンロードできます。
サンプルサイトがあれば、さらにホームページの作り方が分かりやすくなりますよ。

⇒　当サイトで使用しているサンプルサイトの無料ダウンロードはこちら

高品質で、ホームページでとても使いやすい画像100枚を「特典」としてお渡ししています。 人物の画像素材は少ないため、とても貴重な画像素材です。

⇒　オフィスで働いている女性が笑顔で人差し指を立てている画像について

これからはAIの時代になります。 私も、AIを使って文章や画像やホームページを作っています。 私が実際に行っているやり方を、分かりやすく解説した講座が、下記の講座です。

⇒　「AI」や「ChatGPT」を活用してビジネスを行う講座はこちら