アフィリエイトなら、安心と信頼で世界の企業に選ばれるリンクシェア

リンクシェア アフィリエイト   ID/PWを忘れた方

ID

SSLログイン

PW

TG アフィリエイト  ID/PWを忘れた方

ID

SSLログイン

PW

TG広告主様ログイン

SSLログイン

キーワードで検索

閉じる
リンクシェア アフィリエイト icon_sslSSLログイン
ID/パスワードを忘れた方
ID
PW
TG アフィリエイト icon_ssl SSLログイン TG広告主様
ID/パスワードを忘れた方
ID
PW
閉じる

自分で作るスマートフォン最適化サイト

自分で作るスマートフォン最適化サイト

スマートフォン向けページを制作するのと、パソコンや携帯電話で閲覧するページを制作するのとでは一体何が違うのでしょうか?ページを制作するにあたり、意識すべきことをまとめました。

制作をはじめる前に

(1)画面の大きさ

かつて携帯電話の主流な画面サイズは、QVGA(横240x縦320ピクセル)と今よりもだいぶ小さめでした。
一方スマートフォンの画面の大きさは機種やOS(iPhone,Android)によって様々ですが、主なサイズは横320ピクセル~、縦480ピクセル~となっています。
スマートフォンはパソコンに比べ画面が小さく、コンテンツの量や文字の大きさに注意が必要です。
しかしスマートフォンユーザーは、縦スクロールに対してはあまり抵抗がないとも言われているので、長いコンテンツを作成することも場合によっては良いと思います。その際は、充分に行間や間隔をとったすっきりと見やすいデザインを作成するよう心がけましょう。

(2)画面の向き

パソコン閲覧と大きく違うのが画面の向きです。
パソコンの画面は固定されているのに比べ、スマートフォンは画面を縦横に傾けて使い分けることができるので、ページを縦にしても横にしても崩れないように制作することが重要です。
そのためには、ページ幅をピクセルで固定するのではなく、サイズが可変になるように制作することが望ましくなっています。

(3)操作方法

スマートフォンの大きな特徴が画面タッチ操作です。
キーボードやテンキーを操作するパソコンや従来の携帯電話と違って、サイトの画面を直接指先で操作するため、誤操作しやすく、リンクやボタンの押しやすさがとても重要になります。
ボタンは最低44ピクセル以上にし、クリックしやすい形にしましょう。

(4)閲覧環境

多くのスマートフォンユーザーは通勤、通学途中などの外出先でページ閲覧をします。
Wi-Fiなどを利用するのと比べ、通常の3Gで閲覧する場合は回線スピードが落ちるため、ページの容量が膨大にならないよう注意して作成する必要があります。
最近は、LTEなどの高速回線が使えるスマートフォンが増えてきてはいますが、まだまだ通常の回線のユーザーも多くいます。
ページの容量を抑えるため、装飾のための画像使用は避け、CSSを使って表現するのがお勧めです。

ページ制作準備

スマートフォン用ページは、ほとんどの皆さんがパソコンで作成されると思いますが、パソコンのモニタでは実際にどのようにスマートフォンで表示されるのかが分かりにくいですね。
そこでまずは、ページがどう表示されるのかを確認できるツールを導入しましょう。
大きく分けて3つの方法があります。

(1)ブラウザ

・Safari iPhone、iPadでのプレビューを確認することができます。
・Firefox アドオン FireMobileSimulator(https://addons.mozilla.org/ja/firefox/addon/firemobilesimulator/)でプレビュー確認できます。

(2)エミュレータ

無料のソフトも色々と配布されています。

・Mobilizer http://www.springbox.com/mobilizer/

(3)実機での検証

実際にサーバーにファイルをアップロードし、実機で確認する方法です。
画面キャプチャを取る機能が各スマートフォンにはありますので、その画像をPCに転送して確認するということもできます。
上記2つの方法は簡単にパソコンの画面から確認することができるので便利ですが、正しく表示されないこともあるので注意が必要です。
最終的にはやはり、実機で一度確認することが必要でしょう。
その他準備が必要なのは、通常のウェブサイト制作と同様に、PhotoshopやFireworksなどの画像編集ソフト、HTMLコーディングのためのテキストエディタやDreamweaverなどです。

ページの制作手法

スマートフォンに最適化されたページを作成するには、大きく分けて2つ方法があります。

  1. スマートフォン閲覧専用のページを用意する
  2. パソコンでもスマートフォンでも閲覧できる共通のページを用意する

(1)はインデックスページにユーザーが訪れた際に、システムでスマートフォンなのか、パソコンなのかを判別し、専用ページに誘導する方法です。
一方で(2)は、画面の幅に合わせてCSSで制御したページを表示させる「レスポンシブウェブデザイン」という手法を使って作成します。

どちらの手法もメリット、デメリットがあり、サイトのコンテンツ量や目的に合わせて選ぶことが必要です。
以上のようにスマートフォン最適化するためのサービスや手法は様々あり、日々進化し続けています。
常に新しい技術を追いかけることも大切ですが、最も重要なことは、ユーザーにとって有益な情報を提供できるコンテンツです。

今後どのような端末が出てきて、どんな早い回線が登場したとしても、その点は変わらないのではないでしょうか。

楽天グループの情報セキュリティ基本方針に準じております。楽天グループの情報セキュリティ基本方針に準じております。
不正行為を行なったアフィリエイト・パートナーの情報の共同利用について。不正行為を行なったアフィリエイト・パートナーの情報の共同利用について。
リンクシェア公式Facebookページリンクシェア公式Facebookページでは、日々の出来事やイベント情報をリアルタイムで発信中です!

Copyright © LinkShare Japan K.K. All Rights Reserved.