スマートフォンの進化と携帯向けホームページ制作の未来(1)

夏モデルのAndroid携帯 Xperia Acroを買おうと思っているtakaです。

スマートフォン用のホームページ制作の問題点と今後の動向

携帯向けホームページを制作する上での問題点が、今スマートフォンの進化とともに
解決に向かっています。

パソコンで閲覧するホームページとスマートフォン用のホームページの相違点として、
大きく考えると「通信速度」「文字サイズ」「フラッシュの対応」などがをあげられます。

1、通信速度が遅い

スマートフォン用のホームページをつくる上での一番大きな問題として「通信速度が遅い」という問題があります。パソコン用に作られたサイトを携帯で表示すると、非常に長い時間を要して大きなストレスになります。

今までは、この問題を解決する為に、スマートフォン専用ホームページでは、
パソコン用とは別にファイルサイズの小さな画像を用意するなど
ページ全体のファイルサイズを縮小したページの容量を抑えたページを制作してきました。

2、文字サイズの問題

次に「文字サイズ」に関してですが、これはスマートフォンの画面が小さいことが要因です。

通常のパソコン向けホームページをスマートフォンで閲覧しようとした場合、文字が小さすぎて読みにくいため、その都度画面を拡大したりする必要があります。

この問題の対処として、スマートフォン専用のホームページを制作する際は、ページのサイズと文字サイズのバランスを考慮し画面を拡大しなくてもすむように制作する必要がありました。

3、iPhoneでフラッシュの表示ができない

iPhoneやiPadでは、Flashを閲覧する事ができません(アプリを使えば別ですが…)
これは、ホームページの問題ではなく、特に画像系ソフトで競合状態にあるアドビシステムズとアップルとのビジネス上の問題が根幹にあり、アップルの開発するiPhone、iPadの基本仕様でFlashを認めていません。

そのため、スマートフォン専用のホームページを制作する際は、「Flashを使用せずに動的効果を演出するか、静止画にするか・・」しかありませんでした。

スマートフォン専用のホームページを制作する上で、上記以外でもJavaの問題や機種ごとに微妙な問題があるかと思いますが、大きな問題は、上記の3つかと思われます。

上記の問題を解決するために、パソコン閲覧用とは別に
スマートフォン専用のホームページを制作したり、
さらには、ガラケー向けにもホームページを制作したり
結果として、3タイプのホームページ開発が必要になったりする事もあります。:body_deject:

これは、開発者にとっても大きな負担ですし、ホームページの開発コストも高くなります。

スマートフォンの急速な進化

上記のような携帯向けホームページを制作する上での問題点が、今スマートフォンの進化とともに
解決に向かっています。

携帯の高速化競争

最近のスマートフォンは、Wi-Fi は当然です。
会社や自宅、屋外でもアクセスポイントのある場所ならパソコンと同等な通信が可能です。

Wi-Fiの使えない地域での回線速度がネット閲覧時の問題となっていましたが
NTTでは、今月からFOMAハイスピードがスタートし受信時最大14Mbpsの高速パケット通信が可能になりました。

さらに、LTEの通信規格であるXi(クロッシィ)をスタートしており
携帯での通信速度が受信時最大37.5Mbps、一部エリアでは受信時最大75Mbpsという光なみの通信速度となる予定です。

携帯の通信速度が光なみの高速通信になる :yosya:

現在は一部エリアへの対応ですが、2011年度中に全国へ拡大の予定のようです。
またドコモに続いて2012年にはKDDIやソフトバンクモバイルも同様のサービスを開始すると発表しています。

スマートフォン も、秋以降から発売されるものは、Xi 対応機種となるようです。

この携帯の高速通信の普及によって、携帯向けホームページを制作する上での最大の問題点である「通信速度が遅いという問題」が解決されようとしています。

記事が長くなりましたので
残りの2つの問題については、次回に記載したいと思います。

それでは、また:sayonara:

投稿者:netimpact

グリッドの計算がすばやくできる便利なツール

最近、ひじがかさついているatsushiです。:oyaji:

Photoshopでウェブページをデザインする時ってどんな風にはじめますか?

私は、カラム数を決め、その幅に応じてだいだいの部品の大きさを決めるグリッドを使ったデザインをしています。

グリッドデザインは、安定感のあるデザインができるのが一番のメリットだとおもいますが、たとえば、メインコンテンツ部分の幅が680pxになった時、680pxを3カラムにわけたい。なんてことになった時に1カラムの幅をいくつにしてカラムとカラムの間のスペースをいくつにして…なんて計算をいちいちしなければいけないんです。:kero1:

そんな時に使えるのがご紹介するツールです。

Grid Designer 2

このツールを使えば、カラム数と幅、余白(カラムとカラムの間)、マージンを入力すると自動で最適な幅を作ってくれます。:wa-i:

またページ上部の「Typography」をクリックすると出来たカラムの幅で文字を入力したイメージを見ることもできます。

ただし英語なんで日本語サイトのデザインには、参考程度にしかならないかも。:baikin_2:

個人的には、グローバルナビゲーションのボタンの幅を決めるときに役立つツールだなぁと思ってます。

また、「Export」でCSSも書き出すこともできるようになってます。:cat_5:

一度使ってみてはいかがでしょうか?:sayonara:

投稿者:netimpact

解像度ってややこしいね

毎日1時間のウォーキングではやせないことが判明し、ジョギングと筋トレに切り替えたatsushiです。

ホームページのデザインをしているとポスターやチラシの制作を依頼されることがたまにあります。

どちらも見た目は、同じなんで簡単にできるでしょ。なんて思われがちですが、実は、結構大きな違いがあるんです。:kaomoji3:

それは…

解 像 度:baikin_1:

まず、解像度って何ってことからですが、解像度は「dpi」ドットパーインチ「ppi」ピクセルパーインチなどであらわされ、1インチにいくつのドット、何ピクセル並ぶかをあらわしたものです。

当然、1インチあたりにたくさんのドットが入った方が鮮明なきれいな画像になります。:kaomoji7:

ここで問題なのが、ホームページで画像をつかう場合はモニター上に映す。ポスターやチラシなどの場合は、印刷する。この違いなんです。

この違いにより、画像に必要な解像度が違ってくるんです。:ari1:

まず、ホームページ用の画像ですが、モニターに映す場合は、ディスプレイの解像度72dpiなので用意する画像の解像度も72ppiあればきれいに見えるのです。

印刷する場合は、印刷機のスクリーン線数(線数)と呼ばれる出力時の解像度がまず決まるそうです。この線数の2倍の数値をPhotoshopで編集するための画像の解像度を必要とします。たとえば、100線の時は200ppi、175線なら350ppiとなります。

上記の違いによりホームページ用画像と印刷用画像では、約5倍ぐらいの解像度の差が生じることになります。:kaomoji5:

そのことにより、どんなことが起こるかというと

640px×480pxの解像度72ppiのホームページ用画像を持っていたとします。

これを印刷機で印刷してもきれいに表示されるようにしようとしたら必要な解像度は、350ppiなのでどのぐらいの大きさに印刷できるかというと…

640÷350=1.82インチ 1.82×2.54=4.62cm
480÷350=1.37インチ 1.37×2.54=3.48cm  となります。

モニター上では、大きく見えていても印刷に耐えるような画質にすると4.62cm×3.48cmまで小さくなってしまうんです。

だからホームページ用の素材がそのまま使うことができないってことになるんですね。:baikin_2:

そして、高解像度の素材は高くなりがちです。:naku:

引用元 ピクセルと画像解像度 (たいへん参考になりました。):kaoemoji3:

ブログランキングの投票をお願い致します。:kaomoji6:
:onegai::yubiright:  :yubileft:

投稿者:netimpact

WordPress 3.1がリリースされたようです

唇が切れてあくびをするたびに痛い思いをしているYu-ichiです:neko:

さて、Wordpress3.1が24日にリリースされました。:wa-i:
WordPress 3.1をお楽しみください

日本語版はまだ準備中だそうです。:naku:

さて、何が変わったのかを簡単に説明しますと、よりCMSツールらしくなったようです。

  • カスタムコンテンツタイプ向けのアーカイブページ
  • 新ネットワーク管理画面
  • インポート・エクスポートシステムの大幅な改良
  • 高度なタクソノミーやカスタムフィールドクエリの実行

とありますが、正直さっぱりです・・・:kaomoji4:

なので日本語版が正式リリースされたら、早速テストしてみたいと思います。:kaoemoji2:

そして今、Wordpressで簡単なアンケートができるプラグインと
問合わせフォームができるプラグインを探してテストしています。:kaoemoji3:

アンケートプラグインは「wp-polls」というものをテストしているのですが
プラグインのインストール自体は上手くいくのですが、
問題が作れないというエラーに悩まされています:kaomoji5:

問合わせフォームは「Contact Form 7」を考えています。:neko:

このプラグインは昔使ったことがあり、その時は基本的な項目でしか使っていませんでした。
でも、項目のカスタマイズファイル添付など、いろいろな機能があるので
そこら辺を掘り下げてみようかと思っています。

もう少し内容のある記事を書きたかったのですが、
プラグインのところで躓いていて、なんとも・・・。(心が折れそうです。。。

めげずにがんばりますので、応援クリックをお願いします:kaomoji6:
:onegai: :yubiright: :yubileft:

投稿者:netimpact

2007/09/27 Yahoo!変動の傾向

Yahoo!(ヤフー!)のアルゴリズムとインデックスのアップデートが、Yahoo!で公式にアナウンスされました。

1・Yahooカテゴリサイトをより重視しているように思われます。

2・ドメイン年齢を重視
 5年以上、10年以上のドメインに高い評価があるようです。
 ルーキーサイトが検索結果の上位に進出することが一層難しくなったかも。

3・内部要因の影響の低下
 キーワードに特化した内容のサイトの順位が下がっている感があります。
 より自然な文書記述が求められているのかも。

 また、タグの記述によりポイント差が少なくなったように感じます。

 

 

投稿者:netimpact

Welcome to ネットインパクト

私達ネットインパクトが目指すのは、地域(埼玉県・群馬県)に密着した「成果」と「デザイン」の融合したWebサイト制作です。これまでに培ったノウハウをもとに精一杯彼方のホームページ作成をお手伝い致します。埼玉県・群馬県でホームページ制作 するならネットインパクトにお任せ下さい。

投稿者:netimpact

SEO フレームを使用したページの弊害

最近、ホームページのリニュアルやSEOをご依頼頂くお客様のサイトで
フレームを使用したサイトに多く出会います。

多くは、ホームページビルダーを使い個人で作成したものが多いのですが、
SEO的には上位表示が厳しいので再構築となる場合が多いのが実情です。

フレームを使う事で、WEBサイトのメンテナンスが楽だとか、ナビゲーションを
固定的に表示できる等のメリットを考えて導入するのだろうと思います。

一見便利に思えるフレームも検索エンジン対策の上では、大きな問題があります。

また、ユーザビリティの上でも問題があります。

問題点

1、 フレームによって関連づけられたページには、メニューがない。

2、 フレームによって関連づけられたページから他のページに移動しにくい。

3、検索エンジンのクローラーが frameset ファイルを読み込んでも与える情報がありません。
   コンテンツ自体がありません。

4、特定のページをお気に入りに登録しょうとしても frameset を定義する index.html しか登録できない。

 ・・・ と いろいろな問題があります。

 

ある程度の応急処置はありますが、 フレームを除去するのが一番かと思います。

投稿者:netimpact