WEBサイトのデザインは『レスポンシブ』がおすすめ！

『レスポンシブ』とは、PCやタブレット、スマートフォンなど画面のサイズが異なる様々なデバイスに対して単一のファイルで最適化されたWEBサイトの表示を行う製作手法です。

例えば、ブログサイトでは、『2カラム』のデザインが主流で、PCなどで表示した際には、

【2カラム】

で表示し、スマートフォンなどの画面ザイズの小さなデバイスで表示した際は、

【1カラム】

1カラムで表示するといった製作手法です。

逆に『レスポンシブ』デザインでないデザインの場合、『2カラム』のデザインの場合、

などといったものがあります。

スマートフォンが登場してまだそれ程の時間はたっておらず、古いサイトの中にはスマホ表示に対応していないものもあります。

既にサイトをお持ちで、『スマホ表示』に対応しているかわからない方は、モバイルフレンドリーテストサイトに自身のサイトのURLを入力し、チェックしてみて下さい。

現在の検索順位の決定方法は、スマートフォンサイトでの評価が採用されており、スマートフォンでの表示への対応は必須といえます。

そのため、『レスポンシブデザイン』を使う、または『PCサイトとスマホサイトのファイルを分ける』必要があります。

どちらの方法でサイトを作成しても良いのですが、PCサイトとスマホサイトを分ける場合は、2つのファイルを作る手間がありますし、ユーザーのデバイスを判別しどちらのファイルを表示するか振り分ける設定が必要になるため、私は『レスポンシブデザイン』をおすすめします。

ただし、レスポンシブデザインも完璧なものではなく、メリットとデメリットを良く理解してどのようにスマホ表示に対応するか検討しましょう。

01編集ファイルが1つですむ

レスポンシブデザインを採用する最大のメリットは、編集するファイルが1つですむという点です。

スマートフォン用のファイルとPC用のファイルを別々に作成した場合は、内容のほとんど変わらぬファイルを2つ作らなければいけません。

ページの内容を更新する際も2つのファイルの内容を更新しなければならないため、単純に作業量が2倍になってしまいます。

確認作業も2つのファイルに対して行わなければならない上に、片方だけ更新し、片方の更新を忘れるといったミスも発生しやすくなってしまいます。

『作業の手間』を考えると、レスポンシブデザインがおすすめです。

02URLが1つですむ

訪問者のデバイスがPCであろうと、スマートフォンであろうと、タブレットであろうと、表示するファイルは1つであるため、対象ページのURLは1つです。

そのため、対象ページにリンクを貼る・貼ってもらう際もURLは1つのため何も問題はおこらず、被リンクのSEO効果も1つのページに集約できます。

また、ページへのアクセス数などを計測・分析する際もURLは1つであるため、問題はありません。

一方で、PCサイトとスマホサイトのファイルを分けた場合、ファイルが2つあるわけですから、当然URLも2つになってしまいます。

そのため、ファイルを分ける絶対条件として、ユーザーのデバイスを判別し、どちらのURLを開くか判別する処理を組み込む必要があります。

また、外部リンクを貼ってもらう際、URLが2つあると、SEO効果が分散されてしまいます。

もちろん、『canonical』の設定を行う事で、被リンクによるSEO効果の分散は防ぐ事は可能です。

しかし、サイト分析を行う際は、2つのURLを見なければならず分析が難しくなってしまう場合もあります。

運用のし易さでも、『レスポンシブデザイン』がおすすめです。

レスポンシブデザインのメリットは非常に大きいですが、デメリットも存在するため、しっかり把握しておきましょう。

01複雑化する

1つのファイルで『PC』『タブレット』『スマホ』など様々な画面サイズのデバイスでの表示に対応しなければいけないため、作業が複雑化してしまいます。

作業量は減りますが、作業難易度は上がると言って良いでしょう。

ただし、一度レスポンシブに対応した形式を作ってしまえば後の作業は、ファイル分ける際の半分になるため、楽になるかと思います。

『デザインを修正』する際は注意が必要です。

02表示画面が重たくなる可能性

同じファイルを使うがゆえ、避けられない事態があります。

例えば、PCなど大画面で表示する際は表示するが、スマホなどの小さな画面では表示しないといった領域がある場合、スマホでの非表示領域もユーザーには見せていないだけで、その領域部分の通信は発生しています。

また、大画面で見せるために解像度の高い容量の大きな画像などを設定している場合も、スマホ表示時も容量の大きな画像ファイルをユーザーはダウンロードしなければいけません。

つまり、ファイルを分けていれば避けられる無駄な通信容量を画面サイズの小さなデバイスにも強要する事となり、結果表示速度も遅くなってしまう可能性があります。

特にこの点に関しては、『ファイルを分ける』方法の方が優位です。

しかし、近年ではwifi環境も整備され、通信速度の向上、大容量通信プランの登場などにより以前よりもダメージは小さくなっているかもしれません。

例えば、私のこのブログサイトでは、

PC表示 ⇒ 広告を横に並べて2つ表示

スマホ表示 ⇒ 1つ表示

といった処理を、スマホ表示時に『1つの広告を見せない』ようにするのでは無く、『JavaScript』を使って画面サイズによって広告表示数を変えるよう分岐処理を作って、この問題を回避しています。

03全デバイスへの完全対応は難しい

先ほどの『複雑化する』と関連がありますが、1つのファイルでサイズの異なる複数デバイスへの表示に完璧に対応するのは、とても難しいです。

単純なサイトデザインであればそれ程問題にならないかと思いますが、複雑なデザインを必要とするサイトは注意が必要です。

技術力が高ければどうにかなる場合もありますが、どうしても『ここが気に入らない』といった箇所が出てくる場合もあります。

どうしてもレスポンシブデザインで希望のデザインが実現できない場合は、ファイルを分ける事を検討しましょう。

01気に入ったデザインを選ぶ

当然の事と思うかもしれませんが、『デザインの気に入ったテンプレートを選ぶ』のはとても重要です。

少し妥協してテンプレートを選ぶと、後々やっぱりこっちのデザインのテンプレートが良かった。 と後で絶対に後悔します。

もちろん、途中でデザインを変える事は可能ですが、ページ数が少なければそれ程大変な作業にはなりませんが、ページ数が増えた段階でのデザイン変更はかなりの手間がかかります。

有料のテンプレートはもちろん、『無料』のテンプレートの中にも良いものはあるので、妥協せずに色々なサイトを探してみましょう。

02使い易いテンプレートを選ぶ

まずは、自分のサイト内容に合ったテンプレートを選ぶ事がとても大切です。

例えばブログサイトであれば、記事の内容以外にも、『カテゴリ』『関連記事』などを表示するかと思います。

アフィリエイトをするのであれば、どのように広告を配置するのかもイメージしましょう。

テンプレートの中には、様々な表示形式の『部品』部分があります。

サイト全体のデザインも重要ですが、使い易い部品が揃ったテンプレートを使うのがおすすめです。

もちろん、デザインの部分を自分で作成すれば好きなように表示できますが、慣れないうちはできるだけ作業のハードルを下げるためにも、既存の部品を使う事をおすすめします。

『色合い』などは一番変更が容易なため、色合いは特に気にする必要は無いかと思います。

03SEOに強いテンプレートを選ぶ

『初めてのサイト制作』でSEO対策を始めから行っていくのはかなり難しいです。

当然、SEOに強いテンプレート、弱いテンプレートなど見分ける事はできません。

しかし、サイトの集客を行っていくためにはいつかはSEO対策を行っていかなければいけません。

SEO対策についてさらっとで良いので事前に読んでみるなどして、頭の片隅にSEO対策の事を置いてテンプレートを選ぶようにしましょう。

04利用規約を良く読む

人の作ったテンプレートを使う際は、利用規約をよく読みましょう。

例えば、アフィリエイトをするなど、広告を貼る際は個人であっても商用利用となります。

テンプレートが『商用利用可能』であるか確認しましょう。

また、よくあるのが、テンプレート製作者へのリンクを外してはいけないという規約です。

『著作権表記』や『クレジット表記』、『コピーライト』などと呼ばれるものです。

テンプレートファイルの中に、製作者サイトへのリンク(主にページ最下部のフッター部分に設置されている事が多い)が設置されているため、そのコードは消してしまわないように気を付けましょう。

他にも製作者によって様々な規約が記載されているため、利用規約はしっかりと確認しましょう。

利用規約を破ると後々、トラブルの原因になってしまうかもしれません。

無料で使える『レスポンシブ』テンプレートはたくさん存在します。

検索結果の上位に表示されるものよりも、むしろ見つかりにくい所に良いテンプレートがあったりするので、根気強く、検索方法を工夫して探してみましょう。

私は『ブログサイトに合いそう』なテンプレートを探したため、いくつかご紹介したいと思います。

01Bootstrap

テンプレートとは若干異なるのですが、『Bootstrap』とは、元々はTwitterで有名なTwitter社が開発したWEBフレームワークです。

PCやタブレット、スマートフォンといった様々なデバイスでの表示に対応した『レスポンシブデザイン』でサイト構築する事ができます。

サンプルコードも豊富に準備されているため、『ブログサイト』『WEBサイト』等どんなサイトコンテンツであっても使い易いかと思います。

何より、有名なため、NET上の情報量が多く調べやすいといった特徴があり、初心者の方にもおすすめです。

私も以前は外国の方が作ったテンプレートを使用していましたが、現在はこのブログサイトも『Bootstrap』を使って構築しています。

製作者へリンクを貼る必要も無いため、使い勝手も良いです。

02Colorlib

海外のサイトではありますが、先ほどご紹介した『Bootstrap』のフレームワークを使ったテンプレートも数多く掲載されています。

オシャレなデザインも多く、非常におすすめです。

英語サイトは利用規約を読むのが大変ですが、Colorlibサイト内のテンプレートも例外ではなく、上記行為は禁止となります。

『商用利用は可能』なため、アフィリエイト等する方も覗いてみて下さい。

03HTML5UP

私がこのブログサイトを立ち上げた当初は、HTML5UPというサイト内のテンプレートを使って製作を行いました。

同じく海外のサイトですが、オシャレなデザインも多くおすすめです。

こちらも先ほどと同様、『商用利用は可能』ですが、

等は禁止されています。

1つ注意したいのが、英語で書かれたおしゃれなページを日本語にするとオシャレ感が減退する可能性があるため、デモページを日本語翻訳して表示してみるなどしてイメージを確認しておくと良いかもしれません。

04フリーホームページ.net

無料で使えるテンプレートの中には、著作権表記を外せないものが多いですが、フリーホームページ.netは、商用利用可能かつ著作権表記不要といった特徴があります。

日本語のサイトのため、わかり易い点も良いです。

私もこのサイトのテンプレートを使って、WEBサイトを1つ作成しています。

サイトも良く更新されているため、テンプレートの品質も高いかと思います。