HPの作り方

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

レスポンシブデザイン

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/8/31

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

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

続きを読む

ホームページを始めて制作する時は先ずはリサーチが大事

HPの作り方

2019/8/31

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

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

続きを読む

ホームページ作成に欠かせない独自でメイン

HPの作り方

2019/8/31

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

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

続きを読む

レンタルサーバー

HPの作り方

2019/8/31

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

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

続きを読む

ホームページ作成に欠かせないHP作成ソフト

HPの作り方

2019/8/31

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

商用目的のホームページを作るにはある程度のお金がかかること先に理解しておきましょう。 またお金を全くかけなくても無料でホームページを作ることも出来ますが、それなりの専門的な知識が必要だったり商用には適していなかったりとしてしまいます。 ですのでこれから商用目的(お店などのHP)のホームページを作れる方には無料で作成でいるホームページはあまりおすすめは致しません。 仮に実際にお金をかけないで無料でHPを作るのであれば、windows に標準でインストールされている『メモ帳』を使って、ソースと言われる『HTM ...

続きを読む

ホームページのトップページを作る

HPの作り方

2019/8/31

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

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

続きを読む

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

-HPの作り方
-, ,

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