ウェブサイトをスマートフォンやiPadなどのタブレット端末に閲覧対応するためには、いくつかのアプローチがあります。
アイデアマンズでは、新たに「レスポンシブWebデザイン」というアプローチへの対応を開始しました。
「レスポンシブWebデザイン」の特徴や事例紹介に加え、各アプローチの特徴やメリット/デメリットをご紹介します！

「レスポンシブWebデザイン」 とは、PCやスマートフォン、タブレットごとにデザインやHTMLファイルを用意するのではなく、ブラウザの幅に合わせて表示するデザインを調整するマルチデバイス対応のアプローチです。
現在はデバイスごとにページを振り分ける方法が一般的ですが、 「レスポンシブWebデザイン」 ではHTMLファイルはそのまま利用し、CSS3のMedia Queriesを利用してスタイルシートだけでデザインを変更します。つまり、複数デバイス対応を1つのHTMLファイルで一括管理できる方法です。

現在スマートフォンやタブレット端末が多様化しているため、特定のデバイスのスクリーンサイズに合わせてレイアウトすると他の多くのデバイスに対応しきれない問題が発生します。
「レスポンシブWebデザイン」では何pxのウインドウサイズを境にデザインを切り替えるのかでデザインを行うため、柔軟に対応することができます。

※スマートフォンやタブレット端末で不要なコンテンツは非表示にできます。スマートフォンでの閲覧を考慮し、まずはスマートフォン端末用にコンテンツを作成していくことが必要になります。

アイデアマンズサイトでは、320px(スマートフォン)・768px(タブレット端末)・960px(PC)の3段階でレイアウト変更されるようにデザインされています。
こちらは元々スマートフォンサイト対応を想定されたサイトではありませんが、レスポンシブWebデザインの採用によりスムーズなマルチデバイス対応を実現しました。ブラウザサイズの横幅を切り替えてみてください！

●アイデアマンズ会社サイト
http://www.ideamans.com/

サイドメニューがページ下に移動し、スマートフォンやタブレット端末で閲覧しやすいようにレイアウトが切り替わります。
既存サイトへの導入のため、デザインレイアウトの自由度は下がりますが、各デバイス対応サイトを新規作成するよりも少ないコスト・工数でサイト構築できます。

アイデアマンズでは、サイト構成に合わせて様々なアプローチでマルチデバイス対応のウェブサイトの構築を行っています。代表的な手法とともに、それぞれのアプローチのメリット/デメリットをご紹介します。

1: デバイスごとにウェブサイトを制作する

PCやスマートフォン、タブレット等のデバイスごとにデザイン/htmlファイルを用意する方法です。CMSを導入する場合は、デザインテンプレートをデバイスごとに用意する方法がこちらにあたります。
各デバイスごとに自由にデザイン/コンテンツを作成でき、もっともユーザーに合わせたコンテンツを提供する方法です。

2:PCサイトまたは携帯サイトをスマートフォン閲覧対応する

PCまたは携帯サイトをベースに、各デバイスへ閲覧対応する方法です。デバイスごとのコンテンツの最適化はできませんが、最も低コストに各デバイスへの閲覧対応を行うことができます。 apple inc,サイトのように、PCサイトをスマートフォンで閲覧す ることを考慮したデザインアプローチにより、各デバイスへの閲覧最適化も可能です。

3:デバイスサイズごとに表示を切り替える(レスポンシブWebデザイン)

PCやスマートフォン、タブレットごとにデザインやhtmlファイルを用意するのではなく、ブラウザの幅に合わせて表示するデザインを調整するマルチデバイス対応のアプローチです。 現在はデバイスごとにページを振り分ける方法が一般的ですが、HTMLはそのまま利用し、CSS3のMedia Queriesを利用してスタイルシートだけでデザインを変更します。

レスポンシブWebデザインを導入したWebサイト制作、CMS開発について、ご不明な点、確認したい点がございましたら、遠慮なくお尋ね下さい。

メールフォームでお問い合わせ

• お問い合わせフォーム

お電話でお問い合わせ

• 03-6416-3300