WordPress をスマートフォンに対応させる正しい方法を学ぼう

パソコン版のホームページが
スマートフォンでも表示されちゃうあなたへ
WordPressをスマートフォンに
対応させる正しい方法を学ぼう
1

Copyright©2014 DREAMHIVE CO., LTD. All rights reserved.
あなたのサイトはこんな状態ではありませんか？
はじめまして。
株式会社ドリームハイブ代表取締役の山本悟と申します。
弊社は時短をコンセプトに、これまで500以上もの
会社の業績を向上させるためのシステム制作をしてきました。
その数多くの制作の中でわかったことのひとつに、
集客を失敗している会社のサイトはこんな状態だったのです・・・
？スマートフォンで見ているのにパソコン用の画面が表示されている
？パソコン用とスマートフォン用のコンテンツの関連がない
2
せっかくのアクセスをムダにしている

アクセスをムダにしないためのポイントとは？
 スマートフォンの対応方法には複数あることを知ること
 あなたのサイトに適した方法で対応すること
3

このセミナーでは次のような効果が期待できます
 たくさんあるデバイスできちんと表示できる
 メルマガ登録のフォームなどを表示できる
 ソーシャルメディアへのリンクを設置できる
 スマートフォンのお気に入りへ設置してもらう際のアイコ
ンの設定を指定できる
 スマートフォンの表示画面のカラーカスタマイズができる
4
それでは早速
WordPressでアクセスを活用するための
スマートフォン対応を実践しましょう

スマートフォンからのアクセスに対応するメリット
• ウェブサイトは、基本的にどのデバイスからアクセスされて
も同じデザインを表示するようになっている
→ 画面が小さければ一度に一覧できる情報も少なくなる
→ アクセスしたユーザーは、見づらければ見ないし読まない
• スマートフォンに対応すれば、スマートフォンに適したかた
ちで表示されるので、アクセスしたユーザーのストレスが減
る
5
アクセスしてきた
デバイスに応じて
自動的に表示を変える
PC用デザイン
携帯用デザイン

デバイスとは？
デバイスとは、ホームページを見ることができる機械のこと
• パソコン
– Internet Explorer
– Google Chrome
– Firefox
• ガラケー
– 標準ブラウザ
– フルブラウザ
• スマートフォン(スマホ)
– iPhone
– Android
– Windows Phone
– Blackberry
• タブレット
– iPad
– Androidタブレット
– Windowsタブレット
6

ウェブサイトがスマートフォンに対応する方法
• 1) レスポンシブウェブデザイン
– 同じURL、同じHTMLですべてのデバイスに対応する方法です。
– スクリーンの大きさに応じてウェブページのデザインを変化させる技術(CSS3の
メディアクエリー)を利用します。
– 参考：Media Quieries http://mediaqueri.es/
• 2) 動的な配信
– 同じURLでも異なるHTMLを用いて各デバイスに対応する方法です。
– ブラウザが送ってくるUSER-AGENTという情報に応じてデザインを変化させる
ように、サーバー側で設定します。
• 3) モバイル向けの別URL
– 異なるURLかつ異なるHTMLで各デバイスに対応する方法です。
– デバイスごとに別のURLを用意して、アクセスしてきたデバイスに合わせて自動
的にリダイレクト(転送)させるか、ユーザーに別のURLがあることを促します。
Google はレスポンシブウェブデザインを推奨しています
7

1) レスポンシブウェブデザインの特徴
• レスポンシブウェブデザインのメリット
– コスト面で有利な場合が多い
– 更新が必要なファイル数が少ない
– URLの問題が発生しづらい
• Google Analyticsなどの解析ツール
• レスポンシブウェブデザインのデメリット
– ブラウザの表示の拡大・縮小でも動作してしまう
– スマホでパソコンのレイアウトを確認できない
– 制作期間がかかる
– ユーザーの利用シーンがデバイスによって違う場合は無益
– IE8では動かない

2) 動的な配信の特徴
• 動的な配信のメリット
– 各デバイスに最適なデザイン・レイアウトを提供できる
– デザイン・レイアウトの柔軟性が高い
– URLの問題が発生しづらい
• 動的な配信のデメリット
– 動的な配信を行う設定やプログラムが必要
– 各デバイス用のデザインを別途作成するのでコストが発生する
– 制作期間がかかる

どうするのが良い？
あなたのサイトは
何で作るべきなのか？
デザインの統一性を図るなら
→ レスポンシブウェブデザイン
デバイスごとに調整したいなら
→ 動的な配信
いずれにせよ
WordPressをカスタマイズする

WordPressでスマートフォンに対応する方法
1. テーマで対応する
– WordPressには、デザインやレイアウトを変更するための「テーマ」と
いう機能があります。
– インターネットではたくさんのテーマが公開されているので、スマート
フォンに対応したものを適用する方法です。
– 1) レスポンシブウェブデザイン、を利用しています。
2. テーマを作る
– レスポンシブウェブデザインでテーマを自作する方法です。
3. プラグインを利用する
– WordPressの機能を拡張するプラグインには、スマートフォンからのア
クセス時にスマートフォン専用のデザインを表示するものがあります。
– 例)WPTouch
– 2) 動的な配信、を利用しています。
今回は、テーマとプラグインの2つの方法をお伝えします

レスポンシブウェブデザイン
• テーマで対応する
– 設定の手順
1. WordPressの管理画面にログイン
する
2. 「外観」メニュー、「新規追加」
ボタン
3. 「特徴フィルター」を選択
4. 「レイアウト」グループの「レス
ポンシブレイアウト」にチェック
5. 「フィルターを適用」ボタン
6. 利用したいテーマを「インストー
ル」する

プラグインのインストール
• WPtouch
– http://www.wptouch.com/
– 特徴
• 読み込み速度が速い
• タッチに対応している
• CSS3とベクトルアイコンで構成され
ている
• ビジュアルエフェクトがある
• 有料でキャッシングや機能の拡張が
可能
– インストール手順
1. WordPressの管理画面にログインす
る
2. 「プラグイン｜新規追加」メニュー
3. 「WPtouch」で検索、インストール、
有効化

WPtouchの設定
• Core Settings
– General
• Site Title & Byline：サイトのタイトル、フッターから「Powered by」を削除
• Display Mode：テーマの適用方法の設定
• Landing Page：最初に表示するページの指定
• Custom Code：メルマガ登録フォームやJavaScriptなどを埋め込む
例)<div style=“border:3px solid red;”>ここがカスタムコード</div>
– Compatibility
• Shortcodes：利用しないショートコードを指定
• Ignored URLs：指定したURLでWPtouchのデザインを適用しない
• Theme Settings
– General
• Blog：投稿一覧の表示数、指定カテゴリ・タグページの非表示設定、など
• Featured Slider：ヘッダーにスライダーを表示する(アイキャッチ画像が必要)
– Branding
• Theme Colors：テーマの色設定
• Site Logo：サイトのタイトル画像
• Theme Footer：フッターにメルマガ登録フォームなどを埋め込む
例)<div style=“border:3px solid blue;”>ここがフッター</div>
• Sharing：画面上にある投稿の共有ボタンの表示・色の設定
• Footer Social Links：自分のSNSへのリンク設定
– Bookmark Icons
• Icon Title：ブックマークに登録されるときの文字列
• Menus
– Theme Menus
• Header Menu：どのメニューを表示するかの設定
– Menu Setup
• メニューに割り当てるアイコンの設定

まとめ
 スマートフォンの対応方法には複数あることを知ること
– レスポンシブウェブデザイン
– 動的な配信
– モバイル向けの別URL
 あなたのサイトに適した方法で対応すること
– テーマによる対応
– プラグインによる対応
15
WordPressをスマートフォンに対応させる正しい方法、とは？
せっかくのアクセスをムダにしないこと！

WordPress をスマートフォンに対応させる正しい方法を学ぼう

Recommended

Recommended

More Related Content

What's hot

What's hot (10)

Viewers also liked

Viewers also liked (20)

Similar to WordPress をスマートフォンに対応させる正しい方法を学ぼう

Similar to WordPress をスマートフォンに対応させる正しい方法を学ぼう (20)

More from DREAMHIVE CO., LTD.

More from DREAMHIVE CO., LTD. (9)

WordPress をスマートフォンに対応させる正しい方法を学ぼう