あなたのウェブサイトのモバイル版を作る方法

あなたのウェブサイトのモバイル版を持つことは、今日では絶対必要であり、あなたのウェブプロジェクトをモバイルデバイスからアクセス可能にする唯一の確実な方法です。 だから、あなたがウェブサイトを起動しようとしている場合は、それを成功させるためにこの問題を考慮に入れることがバインドされています。 すでにウェブサイトを持って、それがモバイルに優しいようにするためにそれを更新したいですか？ 以下に提供される情報は、同様にあなたに便利になります。

今日モバイルサイトを開始するには、いくつかの方法があります。 最も適した解決の選択はウェブサイトのタイプのような複数の要因に、年齢および特徴、あなた自身の網の設計目的、技術および条件左右される。 最も普及している解決策は次のとおりです:

• ユーザーがデスクトップとモバイルデバイスから同じwebサイト（特別なCSS関連のルールに関しては異なる表示）を訪問したときのレスポンシブデザインの;
• 独立したモバイルウェブサイトのバージョンモバイル専用のアプローチに基づいて、一貫して動作し、異なるドメイン/サブドメインでホストすること

これらのオプションのいずれかが、モバイルウェブサイトの作成に最適です。 それは最も適した解決を選ぶためにだけ所有者まである。 のは、今のモバイルプロジェクト開発の最も広範な（そして最も便利な）方法を見てみましょう。

ウェブサイトのモバイル版を作る方法（ウェブサイトビルダー）

まだウェブサイトを持っていない場合は、レスポンシブデザインサポートが付属している、および/または独立した統合されたモバイルエディタを備えたサービスを選ぶのが理にかなっています。 これらのプラットフォームは、主にモバイルフレンドリーなウェブサイトの開発のために作成され、したがって、彼らは最初にすべてのブロック、ウィジェ その結果、彼らと一緒に構築されたプロジェクトは、別のモバイル版を作成する必要なく、デスクトップやモバイル画面上で素晴らしい表示されます。 Wix website builderを使用してこのオプションを確認しましょう。

Wixは、ブログ、ポートフォリオ、ランディングページ、ビジネスウェブサイト、webストアなど、あらゆるタイプのwebプロジェクトを開始/管理できる世界的に人気のあるオールインワンSaaSウェブサイトビルダーです。 その豊富なギャラリーで利用可能なすべてのテンプレート（今ではここでそれらの550以上があります）だけでなく、ユーザーがゼロから作成したwebページは、自動的

ここではデスクトップとモバイルウェブサイトのバージョンを別々に設定することができますが、タブレットのプレビューオプションはまだあ ここでできることは、選択したブロックとインターフェイス要素を非表示にし、ここで一意の背景を変更/設定することです。 さらに、Wixには、次のような特定のモバイル関連の機能があります:

• クイック起動パネルの表示（電話ボタン、ソーシャルネットワーク/メッセンジャーへのリンクなどを追加することができます。 ここ）;
• “上へ”ボタン;
• ようこそ画面（あなたが実際にウェブサイトにアクセスする前に、感情的な挨拶を表示したり、ブランド/商標を導入することができますアニメーション

Wixには、プロフェッショナルなビジネスツールへのアクセスを含むサブスクリプションを取得した場合、webサイトを管理できるモバイルアプリも

モバイル版のCMSウェブサイト（WordPress）の作り方

他のCMSと同様に、WordPressはウェブサイトに到達するために使用されるデバイスに注意を払っていません。 プラットフォームは、デフォルト設定で指定されたデザインバリアントを提供するだけです。

WordPressはCMSの一つであり、管理パネルのデザインはモバイルデバイスに適応できるため、ここではweb開発者のサービスを強調することは理にかなっています（これは、訪問者だけでなく、モバイルデバイスのコンテンツを編集、設定、入力できる所有者にとっても便利であることを意味します）。 また、古典的なCMSのためだけでなく、クラウドのために適用されるスマートフォン用のアプリケーションがありますWordPress.com プラットフォームも同様です。

その結果、モバイルウェブサイト版は99％のケースでテンプレート自体のメリットであることが証明されました。 唯一の例外は、（例えば、画面の解像度やデバイスモデルに基づいて）別のモバイルテーマにユーザーをリダイレクトすることができ、特別なプラグインやス

WordPressでモバイルウェブサイト版をゼロから作成する方法

ウェブサイトを立ち上げることを計画しているだけなら、問題はそれほど深刻ではありません。 応答テーマの品揃えも、公式のCMSカタログで十分以上のものです。 選択したデザインが宣言された関数に絶対に準拠していることを確認する必要があります。 同じことがThemeForestやTemplateMonsterのような代替プラットフォームについてです。

ロードの速度と高いPageSpeed Insightsパラメータが本当に重要な場合は、Neveテーマのようなプロファイルテストで最大100ポイントを保証する特別なテンプ しかし、スマートフォンの画面に適応できないデザインは、これらの日は非常に普及していません。

WordPressのテンプレートをレスポンシブなものに置き換える方法

あなたはすでにかなり長い期間のためのウェブサイトを所有し、そのテンプレートが最初に大規模な画面形式に一致するように作成されて古くなっている場合は、古いウェブサイトデザインを新しいものに置き換える可能性を考慮する必要があります。 このようなアプローチにはいくつかの利点があります。:

• デスクトップとモバイルウェブサイトのバージョンは同じスタイルになります;
• 二つのインタフェースタイプを管理する必要がなくなります。
• ユーザーが別のデザインにリダイレクトしなければならない画面解像度とデバイスのタイプを定義するための複雑な関数やアルゴリズムを記述する必要はありません。
• 商用テーマは頻繁に技術サポートが付属しているため、すべての質問に対する回答を得ることができ、以前のものよりも悪くない新しいテーマを設定することができます。

テンプレートは、多くの場合、分析、カウンタ、広告ブロックなどの書かれたコードが付属しています。 それらの中には、別々のマテリアルタイプを導入するものもあり、これらすべての要素を新しいテンプレートに転送する必要があります。 すべての潜在的な間違いはサーチエンジンの結果の否定的な影響を有するかもしれない。 あなたが通常のユーザーを持っている場合、彼らはアイデアを好きではないかもしれないし、あなたのウェブサイ したがって、可能なすべてのニュアンスを考慮するために、今後の設計スイッチを徹底的に分析する必要があります。

古いテンプレートをレスポンシブにする方法

古いテンプレートをレスポンシブにするというアイデアは、最初に見えるほど複雑ではありません。 但し、それは実際にニッチの技術か少なくとも網の設計基本原則に欠けていればそれを試みる意味を成していない。 とにかく、常にそれを支援するwebデザイナーを雇う可能性があります。

主なアイデアは、必要な画面解像度に対してどのカスケードスタイルが特別に追加されるかに基づいて、CSSメディアクエリを追加することです。 今の例を見てみましょう:

@media screen and (max-width: 479px) {...These are style sheets that will be applied exclusively for screens,the width of which does not exceed 479 pixels, that is, for smartphonesin the portrait format... }@media screen and (min-width:480px) and (max-width:800px) {...CSS styles here will be developed for screens with the width from480 up to 800 pixels, for example, on smartphones with horizontal screen position...}@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {...These are styles for tablets in vertical and horizontal positions...}

たとえば、メイングリッドが次のようになっているとします:

それはHTMLで次の外観を持っています:

<div class="main page box"> <div class="profile box">Guest profile</div> <div class="article box">Main article</div> <div class="sidebar box">Sidebar</div></div>

これらのボックスのスタイルは、cssテンプレートファイルに配置され、先頭にドットが立って、これがCSSクラスであることを示します:

.main web page box {width: 1280px; (or any other meaning, which can be provided in percentage form - width: 100%;)}.profile box {width: 280px; (the width may also be provided in percentage form - width: 25%;)float: left; (right-edge wrap)}.article box {width: 600px; (the width may be provided in percentage form - width: 50%;)float: left; (left-edge wrap) }.sidebar box {width: 400px; (the width may be provided in percentage form - width: 25%;)float: left; (right-edge wrap)}

推奨される画面解像度の固定幅または相対幅を100％に置き換えると、グリッドは次のようになります:

このような結果を得るには、メディアクエリをスタイルシートに追加すれば十分です（以下の例は、画面幅が1024ピクセル以下のすべてのデバイ:

@media only screen and (max-device-width: 1024px) {.main web page box {width: 100%; (full width)}.profile box {width: 100%; (full width)float: left; (right-edge wrap)}.article box {width: 100%; (full width)float: left; (right-edge wrap)}.sidebar box {width: 100%; (full width)float: left; (right-edge wrap)}}

括弧内に記載されているコメントはサンプルとしてのみ言及されており、実際のCSSコードに転送することはできません。

このようなレスポンシブデザイン実現にはどのような落とし穴がありますか？ 残念ながら、それらの多くがあります:

• ページ上で利用可能なキーブロックだけでなく、幅が固定されている可能性があるため、webページレイアウト全体に違反する可能性があります。 これらはまた、画像、カテゴリ内のホームページ/上のニュースブロック、著者の説明ブロックやその他の要素にすることができます。 それらのすべてを一度に識別することは不可能です。 それらのそれぞれは、識別されるとすぐに編集する必要があります。
• webページのボリュームは変更されず、インターネット接続が遅い場合のダウンロード速度に悪影響を及ぼします（このような状況では最適化はできません）。
• 検索エンジンの推奨によると、モバイルデバイス上のフォントはズームアウトせずに読みやすいはずです。 これにより、見出し、本文テキスト、引用符、リスト（番号付きおよび番号なし）などのすべてのフォントサイズを再定義する必要が生じます。
• ヘッダーと複雑なメニューを完全に作り直す必要があります。 小さなウェブサイトのロゴ、検索アイコン（このオプションがある場合）、およびプロフィールアイコン（承認システムが使用されている場合）を残すことは理にかなっています。 デスクトップメニューは、より良い非表示にし、”サンドイッチ”アイコン（メニューアイコン）に置き換える必要があります。 一般的なレスポンシブテンプレートの大部分では、これは二つの並列メニューによって実装されています：最初のものはデスクトップ画面用であり、pc上でのみ表示され、第二のものはモバイルデバイス用である（モバイルデバイス上でのみ同じメディアクエリに基づいて表示される）。
• メインボックスの構造が異なる場合、例えば、サイドバーは左側に表示されますが、右側には表示されませんが、すべてのウィジェットはメインコンテ
• CSSファイルとは別に、ウェブサイトのスタイルをJSスクリプトに置き換えることができます。

これらは潜在的な落とし穴の一部に過ぎません。 従って、それは仕事を完了するために網の設計専門家を雇うことは意味を成している。

メディアクエリの利点により、不正なコードをいつでも削除できます。 これらのスタイルは、メインのwebサイトには表示されません。

プラグインでレスポンシブウェブサイトバージョンを追加する方法

一部のCMSは独自の拡張セットを使用しますが、他のCMSはまったく持っていません。 すなわち、応答性のウェブサイト作成のための最も顕著なプラグインとWordPressの男女共学、:

• Jetpack-モバイル版の自動作成機能は、2020年3月以降廃止されました;
• WPtouch–無料版と有料版で利用可能であり、拡張機能は、独立したキャッシュ組織プラグイン、webアプリ作成プラグイン、画像最適化プラグイン、AMP作成プラグインなどのような独自のプラグインやテーマを持っています。 WPTOUCHでデスクトップからモバイルテーマに切り替えるプロセスは、SEOのために多くのことを重要なwebページのUrlを変更せずに完了します;
• WP Mobile Menu–モバイルデバイス用のレスポンシブメニュー（あなたがモバイルデバイス用のレスポンシブでコンパクトなメニューでデスクトップウェブサイトのバージョンのかさばると複雑なメニューを交換する必要がある場合、それは、あなたに便利になるでしょう）;
• WP Mobile Detect–プラグインは、最初に人がモバイルデバイスを使用して、真/偽の値として結果を提供することを定義します。 これにより、テンプレートスイッチオプションの実装や特定のインターフェイスブロックの表示に適用できます;
• WP Mobile Edition–プラグインは、フル機能のwebアプリにWordPressのウェブサイトを変換することができます。
• Mobile Smart–プラグインは、デバイスがmobileクラスを参照していることを識別し、モバイルデバイスと互換性のある別のものにテーマを切り替えます。 Pro版は、モバイルメニュー、特別なウィジェット、プラグイン管理オプション（別のセットは、モバイルデバイスのために提供することができます）、ドメイ

ウェブ開発者は、多くのウェブサイト所有者がレスポンシブテンプレートバージョンに切り替えることを決定したため、拡張機能が請求されていない したがって、これらのプラグインの大部分は、プラットフォームの現在のバージョンとの非互換性につながる可能性があり、時間のかなり長い期間のために更新されていません。 唯一の例外はWPtouchです。

各プラグインでの作業には独自の特殊性があります。 他の人がサードパーティの拡張機能をダウンロードしたり、独自のものを作成することをお勧めしながら、それらのいくつかは、既製のモバ

サブドメイン/代替アドレスでモバイルウェブサイトのバージョンを使用することを優先する場合、注意すべきニュアンスは次のとおりです:

• これらは、検索エンジンのための別のウェブサイトであり、そのコンテンツが一意ではないことは本当に悪いです;
• 検索エンジンにURLを「接着」させ、これが同じwebサイトであることを理解するには、すべてのリンク属性を適切に整理する必要があります:
• • 属性リンク…rel=”alternate”href=”URL-mobile page”–デスクトップバージョン用。
  • 属性リンク…rel=”canonical”href=”URL-desktop web pages”–モバイルテンプレート用。
• 異なるwebページのバージョン上のコンテンツが異なる場合は、（コンテンツの交換のために）クローキングのための制裁を取得するリスクを実行します。

HTMLウェブサイトのモバイル版を作る方法

HTMLウェブサイトに動的機能がない限り、デバイスの画面解像度を分析したり、結果に基づいてデスクトップテンプレートモバイルテーマに切り替えたりすることはできません。 必要なのは、問題のある要素のレイアウトグリッドとスタイルを完全に再設計することだけです。

私たちはすでにそれを行う方法を見直しました–これはメディアクエリを介して行われます。 レイアウトを適応させるのが最も困難なのは、要素の幅と位置が固定されたものです。

何も専門的なニッチのスキルとCSS/HTMLコードの浸漬なしではうまくいきません。 これは、右の最初からwebデザインのプロを雇うか、あなたが購入したり、注文することができます別のものにデザインを変更するか、単に例えばMobiriseオフラ 最後に、クラウドインフラストラクチャに移行し、オンラインウェブサイトビルダーのいずれかを選択する

モバイルとデスクトップのための別々のサイトまたは一つのウェブサイト：どちらが良いですか？

上記のように、モバイルウェブサイトを持つことは、任意のビジネス所有者のための絶対必要です。 これは網の質ビジネス提示を保障し、交通を発生させ、そして最高のユーザーの経験を保証する確実な方法である。 問題は、モバイルとデスクトップの画面用に2つの別々のwebサイトバージョンを作成するか、両方のタイプのデバイスで素晴らしい表示される応答性の

一般的に、一つの応答性の高いウェブサイトを開始することは、より効果的かつ実用的な解決策です。 これは、多様なドメイン/サブドメイン、Urlと内部構造を持つ二つの異なるウェブサイトを作成する必要がなくなります。 そのような場所は頻繁に訪問者を混同し、SEOの最適化、インターネットのマーケティングおよび他の関連の昇進方法に来るとき問題を誘発するかも 代わりに、デスクトップとモバイルの画面で同じように表示されるプロジェクトが1つあります。

ウェブサイトのモバイル版はどのくらいの費用がかかりますか？

ウェブサイトのモバイル版のコストは、一般的にあなたがそれを開始するプラットフォームに依存します。 Wixのようなオンラインウェブサイトビルダーを選択した場合、システムではデフォルトでモバイル対応のwebサイトを作成できるため、絶対に無料で ただし、free Wix planでは独自のドメイン名を接続できないため、プロジェクトのパフォーマンスを最大限に活用することが不可能になります。

Wixが非常に特徴的で汎用性の高い価格方針を持っている限り、webサイトを立ち上げる計画のいずれかを選ぶことができます。 ちょうど最も好ましい予約購読を選んでいる間あなたがそれに投資して準備ができている予算と同様、あなたの網の設計目的、プロジェクトのタイプ 各Wixプランには、最終的なコストに影響を与える幅広い特別な機能と条件が付属しています。 最も安いウェブサイトの購読はcost13/moの費用がかかりますが、最も手頃な価格のビジネス基本プランの価格は2 23/moから始まります。

あなたは、応答性の高いウェブサイトの作成のためにWordPressを使用するためにあなたの心を作ったことがありますか？ その後、プロジェクトのコストは、最終的にあなたが行くプラグインの価格に依存します。 WordPressの拡張機能は、一般的に無料のものとして位置づけられていますが、Proバージョンにアップグレードした後もその機能の一部が利用可能になります。 たとえば、WPtouch Proのコストは年間$79からyear359の範囲になります。 そのため、既製のレスポンシブテンプレートに切り替えるのが合理的なようです。 そのようなテーマは一度購入されますが、そのコストは約$40-80を構成します。 あなたはまだあなたのために時代遅れのテーマを再設計するためにプロのweb開発者を雇うことにした場合には、コストは、プロジェクトの複雑さに

ボトムライン

どのウェブサイトも、今日のターゲットオーディエンスと需要を維持するためにモバイル版を持つべきであることは秘密ではありません。 彼らが必要とするサービスや製品を探して、ウェブを閲覧するために自分のモバイルデバイスを使用していない人々にほとんどがあります。 したがって、あなたのウェブサイトのモバイル最適化のプロセスは、最終的に選択されたプラット

ウェブサイトを立ち上げるだけの場合は、最も人気のあるオンラインウェブサイトビルダーのいずれかを優先するのが理にかなっています。 Wixはこの目的のために最適です。 WordPressのようなCMSを搭載したwebサイトを既に実行している場合は、それを応答性のあるテーマに置き換えることをお勧めします。 完全なテンプレートの再設計は、あなたが独立してタスクに対処しようとする場合は特に、本当の挑戦になりますが、モバイルサポートを提供するプラグインは、しかし、非常に高価な場合があります。

とにかく、あなたのウェブサイトの別のモバイル版を作成することは意味がありません。 あなたは、プロジェクトの開発とそのさらなるサポートに関連する問題に直面するだろう。 はるかに簡単で合理的な解決策は、最初からあなたのウェブサイトをモバイル対応にすることです。