レスポンシブWebデザインのご案内＋CMSをセットしたプロが提案するホームページとは</span></li> </ol> </div>   <div id="main-and-sub"> <div id="news-main-contents"> <div class="contents"> <div id="news_4WBZ09MVH"><div id="news_4WBZ09MVH_Contents" style="clear:both;"><h2>レスポンシブWebデザインのご案内</h2> <h3>レスポンシブWebデザインでホームページを構築するとPC・スマートフォンなどに適した表示を実現</h3> <div class="document"> <p class="f12pt"><strong>スマートフォンの普及で導入サイトも増加。SEO対策にも効果。ホームページの更新も楽になります。</strong><strong>ホームページで紹介している商材、サービスにおいてデザインが適しているサイト、向かないサイトもあるでしょう。<br />まずは、私どもにご相談ください。<br /></strong></p> </div> <div class="document"><img src="/images/news/responsive-web-design.jpg" alt="レスポンシブWebデザインとは" width="730" height="82" /> <img style="float: right;" src="/images/news/3device.jpg" alt="デバイスイメージ" width="269" height="247" /> <p class="p10">デバイス毎（PC、スマフォ、タブレットなど）にWebサイトをデザインしていてはキリがないです。SEO対策もデバイス毎におこなう必要もあります。</p> <p class="p10">そこで、最近注目されているのが「レスポンシブWebデザイン」という画面サイズやデバイス（OS）にデザインを柔軟に対応して表示させる手法が見直されております。</p> <p class="p10">Googleも推奨しているとか。ホームページを閲覧する場合、AさんはWindowsPC23インチモニター、BさんはiPad、Cさんはアイフォン・アンドロイドなどのスマフォ、CさんはiMacなど多種多様です。</p> </div> <h3>レスポンシブWebデザインとして必要なこと</h3> <div class="document"> <table style="width: 506px; height: 105px;" border="0" cellspacing="0" cellpadding="0"> <tbody> <tr> <td width="447"><ol class="p30-l p20-t p20-b lh20"> <li>スマフォ、タブレット、PCなどさまざまな端末で問題なく閲覧できる</li> <li>サイト運営管理・ページの更新が一度の作業で対応できる</li> <li>どの端末で閲覧してもデザインに統一感がある</li> <li>どの端末で閲覧しても同じURLでアクセスできる</li> <li>SEO対策上でレスポンシブWebデザインは効果がある</li> </ol></td> </tr> </tbody> </table> <img src="/images/news/layout.gif" alt="レスポンシブレイアウト" width="505" height="316" /></div> <div class="document"><hr /> <table style="width: 730px;"> <tbody> <tr> <td width="430"><img src="/images/news/sample.jpg" alt="サンプルページをご用意しました。ウィンドウの幅を調整すると、レスポンシブな動きが実感いただけます。" width="430" height="80" /></td> <td width="288"><a href="http://cms.mcscorp.co.jp/" target="_blank"><img src="/images/news/btn-sample.jpg" alt="サンプルページを見る" width="269" height="59" /></a></td> </tr> </tbody> </table> <hr /></div> <h4>1. スマフォ、タブレット、PCなどさまざまな端末で問題なく閲覧できる</h4> <p class="p10">レスポンシブWebデザインなら、あらゆる画面サイズに対応するウェブサイトを作ることになります。スマフォ・サイズからPC接続の大画面モニターまで、どんな端末でも「問題なく」、快適に閲覧できることはレスポンシブWebデザインが目指すところです。</p> <p class="p10">同様にさまざまな端末で閲覧しても同じコンテンツと機能にアクセスできるユーザーにとって、PCで閲覧していたWebサイトがスマフォで閲覧したときにPCで見れていたコンテンツがなくなっていたり、機能が使えなくなっていることは、不満になります。レスポンシブWebデザインで作成した場合は、どの端末で閲覧しても同様なコンテンツが提供されていることです。</p> <h4><a name="mente"></a>2. サイト管理ページ更新が一度の作業で対応できる</h4> <p class="p10">ページ更新は、ホームページ管理上かならずおこなうことになりますが、レスポンシブWebデザインでおこないますと、一度の作業で更新が完了いたします。<br /> <br /> レスポンシブWEBデザインでは、1つのHTMLファイルを1回更新するだけで、パソコン、タブレット、スマートフォンに対して新しい情報に更新することができます。<br /> <br /> 端末別に専用サイト制作した場合は、サイトの掲載内容を書き換える作業を1箇所の更新作業で最低3回作業を繰り返すことになります。更新が一箇所程度ならよいですが、複数個所、複数ページになると作業の負担になり、ミスをする可能性もでてきます。</p> <p class="p10">レスポンシブWEBデザインは、ページ更新の一元管理ができる点で、更新作業の負担やミスを軽減できるメリットがあります。</p> <h4><a name="dezain"></a>3. どの端末で閲覧してもデザインに統一感がある</h4> <p>PCでもスマフォでもアクセスする端末によるデザインが統一されているので、サイト内コン通を見やすい一貫性のあるイメージを作り上げることができます。<br /><br /></p> <p>ナビゲーションメニューなどが端末によって異なっていたりしてユーザーが戸惑う設計は好まれません。もちろん、全く同じレイアウトで構成することは不可能なので、同じコンテンツへの導線等は同じで、ユーザーが同じ情報にたどり着く上で迷わないように工夫をすることが重要です。できるだけデザインに統一感があると安心して閲覧することが出来ます。</p> <h4>4. どの端末で閲覧しても同じURLでアクセスできる</h4> <p class="p10">PC版で閲覧していたWebサイトのURLをメール等でスマフォに送って閲覧すると、実際はPC版のWebサイトに飛びリダイレクトされてスマフォ用デザインに制作または変換したURLのサイトが表示されます。</p> <p class="p10">しかし、レスポンシブWebデザインですと同じURLで、どの端末で閲覧しても端末のブラウザーに適したサイズにて閲覧できますので不便な思いをユーザーにさせなくてすみます。<br /> さらにSEO対策上も1つのURLでおなじコンテンツが提供されるので、SEOチューニングも1つのサイトコンテンツにおこなうことで適用されます。</p> <p class="p10">「同一URL、同一コンテンツ」※googleも推奨している　→　<a href="https://developers.google.com/webmasters/smartphone-sites/?hl=ja" target="_blank">携帯端末に最適化されたウェブサイトの構築方法</a><br /> <br /> 1つのコンテンツに対するURLが1つであることで、ユーザが閲覧したり、リンクを張ることがかんたんになります。たとえば、PCでWebサイトを閲覧中にリンクをクリックしたら、モバイル版専用サイトで、PC版へのリンクが簡単に見つからなかったら不便を感じます。</p> <h4><a name="seo"></a>5. SEO対策上でレスポンシブWebデザインは効果がある</h4> <div class="document"> <p class="p10">レスポンシブWebデザインではなく、モバイル環境（スマフォなど）とPC環境でコンテンツ毎に別々に構築した場合は、検索エンジンGoogle、Yahooのクローラがインデックスする階層を複雑にします。<br /> レスポンシブWebデザインですと1つのURLでコンテンツが表示されますのでこのような問題が解決されます。</p> <p class="p10">そしてコンテンツの重複を回避できる</p> <p class="p10"><strong>Googleは同一URLで同一のコンテンツを提供することを推奨しています。</strong><br />同一コンテンツを同一URLでさまざまな画面サイズに対応させることができるレスポンシブWebデザインが良いと言っているのです。<br /><a href="https://developers.google.com/webmasters/smartphone-sites/?hl=ja" target="_blank">https://developers.google.com/webmasters/smartphone-sites/?hl=ja</a></p> </div> <h3>制作費用に関して</h3> <div class="document"> <p class="f14pt"><strong>エムシーエスでは、レスポンシブWebデザインでの制作に関してですが、できるだけ安価にトラブルがないように制作することを最優先に考えてみました。</strong></p> <p>急増するスマフォのディスプレイ大画面化、PCモニターの高解像化という傾向に対応していくために、ある程度テンプレート化したサイト構成デザインが必要と考えました。</p> </div> <div class="document"> <p class="f13pt green"><strong>メリットとしては</strong><img style="float: right;" src="/images/news/responsive01.jpg" alt="" width="221" height="127" /></p> <ul class="p30-l p20-t p20-b lh20"> <li>制作後においてトラブルが少ない。表示の崩れ他</li> <li>制作期間が短期間</li> <li>制作費用が安価。10ページ　280,000円から</li> </ul> <table style="border-color: #eaeaea; border-width: 1px; width: 700px; border-style: solid;" cellpadding="5"> <tbody> <tr> <td bgcolor="#F2F2F2" width="183">トップページデザイン</td> <td bgcolor="#F2F2F2" width="402">5万円（CSS設計、ワイヤーからラフデザインの対応）</td> </tr> <tr> <td>階層ページ基本デザイン</td> <td>3万円</td> </tr> <tr> <td bgcolor="#F2F2F2">コンテンツデザイン</td> <td bgcolor="#F2F2F2">9ページで　5万円</td> </tr> <tr> <td>コーディング費用</td> <td>10ページ　8万円（1ページ8,000円）</td> </tr> <tr> <td bgcolor="#F2F2F2" height="26">メールフォームプログラム</td> <td bgcolor="#F2F2F2">2万円</td> </tr> <tr> <td height="26">企画・制作管理費用</td> <td>5万円</td> </tr> </tbody> </table> <p class="p10">デザイン面でのオリジナリティは対応。構造面がテンプレートを採用 ※カラー、メニューボタン、ナビなどの仕様はオリジナルで制作。もちろんコンテンツ部分に関してもオリジナルデザインを提供いたします。</p> </div> <div class="document"><img src="/images/news/plus-cms.jpg" alt="+ プラスTry!CMS 導入 TryCMSを導入していただけますと面倒な更新作業も楽になります。" width="557" height="125" /> <p class="f13pt green"><strong>例えば、</strong></p> <ul class="p30-l p20-t p20-b lh20"> <li>キャンペーン告知コンテンツ</li> <li>新着ニュース記事他、各腫ニュース記事コンテンツ</li> <li>ヘッダー、フッターの共有化。</li> </ul> <p class="f13pt"><strong>TryCMS ライトエディション 8万円</strong></p> <p><span style="color: #ff0000;">（キャンペーン価格 6万円でご案内）</span></p> <table style="border-color: #e6e4e5; border-width: 1px; border-style: solid; width: 630px; height: 52px;" cellspacing="3" cellpadding="8"> <tbody> <tr> <td style="width: 350px; background-color: #f2f2f2;"> <p class="p10" style="text-align: center;">レスポンシブWebデザイン + tryCMSライトエディション</p> </td> <td style="width: 183px; background-color: #feecea;" rowspan="2"> <p class="p10" style="text-align: center;">合計　340,000円（税別）</p> </td> </tr> <tr> <td style="text-align: center;">280,000円＋60,000円</td> </tr> </tbody> </table> <p> </p> <hr /> <p> </p> <p>レスポンシブWebデザイン　ご理解できましたでしょうか。</p> <p>多少、デザイン面においては制約もあります。またWebでは説明できない所もございます。</p> <p>まずは個々にご相談させていただけますでしょうか。<br /><br /></p> <p>簡単なご質問であれば、その場ですぐに回答できます。</p> <p>お電話いただければ、差し支えない範囲で、<br /> 御社の状況に合ったご説明ができますので、お電話ください。</p> <div class="tel_contact_box"><img src="/images/news/contact-tel.jpg" alt="電話でお問い合わせ" /></div> </div></div></div><br style="clear:both;" /><div class="defauleButton"><a href="javascript:void(0)" class="commandButton" onclick="history.back()">前ページ</a></div> </div></div></div>   <dl id="sidebar" class="sub-column"> <dt class="sidebar-btn">サイドバー</dt> <dd id="sidebar-in">  <div class="contents"> <div class="side-cont"> <p class="inq-btn"><a href="https://www.mcscorp.co.jp/contact/"><img src="/images/side-btn-inquiry.jpg" width="179" height="48" alt="お問い合わせ電話番号03-5296-0228" /></a></p> </div> <ul class="banner"> <li><a href="/cms2/"><img src="/images/banner/bn-cmc.jpg" width="207" height="100" alt="Try CMS(自社更新ツール)バナー" /></a></li> <li class="end"><a href="/webmarketing/lpo.html"><img src="/images/banner/bn-lpo-s.jpg" width="207" height="100" alt="ランディングページ制作" /></a></li> <li class="end"><a href="/service/analytics-report.html"><img src="/images/banner/bn-analytics.jpg" width="207" height="100" alt="アクセス解析レポートサービスバナー" /></a></li> <li class="end"><a href="http://www.mcscorp.co.jp/rss/"><img src="/images/banner/bn-news.jpg" width="207" height="100" alt="トレンドニュースバナー" /></a></li> </ul> <ul class="banner"> <li><a href="/service/bmobrise.html"><img src="/images/banner/bn-bmobilized.jpg" width="207" height="100" alt="bmobilizedバナー" /></a></li> <li class="end"><a href="/webmarketing/index000.html"><img src="/images/banner/bn-webconsul.jpg" width="207" height="100" alt="無料Webコンサルティングバナー" /></a></li> <li class="end"><a href="https://www.mcscorp.co.jp/estimate/"><img src="/images/banner/bn-estimate.jpg" width="207" height="100" alt="ホームページ制作、Webシステム開発他無料お見積り依頼フォーム" /></a></li> <li class="end"><a href="/homepage/flow.html"><img src="/images/banner/bn-flow.jpg" width="207" height="100" alt="お申込みから納品までバナー" /></a></li> <li class="end"><a href="http://www.try-cms.net"><img src="/images/banner/bn-cms-net.jpg" width="207" height="100" alt="TryCMS紹介サイト" /></a></li> </ul> </div>  </dd> </dl>  </div>  </div>  <div id="footer-wrap"> <div class="inq-baner"><p class="btn-inq"><a href="https://www.mcscorp.co.jp/estimate/"><span>ホームページ制作、Webシステム開発他各種サービスお見積り・ご相談はこちら</span></a></p></div> <div class="foot-text"> <p></p> </dl></div></div>   <div id="top"> <div id="top-in"> <ul id="top-menu"> <li><a href="/about/">会社概要</a></li> <li><a href="/privacy-policy/">個人情報保護方針</a></li> <li><a href="/sitemap/">サイトマップ</a></li> </ul> </div> </div>  </div>  <p class="page-top"><a href="#container">このページの先頭へ</a></p>  <script src="http://hjk.a.swcs.jp/2/j/" type="text/javascript"></script> </body> </html>