ウェブ制作サービス レスポンシブ化

レスポンシブ化・スマホ対応サービス

レスポンシブ化

貴社のウェブサイトをマルチデバイス対応で作成・リニューアルします。

議論の時は終わりました

自社ホームページをスマホ対応するべきか。やるにしてもサイト全体でなく、一部のページだけスマホ対応すればよいのではないか・・・
ご予算と時間が許すのであればスマホ対応をお勧めします。Googleも、スマートフォン対応しているかどうかを評価の対象にしていますし。あなた自身や周りの人も、スマホで調べものをする時間や回数の方が、PCを開いてそうするよりも多いのではないでしょうか。

レスポンシブ化が進む背景

2011年のauに続き、2013年にdocomoからもiPhoneの提供が開始されたことにより、日本国内のスマートフォンユーザーの数は飛躍的に増加しました。すでに業種やコンテンツによっては、PCよりスマートフォンからのアクセスのほうが多い逆転現象も多く見受けられます。アクセス元がスマホ90%超vsPC10%弱というサイトももう珍しくありません。

レスポンシブ化また、アマゾン社のKindle Fireや安価なAndroid端末等のタブレットの普及もめざましく、サイトのモバイルファースト化、マルチデバイス環境への対応は急務となっています。

弊社ではスピーディーかつ低価格で、スマートフォンやタブレット対応を前提としたPCサイトのリニューアルの実現します。

マルチデバイス対応のご提案

現在マルチデバイス対応は以下の様なものが考えられます。

  1. デバイスごとにサイトを制作し、HTTPリダイレクトによる1URL表示
  2. デバイスごとにサイトを制作し、オリジナルCMSで管理
  3. レスポンシブWebデザインによるレイアウト変更

レスポンシブ化従来は1の方法が一般的でしたが、訂正や修正のたびに各デバイス向けサイトを別々に更新しなければいけないため、管理/運営に非常に手間とコストがかかりました。

2のCMSパッケージによる一元管理は、おもにPCサイトをスマートフォン向けに自動生成するものですが、そもそもCMSによる導入時のコストやサーバーの準備と言ったハードルが高く、CMSデベロッパーの運営リスクなども同時についてまわります。

弊社では、原則としてレスポンシブWebデザインによるレスポンシブ化をご提案しています。

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

デバイスにかかわらずブラウザーのスクリーンサイズを基準にレイアウトを自在に変更させるため、おなじHTMLを使える(ワンソース)という利点があります。さらに、サーバーサイドプログラムに頼らず、CSSやJavaScriptのみで実現できるため、コストや開発技術など導入の障壁が低いという利点も挙げられます。

表示された機器の種類やサイズに応じて表示内容が最適な状態に変化するよう設定された単一のファイルを制作し、すべての機器に同じように送信する。

IT用語辞典“http://e-words.jp/ レスポンシブデザインとは 【 responsive design 】 〔 レスポンシブWebデザイン 〕 - 意味/解説/説明/定義』”より

グレイスフル デグラデーションを用いてスピーディーかつ低コストで導入

これまでに全世界で発表されたスマートフォンの機種の数は、12,000種類にものぼると言われています(2013年時点)。これに各OSのバージョンやPCブラウザの種類などをかけ合わせると、すべての環境を検証することはほとんど不可能です。

弊社では、原則としてグレイスフル デグラデーションの考え方に則り、現状で最も広く普及している環境に対応した開発を行い、検証環境を必要最低限のものにすることによって、制作コストをできる限り低く抑えています。

最近ではChromeやSafariなどのWebkit系ブラウザーのみでなく、Internet Explorer 9、Firefox4、Opera11.10でもHTML5やCSS3など新しい機能への対応の足並みが揃いつつあります。~中略~この流れにより、「限られた古い環境を基準にする」よりも、「最近の環境を基準にし、古い環境にはレベルを落とす」といった手法が流行ることが予感させられます。このような考え方を「Graceful Degradation(グレイスフル デグラデーション)」といいます。

アドビ システムズ “http://www.adobe.com/jp/devnet/dreamweaver/articles/html5pack_css3_part6.html Graceful DegradationとPolyfill”より

もちろん、ご要望に応じて旧環境の検証を行うことも可能です。
マルチデバイス対応の導入をスムーズに行うために、最適なプランをご提案いたします。
上記の提案についても、ご相談時にあらためてご説明いたします。

スマートフォンサイト制作事例

東京外国語大学「現代アフリカ地域研究センター」様ウェブサイト、ロゴ制作
東京外国語大学「現代アフリカ地域研究センター」様ウェブサイト、ロゴ制作

東京外国語大学「現代アフリカ地域研究センター(ASC)」の開設に伴い、センターWebサイトの新規構築を行いました。

東京外国語大学 社会・国際貢献情報センター様
東京外国語大学 社会・国際貢献情報センター様

東京外国語大学「社会・国際貢献情報センター(ICSIC)」様のサイトリニューアルを行いました。

Googleマップ上での検索システム
Googleマップ上での検索システム

日本交通管理技術協会様の企画・立案に基づき、全国の自転車安全整備店をGoogleマップから検索できるようにいたしました。

https://www.tmt.or.jp/safety/search13.html

tmtsearch201702.png

吉祥寺ヘアサロン「Bor mee(ブーミー)」様
吉祥寺ヘアサロン「Bor mee(ブーミー)」様

吉祥寺ヘアサロン「Bor mee(ブーミー)さまのWebサイトをサロンオープンに合わせて新規制作しました。

東京外国語大学 多言語・多文化教育研究センター様
東京外国語大学 多言語・多文化教育研究センター様

東京外国語大学「多言語・多文化教育研究センター」様のサイトリニューアルを行いました。

いきいき健康ゆるから体操
いきいき健康ゆるから体操

国際玄制流空手道連盟 武徳会 総本部道場さまの、いきいき健康増進プロジェクト「ゆるから体操」サイトを新規制作しました。

「めやすWeb」公益財団法人国際文化フォーラム様
「めやすWeb」公益財団法人国際文化フォーラム様

公益財団法人国際文化フォーラム様運営、外国語学習のめやすWebサイト「めやすWeb」の全面リニューアルを行いました。

ECペイメントスマートフォンサイト
ECペイメントスマートフォンサイト

弊社の店舗へのクレジットカード決済端末導入サービス「ECペイメント」をスマートフォンに最適化し、公開しました。

サイトの全ページをスマートフォン化せず、コンバージョンに特化して閲覧頻度の高いサービスページだけをスマートフォンページに対応しました。

株式会社スタッフブリッジ様スマートフォンサイト
株式会社スタッフブリッジ様スマートフォンサイト

スタッフブリッジ様サイトをスマートフォン化致しました。

スマホユーザーが多い層をターゲットとした人材派遣会社様で、従来からスマホアクセスが多かったようです。

ドッグサロンWITH様のスマートフォン版サイト
ドッグサロンWITH様のスマートフォン版サイト

トリミングサロン、ペットホテルのお客様は比較的スマートフォンユーザー層が多く、2012年からは既存の携帯電話(フューチャーフォン)からのアクセスは激減し、反比例してスマホからのアクセスが増えております。

ブランド品買取比較ナビのスマートフォン版サイト
ブランド品買取比較ナビのスマートフォン版サイト

スマートフォンユーザーが多いターゲット層のサイトでスマホからのアクセス比率が多いです。

すべての事例を見る

スマートフォンサイト制作・レスポンシブ化の料金

要お見積り

以下の点にご注意ください。

  • 対応デバイスはPC・タブレット・スマートフォンとし、従来型携帯電話(フィーチャーフォン)は対象外となります。
  • 検証環境は、原則として現行ひろく普及している端末・OSとし、正式見積もり時に規定いたします。
  • 将来的なOSや普及デバイスの変更に伴う修正は、有償対応となります。
  • 必要に応じて画像・装飾・レイアウトなどを若干、変更させる必要があります。
  • Flashイメージは、代用イメージが必要になります。
  • その他元デザインデータ(.psd、.ai等)がお手元にない場合は、有償にて再制作になる場合がございます。

レスポンシブ化の流れ

  1. お問い合わせ

    対象のウェブサイトを調査し、最適な設計をイメージします。
    また、ご要望がある場合はそちらに基づいて検討いたします。

  2. ご提案・お見積り

    現サイトの構成、ページ数、コンテンツ量、画像数などを考慮し設計をご提案、お見積り申し上げます。

  3. 打合せ・詳細の確認

    ご提案内容に対してのご質問やご要望などを伺い、具体的な完成イメージを双方すり合わせます。

  4. お申し込み・ご契約

    制作開始となります。

Webサイト制作お問い合わせフォームへ