wordpress をスマートフォンに対応させる正しい方法を学ぼう
Post on 21-Jun-2015
228 Views
Preview:
DESCRIPTION
TRANSCRIPT
パソコン版のホームページがスマートフォンでも表示されちゃうあなたへ
WordPress をスマートフォンに
対応させる正しい方法を学ぼう
1
Copyright©2014 DREAMHIVE CO., LTD. All rights reserved.
あなたのサイトはこんな状態ではありませんか?
はじめまして。
株式会社ドリームハイブ代表取締役の山本悟と申します。
弊社は時短をコンセプトに、これまで 500 以上もの
会社の業績を向上させるためのシステム制作をしてきました。
その数多くの制作の中でわかったことのひとつに、
集客を失敗している会社のサイトはこんな状態だったのです・・・
? スマートフォンで見ているのにパソコン用の画面が表示されている
? パソコン用とスマートフォン用のコンテンツの関連がない
2
せっかくのアクセスをムダにしている
Copyright©2014 DREAMHIVE CO., LTD. All rights reserved.
アクセスをムダにしないためのポイントとは?
スマートフォンの対応方法には複数あることを知ることあなたのサイトに適した方法で対応すること
3
Copyright©2014 DREAMHIVE CO., LTD. All rights reserved.
このセミナーでは次のような効果が期待できます
たくさんあるデバイスできちんと表示できるメルマガ登録のフォームなどを表示できるソーシャルメディアへのリンクを設置できるスマートフォンのお気に入りへ設置してもらう際のアイコ
ンの設定を指定できるスマートフォンの表示画面のカラーカスタマイズができる
4
それでは早速WordPress でアクセスを活用するための
スマートフォン対応を実践しましょう
Copyright©2014 DREAMHIVE CO., LTD. All rights reserved.
スマートフォンからのアクセスに対応するメリット
• ウェブサイトは、基本的にどのデバイスからアクセスされても同じデザインを表示するようになっている→ 画面が小さければ一度に一覧できる情報も少なくなる→ アクセスしたユーザーは、見づらければ見ないし読まない
• スマートフォンに対応すれば、スマートフォンに適したかたちで表示されるので、アクセスしたユーザーのストレスが減る
5
アクセスしてきたデバイスに応じて自動的に表示を変える
PC 用デザイン
携帯用デザイン
Copyright©2014 DREAMHIVE CO., LTD. All rights reserved.
デバイスとは?
デバイスとは、ホームページを見ることができる機械のこと• パソコン
– Internet Explorer– Google Chrome– Firefox
• ガラケー– 標準ブラウザ– フルブラウザ
• スマートフォン ( スマホ )– iPhone– Android– Windows Phone– Blackberry
• タブレット– iPad– Android タブレット– Windows タブレット
6
Copyright©2014 DREAMHIVE CO., LTD. All rights reserved.
ウェブサイトがスマートフォンに対応する方法
• 1) レスポンシブ ウェブ デザイン– 同じ URL 、同じ HTML ですべてのデバイスに対応する方法です。– スクリーンの大きさに応じてウェブページのデザインを変化させる技術 (CSS3 のメ
ディアクエリー ) を利用します。– 参考: Media Quieries http://mediaqueri.es/
• 2) 動的な配信– 同じ URL でも異なる HTML を用いて各デバイスに対応する方法です。– ブラウザが送ってくる USER-AGENT という情報に応じてデザインを変化させるよう
に、サーバー側で設定します。
• 3) モバイル向けの別 URL– 異なる URL かつ異なる HTML で各デバイスに対応する方法です。– デバイスごとに別の URL を用意して、アクセスしてきたデバイスに合わせて自動的
にリダイレクト ( 転送 ) させるか、ユーザーに別の URL があることを促します。
Google はレスポンシブ ウェブ デザインを推奨しています
7
Copyright©2014 DREAMHIVE CO., LTD. All rights reserved.
1) レスポンシブ ウェブ デザインの特徴
• レスポンシブ ウェブ デザインのメリット– コスト面で有利な場合が多い– 更新が必要なファイル数が少ない– URL の問題が発生しづらい
• Google Analytics などの解析ツール
• レスポンシブ ウェブ デザインのデメリット– ブラウザの表示の拡大・縮小でも動作してしまう– スマホでパソコンのレイアウトを確認できない– 制作期間がかかる– ユーザーの利用シーンがデバイスによって違う場合は無益– IE8 では動かない
Copyright©2014 DREAMHIVE CO., LTD. All rights reserved.
2) 動的な配信の特徴
• 動的な配信のメリット– 各デバイスに最適なデザイン・レイアウトを提供できる– デザイン・レイアウトの柔軟性が高い– URL の問題が発生しづらい
• 動的な配信のデメリット– 動的な配信を行う設定やプログラムが必要– 各デバイス用のデザインを別途作成するのでコストが発生する– 制作期間がかかる
Copyright©2014 DREAMHIVE CO., LTD. All rights reserved.
どうするのが良い?
あなたのサイトは何で作るべきなのか?
デザインの統一性を図るなら→ レスポンシブ ウェブ デザイン
デバイスごとに調整したいなら→ 動的な配信
いずれにせよWordPress をカスタマイズする
Copyright©2014 DREAMHIVE CO., LTD. All rights reserved.
WordPress でスマートフォンに対応する方法
1. テーマで対応する– WordPress には、デザインやレイアウトを変更するための「テーマ」と
いう機能があります。– インターネットではたくさんのテーマが公開されているので、スマート
フォンに対応したものを適用する方法です。– 1) レスポンシブ ウェブ デザイン、を利用しています。
2. テーマを作る– レスポンシブ ウェブ デザインでテーマを自作する方法です。
3. プラグインを利用する– WordPress の機能を拡張するプラグインには、スマートフォンからのア
クセス時にスマートフォン専用のデザインを表示するものがあります。– 例 )WPTouch– 2) 動的な配信、を利用しています。
今回は、テーマとプラグインの 2 つの方法をお伝えします
Copyright©2014 DREAMHIVE CO., LTD. All rights reserved.
レスポンシブ ウェブ デザイン
• テーマで対応する– 設定の手順
1. WordPress の管理画面にログインする
2. 「外観」メニュー、「新規追加」ボタン
3. 「特徴フィルター」を選択4. 「レイアウト」グループの「レス
ポンシブ レイアウト」にチェック5. 「フィルターを適用」ボタン6. 利用したいテーマを「インストー
ル」する
Copyright©2014 DREAMHIVE CO., LTD. All rights reserved.
プラグインのインストール
• WPtouch– http://www.wptouch.com/– 特徴
• 読み込み速度が速い• タッチに対応している• CSS3 とベクトルアイコンで構成さ
れている• ビジュアルエフェクトがある• 有料でキャッシングや機能の拡張が可能
– インストール手順1. WordPress の管理画面にログイン
する2. 「プラグイン|新規追加」メニュー3. 「WPtouch」で検索、インストー
ル、有効化
Copyright©2014 DREAMHIVE CO., LTD. All rights reserved.
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
• メニューに割り当てるアイコンの設定
Copyright©2014 DREAMHIVE CO., LTD. All rights reserved.
まとめ
スマートフォンの対応方法には複数あることを知ること– レスポンシブ ウェブ デザイン– 動的な配信– モバイル向けの別 URL
あなたのサイトに適した方法で対応すること– テーマによる対応– プラグインによる対応
15
WordPress をスマートフォンに対応させる正しい方法、とは?
せっかくのアクセスをムダにしないこと!
top related