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

Responsive Mobile Website Templates

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

For example, menus might be condensed, or relocated off page, and pulled in when needed. Responsive websites tend to be slower to download on mobile devices, as the mobile device needs to download all the styles/themes that are used in the desktop version, even if not used in the mobile version. Some web designers focus on making great looking templates, but they forget about these download speed issues. 

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

Dedicated Mobile Website Templates

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

Completely Separate Mobile Websites

Having a whole website crafted just for mobile might give a really good mobile experience at first, but more often than not, the webmaster forgets to maintain it (or cannot maintain it) , and the information become out of sync in each website. If you are running an online shopping site, you really need to have both your mobile experience and your desktop experience powered by the same shopping cart engine. We advise our customers not to use this approach. 

How to Convert Your Existing Website to A Responsive Template

We have lots of different responsive templates that you can choose from. We are updating more all the time. When you change to a responsive template, it will update both your desktop and mobile layouts. 

1. In the CMS, go to the DESIGN tab
2. テーマの変更を選択
3. すべてのテーマをご覧になり、「レスポンシブ」または「モバイル」ボタンに注目してください。このボタンをクリックすると、どちらのモードでもテーマをプレビューできます。レスポンシブボタンがあるテーマのみがレスポンシブテンプレートです。
4. 続行するにはテーマを選択してください。
5. Untick the boxes for changing banner, logo, background and colours, if you want to keep your existing brand elements the same. 
6. 万が一問題が発生した場合に備えて、古いデザイン設定をバックアップするには、ボックスにチェックを入れてください。
7. テーマの変更を保存します。
8. テーマ変更後にウェブサイトをプレビューすると、ブラウザのキャッシュ設定により正しく表示されない場合があります。ウェブサイトが正しく表示されるようにするには、「公開」してブラウザのキャッシュをクリアする必要があるかもしれません。
9. Sometimes you may need to reapply your colour settings for menus etc, as some templates provide the default colours, and others don't, or perhaps your colour combinations are not immediately compatible with the template, and may need some fine adjusting.  

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

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

1. In the CMS, go to the DESIGN tab
2. Select MOBILE TEMPLATES
3. 新しいモバイルテーマを選択をクリック
4. すべてのテーマをご覧になり、「レスポンシブ」または「モバイル」ボタンに注目してください。このボタンをクリックすると、どちらのモードでもテーマをプレビューできます。レスポンシブボタンがあるテーマのみがレスポンシブテンプレートです。
5. 続行するにはテーマを選択してください。
6. Untick the boxes for changing banner, logo, background and colours, if you want to keep your existing brand elements the same. 
7. 万が一問題が発生した場合に備えて、古いデザイン設定をバックアップするには、ボックスにチェックを入れてください。
8. テーマの変更を保存します。
9. テーマ変更後にウェブサイトをプレビューすると、ブラウザのキャッシュ設定により正しく表示されない場合があります。ウェブサイトが正しく表示されるようにするには、「公開」してブラウザのキャッシュをクリアする必要があるかもしれません。
10. Sometimes you may need to reapply your colour settings for menus etc, as some templates provide the default colours, and others don't, or perhaps your colour combinations are not immediately compatible with the template, and may need some fine adjusting.  

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

If you are technically minded, you might like to just hack your existing template into CSS responsive mode. 

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

#container { width: 750px; margin: 0 auto; }

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

#container { width: 90%; max-width: 960px;  margin: 0 auto; }

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

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