スマホ最適化とは

スマートフォン経由でサイトを閲覧したとき、スマートフォンに最適化された画面が【表示される】のと【表示されない】とでは、ユーザーにとって大きな印象の違いがあります。PC用に作られた画面をスマートフォンで表示すると、どうしても文字が小さくなり、見たいコンテンツがあっても誤って別の項目をタップしてしまったり、画面を拡大してみると横スクロールが出て操作が面倒になったりすることも。
また、サイトがスマートフォンに最適化されていなかったために、リンクが見落とされ、クリックしてもらえなかったりと、せっかくのレビュー記事もレイアウトがスマートフォンでは読みづらく、重要なポイントが見落とされたり、伝えたいことが十分に伝わらないこともあります。
このような機会損失をなくすためにも、スマートフォンに最適化されたページを用意することが必要となってきます。

スマートフォン最適化で最も重要なこと

・ページの幅
・文字の大きさ
・文字数
・ボタンやリンクの大きさ

これからは、スマートフォンで閲覧した際に、最適化されたページを用意することが、運営していく上でも、成約率等にも関わる重要なポイントとなっていくでしょう。

スマートフォン最適化の方法は2つのパターンがあります。

①スマートフォン専用サイトを併設する
パソコン向けの従来型のホームページ(PCサイト)に加えて、スマートフォンの小さな画面でも見やすいようにデザインされたスマートフォン専用のホームページである、所謂「スマートフォンサイト」を作成する方法です。
ユーザーが閲覧しているデバイス(端末)によって、最適なWEBサイトへ移動させる(パソコンで閲覧:PCサイト/スマートフォンで閲覧:スマホサイト)振り分け型のスマートフォン最適化です。

②レスポンシブWEBデザインで作成する
単一のwebページでスマートフォン、タブレットといった画面サイズが異なるデバイスマルチに対応できるWEBサイト作成手法です。
複数のwebサイトを用意するのではなく、1つのホームぺージ(HTMLファイル)をCSS3(Media Queries)で制御し、異なる画面サイズに応じてページのレイアウト・デザインを調整します。画面サイズによってホームページのレイアウトが変動する手法です。


スマホ最適化の機能一覧


基本機能

機能 解説
スマホ向けデザイン設定 PC向けサイトを基に、スマホ向けサイトのデザインを設定することができる
デザインテンプレート・パーツ 事前定義されたテンプレートやパーツをドラッグ&ドロップによる操作でレイアウトすることができる
Webサイト変換表示 ユーザーがサイトにアクセスしているスマートフォンの機種や画面サイズを自動的に識別し、機種・画面サイズに応じて表示を変換して最適化されたページを表示させることができる


スマホ最適化の基礎知識

スマートフォン経由でサイトを閲覧したとき、スマートフォンに最適化された画面が【表示される】のと【表示されない】とでは、ユーザーにとって大きな印象の違いがあります。PC用に作られた画面をスマートフォンで表示すると、どうしても文字が小さくなり、見たいコンテンツがあっても誤って別の項目をタップしてしまったり、画面を拡大してみると横スクロールが出て操作が面倒になったりすることも。
また、サイトがスマートフォンに最適化されていなかったために、リンクが見落とされ、クリックしてもらえなかったりと、せっかくのレビュー記事もレイアウトがスマートフォンでは読みづらく、重要なポイントが見落とされたり、伝えたいことが十分に伝わらないこともあります。
このような機会損失をなくすためにも、スマートフォンに最適化されたページを用意することが必要となってきます。

スマートフォン最適化で最も重要なこと

・ページの幅
・文字の大きさ
・文字数
・ボタンやリンクの大きさ

これからは、スマートフォンで閲覧した際に、最適化されたページを用意することが、運営していく上でも、成約率等にも関わる重要なポイントとなっていくでしょう。

スマートフォン最適化の方法は2つのパターンがあります。

①スマートフォン専用サイトを併設する
パソコン向けの従来型のホームページ(PCサイト)に加えて、スマートフォンの小さな画面でも見やすいようにデザインされたスマートフォン専用のホームページである、所謂「スマートフォンサイト」を作成する方法です。
ユーザーが閲覧しているデバイス(端末)によって、最適なWEBサイトへ移動させる(パソコンで閲覧:PCサイト/スマートフォンで閲覧:スマホサイト)振り分け型のスマートフォン最適化です。

②レスポンシブWEBデザインで作成する
単一のwebページでスマートフォン、タブレットといった画面サイズが異なるデバイスマルチに対応できるWEBサイト作成手法です。
複数のwebサイトを用意するのではなく、1つのホームぺージ(HTMLファイル)をCSS3(Media Queries)で制御し、異なる画面サイズに応じてページのレイアウト・デザインを調整します。画面サイズによってホームページのレイアウトが変動する手法です。


スマホ最適化の機能一覧


基本機能

機能 解説
スマホ向けデザイン設定 PC向けサイトを基に、スマホ向けサイトのデザインを設定することができる
デザインテンプレート・パーツ 事前定義されたテンプレートやパーツをドラッグ&ドロップによる操作でレイアウトすることができる
Webサイト変換表示 ユーザーがサイトにアクセスしているスマートフォンの機種や画面サイズを自動的に識別し、機種・画面サイズに応じて表示を変換して最適化されたページを表示させることができる