サービス内容
Service
スマホ最適化
kanvasで行うスマホ最適化の方法をご紹介します。
基本的にRWD（レスポンシブ・ウェブ・デザイン）を推奨していますが、UA（ユーザーエージェント）の切り替えで、スマホ専用サイトを作ることも可能です。
※WordPressでの制作をベースにルールを記載しています。
1.RWD
RWD（レスポンシブ・ウェブ・デザイン）とは「指定したブレイクポイント毎に、特定のCSSを適用させる方法」です。
CSSのみで各画面サイズに最適な配置を行えるので、HTMLに影響せず、SEOの評価対象である「コンテンツの重複」や「リダイレクト処理」を精査する必要が無く、保守性に優れたスマホ最適化の方法です。
1-1.ブレイクポイントとは
ブレイクポイントとは、CSS3で採用された「メディアクエリ」の「横幅での制御」に関する記述方法で、数値によって分岐させるポイントのことです。このブレイクポイントの個数で、コーディングの工数が変わります。
最も工数が掛からない方法は、タブレット端末（ipad）の横幅である「768px」1箇所のみブレイクポイント指定する方法です。しかし、この方法ではPCサイズからタブレットサイズの幅の時に、横スクロールバーが表示される欠点があります。
最適な方法は、3箇所以上のブレイクポイントを指定して、各ブレイクポイントの間をリキッドでコーディングする方法です。予算やユーザー属性に応じて、妥当な方法を採用します。
2.UA切り替え
UA（ユーザーエージェント）の切り替えとは「各デバイスが持つユーザーエージェント情報を元に、PCサイトとスマホサイトを切り替える方法」です。PCサイトとは別に、スマホ専用サイトを制作して、アクセス先を切り替えます。
情報の更新を行う時に、2つのサイトでコンテンツを同期する必要があり、特殊な場合を除いておすすめできない方法です。
3.AMP
AMP（アクセルレイテッド・モバイル・ページズ）とは、Googleが推奨する「モバイル端末でのホームページ高速表示の仕様」です。
仕様に沿ってコーディングを行うことでAMP対応ページとして認識され、Googleにキャッシュさせることで高速表示を実現します。しかし、仕様の制限が多く、現時点（2018/3/21）でまだ発展途上段階のため、kanvasでは採用しておりません。