スマートフォンサイト制作 スマホページ作成 福岡｜AKI企画

スマホページ制作のご提案

スマホページを制作する際の主な方向性としては３つございます。

■レスポンシブデザイン型（PC・スマホ一体型）

従来のページに全面的な改良を加え、横幅が自由に可変するレイアウトコンテンツにし、PCからでもスマホからでもその端末の幅に合わせて自由に動くページにするというものです。

全面リニューアルになりますので費用的な面がネックになりますが、一度作ってしまえば今後の更新分は全て両方できれいに見ることができますし、新規にホームページを作る際は検討する価値があります。

スマホページ制作事例
レスポンシブデザインで構築されています。同じサイトデータをいろいろな端末で閲覧できるように工夫がされているため、今までのサイトよりもどちらかと言うとシンプルなデザインにまとまります。
【画像クリックでサイト確認できます。】

PCでスマホ版を確認したい場合は下の青いボタンをクリックして下さい。
外部確認ツールを利用しておりますので、正常に表示されないサイトもあります。

■スマホ版（独立ページ）の準備

一つは完全に別ページとしてスマホページを準備（一部でも全部でも）する事です。
従来のページとは別にスマホ専用のコンテンツを制作した後、「訪問者がスマホからの閲覧だった場合はスマホページへ」「PCからの閲覧であればそのまま今までのPCページを表示」という風に端末ごとに表示ページを切り替えるプログラムを設置して実現させています。

■部分的なスマホ化

最後に３つ目としては「部分的なスマホ化」です。
コンテンツ「B」はPCサイトを表示し、「A」ページを閲覧された時のみスマホ向けに作った「A」コンテンツを表示させるという部分的な分岐が可能です。

アクセス解析などを分析し、特に閲覧されているコンテンツやあるいは季節イベントページなどこれから閲覧数が多くなると予想されるページからスポット的にスマホコンテンツ化していく事でコストを抑えることができます。

驚異的な普及を見せるスマートフォン

現在日本全国におけるスマートフォン端末携帯の普及は目まぐるしく、街角でスマホを触っている人を見かけない日はありません。iPhoneやAndoroid携帯の稼働率はうなぎ登りであり、二つ折りの携帯端末が見られなくなる日は程なくやって来る事でしょう。

スマートフォンはインターネットの閲覧が非常にしやすくなっています。外出先やちょっとした時間でもすぐにWEBサイトで調べものや情報検索ができるツールとして、以前の携帯とくらべてスマートフォンは非常に便利です。

もっとユーザーの目に留まる様なホームページ作りを目指すサイト運営者の為にも、これからパソコン用サイト（PCサイト）だけでなくスマートフォン向けサイトも準備する必要性があります。

スマートフォンは先述のようにPCサイトも表示する事が可能ですが、PC用のモニターに比べて仮面の表示領域が小さく、回線環境についても、外出時となるとPCのブロードバンド接続に比べて貧弱で不安定なものである事は否めません。
また端末自体の構造なども影響し、画面内のコンテンツの操作はマウスではなく、フルスクリーンのタッチパネルを採用している事も特徴の一つです

■なぜスマートフォン向けサイトが必要か？

PC版のホームページがスマートフォンでも閲覧可能なのに、なぜスマホ専用のサイトが必要なのでしょうか？基本的な疑問かと思いますが、ここでいくつかご紹介をしましょう。

■表示領域が限られている

現在市場に出まわっているスマートフォンの多くは従来の携帯端末より一回り大きくなっていますが、搭載されたスクリーンの表示領域（ディスプレイサイズ）は3.5～4.0インチ程の画面です。この限られた表示領域の中にコンテンツを表示させ、利用者に操作を要求しなければなりません。

しかもそこでパソコンで閲覧した時と同じ「満足」を与える必要があります。

スマホサイトで観たけどわかりにくかったから自宅のパソコンでもう一回確認しようと、ユーザーが行動してくれればいいのですが、必ずしもそうはならないものです。
やはり最初にスマホで観た時点でユーザーに満足させる事が大事です。

■回線帯域が不安定になりがち

現在、室内のネット通信はブロードバンド回線が導入されている事が多く、比較的速い通信速度でサイト閲覧が可能ですが、スマートフォンなどのモバイルデバイスは持ち運びが前提で、屋外での接続が必要となります。
スマホの回線には現在「３Ｇ」や「ＬＴＥ」と呼ばれる比較的高速な回線が登場していますが、室内のブロードバンドや無線ＬＡＮに比べるとまだまだ不安定な回線状況だと言えます。

すなわちブロードバンドによる閲覧を想定した写真サイズなどが大きく枚数の多いホームページの場合、スマホで開こうとすれば当然かなりの時間が掛かるようになります。モバイルデバイスによる閲覧ではコンテンツの表示までに５秒以上かかるとサイトを閉じてしまうという調査結果もありますので、「ページ容量を軽くする」・「画像・写真サイズを小さくする」などスマートフォン向けの最適化をおこない、閲覧者の状況を十分考慮する必要があります。

■スマートフォンならではの特徴を押さえる

なんと言ってもスクリーンをタッチして操作する端末が多い事が最大の特徴です。
マウスカーソルの代わりに指を使ってボタンやリンクをタップしてもらう必要がありますので、今までマウスでクリックするのに十分だった文字のサイズについても、改めて検討する必要があります。
ボタンについても小さすぎると指で簡単に押せないというトラブルがでてきます。

さらにダブルタップ操作やピンチイン・ピンチアウトによるコンテンツのズームが可能である事です。
これにより既存のホームページはそのままでも閲覧可能なのですが、安易に拡大するとサイトのどの部分にいたのかがわからなくなり、位置確認のため拡大・縮小を繰り返す事になります。

このようないくつかの問題だけでも閲覧者にとって大きなストレスになります。

事実さまざまな調査結果により、パソコンでインターネットをする時よりもスマホで閲覧をしている時の方が、「少しでも速く」「少しでも簡単」でないといけない、という心理傾向にユーザーは置かれていると言われていますので、ユーザーの満足いく情報を配信して企業イメージを保つためにもスマートフォン向けに最適化されたサイト制作を考えるべきです。

なぜPCサイトをスマートフォンで観ると小さく見えるのか？

よくPC向けサイトをスマホで観ると、非常に小さく表示されている事があります。
ここにスマートフォンの表示領域の特徴が表れています。

例えばPC版のサイトの場合、ターゲットとなるディスプレイの解像度の横幅はおよそ900px前後以上であるものとし、基本的に横スクロールが発生しない事を前提として制作します。それに対しスマートフォンはデスクトップよりもディスプレイがずっと小さい為、そのサイズに合わせたサイトが必要だと思われるでしょうが、実はそうではありません。

iPone3Gを例にとって考えてみます。

iPhone3Gの解像度は横幅が320pxとなっています。この数値を基準にすると横幅320pxのWEBサイトをイメージしますが、ここで考慮するのがスマートフォンにおける「Viewport（表示領域）」の存在です。
表示領域というのはこのスペース内にどれだけの範囲を表示するかの領域を指しています。iPhone3GのViewportは初期値が980pxです。つまりこれは「横幅320pxの中に980pxの横幅のものまで表示する」という事を意味しています。

つまり980px幅のホームページを320pxの幅に圧縮して表示させている事になりますので、その分縮小され、PC版のサイトをスマホで表示すると非常に小さく見えるのです。

iPhoneに限らずAndoroidのスマートフォンも初期値のViewportは大き目に定義されています。開発当初から小さな画面のスマホで横幅の広いPC版ホームページを閲覧させたいという狙いがありましたので、「デスクトップパソコンのモニターの様に映す」というスマホの目的が反映されているのです。

ただし「スマホでもパソコン版のようにみえる」ことと、「スマートフォン向けに最適化されている」こととは全然違います。閲覧するユーザーの満足を得る為にはスマホの最適化は絶対必要だと考えます。

上述しましたが単に横幅を320pxに作ればいいというものではなく、Viewportを考慮した可変サイズでの制作が必要です。詳しくは割愛しますが「大きな表示領域のものを圧縮表示させる事によって、よりキレイに鮮明に表示する」というノウハウがここにあるのです。

上の説明はiPhone3Gの横幅が基本となっておりますが、端末ごとにこのViewportは違います。
さらにスマホのもう一つ特徴として「横にかたむけると横幅が広がる」事が挙げられます。その際は当然横長になりますので、その横幅一杯を使った見やすいサイト制作をする必要があるのです。