PCスマホ両対応のレスポンシブデザインとは！スマホで見る人にも優しいホームページ作成のコツ・メリットデメリットを紹介！

グラプラでは、サービスの向上・品質の均一化のため、【制作ガイドライン】に基づいてWebサイトを制作・ご提供しています。

今回は、PC・スマホ両対応のレスポンシブデザインについてご紹介いたします。

レスポンシブWebデザインとは？

レスポンシブWebデザインの基本

レスポンシブデザインとは、ユーザーが閲覧するデバイスの画面サイズに応じてページのレイアウト・デザインを最適化して表示させる技術のことをいいます。

以前のサイトはPCが主流でしたが、今ではスマートフォンやタブレットからのアクセス数が増加しました。モバイルファーストが一般的となった今、レスポンシブデザインはモバイル対応に非常にとても有効なものになります。

▼ 画面サイズでCSSが切り替わる

レスポンシブデザインでは、ウェブサイトを見る人の画面サイズに合わせてレイアウトを変えています。そのため誰がどの媒体であなたのサイトを見ても綺麗な状態で見てもらうことができます。

レスポンシブWebデザインのメリットとデメリット

とても便利なレスポンシブデザインにも、メリットとデメリットがあります。 メリット

• PC・スマホ両方に対応しているので文字や画像が誰が見ても綺麗な状態で見れる

• URLが統一されるのでシェアされやすい

デメリット

• 全てのWebサイトに当てはまるわけではない

• デザインやレイアウトに制限がある

• デバイスごとに細かい配慮をすることが難しい

レスポンシブデザインで気をつけるポイント

レスポンシブデザインでは、PC・スマートフォン両方からのアクセスを前提とした情報設計・デザインをしていく必要があり、その分工数がかかります。

マウス中心の操作からタッチデバイスを中心においた設計を意識し、スマートフォンでの操作性や読みやすさ、ボタンの配置などを考慮しましょう。ここでは2つのポイントをピックアップしてご紹介します。

例1：ボタンの配置に気をつける

スマートフォンやタブレットは指を使って直感的に操作できる一方で、マウス操作に比べて正確にタップすることが難しくなります。ボタンなどのタッチしてほしい要素の周りには感知できるスペースを設け、他のボタンをクリックしてしまう事がないようにタッチできる領域を確保しましょう。

Apple社のiOSヒューマンインターフェイスガイドラインでは、44px×44px以上のタップ領域を割り当てることを推奨されています。

▼ タップしやすいボタンサイズにしましょう

例2：マウスオーバーアクションは使わない

PCの場合、ボタンなどにマウスカーソルを乗せると、メニューが現れたり画像が拡大したりする動作をよく見かけます。

しかし、スマートフォンなどのタッチデバイスでは、ユーザーにそれらを認識させることができません。そのため、ボタンのタップでサブメニューが出ることがわかるような工夫が必要となります。

いつでもどこでも見やすいサイトへ

以上、今回はレスポンシブデザインの基本と、デザイン作成時のポイントをご紹介いたしました。今回のまとめは以下の3点です。

• レスポンシブデザインとは、閲覧するデバイスの画面サイズに応じてレイアウト・デザインを最適化して表示させる技術のこと

• すべてのWebサイトに最適とは限らず、メリットとデメリットがある

• PC・スマートフォン両方からのアクセスを前提とした情報設計・デザインをしていく必要がある

これまでは、WebサイトはPCで閲覧されることが主でした。しかし、スマホの普及によって、いつでもどこでも誰もがウェブサイトを閲覧できるようになりました。

その結果、スマホのアクセスがPCを上回ることが多くなり、現在はWebサイトのスマホ対応は必須と言えます。

そういったユーザーの閲覧環境の変化のなかで、モバイル対応サイトをより簡単に行うためにも、ぜひレスポンシブデザインを活用してみてください。

ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー

【SEO対策に強いWixホームページ制作会社ならWixプロ】

Wixウェブサイト制作をお考えの方に、管理がしやすくSEO設定にも充実したHPを実現。

【運営企業情報】

運営会社　　　　株式会社GRAND PLANNING

​代表取締役　　　金光　壮太

所在地　　　　　〒660-0061　兵庫県尼崎市蓬川荘園459-4

　　　　　　　　〒659-0015　兵庫県芦屋市楠町12-15

移動オフィス　　TEL:080-5717-3258

メンバー　　　　5名(パートナー含む)