近年、iPhoneをはじめとしたスマートフォン、通称スマホ（スマホン）の登場で今までの携帯電話シェアがかなり圧迫さえて来ました。
ここで厄介なのがスマホは携帯サイトではなくPC用のホームページかスマホ専用のサイトを表示すると言う事です。
もちろん従来の携帯サイトも閲覧は可能ですが、スマホ用に作られていない為、かなり見難い仕様となります。
またPC用ホも同様に見難い場合があります。
iPhoneなどではフラッシュも見れませんからね。
ここで、登場したのがスマホ用のHP。
HPを作成する場合、PC、携帯、スマホの3つのサイトを作成しなければならないのです。
スマホシェアが拡大しているので、当然必要となってきます。
ただ、このスマホサイトが今までの携帯サイトのようにポンとHTMLで作れるというとそれはちょっと違うのです。
初めて作る人に撮ってはちょっとハードルが高くなってきます。
スマホ用サイトの作成事例も今後紹介していく必要がありますね。
前回の絵文字などは大丈夫ですが、その他に自作の画像を入れる場合はその大きさに注意しなければいけません。
例えばサイトのロゴなどを画像で入れ込む際は、サイズを十分に注意して造らなければ、元も湖もなくなってしまいます。
画像の要領が大きければ携帯のキャリアや端末によってはメモリオーバーとなり表示されなくなってしまうのです。
gifなどの形式にすれば随分と要領は軽くなるので、問題ないのですが、gifは画像が劣化してしまいます。
なので、あまり細かいようなロゴだとせっかく画像をいれても汚くて、みるに耐えないようなものとなってしまいます。
そんな時は保存形式をjpg、ジェイペグにしましょう。
圧縮率が高く、かつ好解像度の画像形式で広く一般的に利用されています。
しかし、携帯サイトに使用するには極力要領を小さくする必要があります。
文頭でもいったように表示されなくなる場合があるのです。
おそらくロゴなどを1つ入れるだけならきっと表示はされますが、その他にもいくつか画像を挿入する場合は気をつけなければいけません。
フォトショップやイラストレーターではweb用に保存するjpg書き出しがあるので、それらをつかって作成すると良いでしょう。
画像を入れる事で、サイトは一気に華やかになります。
しかし、その画像には十分注意する必要があるということも忘れては行けません。
画像を入れたら必ず自分の携帯電話、その他、友人が使用している携帯電話などを使い、きちんと表示されるかを確かめましょう。
単調になりやすく、PC版とは違い派手なことができない携帯ホームページ。
タグを駆使して動きをつけたら今度は画像を入れてみましょう。
一般的なのが携帯にもとから入っているような画像を使った装飾ですね。
メニューのところに顔文字なんかを入れてもいいと思います。
一見、シンプルで簡単な物ですが、携帯の絵文字や顔文字って昔から見慣れた物で馴染みがあるので、視覚効果は抜群なんです。
わけのわからない絵文字は別ですけど、顔の絵文字なんかはきっとみんなが見た事ある物だと思いますし、コミュニケーションツールとしては最高だと思います。
もちろんその他にJPG画像などを入れる事もできますので、的確に画像をつかってアピールしていきましょう。
ですが、あまりに重い画像を使用すると重くてサイトや画像が表示できなくなる物もあるので注意しましょう。
gifなどは軽い上、動きを付ける事もできるのでいいかもしれませんね。
文字の装飾について学んでいきましょう。
HTML上で作業する際は色や大きさを変える事ができます。
これは見やすくする上でとても大事な事です。
ただし、PCと違いスタイルシートは反映されないことがほとんですので予め注意が必要です。
まず文字の大きさに着いてですが、見出しを2とすると通常の文章は1の大きさがいいでしょう。
加えて、2と1では色を分けた方がいいでしょう。
これにより随分見え方が変わってきます。
くれぐれも同じ大きさ、同じ色にはしないことです。
これをするとどこを読んでいるか分からなくなるという悪い状況になってしまいます。
さらに、文章はこまめに改行しましょう。
携帯は機種の設定でも文字表示の大きさが人それぞれです。
自分の携帯で折り返さない文章でも人の携帯だと折り返されているという状況が起こりえます。
できればマルでくぎる際に改行し、さらに同系の色（近めな色合い、例えば濃いピンクと薄いピンク）で改行毎に交互に色分けしましょう。
こうすることで見ている側はどこを読んでいるかが明確になってくるのです。
あとはとても重要なところにはHTMLのタグを入れて点滅させたりすることもできます。
ブリンクタグです。
これを入れるとチカチカと文字が点滅して目立ちますので必要に応じてタグを活用するといいでしょう。
携帯サイトは文字数についても非常に注意が必要です。
PCのようにマウスがある訳ではないので、画面を上下に動かす場合には携帯の上下キーでカチカチやらなければいけません。
文字数があまりに多いと、いつまでたっても下までたどり着かない、下にいってから上に戻るまで面倒くさいという理由で見てもらえないダメなサイトになってしまいます。
どうしても文字数が増えてしまう場合はカテゴリ毎にページを分けた方が見る側にとっては見やすいサイトになるのです。
もちろんあまりにページ数が多くても見てもらえないので、簡潔にまとめることも重要なことだと思います。
もう一つは文字の装飾についてです。
画面が小さいため、いかに見やすくするかが大きなポイントになってきます。
次回は文字の装飾について説明をしていきたいと思います。
さて、携帯サイトを作る上で気をつけなければいけないことは何か。
もっとも重要なのは文字数や画像のサイズです。
PCですと、フラッシュや動画、文字数、画面幅などが比較的制限の無いように制作できますが、携帯電話でのサイトはそういうわけにはいきません。
携帯の機種や、キャリアによっても制限が異なる事も注意したほうがいいでしょう。
まず、画像のサイズですが画像はできることならgifを使った方がいいでしょう。
gifはサイズが軽いため数枚をサイト内に貼付けても大体の携帯電話で表示する事が加納です。
gifの利点は軽い事だけではなく、gifアニメーションという動くものを作成する事も可能なのでサイトがより華やかになります。
その反面jpgなどの写真に比べると画像が劣化するという悪い面もあります。
一概には言えないのですが、1ページ内にjpg画像は3枚以内に抑えた方が懸命でしょう。
ただし重い物ですと1枚でも容量オーバーになり表示できないのであらかじめ圧縮率を携帯サイズにしてからアップする必要があり、そのサイトで正しく表示できるかをチェックした方が安心です。
携帯のホームページは、パソコンのホームページとは、サイズ、通信速度が違います。
携帯電話の画面が小さいので、１ページに表示できる文字数、画像が限られているのです。したがって、携帯ホームページを作成する場合は、そのことを念頭においてください。そうすることによって、携帯電話でも見やすいホームページが出来上がるはずです。
携帯電話の場合、通信速度が遅いので画像を重くしてはいけません。可能な限り、軽くしてください。
自画自賛ですが、専門用語も使っていませんし、かなり分りやすく、説明できたと思います。
