フリーランスでホームページ制作を行うフィールグッドデザイン

お問い合わせフォーム

ホームページリニューアル・Webデザイン制作・フリーランス

レスポンシブWebデザイン

レスポンシブとは?

レスポンシブWebデザイン「レスポンシブWebデザイン」とはパソコン、タブレット、スマートフォンなど、異なる画面サイズの幅を基準に、レイアウトを調整して見やすく最適な表示にすることを指します。

スマートフォンサイトを全く別のデータで用意して表示する作り方もありますが、「レスポンシブWebデザイン」のメリットは1つのファイルでパソコン・タブレット・スマートフォン等全ての表示を行うことができることです。

テキストや画像など共通のものを利用しますので、後々の更新や修正といった管理がしやすくなり、パソコンサイト、スマートフォンサイトで情報が異なるということは、基本的にありません。

デメリットとしては、パソコン・タブレット・スマートフォンといった画面サイズの違ったもの全てに同じ内容を表示させる必要があるので、各端末ごとに全く違うデザインや内容を掲載する場合には向いていません。
全ての端末でどのように表示させるかを計算し、サイトの設計を行う必要があるため作業時間がかかります。

デメリットもありますが一番のメリットとしては、検索サイトのgoogleが「レスポンシブWebデザイン」を推奨しているという点です。モバイルファーストインデックス(MFI)の導入も発表され、今後ますます「レスポンシブWebデザイン」が採用されるケースが高くなることが予想されます。

レスポンシブWebデザイン ビフォーアフター例

スマートフォンやタブレットで「別ウィンドウでサイトを見る」ボタンから、それぞれご確認いただけると違いが分かりやすいです。

BEFORE ~レスポンシブWebデザイン前のサイト~

別ウィンドウでサイトを見る

スマートフォンで表示した時に、ページ上部のナビゲーションボタンが小さくてクリックしずらく、テキストが小さいので拡大しないと読めない。

AFTER ~レスポンシブWebデザイン後のサイト~

別ウィンドウでサイトを見る

スマートフォンで表示した時に、レイアウトを調整してナビゲーションボタンやテキストが見やすく、最適な表示になっている。

レスポンシブWebデザイン案件例

レスポンシブWebデザイン事例1
www.takanori-sasaki.com

レスポンシブWebデザイン事例2
www.laruelle-nail.com

レスポンシブWebデザイン事例4
www.comfy-hairworks.com

レスポンシブWebデザイン事例3
www.unagi-kawamatsu.com

ページのトップへ戻る