モバイルとレスポンシブデザイン

レスポンシブモバイルウェブサイトテンプレート

レスポンシブテンプレートは、Webデザイン業界で人気の高いアプローチです。これは、すべてのCMSが専用のモバイルテンプレートオプションを提供しているわけではないためです。レスポンシブデザインとは、テンプレートがブラウザの幅に応じて形状が変化するように特別に設計されていることを意味します。レスポンシブテンプレートは、各要素を個別に設計する必要があるため、ユーザー自身で編集するのが難しい場合があります。

例えば、メニューは縮小されたり、ページ外に移動されたり、必要に応じて自動的に表示されることがあります。レスポンシブウェブサイトは、モバイルデバイスではダウンロードが遅くなる傾向があります。これは、モバイルデバイスがデスクトップ版で使用されているスタイルやテーマをすべてダウンロードする必要があるためです。モバイル版では使用されていない場合でもです。一部のウェブデザイナーは、見栄えの良いテンプレートの作成に重点を置きますが、ダウンロード速度の問題を忘れがちです。

観光客向けのウェブサイトの場合、顧客は外出先で携帯電話の電波が届かない場所にいる可能性があり、モバイルエクスペリエンスに不要な追加のJavaScriptやCSSライブラリをすべてダウンロードするのに苦労する可能性があります。レスポンシブテンプレートはダウンロードに時間がかかることがよくありますが、私たちは新しいレスポンシブテンプレートを可能な限り高速化するために尽力しており、平均的なWordPressテーマよりも約3倍速くレンダリングされます。レスポンシブウェブサイトは、さまざまな色、フォント、画像でカスタマイズできます。

専用モバイルウェブサイトテンプレート

モバイル専用ウェブサイトテンプレートは、すべてのデスクトップウェブサイトに下位互換性を提供し、お客様にモバイルエクスペリエンスを提供するための従来の方法です。モバイルテンプレートは、デスクトップウェブサイトと同じナビゲーションサイトマップとコンテンツを使用します。ただし、不要な要素はすべて削除し、お客様が必要な情報にすぐにアクセスできるようにしました。例えば、連絡先情報に移動したり、地図リンクを表示したり、小さな画面でも簡単に商品を閲覧して購入したりできます。また、バナーやロゴを追加し、デスクトップテンプレートの色を自動調整する機能も備えています。モバイル専用テンプレートのデザインを微調整することで、お客様に素晴らしいエクスペリエンスを提供できます。この方法は、 最速のオプション 低速の地方モバイル接続を使用している顧客向け。

完全に独立したモバイルウェブサイト

ウェブサイト全体をモバイル専用に構築すると、最初は非常に優れたモバイルエクスペリエンスを実現できるかもしれませんが、多くの場合、ウェブマスターがメンテナンスを怠ったり（あるいはメンテナンスできなくなったり）、各ウェブサイトの情報が同期されなくなることがあります。オンラインショッピングサイトを運営している場合は、モバイルエクスペリエンスとデスクトップエクスペリエンスの両方を同じショッピングカートエンジンで実現する必要があります。そのため、このアプローチはお勧めしません。

既存のウェブサイトをレスポンシブテンプレートに変換する方法

豊富なレスポンシブテンプレートをご用意しており、お選びいただけます。テンプレートは常に更新されています。レスポンシブテンプレートに変更すると、デスクトップとモバイルの両方のレイアウトが更新されます。

1. CMSでデザインタブに移動します
2. テーマの変更を選択
3. すべてのテーマをご覧になり、「レスポンシブ」または「モバイル」ボタンに注目してください。このボタンをクリックすると、どちらのモードでもテーマをプレビューできます。レスポンシブボタンがあるテーマのみがレスポンシブテンプレートです。
4. 続行するにはテーマを選択してください。
5. 既存のブランド要素をそのままにしたい場合は、バナー、ロゴ、背景、色を変更するためのボックスのチェックを外します。
6. 万が一問題が発生した場合に備えて、古いデザイン設定をバックアップするには、ボックスにチェックを入れてください。
7. テーマの変更を保存します。
8. テーマ変更後にウェブサイトをプレビューすると、ブラウザのキャッシュ設定により正しく表示されない場合があります。ウェブサイトが正しく表示されるようにするには、「公開」してブラウザのキャッシュをクリアする必要があるかもしれません。
9. テンプレートによってはデフォルトの色が用意されているものもあれば、用意されていないものもあるため、メニューなどの色設定を再度適用する必要がある場合があります。また、色の組み合わせがテンプレートとすぐには互換性がなく、微調整が必要になる場合もあります。

新しい専用モバイルテンプレートの選択方法

専用のモバイル テンプレートが 8 種類ありますが、それぞれデスクトップ テーマの色とフォントが使用されます。

1. CMSでデザインタブに移動します
2. モバイルテンプレートを選択
3. 新しいモバイルテーマを選択をクリック
4. すべてのテーマをご覧になり、「レスポンシブ」または「モバイル」ボタンに注目してください。このボタンをクリックすると、どちらのモードでもテーマをプレビューできます。レスポンシブボタンがあるテーマのみがレスポンシブテンプレートです。
5. 続行するにはテーマを選択してください。
6. 既存のブランド要素をそのままにしたい場合は、バナー、ロゴ、背景、色を変更するためのボックスのチェックを外します。
7. 万が一問題が発生した場合に備えて、古いデザイン設定をバックアップするには、ボックスにチェックを入れてください。
8. テーマの変更を保存します。
9. テーマ変更後にウェブサイトをプレビューすると、ブラウザのキャッシュ設定により正しく表示されない場合があります。ウェブサイトが正しく表示されるようにするには、「公開」してブラウザのキャッシュをクリアする必要があるかもしれません。
10. テンプレートによってはデフォルトの色が用意されているものもあれば、用意されていないものもあるため、メニューなどの色設定を再度適用する必要がある場合があります。また、色の組み合わせがテンプレートとすぐには互換性がなく、微調整が必要になる場合もあります。

CSS を微調整してモバイル レスポンシブにする

技術に詳しい場合は、既存のテンプレートを CSS レスポンシブ モードにハッキングするだけでよいかもしれません。

スタイルシート内で、最大寸法が 600 ピクセル、750 ピクセル、または 900 ピクセルの行を探します。

#コンテナ { 幅: 750px; マージン: 0 自動; }

そして、これを次のように変更すると、画面幅の 90% が最大 960 まで満たされます。

#コンテナ { 幅: 90%; 最大幅: 960px; マージン: 0 自動; }

次に、列を探し、幅または余白を固定幅から%幅に変更します。ただし、画面幅がサポートしている場合のみ、これらの幅を適用します。画面幅が600px未満の場合、列はブラウザの幅いっぱいに重ねて表示されます。

@media (最小幅: 600px) { .leftColumn { 幅: 20%; フロート: 左; }