Dreamweaverで学べるBootstrapの超基本!第0回 「レスポンシブデザインを始める理由」

連載

Dreamweaverで学べるBootstrapの超基本!

1. インターネット利用の約半分がスマートフォン

最近は手元のスマホでWebにアクセスという人を良く見かけますね。ニールセン社の調査によると、2014年の日本におけるインターネット平均月間利用者数は、PCが約5210万人、スマートフォンが4260万人となっています。昨年は、インターネットユーザーの約45%がスマートフォンユーザーでした。

2013年からの伸び率を比べると、PCはー8%と微減、一方スマートフォンは+34%と一年間で急速に増加しています。この勢いなら、2015年は逆転の年になるでしょう。サイトのモバイル対応が訪問者の満足度に与える影響はますます大きくなりそうです。

2. 採用実績の増加と便利なフレームワーク

q5
アドビの調査「モバイル対応企業の82%がレスポンシブを採用」 によると、モバイル対応したサイトを運用中または制作中の企業の8割以上がレスポンシブデザインのサイトを採用しています。登場から5年が経過して、レスポンシブデザインは既にモバイル対応の現実的な選択肢のひとつとなったようです。

その理由としては、BootstrapやFoundationといったフレームワーク、あるいはSass/Lessの存在が挙げられるでしょう。これらの技術が成熟するにつれ、レスポンシブデザインは効率的に、かつ安心して採用できるテクニックになりました。

3. モバイルSEOへの対策が必要に

2015年4月21日からグーグル検索に変更が行われました。これにより、SEOの観点からも、サイトのモバイル対応が無視できなくなっています。

新しい検索結果では、スマートフォンから検索すると、モバイル対応しているページがより上位に表示されます(参考記事「Rolling out the mobile-friendly update」)。モバイルユーザーの総合的な利便性の向上を目的とする変更です。

検索ランキングに影響するということで、新規サイトはもちろん、既存サイトについても、モバイル対応は急務になったと考えられます。レスポンシブデザインのサイトならば、ひとつのページがPCにもモバイルにも対応するためSEO対策の手間が余分にかかりません。

4. 充実する開発環境

2015年6月公開のDreamweaver CCはBootstrapをサポート、レスポンシブなWebサイトの制作に対応しました。ビジュアル開発環境とフレームワークの相性は抜群です。ブロックを組み上げる感覚でレスポンシブデザインのレイアウトを配置できます。

dw-responsive_websites

使い方を紹介するビデオが公開されていますので是非ご覧ください。 [Dreamweaver CCでレスポンシブなWebサイトを構築する]

__
Dreamweaver体験版ダウンロード

__
チュートリアルビデオを視聴

目次

    1. レスポンシブデザインの理由
    2. 必要なファイルを揃える
    3. 最低限必要なHTMLコード
    4. メディアクエリの指定を確認
    1. コンテナ(Container)を配置
    2. 行と列から作成するグリッド
    3. カラムの並べ方のルール
    4. カラムの位置や順序の指定
    5. 表示幅に応じたレイアウト
    1. フォントの大きさや配置を指定
    2. リンクとボタン
    3. レスポンシブ画像の使い方