レスポンシブデザイン - ジュウロクデザイン:名古屋・名東区のWeb制作SOHO

 
 
ホーム »  Web制作 »  レスポンシブWebデザイン

サービスアイコン レスポンシブデザイン

スマホ・タブレット・PC対応

今や、閲覧機器は多様化して

2012年頃からのスマホ普及を受けて、時代に即した・デバイスに即した表示がされることが求められています。

 

どんな機器でも読みやすく! 

ジュウロクデザインでは、 スマ―トフォンからPC(パソコン)まで、マルチデバイス*での閲覧を前提としたサイト作りをオススメしております。*マルチデバイス=multiple device: 多種機器

マルチデバイス

そして、それを実現する手段として『レスポンシブデザイン』でのサイト作りを得意としています。

レスポンシブデザインで作られたサイトは、スマホ・PC等の画面幅に応じて、自動的にレイアウト調整されて表示されます。(画面サイズを検知して Response を返す = Responsive Web Design)

もちろんPC向けサイトのみ作成 =スマホで見るときは拡大してね、という作り方も出来ますが・・・

通勤途中や外出先では勿論、いまや家に居る時でも、PCではなくスマホ・タブレットからホームページを閲覧する機会は増えています。PC以外での閲覧性を考慮していないというのは、ちょっともったいないように感じます。

▽クリックで開閉

PC用に作ってあるサイトをスマートフォンで見ると、全体が縮小されて表示されるため、文字を読むには、都度拡大したり上下左右のスクロールが必要となりますよね。

当たり前のことですが、ユーザー(サイト訪問者)がどんな機器で見に来るかは、ホームページのオーナーや作り手側は指定することが出来ません。ですので、多種多様なデバイスでのアクセスに過不足なく応えられる・・スマホで見ても・PCで見てもサイトが十分に機能的であり、情報がちゃんと伝わる・・という点は、今日のWebデザインに於いて重要な要素だと考えます。

たとえ、PCで見たときに見栄えが良かったとしても、スマホでアクセスしたら全然閲覧性が良くない・・という状態だと、読まれずに閉じられてしまう可能性が高くなってしまいます。

(ましてや今日、多くのユーザーは、スマホ専用ビューがしっかり作られた、各種ニュースサイトやFacebook等の使い勝手に親しんでいる状態です。「それが当たり前」だと思っている ⇒ 読みにくいと残念な印象となる、という点を汲む必要があるように思います。)



モバイル ”専用” ページの例 Separate

Yahoo! や MSN、YouTubeなどの大手サイトは、PC専用レイアウトのホームページと、スマートフォン・タブレット向けの、モバイル専用レイアウトのホームページを「分けて」作っています。閲覧者側は特段意識することはありませんが、これらは、パソコン(PC)と スマホで「同一のページ」を見ているわけではなく

  1. PCから閲覧すると、普通のアドレス
    www.youtube.com/watch?v=AbCdEf12345
  2. スマホ・タブレットでアクセスしたときにはモバイル専用のアドレス
    m.youtube.com/watch?v=AbCdEf12345

のように振り分けられ 同じ動画を、それぞれ専用に設計された、別々のページで 閲覧する形になります。

例えて言うなら。。。海に行く時はパジェロ。本気で走りに行く時はポルシェ911。芝刈りに行く時は軽トラ。という具合に、それぞれ専用で使い分けている贅沢仕様、という感じです。


”兼用” 設計のメリット Responsive

PC向けとスマホ向けサイトを別々に・専用に制作すると、初期費用の面でも維持更新の面でもコスト高になってしまいます(単純に×2倍ではないですが、それに近いニュアンス)。

当方で新規HP制作/HPリニューアルを行う際には、1つのURL・1つのソースコード(=ページの中身)で、スマホからPCまでマルチデバイスの閲覧に最適化される『レスポンシブデザイン(Responsive Web Design)』で制作する場合が多いです。

モンキーレンチ

例えて言うなら『モンキーレンチ』のようなもので・・ ñ

モンキーレンチは、対象となるボルト・ナットに合わせて幅を可変させ、1本で様々な口径に対応しますよね。

レスポンシブデザインで作られたサイトは、スマホ用ページとPC用ページを別々に作らなくても、閲覧デバイスの幅に応じて見やすいように可変するという特性を持ちます。

クルマで言えば。。。海に行くにも山に行くにも、ファミリーカー1台でOK!というのに近いでしょうか(笑)

つまりレスポンシブデザインは、専用ではなく 兼用設計 です。ポルシェと軽トラを使い分ける程の「両極端の用途にものすごくフィットした加減」を出すのには向いていませんが、合理的かつ実用的です。検索最大手・Googleも、レスポンシブデザインでのサイト制作を推奨しています。*


*Googleの検索ロボットから見た際に「同じ内容を持つサイトが、閲覧デバイス切り分けの為に別々のURLで存在する」よりも、「1つのURLに集約されている」方が、インデックス(Webサイト/キーワードの目次化)に於いて都合が良い、というのがその理由の1つと言われています。

*2015年、Googleはサイトが「モバイルフレンドリー」かどうかを、スマートフォン等から検索した際の表示順位決定要素の1つにすることを明言し、2015/4/21より適用しました。

野口英世アイコン  レスポンシブデザイン価格

新規制作/全面リニューアルの場合 = コミ込みです。特に割増ありません。

基本的に『スマホでも拡大せずに文字読みやすい方が良いよなー』という制作ポリシーなので、はじめから全部そうしています。もちろん、固定レイアウトのサイトを作るのと比べた場合、工数(調整の手間)は増えます。

が・・・それを全部お値段に反映させたプレミアム設定はしていません。『デバイスが多様化した近年、レスポンシブがスタンダード。クルマと一緒で、普及するには普通の価格じゃなきゃ』という思想のもと、制作手法の工夫・改良を重ね、従来よりも低コスト・短納期対応ができるようになってきました。

そんな中ですので、むしろ一般に言う普通のレイアウト=固定レイアウトでの作り方を例外扱いとし、その場合には制作費を少々お値引させて頂いております。

固定レイアウトからレスポンシブ化をご希望の場合 = お見積いたします

従来の固定レイアウトで作られたサイトを『今のPC版サイトのイメージを保ったまま、レスポンシブ化して欲しい』というご要望がございましたら、気軽にお問い合わせ下さい。現状のサイトを拝見し、レスポンシブ化検証 ~ 可能な場合、お見積をさせて頂きます。スマホ専用サイトを作ったり、全面リニューアルするより遥かに廉価で済ませられた実績がございます。

チューリップアイコン  レスポンシブ関連の記事

í
up