レスポンシブWebデザイン

多様な閲覧環境への対応

マルチデバイス対応

2012年頃からのスマホ普及 ~ その後数年間で「モバイル対応は常識」といった風潮になりましたね。マルチデバイスに対応したうえで、見やすさ・使いやすさへの更なる配慮が求められています。

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

今の時代、通勤途中や外出先では勿論、自宅でも、PCではなくスマホ・タブレットからWebを閲覧する機会は多いですよね。

マルチデバイス

多様なデバイスでの閲覧性・操作性から得られるユーザー体験(UX = User Experience)が良好でないと、機会損失につながってしまいます。見やすく・使いやすくなければ、読まずに閉じられてしまいますので。

画面幅に応じてレイアウト調整

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

今でこそ、標準でレスポンシブは当たり前となりましたが ...

歴史を振り返ってみると、2015年4月の Google モバイル フレンドリー アップデート (=モバイルに最適化されてないサイトは順位落とすよ!というアルゴリズム変更)実施以前は、レスポンシブデザインはまだあまり一般的とは言えず、先鋭的で珍しいものとして捉えられていたように記憶しております。

ジュウロクデザインでは、そのひと昔前 ・・・ 2013年の開業当初から、一貫して「標準でレスポンシブです」というスタンスでやってきました。 スマ―トフォンからPC(パソコン)まで、マルチデバイス*での閲覧を前提としたサイト作りを続けてきております。*マルチデバイス=multiple device: 多種機器

当時はWeb業界全体としてマルチデバイス対応への過渡期であり、他のWeb業者さんから「(こちらでは)対応できないから、(ジュウロクデザインさんで)レスポンシブ化の改造だけやってくれませんか?」的なご依頼をしばしばいただきました。

おかげさまで、新規制作・既存サイトの改造とも、ノウハウは豊富に持っております🙂

専用設計と兼用設計

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

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

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

のように振り分けられ 同じ動画を、それぞれ専用に設計された、別々のページで 閲覧する形になります。もっとも、YouTubeはスマホブラウザではなく、YouTubeアプリで閲覧することの方が多いですが;

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

”兼用” 設計のメリット

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

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

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

モンキーレンチ

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

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

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

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


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

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

ドラマー・ほりひろき 様
ドラム奏者&講師
horihiroki.com
オリーブ薬局 様
調剤薬局
olive-pharmacy.co.jp
勝川よろずクリニック 様
医療施設 クリニック
kachigawa-fcl.jp
Hair Design June WebSite-Screens
美容室 June (ジュネ) 様
美容院
june-june.jp
岡田胃腸科クリニック 様
医療施設 クリニック
okada-ichouka.com
Souzyu-en Modern Series
窯元/製陶所 ブランドサイト
souzyu-en.com/modern
おんせん風呂録-レスポンシブ
おんせん風呂録 様
情報サイト 日帰り温泉
on-1000.com
The Dapoo! Experience サイト改造-構造面リニューアル
The Dapoo! Experience 様
カスタム塗装店 デザイン・イラスト
dapoo.jp
交渉人かとう WordPressブログサイト(レスポンシブデザイン)
交渉人かとう 様
弁護士・交渉人 YouTuber
negotiator-kato.com
CARE Measure 日本語版サイト
CARE Measure 日本語版
医療 研究
caremeasure.meidai-soushin.net
サロン・ド・ミリア 様(レスポンシブデザイン)
Salon de Miria 様
サロン カラーセラピー
salon-de-miria.com
舩坂酒造店・ネットショップ (MakeShop)
舩坂酒造店様 ネットショップ
日本酒の造り酒屋 通販 ネットショップ
funasaka.shop26.makeshop.jp

レスポンシブデザインのお値段

基本、コミ込みです

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

先述の通り、基本的に『スマホでもタブレットでもPCでも、見やすくて読みやすいのが良いよなぁ』という制作ポリシーなので、はじめから全部そうしています。もちろん、固定レイアウトのサイトを作るのと比べた場合、工数(調整の手間)は増えます。

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

そして数年間を経て、今や普通の価格で・レスポンシブで作ることは当たり前!というのが世の趨勢ですね。当初の見通しが当たっていたことを実感しています。

”レスポンシブ化” をご希望の場合

随分少なくなってはきたものの、2020年の現在でもまだPC向けの固定レイアウトになったままのサイトもありますよね。『今のPC版サイトのイメージを保ったまま、レスポンシブ化して欲しい』というご要望がございましたら、お問い合わせ下さい。

現状のサイトを拝見し、レスポンシブ化検証 ~ 可能な場合、お見積をさせて頂きます。スマホ専用サイトを作ったり、全面リニューアルするより遥かに廉価で済ませられた実績がございます。

なお、あまりにも基本設計が古いサイトの場合は、改造ではなくリニューアルした方が費用対効果を得られる場合が少なくありません。改造 or リニューアルについては、諸般勘案の上、より妥当性の高いご提案をさせていただきます。

ご相談・お問い合わせは

Tel: 090-8704-9188

または
こちらのメールフォームで