モバイルフレンドリー化の流れと手順


モバイルフレンドリー化の流れと手順

モバイルフレンドリー化の流れと手順

このページでは、ホームページのモバイルフレンドリー化サービスのご利用にあたっての「モバイルフレンドリー化の流れと手順」をお伝えさせていただきます。

京都のWeb制作会社(ホームページ制作会社)株式会社ファンフェアファンファーレでは、モバイルフレンドリーに対応していないホームページ(ウェブサイト)をお持ちの方向けに、静的HTMLサイトやモバイルフレンドリー未対応のWordPressテーマなどを「モバイルフレンドリー対応サイトへ」と変更させていただくサイトカスタマイズサービスを提供しております。

ホームページのモバイルフレンドリー化にあたり、実作業としては以下の手順で作業を進めてまいります。

  1. ホームページをレスポンシブレイアウトへの変更
  2. 各ページ内部のテーブル、グローバルメニューなどの整形
  3. ホームページ内に設置されたリンク同士の距離の適正化

現状のホームページを確認させていただいてからのお見積、モバイルフレンドリー化着手となりますので、まずは現在ご利用のホームページのURLを添えて、弊社お問い合わせフォームよりご連絡くださいませ。

外部からのサイト参照では確認できない点がある場合は、お見積りの際にFTP接続情報などをお伺いする場合があります。予めご了承ください。

ホームページのモバイルフレンドリー化サービス
ご利用の流れ

ホームページのモバイルフレンドリー化サービスご利用の流れ

まずは、弊社お問い合わせフォームより、お問い合わせ内容 「モバイルフレンドリーお見積り」をご選択の上、メッセージ本文に「モバイルフレンドリー化の対象ホームページ(ウェブサイト)のURL」を添えてお問い合わせください。

お問い合わせ・お見積りのご依頼いただきました後、現状のホームページ(ウェブサイト)の構造を把握するため、ご送信いただきましたホームページ(ウェブサイト)を参照し、ご確認させていただきます。

万が一「レイアウト崩れなどを起こしているページ」などがございましたら、お問い合わせ時に該当ページのURLを添えていただければ幸いです。

現状のホームページのご確認

現状のホームページのご確認 モバイルフレンドリー

ご送信いただきましたホームページのトップページに設置されているリンク先(内部リンク)などを確認させていただき、同一ドメイン下に設置されているページを調査させていただきます(原則、本サービスのご利用はドメイン単位とさせていただいております)。

ホームページのサイトボリュームによって、現状確認に数営業日かかる場合がありますことを予めご了承ください。

現状のホームページの確認、サイト分析完了後、簡単なご質問事項を添えて「お見積額」を提示させていただきます。

対象となる範囲を確定

モバイルフレンドリー 修正対象範囲確定

メインとなるホームページの構造の他、サブディレクトリにCMSを設置されているケースなど、同一ドメイン下に設置されているページが、それぞれ異なる様々なレイアウトになっている場合、お見積額が高額になるケースがございます。

なお、原則、サブドメインに設置されているホームページにつきましては、別件扱いとしてお取り扱いさせていただいております。

ホームページの構造が複雑な場合は、場合によっては、ホームページ全体のCMS化(WordPress化)の方が、予算が抑えられるケースがありますので、お見積額提示の際に合わせてご案内させていただいております。

カスタマイズ範囲とお見積額がご予算に合えば、制作(カスタマイズ)を開始させていただきます。

カスタマイズに必要な情報のご提供

モバイルフレンドリー カスタマイズ 必要情報提供

ホームページのモバイルフレンドリー化サービスをご利用の際には、ホームページのファイルを操作できるようにFTP情報やCMSのログイン情報など、ホームページ(ウェブサイト)のカスタマイズに必要な情報をお知らせいただくか、ウェブサイト全体の構成ファイルを弊社までご送信ください。

該当ファイルのカスタマイズ完了後、FTPで直接カスタマイズさせていただいた場合はメールなどでご連絡を、ファイルを送信いただいた場合は、修正ファイルを圧縮ファイルでお送りいたします。

モバイルフレンドリー化の納期

モバイルフレンドリー化サービスの納期は、必要な情報をご送信いただいた日の翌営業日から数えて3営業日です。ただし、ホームページの構造が複雑な場合や、サイトボリュームによっては、納期まで日数を要する場合があります。

概ね 3営業日

(制作開始からの最短日数)

※ホームページ(ウェブサイト)の構造により、納品までの日数が延びることがあります。その際は、予めご連絡させていただきます。

詳しくはお問い合わせフォームより、お問い合わせください。

モバイルフレンドリー化の手順

モバイルフレンドリー化の手順

ホームページのモバイルフレンドリー化の手順は、①レスポンシブレイアウトへの変更、②ページ内部のテーブル、グローバルメニューなどの整形、③リンク距離の適正化などの順にカスタマイズさせていただきます。

  1. ホームページをレスポンシブレイアウトへの変更
  2. 各ページ内部のテーブル、グローバルメニューなどの整形
  3. ホームページ内に設置されたリンク同士の距離の適正化

レスポンシブレイアウトへの変更

レスポンシブレイアウトへの変更 モバイルフレンドリー

まず、ホームページ全体のレイアウト構造を、モバイル端末からのアクセス時に変更する「レスポンシブレイアウト」へと変更させていただきます。

レスポンシブレイアウト(レスポンシブデザイン)は、パソコンからホームページにアクセスした場合は、「本文カラムとサイドバー」といったように、左右に分割された2カラムレイアウトで表示されるホームページに、スマートフォンなどからアクセスした場合には、「1カラムレイアウト」として表示するレイアウトです。

このレスポンシブレイアウトは、2分割されていたレイアウトを、「横幅いっぱいに表示」し、上下に振り分けます。本文カラムを横いっぱいに表示したその下に、サイドバー部分を横幅いっぱいに表示するといった、「デバイスごとのレイアウト変更」を実装したウェブデザインです。

静的HTMLホームページの場合はこのレスポンシブレイアウトへの変更にあたり、各々のHTMLの要素にID付やClass付、ビューポートの設定などをしていく必要が生じるケースがあり、この場合は費用が高額になるケースがあります。

また、レスポンシブ未対応のWordPressテーマをレスポンシブレイアウトへと変更させていただくことも可能です。

ホームページ(ウェブサイト)のレスポンシブ化

レイアウト崩れなどを起こしているページの同時修正

レイアウト崩れページ同時修正 モバイルフレンドリー

次に、ホームページの中で、レイアウト崩れなどを起こしているページがある場合、レスポンシブレイアウトへの変更と合わせて修正させていただきます。

レイアウト崩れなどを起こしている問題があるページの同時修正は、モバイルフレンドリー化サービスの基本料金に加えて別途費用を申し受ける場合がありますことを予めご了承ください。

事前にご連絡いただいていた場合は、別途費用の有無をお見積に掲載させていただきます。

ページ内部のテーブルなどの要素、グローバルメニューなどの整形

ページ内部 テーブル 要素 グローバルメニュー 整形 モバイルフレンドリー

ホームページの基本レイアウトのレスポンシブレイアウトへの変更が完了したのち、本文カラム内などに設置されているテーブルや、分割されたブロック要素をレスポンシブ化させていただきます。

また、同時にスマートフォン端末からの閲覧に適さないグローバルメニューなどの整形も行います。

ホームページがHTMLのテーブルを多く利用した仕様で設計されている場合、モバイルフレンドリー化には根本的なページテンプレートの変更が必要な場合があります。

リンク距離の適正化

リンク距離の適正化 モバイルフレンドリー

ホームページの基本レイアウト、ページ内部の要素のレイアウトのモバイルフレンドリー化が完了した後、スマホアクセス時の誤タップを防ぐためのリンク距離の適正化などの調整をさせていただきます。

ページ内のテキストリンクや画像リンクの状態を確認し、リンク同士の距離が近すぎてスマートフォン表示の際にタップの原因となっている場合は、こうしたリンクの調整を行い、モバイルフレンドリーに対応したホームページへと変換させていただきます。

なお、コンテンツページ内部のリンクにつき、個別の調整が必要なケースではモバイルフレンドリー化にかかる費用が高額になるケースがあります。

モバイルフレンドリー化の完了

モバイルフレンドリー化の完了

これらモバイルフレンドリー化の作業が完了後、「モバイルフレンドリーテスト」を行い、テストに合格した際にモバイルフレンドリーカスタマイズ完了とさせていただき、作業完了のご連絡させていただきます。

なお、静的HTMLサイトのモバイルフレンドリー化では、WordPress化などのサービスのほうが費用がお安くなるケースもあります。詳しくはソース詳細の確認後になりますので、現状のホームページのURLを添えてお問い合わせフォームよりお見積のお問い合わせをお願いいたします。

モバイルフレンドリー(スマートフォン最適化)

ホームページ制作 京都のWeb制作会社
株式会社ファンフェアファンファーレ

ホームページ制作、サイトカスタマイズなどのお問い合わせ・Web制作のご依頼はこちら