★ Let's become a Web Designer! 【プロフィール】 【商品一覧】 【特典画像】 【よくある質問】 【あなたのお手伝い】
 

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

 
ホーム はじめに 講座の効果 作成実績 受講者の声 パーツ集 ホームページ基礎講座 スマホサイト講座 よく使う用語集
 
 
  トップページ > 無料スマホサイト作成講座 > スマホ専用サイトを作る前の前提知識
 

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

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

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


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

 

1.スマホサイトとパソコンサイトは、基本的に作り方は一緒であること

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

3.スマホサイトの表示の確認は、「Google Chrome」のブラウザを使うこと



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




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

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

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

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


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

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

スマホサイトとパソコンサイトは作り方が一緒!


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

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




【前提知識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」の画面サイズを変更することができますよ。


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

Window Resizer のインストール方法

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

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


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

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

Window Resizer の使い方


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

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


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

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


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

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



Window Resizer のポイント

 

「Google Chrome」の「Window Resizer」で、どの画面サイズを選んだら良いかというと、一番小さい「320×480」を選ぶようにしましょう。

その理由は、基本的に、一番小さな画面サイズで、スマホサイトがキレイに表示されれば、どのスマホ(大きな画面サイズのスマホ)でもキレイに見ることができるためです。

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



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

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






【おすすめ外部コンテンツ】
 
会員制サイドビジネス講座
 
私がお金を稼ぐ理由 ~ お金を持ったときのメリット ~
 
インターネットで月20万円の収入を継続して稼ぐ方法
 
初心者用ホームページテンプレート
 

インターネットビジネスのすごさを認識してください
 
無料ホームページ制作講座の受講者の声
 
動画で覚える無料FX講座
 
ホームページが作れる能力は、最高の能力
 



当サイトで使用しているサンプルサイトを無料でダウンロード!

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

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



【特典画像100枚】オフィスで働いている女性が人差し指を立てている画像

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

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



AIやChatGPTを使ってインターネットビジネスを行う講座

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

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



 
 
今スタートできるサンプル
サイトを無料ダウンロード
 
サンプルサイトの無料ダウンロード
 
サイドビジネス講座
 
会員制サイドビジネス講座
 
初心者がホームページを自分で作れる能力を身につけて、 そのホームページをビジネスに活用する方法をお伝えする、会員制のサイドビジネス講座です。

この講座は、初心者がインターネットで収入を得られるようになることを目的として、運営しています。
 
 
HPテンプレート
 
自分で更新できる最短ホームページテンプレート
 
初心者が、簡単にホームページを作るための「ホームページテンプレート」です。

テンプレートと、たくさんのパーツ集をコピーして貼り付けるだけで、ホームページが完成する仕組みになっています。

さらに、テンプレートの使い方はすべて動画で解説しています。
 
基礎講座と用語集
 無料ホームページ作り方 ホームページ基礎講座
 無料ホームページ作り方 スマホサイト作成講座
 無料ホームページ作り方 HPでよく使う用語集
 無料ホームページ作り方 HTMLタグの書き方
 無料ホームページ作り方 スタイルシートの書き方
 
ホームページ作成ソフト
 
レンタルサーバ
 
ワードプレス
 
ChatGPTの使い方
 
インターネット副業
 
サイドビジネス・副業の始め方
 
初心者が、インターネットを使ったサイドビジネスで、自宅にいながら収入を得る方法を、すべて動画でお伝えするサイトです。

また、仕事ができるようになるノウハウや、「最高の成長法」などもお伝えしています。
 
 
リンク
 
会社概要
 
特定商取引に基づく表記
 
個人情報保護ポリシー
 
お問い合わせ先
 
 
NPO法人の推薦状
 
NPO法人の推薦状

 
当サイトは、NPO法人「起業とキャリア支援センター」様からの推薦を受けて、運営しています。
 
トップページプロフィール特定商取引法取り扱い商品よくある質問あなたのお手伝いお問い合わせ
 
 
Copyright © 動画で覚える無料ホームページ制作講座 All rights reserved.
 
by おすすめ副業ランキングサイト
^