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 をスマートフォンに対応させる正しい方法を学ぼう

Education