WordPressのCocoon利用中でスマホ対応したい
今回ご紹介する事例は、下記のようなお問い合わせ内容です。
お問い合わせ内容
パソコンからの受注よりも、スマホからのお問い合わせが増加していることが予測されるため、現在のホームページをスマホ対応にしていただきたいと思います。
現在、WordPressのCocoonテーマを利用中ですが、自分でスマホ対応する方法をインターネットで調べてみましたが、どうも難しくて出来そうにないので、代行をお願いします。(スマホでも見やすくしたいです。)
ユーザーからのお問い合わせをいただくために、電話番号を表示しているので、その電話番号をタップした際に、発信画面に切り替わるような仕様にもしていただきたいです。
以上、お手数ですがお願いいたします。
※「スマホ対応」とは、別名「レスポンシブWebデザイン」とも呼ばれており、パソコンやスマートフォン、タブレットなどのさまざまな画面サイズにおいても、サイト表示を柔軟に調整し、どんな機器でも見やすく最適な表示ができることを意味します。
テレコム東京の対応
上記のお客様のケースで、弊社では下記のような対応をさせていただきました。
実際の対応
まずは、下記情報をお客様からお聞きしました。
- WordPressのログイン情報
- FTPのログイン情報
今回WordPressをスマートフォン対応(レスポンシブ対応)させていただくにあたり、お客様とお打ち合わせを行ったところ、下記のような仕様で代行させていただくことになりました。
- モバイルファーストでコーディング
- スマートフォンのブレイクポイントは、最小幅320pxで確認
- タブレットのブレイクポイントは600px
- PCのブレイクポイントは1,025px
- スマホでタップした時のみ、電話発信を有効にする
※レスポンシブWebデザインでの「ブレイクポイント」とは、画面幅に合わせてデザイン表示が切り替わる画面幅のポイントのことです。
ブレイクポイントを設定することによって、各デバイスに適した見やすいホームページを実現します。
弊社では、主に下記の作業内容でご依頼内容の実現ができました。
- サイト内調査(既存の仕様・システム確認などを含む)
- 仕様確認・お打ち合わせ
- WordPress管理画面よりCocoonテーマの編集
- スタイルシートCSSにレスポンシブデザイン用のmedia screen情報を追記
- デザイン確認・調整
- ファイルを更新
- タップコール設定(電話番号のHTMLタグを編集)
- PCおよびスマホで動作確認
- 最終確認を行い、作業完了
- 30日間の無料保証サポート
このケースの見積もり金額
今回ご紹介したケースの場合、弊社では8万円(税別)にて対応いたしました。
業者によって設定されている価格が異なり、同じ作業内容であっても高額な見積もりを出される場合もありますので、依頼先を検討する際には必ず他社見積りを取りましょう。
今回ご紹介したようなケース以外にもホームページのことでお困りの場合は、お気軽に弊社までお問い合わせください。
弊社にお問い合わせいただく70%は、専門知識を持たれていない読者様からです。
わかりやすい言葉でご説明させていただくように心がけておりますので、お気軽にご相談くださいね。
下記の画像をクリックしていただくと、無料診断フォームに遷移します。
関連記事