スマホ専用サイトを作る前に

 
トップページ はじめに 作成実績 スマホテンプレート ネットで収入を得る
 
 

スマホ専用サイトを作る前の「前提知識」

 

スマホ専用サイトを作る前に、知っておいていただきたいことが3つあります。 「前提知識」を、1つずつ順番に、ご説明させていただきますね。



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

そもそも、スマホは、「小型パソコン」であるため、スマホを使って、現在インターネット上に公開されているホームページは、問題なく見ることができます。 つまり、スマホサイトもパソコンサイトも、サイトの作り方は一緒ということです。

たとえば、ホームページを作るときに、文章を改行させたいときは br タグ を使いますし、文字の色を変更するときは font タグ を使いますよね。 だから、同じように、スマホサイトを作るときも、このようなタグは、そのまま使うことができるということです。


そのため、スマホサイトを作る前に、まずは、「ホームページの作り方」を覚えたほうが良いです。 「動画で覚える無料ホームページ制作講座」のサイトで、ホームページの作り方を、無料で覚えることができますよ。

そして、このサイトでお伝えしているホームページの作り方を覚えれば、スマホサイトは、簡単に作ることができるので、 まずは、「動画で覚える無料ホームページ制作講座」を見て、ホームページの作り方を覚えていきましょう。




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

スマホサイトも、パソコンサイトも、サイトの作り方は一緒です。 では、スマホサイトとパソコンサイトは、何が違うのかというと、「人が使っている画面(モニター)の大きさ」が違います。

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

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


たとえば、パソコンサイトの場合、サイドバーがあったほうが、訪問者は使いやすくなるのですが、スマホサイトの場合、サイドバーは必要ありません。 スマホサイトに、サイドバーを設置してしまうと、画面が圧迫されて、とても見づらくなってしまうからです。

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

その理由は、スマホにはいろいろな種類があり、小さな画面のスマホもあれば、大きな画面のスマホもあるからです。 だから、スマホサイトを作る場合は、横幅を具体的な数字で指定するのではなく、「width=100%」という形で、パーセンテージで指定するようにします。

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



【注意点】
パソコンサイトで、横幅をパーセンテージで指定してしまうと、今度はパソコンのモニターの全画面に、サイトが広がってしまうので、とても見づらくなってしまいます。

だから、パソコンサイトは、横幅を具体的な数字(たとえば、width="900")で指定して、スマホサイトは、横幅をパーセンテージ(width="100%")で指定するようにしましょう!




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

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

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


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

そのために、「Google Chrome」の機能に、「Window Resizer」というものがあります。 この「Window Resizer」を使えば、簡単に、スマホの画面サイズに合わせて、「Google Chrome」の画面が縮小されます。


やり方としては、まず、「Google Chrome」の設定をクリックします。 そして次に、「設定」をクリックします。

その中に、「拡張機能」がありますので、クリックすると、「Window Resizer」があります。 あとは、「Window Resizer」を「有効」にするだけで、「Window Resizer」をいつでも使うことができますよ。


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

この機能を使えば、スマホの画面サイズで、スマホサイトの表示の確認ができるので、とても便利ですよね。 パソコンを使って、スマホサイトを作っているときに、そのスマホサイトの表示を確認したい場合は、このようなやり方で、表示の確認をします。


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

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

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

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

【ポイント】
「Google Chrome」の「Window Resizer」で、どの画面サイズを選んだら良いかというと、一番小さい「320×480」を選ぶようにしましょう。 その理由は、基本的に、一番小さな画面サイズで、スマホサイトがキレイに表示されれば、どのスマホ(大きな画面サイズのスマホ)でもキレイに見ることができるためです。

「320×480」で、表示を確認しながらスマホサイトを作成して、完成したら、「480×800」などの画面サイズでも、表示の確認をしてみる、という形でよいと思いますよ。




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

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




 

 
ホームページの作り方
 
動画で覚える無料ホームページ制作講座
 
ホームページの作り方を、動画で見ながら覚えることができる 無料の講座 です。

インターネットを使ったサイドビジネスで収入を得るためには、 「ホームページを自分で作れること」 が必要になるので、このサイトが役に立ちます。
 
 
HPテンプレート
 
自分で更新できる最短ホームページテンプレート
 
初心者が、簡単にホームページを作るための 「ホームページテンプレート」 です。

なお、スマホテンプレートがセットになっているプランもあります。
 
収入を得る最短コース
 
会員制サイドビジネス講座
 
インターネットを使って、 月20万円の収入を得るために、 必要な知識と技術 を身につけることができる、会員制のサイドビジネス講座です。

これが、インターネットを使ったサイドビジネスで、 収入を得るための最短コース になります。
 
当サイトの運営者
 
インターネット副業 運営者プロフィール
 
 
NPO法人 推薦状
 
NPO法人からの推薦
 
NPO法人「起業とキャリア支援センター」様からの推薦を受けて、運営しています。