HPの作り方

初めてホームページを作る方でもスマホ対応のサイトを作ることが出来る

投稿日:2019年4月28日 更新日:

レスポンシブデザイン

2012年頃より急速に普及しだした、スマホやタブレットの影響で昨今のホームページ作成における事情は少しばかり変化してきました。

以前ならホームページ作成時に閲覧する端末(デバイス)のことはさほど考えないで作成をしていましたが、これらからの時代はPCから見た場合とスマホやタブレットから見た場合で画面サイズを変更しなければならない時代になりました。

これら様々な端末(デバイス)に対応させることを、マルチデバイス対応やマルチスクリーン対応と言います。

スポンサーリンク

 

HP作成初心者にも分かるマルチスクリーン対応とは

ホームページをこれから作ろうとされている方や最近ホームページを作ったばかりという方は、ホームページの作り方など色々ネット上で検索したかと思いますが、「マルチデバイス対応」や「マルチスクリーン対応」という単語がちょくちょく出てきたかと思います。

どちらも同じ意味なの?

「マルチスクリーン対応」と「マルチデバイス対応」これらの事を紹介しているサイトで使い方が2通りあります。

複数のスクリーン(見る画面)に対応させているか、もしくは複数の端末(デバイス)に対応しているかの言葉の違いだけなので基本的には同じモノという認識で良いと思います。

HP作成初心者の私には明確な違いが説明出来ないので、Googleではマルチスクリーンと言っているのでマルチスクリーン対応と言わせていただきます。

初心者いも分かるレスポンシブサイト

この「マルチスクリーン対応」とは簡単に言ってしまえば、ホームページのデータが1つしか無くとも、PCで見る時にはPC用の画面が表示されスマホで見る時にはスマホ用の画面が表示されるというものです。もちろんタブレットの時なども同じですよ。

もう少し詳しくお話すると、PCのモニターで見る場合でもモニターサイズは人それぞれの大きさのモニターを使っていますが、そのモニターに適した画面に自動的に変更してくれます。

また、スマホと単純にひとくくりでお話していますが、例えばiphone4の画面はサイズが3.5インチですしiphone6なら5.5インチ、Xperiaなら4.2インチとスマホだけでも様々な画面サイズがあり、この様々な画面に対し自動で最適な画面サイズに対応してくれるのが「マルチスクリーン対応」です。

 

HP作成初心者にも分かるマルチスクリーン対応の必要性

マルチスクリーン対応とは複数の画面(スクリーン)に対して、自動で最適なサイズに変更してくれるのは分かったけど、なぜ自動でサイズ変更してくれることが必要なのでしょうか?

初めてホームページを作った方やこれからホームページを作ろうとされている方は『なぜ自動で変更することが必要なのか?』疑問に持つと思います。

私もホームページ作成初心者の1人なので、最初は言っている事が余り理解が出来ず「マルチスクリーン対応」が必要なモノとは分かりませんでした。

しかし、少しづつホームページを作れるようになるとこれが分かってきてしまうんですよね。

今まででのホームページ作りは、ホームページを作る場合PCで見ることを前提でホームページを作ります。そしてスマホなどでも見れる様にする為にはPC用のサイトとは別にもう1個のサイトを作りスマホなどの画面に表示していました。(先ほど図で説明している部分)

と言うことはホームページを2つ作らなければならず手間暇が非常にかかっていました。

このサイトを2つ作る作業をしていないサイトは、スマホなどで見るとPC用の画面なので文字は小さくワザワザ拡大しなければ見れないので、訪問者には不快な思いさせている場合がございます。

これからのHP作成にはレスポンシブデザインは必須です

ソフトで自動変換機能も付いているが

各社から販売されているHP作成ソフトには、PC用に作成したサイトを自動でモバイル用サイトに変換してくれるソフトもございますが、やはりモバイル用サイトはモバイル用でスマホなどの各種の画面サイズには対応しきれず、文字がズレたり画像がはみ出したりして縮小されりたり大変見づらいサイトになります。

以前までは、この様なサイトも多く訪問者も我慢して画面サイズを拡大して見ていましたが、最近では自動で変換してくれるサイト(マルチスクリーン対応)が増えたので開いた瞬間に文字が小さいと直ぐに離脱(ページを閉じてしまう)する方が増えたそうです。

せっかく苦労し作ったホームページでも、マルチスクリーン対応(レスポンシブ)でなければ訪問者が直ぐに離脱しホームページを見てもらえない状態に陥ってしまします。

訪問者に見てもらえないホームページならホームページを作った意味が無くなりますよね。

なので、これからホームページを作ろうとお考えの方やホームページのリニューアルを検討中の方も、既存のホームページの作り方では無く「マルチスクリーン対応(レスポンシブ)」でホームページの作成(リニューアル)をして下さい。

 

『レスポンシブWebデザイン』でホームページを作る

今後のことを考えると、これからマルチスクリーン対応(レスポンシブ)のホームーページの作成をしようと検討したがどのようにマルチスクリーン対応(レスポンシブ)サイトを作れば良いのでしょうか?

その答えが『レスポンシブWebデザイン』を導入する方法です。いままで説明してきたマルチスクリーン対応がこのレスポンシブデザインを導入することで全て自動で行ってくれるようになります。

RWDとは

レスポンシブサイトのことを調べていると時々「RWD」という文字を見かけるかと思いますが、「RWD」とは、レスポンシブWebデザインの略のことです。

ちなみに「レスポンシブWebデザイン」を英語で書くと「Responsive Web Design」となるので『RWD』と略してい場合もありますよ。

それでは、早速『レスポンシブWebデザイン』を導入したホームページの作成を考えた方は少々お待ちください。まずは、レスポンシブデザインのメリットとデメリットを把握してから、レスポンシブサイトを作るかもう1度考えてみてください。

レスポンシブデザインは大変素晴らしいシステムですが、人によっては全く価値が見出せないかも知れません。

ですので、きちんとメリット&デメリットを把握しましょう。それではレスポンシブデザインにするメリットをお話していきたいと思います。

 

またメリットやデメリットのお話をいいから作り方が知りたいという方はレスポンシブデザイン対応HPの作り方をご覧ください

HPの作り方関連記事

ホームページの作り方(手順)

HPの作り方

2019/5/13

ホームページを自分で作る方法(手順)初心者向け

ホームページの作り方(作成手順) 初めてホームページを作られる方向けのホームページの作成手順の説明です ここでは初めてホームページを自分で作ってみようと思う人向けにホームページの作り方を分かりやすく順を追って説明しています。 1つ1つ手順を追って説明していきますので、HPを初めて自分で作ってみようと思う方でもきっとホームページを作る事が出来るかと思います。 また当サイトの管理人自身がHPを作り出してまだ数か月のHP作成初心者なので難しい専門用語などは使っていないので(私自身専門用語が分からない)、これから ...

続きを読む

HPの作り方

2019/5/13

ホームページを自分で作ってみる①HPを作る前にしっかりとリサーチをする

HPを作る前にはリサーチをしよう 初めて自分でホームページの作成をされる方にとってHP作成とはどのようなモノなのか分からないのは当然かと思います。 また「どの様なデザインのほーうページが良いのか」や「どの様に文章を書けば読みやすいか」など分からなくて当たり前です。 そこでこれから初めて自分でホームページを作ろうとされている方は、先ずはたくさんのホームページを見ることをおすすめいたします。 またお店などのホームページをつくるのであれば、同業種で競合とされているお店のホームページを見てみることが大事になってき ...

続きを読む

HP作成に独自ドメインが必須だよ

HPの作り方

2019/5/13

ホームページを自分で作ってみる②独自ドメインを取得する

HPを作るなら独自ドメインを取得する HPの作り方①で(リサーチする)で説明した通り様々なホームページを見ることで、どの様なホームページにしたいのかなどのイメージが掴めるかと思います。 またどの様なホームページが「綺麗で読みやすいのか」や「こんなHPなら読みづらいな」って分かれば自分で作成しようとされているHPのイメージがなんとなくでいいので想像出来てくるかと思います。 それでは、HPの作り方②ではホームページ作りには欠かせ無い「独自ドメイン」についてのお話をさせていただきます。 スポンサーリンク &nb ...

続きを読む

レンタルサーバー

HPの作り方

2019/5/13

ホームページを自分で作ってみる③レンタルサーバーを選んでみる

ホームページの作成をする為には、先ずはホームページのデータ(情報)を保管するためのサーバーが必要になってきます。 このレンタルサーバーを用意しないとHP作成ソフトを購入したり独自ドメインを取得したとしても、自分で作成したホームページをネット上で公開することは出来ません。 またレンタルサーバーには毎月の月額がかかる有料サービスと無料でも利用が出来る無料のレンタルサーバーサービスなどがございますが、お店(商用目的)などのホームページを作成する場合には有料のレンタルサーバーの利用が一般的となっております。 スポ ...

続きを読む

HPの作り方

2019/5/13

ホームページを自分で作ってみる④HP作成ツール(ソフト)の必要性とは

お金をかけずに無料でホームページは作ることは出来ますが、それなりの専門的な知識が必要になります。 なのでこれから初めてHPを作ろうとされているHP作成初心者の方にはおすすめいたしません。 仮に実際にお金をかけないで無料でHPを作るのであれば、windows に標準でインストールされている『メモ帳』を使って、ソースと言われる『HTML言語』を打ち込んでいく(これはプログラムを作ると言った方が分かりやすですかね)作り方がありますが、ハッキリ言って初めてホームページを作る方にはほぼ99.9%無理な話です。 それ ...

続きを読む

HPの作り方

2019/5/13

ホームページを自分で作ってみる⑤トップページを作成する

お店や会社などのホームページ(コーポレートサイト)のTOPページは、ネット上でのお店の顔(看板)と一緒の役割がございます。 またTOPページには伝えたい情報などを端的に且つ読みやすく記載するのが好ましいですが、中にはどこに何が書いてあるのかさえ分からない様なホームページもあります。 そのように何処に何が書かれているのか分からない様なHPなら、せっかくHPへ訪れた方も直ぐに開いたHPを閉じてしまう可能性もあるのでホームページのTOPページはしっかりと作りこむことが大事です。 スポンサーリンク   ...

続きを読む

HPの作り方

2019/5/13

ホームページを自分で作ってみる⑥基本コンテンツを作成する

最近では個人でお店などを経営されている方でもHPを持たれているところって多いですよね。しかし、商用(ビジネス)目的のHPなのに必ず記載しなくてはいけないページ(コンテンツ)が無いHPも中にはございます。 商用(ビジネス)目的のHPを持つなら必ず必要となってくる基本的なページ(コンテンツ)は必ず作成するようにしましょうね。※法的な問題に発展する場合もあるので・・・ また、業種により作るページ(コンテンツ)にも多少違いがあるのでご自分の業種に有った基本コンテンツを作成するようにしましょう。 スポンサーリンク ...

続きを読む

HPの作り方

2019/5/13

ホームページを自分で作ってみる⑦HPが完成した

ホームページを自分で作成するには以前に比べかなり簡単にはなってきていますが、それでも自分でホームページを作るということはある程度の勉強をしたりするので大変な作業になります。 そして色々と苦労しながら作ったホームページなら制作会社に制作依頼したホームページよりもより一層愛着があるのではないでしょうか? しかしホームページが完成したからと言ってここで気を抜いてはいけません。 一旦ホームページを作り終えたらホームページ作成作業は完了かも知れませんが、お店などのビジネスに利用されるホームページは作ったら終わりでは ...

続きを読む

整体院HP

2019/5/11

整体院ホームページを自分で作成する方法

整体院をこれから開業するという方や以前から開業されている方も同様ですが、数年前であれば立地条件の良いテナントを探し情報誌などで集客さえすればそこそこ整体院は繁盛した時代もありました。 しかし近年では情報誌のみの集客では新規患者さんの来店頻度は低下し、お店の経営が厳しくなる様な整体院などが増えてきていますよね。 そんな時代ではありますがそれでも繁盛している整体院も中にはありますが、その様に繁盛している整体院やカイロプラクティック院などでは必ずと言っていいほどお店のホームページからのネット集客が成功しているそ ...

続きを読む

ホームページの作り方手順

-HPの作り方
-, ,

Copyright© HP自作コム , 2019 All Rights Reserved.