PC・スマホ両対応 レスポンシブWeb


レスポンシブWebなら手間なくスマホに対応。

別途スマホ用のサイトを作る苦労も更新の2度手間もありません!

レスポンシブWebとは、スマホ専用のサイトを作らなくても、様々なサイズの閲覧環境に合わせて自動で調整してくれるWebサイトのこと。PC用とスマホ用と個別にサイトを用意する必要がなく、作成するサイトは1つなので、サイト制作も更新作業もひとつで済むのが利点です。レスポンシブWebに対応したテンプレートを使えば、とても簡単に始められます。

PC・スマホ両対応

表示サイズを自動で調整してくれるので、制作&更新が効率よくできます

高いデザイン性

デザインされたテンプレートの写真や文字を入れ替えるだけだから迷わずカンタン

PC・スマホで違う設定も

スマホの表示とPCの表示を出しわけることもでき、思い通りのサイトが作れます


作り方はかんたん

1. テンプレートを選ぶ

レスポンシブ対応テンプレートから、作りたい内容と合ったものを選ぶ

2. 見比べながら制作

PCとスマホで表示を切り替えて、見比べながら、サイトを作成

3. 更新もらくらく

完成後の更新も管理するサイトがひとつだから効率よく作業できる


PC・スマホ両方から、見やすいサイトを作るコツ

PCからもスマホからも見やすいレスポンシブWebサイトを作るには、情報量をそれぞれに最適化することが必要です。スマホは表示領域が小さく、最初のページで表示可能な情報量にも差があるので、内容が伝わらず読み飛ばされてしまう可能性があるからです。

BiNDならできます
スマホ表示のレイアウトにこだわりたい

BiNDはブロック単位で、PCとスマホのレイアウトを変えられます。スマホ表示でもっと枚数を見せたい、1枚の写真を大きく見せたいといったこだわりも実現可能です。
目的に合わせてスマホ表示のレイアウトを変えられます

目的に合わせてスマホ表示のレイアウトを変えられます

BiNDならできます
PCとスマホで情報を出しわけたい

PCでは全文掲載、スマホでは短いバージョンの文章を表示といった設定も可能。スマホでは本文を隠して見出しだけといった細かいカスタマイズができます。

PC用とスマホ用で異なる内容のブロックを2つ作り、表示の有無を選択すればOK

従来のBiNDで作ったサイトを、レスポンシブWebにする
 
レスポンシブWeb対応のウェブサイトと、BiND7以前で作成したサイトは、サイトの構造が大きく違います。そのため、基本的には従来のBiNDで作ったサイトは新たにレスポンシブ対応テンプレートでサイトを作り直すことをおすすめします。ですが、従来のBiNDで作成したサイトをレスポンシブ形式に切り替えることも可能です。ただしテーマの設定が引き継がれないことやデザインが崩れることがありますので、その場合は各種設定を見直しましょう。
 
既存サイトからの移行方法はデザイン形式の変更が基本
サイト設定のデザイン形式を「レスポンシブ」に変更すればOK。サイトのレイアウトによってはレスポンシブにしたときに崩れたように見えることがあるので、その場合は、ページのエリアやブロックの横幅、余白、CSS詳細設定を調整しましょう。
※あらかじめバックアップを取ってから実行してください

公式オンラインショップ〈DSストア〉なら