スマートフォン向けのユーザビリティ
スマートフォンの普及に合わせて、ブログやサイトも、スマートフォン向けのデザインを考えなければならい。
レスポンシブウェブデザインが、基本になるが、単純にデザインだけを考えるのではなく、ユーザーがブログやサイト内で快適に閲覧できるように、ユーザビリティも、大切な要素となる。
スマートフォンのユーザビリティで一番に考えなければいけないのが、文字リンクの扱いである。バソコンで閲覧する時は、アンカーテキストリンクをマウスオーバーすることに、ストレスは感じないが、スマートフォンでは、小さな文字のリンクを押すのは、ストレスを感じてしまう。
対策としては、cssのdivタグを使い、文字リンクを枠で囲み、枠内を押してもリンクできるように、リンク自体を指で押しやすくする。画像にリンクを持たせる等、指で押しやすい大きさのリンクにする工夫が必要である。
文字リンクのサイズを検討できたなら、スマートフォンの画面サイズに合わせて、文章量を調節することも、ユーザビリティを高める要素となる。
小さな画面で、改行を頻繁に使う文章は、避けなければならない。
アフィリエイトの広告についても、300pxまでの幅の広告を選択するべきである。
ついつい、大きなサイズの広告を利用したくなるが、大きすぎる広告は、スマートフォンには適していない。
今更な事ではあるが、ビューポートの設定は必須である。
スマートフォンでのユーザビリティは、小さな画面におけるタッチの操作性と見やすいさに集約される。
ストレスの感じないブログやサイトは、それだけで魅力的である。
レスポンシブウェブデザインが、基本になるが、単純にデザインだけを考えるのではなく、ユーザーがブログやサイト内で快適に閲覧できるように、ユーザビリティも、大切な要素となる。
スマートフォンのユーザビリティで一番に考えなければいけないのが、文字リンクの扱いである。バソコンで閲覧する時は、アンカーテキストリンクをマウスオーバーすることに、ストレスは感じないが、スマートフォンでは、小さな文字のリンクを押すのは、ストレスを感じてしまう。
対策としては、cssのdivタグを使い、文字リンクを枠で囲み、枠内を押してもリンクできるように、リンク自体を指で押しやすくする。画像にリンクを持たせる等、指で押しやすい大きさのリンクにする工夫が必要である。
文字リンクのサイズを検討できたなら、スマートフォンの画面サイズに合わせて、文章量を調節することも、ユーザビリティを高める要素となる。
小さな画面で、改行を頻繁に使う文章は、避けなければならない。
アフィリエイトの広告についても、300pxまでの幅の広告を選択するべきである。
ついつい、大きなサイズの広告を利用したくなるが、大きすぎる広告は、スマートフォンには適していない。
今更な事ではあるが、ビューポートの設定は必須である。
スマートフォンでのユーザビリティは、小さな画面におけるタッチの操作性と見やすいさに集約される。
ストレスの感じないブログやサイトは、それだけで魅力的である。
画面の横幅に合わせて画像サイズを変更する方法
レスポンシブウェブデザインを採用しているブログやサイトにおいて、画像を各端末に合わせて、サイズを変更させには、cssの記述だけで実現できる。
p.resize img { width: 100%; }
cssファイルに記述を追加し、html内の画像をpタグのクラスをresizeとすれば、画面サイズに合わせて、画像のサイズが変更される。
pタグは、cssにより変更していなければ、画面の端から端まで拡がる特性がある。この特性を利用しただけの簡素な方法で、問題は解決できる。
widthを50%にすれば画面の半分の幅で表示される画像にも対応可能ではある。
<p class="resize"><img src="画像.gif" alt="○○" /></p>
この方法は、ヘッダーによく使う画面の横幅に画面全体、余白なしで拡がっている画像には使える。もともと横幅に余白がある状態の画像では、この方法では、画像が大きくなりすぎるため使えない。
画像のサイズに最大幅と最小幅を設定しておくと、それ以上、以下でのサイズの拡がりはない。
p.resize { max-width: 900px;min-width: 300px;}
p.resize img { width: 100%; }
cssファイルに、@media screenからはじまる、cssを実装することで、画面サイズに合わせた画像の切り換えが可能となる。
img.small { display: none; }
@media screen and (min-width: 400px) {
img.small { display: none; }
img.big { display: block; }
}
@media screen and (max-width: 399px) {
img.small { display: block; }
img.big { display: none; }
}
display:noneで画像を表示しないを宣言する。
400px以上の時には、display:blockで大きい画像を表示する。
400px以下の時には、display:noneで大きい画像を表示しないようにするcssの意。
@media screen の効果を発揮するには、htmlの<head>～</head>にメタタグの記述を加えなければならない。
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
viewportの設定は、多様な記述があるが、もっとも一般的な記述を掲載している。
htmlの記述は、単純に2つの画像を並べるだけと、簡素だ。画面サイズに合わせ、自動で2つの画像を入れ替えてくれる。
<p class="resize"> <img src="小さい画像.gif" alt="○○" class="small"> <img src="大きい画像.gif" alt="○○" class="big"> </p>
HTML5で新しく追加された、srcset属性を使い、あらかじめ用意した小さいサイズの画像と、大きいサイズの画像を切り替えるhtmlの記述。
<img src="通常の画像.gif" srcset="image_小さいサイズの画像.gif 300w,
image_大きいサイズの画像.gif 640w" >
srcset属性に未対応のブラウザなら、通常の画像を表示。300px以下なら、小さいサイズの画像、640px以下なら大きいサイズの画像を表示するの意。
まだ過渡の新規格のため、未対応のブラウザも多く、動作は非常に不安定だ。実装、取り扱いには注意してほしい。
画像をレスポンシブに対応させることは、可能ではあるが、全てのブラウザ、端末で表示確認ができないため、一抹の不安が残る。
出来れば、画像サイズは、あらかじめスマートフォンのサイズに適応できるように、小さくする方法が一番スマートかつ簡素にまとまる。
p.resize img { width: 100%; }
cssファイルに記述を追加し、html内の画像をpタグのクラスをresizeとすれば、画面サイズに合わせて、画像のサイズが変更される。
pタグは、cssにより変更していなければ、画面の端から端まで拡がる特性がある。この特性を利用しただけの簡素な方法で、問題は解決できる。
widthを50%にすれば画面の半分の幅で表示される画像にも対応可能ではある。
<p class="resize"><img src="画像.gif" alt="○○" /></p>
この方法は、ヘッダーによく使う画面の横幅に画面全体、余白なしで拡がっている画像には使える。もともと横幅に余白がある状態の画像では、この方法では、画像が大きくなりすぎるため使えない。
画像のサイズに最大幅と最小幅を設定しておくと、それ以上、以下でのサイズの拡がりはない。
p.resize { max-width: 900px;min-width: 300px;}
p.resize img { width: 100%; }
CSS3で追加されたMedia Queries
img.small { display: none; }
@media screen and (min-width: 400px) {
img.small { display: none; }
img.big { display: block; }
}
@media screen and (max-width: 399px) {
img.small { display: block; }
img.big { display: none; }
}
display:noneで画像を表示しないを宣言する。
400px以上の時には、display:blockで大きい画像を表示する。
400px以下の時には、display:noneで大きい画像を表示しないようにするcssの意。
@media screen の効果を発揮するには、htmlの<head>～</head>にメタタグの記述を加えなければならない。
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
viewportの設定は、多様な記述があるが、もっとも一般的な記述を掲載している。
htmlの記述は、単純に2つの画像を並べるだけと、簡素だ。画面サイズに合わせ、自動で2つの画像を入れ替えてくれる。
<p class="resize"> <img src="小さい画像.gif" alt="○○" class="small"> <img src="大きい画像.gif" alt="○○" class="big"> </p>
HTML5で新しく追加された、srcset属性を使い、あらかじめ用意した小さいサイズの画像と、大きいサイズの画像を切り替えるhtmlの記述。
<img src="通常の画像.gif" srcset="image_小さいサイズの画像.gif 300w,
image_大きいサイズの画像.gif 640w" >
srcset属性に未対応のブラウザなら、通常の画像を表示。300px以下なら、小さいサイズの画像、640px以下なら大きいサイズの画像を表示するの意。
まだ過渡の新規格のため、未対応のブラウザも多く、動作は非常に不安定だ。実装、取り扱いには注意してほしい。
画像をレスポンシブに対応させることは、可能ではあるが、全てのブラウザ、端末で表示確認ができないため、一抹の不安が残る。
出来れば、画像サイズは、あらかじめスマートフォンのサイズに適応できるように、小さくする方法が一番スマートかつ簡素にまとまる。
1カラムデザインのwebページの優位性
1カラムデザインとは、スマートフォンに最適化されたwebページによく見られる、縦長にページを読み進めていくwebページのことを言う。
スマートフォンが普及する前は、1カラムを採用しているページよりも、2カラムのデザインを採用しているページの方が、遥かに多かった。閲覧の視認性、広告の配置等、1カラムよりも優れた点が多く存在していたためだが、2カラムデザインをそのまま、画面領域幅の狭いスマートフォンに当てはめると、画面全体が縮小して表示される為、ユーザビリティを損ない、利点が欠点となってしまった。
そこで、今迄は、採用数が少なかった1カラムが、スマートフォンに最適化されたデザインであると認知されるに至った。
スマートフォンが普及する前は、1カラムを採用しているページよりも、2カラムのデザインを採用しているページの方が、遥かに多かった。閲覧の視認性、広告の配置等、1カラムよりも優れた点が多く存在していたためだが、2カラムデザインをそのまま、画面領域幅の狭いスマートフォンに当てはめると、画面全体が縮小して表示される為、ユーザビリティを損ない、利点が欠点となってしまった。
そこで、今迄は、採用数が少なかった1カラムが、スマートフォンに最適化されたデザインであると認知されるに至った。
スマートフォンにおける1カラムの優位性
スマートフォンは基本的に縦長の画面を指で操作し、下へ下へとスクロールさせていく。
PCでwebページを閲覧する時も、縦の動きがほとんどで、画面を横にスクロールさせることは、ほとんどなかったのだが、スマートフォンでは、それがより顕著となって現われてしまう。
横への動きが全くない1カラムデザインは、スマートフォンとの相性は抜群である。
無駄のない動き、操作が出来ることが、1カラムデザインの顕著な優位性である。
欠点として、メニュー欄や、表示スペースに限りがある為、表示を制限されてしまうことや、類似のデザインばかりのブログやサイトが乱立してしまうことが挙げられる。
しかしながら、これらの欠点についても、特に表示制限については、スマートフォンの本来持つ欠点と重なる為、逆に有効に作用している。つまり、表示制限を受けることで、不要なメニュー欄などがないシンプルで、直感的なwebページが構築しやすい。
1カラムデザインは、今後もスマートフォンの普及に合わせて、多くのブログやサイトが採用するデザインである。
2カラムをレスポンシブデザインで、スマートフォンでの閲覧時には1カラムとして表示させるのも、広義的な意味では、1カラムデザインと言える。
3カラムデザインについて
中央に、記事等のコンテンツを置き、左右にサイドメニューの枠で構築されたデザインを3カラムという。
4カラムでも、5カラムでも技術的には可能ではあるが、視認性や操作において、不都合の方が多い為、採用しているwebページは、ほとんどない。
カラムを多くしてしまうと、スマートフォンへの最適化は、非常に困難である。
運営するなら、複雑なカラム構成ではなく、PCページは、右サイドメニューの2カラムで、スマートフォンには、レスポンシブで、右サイドメニューを画面下へと移動させた1カラムが、主流といえる。
1カラムに最適なASP広告の掲載方法
1カラムでも、各種ASP広告を利用できるが、画面領域幅が狭い為、注意しなければならない点が幾つか存在する。
特に、アドセンスに関しては、広告がコンテンツを押し下げる状態での利用は、規約違反となる。つまり、336×280等、サイズが大きい広告をトップ下に利用すると、肝心のコンテンツが見えなくなる状態は避けなければならない。
また、広告を連続して記述してしまうと、画面全てが広告となり、低品質なページとなってしまうので、注意してほしい。
レスポンシブウェブデザインとは
レスポンシブウェブデザインとは、スマートフォン用に作られたwebページではなく、パソコン用のwebページを、cssによりスマートフォンの画面サイズに合わせたレイアウトに変え、パソコン、スマートフォン、各端末の違いに関わらず、webページのレイアウトを崩さないようにする、またはそのデザインを取り入れたwebページのことを言う。
基本は、各端末の画面サイズに合わせ、cssで各端末ごとに横幅を指定すること。
レスポンシブ・ウェブデザインでなくとも、スマートフォンはwebページを表示可能だが、どうしても画面サイズが、小さくなりすぎ、文字、画像の視認性が著しく低下、それに伴う画面のズーム等、操作の煩雑さも加わる。
このような問題、欠点を解消するのに、レスポンシブウェブデザインは存在する。
@media screen and (min-width: 900px) {
div.menu { width: 300px; float: left; }
}
その端末の表示幅が900px以上の時に適用するcssスタイル 。主にパソコン等、表示幅が広い時には、div.menuの枠組みを300pxごとに横並べにするcssの意。
@media screen and (max-width: 899px) {
div.menu { width: 100%; }
}
その端末の表示幅が900px未満の時に適用するcssスタイル。スマートフォン等、表示幅がせまい時には、div.menuを、縦並びにするcssの意。
@media screen の効果を発揮するには、htmlの<head>～</head>にメタタグの記述を加えなければならない。
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
viewportの設定は、多様な記述があるが、もっとも一般的な記述を掲載している。
さらにcssファイルを表示幅(端末と置き換えることも可)ごとに変えることも、簡素に実装できる。
htmlに、適用cssファイルを記入するだけで可能となる。
<link href="smart.css" rel="stylesheet" type="text/css"
media="screen and (min-width: 0px) and (max-width: 480px)" >
<link href="tablet.css" rel="stylesheet" type="text/css"
media="screen and (min-width: 481px) and (max-width: 900px)" >
<link href="pc.css" rel="stylesheet" type="text/css"
media="screen and (min-width: 901px)" >
smartはスマートフォン、tabletはタブレット、pcはパソコンの意。
paddingやmarginを使っての余白、スペースの細やかな調整は必要となるが、一定以上のhtmlとcssの知識があれば問題なく実装できるはずだ。
ブログサービスによっては、わざわざ、レスポンシブウェブデザインを採用しなくとも、スマートフォン用のページが自動生成されるブログサービスもある。
ちなみに私のブログもBloggerで運用しているが、外部のFreeテンプレートを利用して、レスポンシブウェブデザインを実装している。
http://blogtemplate4u.com/
基本は、各端末の画面サイズに合わせ、cssで各端末ごとに横幅を指定すること。
レスポンシブ・ウェブデザインでなくとも、スマートフォンはwebページを表示可能だが、どうしても画面サイズが、小さくなりすぎ、文字、画像の視認性が著しく低下、それに伴う画面のズーム等、操作の煩雑さも加わる。
このような問題、欠点を解消するのに、レスポンシブウェブデザインは存在する。
CSS3で追加されたMedia Queries
cssファイルに、@media screenからはじまる、cssを実装することで、レスポンシブウェブデザインは完了する。@media screen and (min-width: 900px) {
div.menu { width: 300px; float: left; }
}
その端末の表示幅が900px以上の時に適用するcssスタイル 。主にパソコン等、表示幅が広い時には、div.menuの枠組みを300pxごとに横並べにするcssの意。
@media screen and (max-width: 899px) {
div.menu { width: 100%; }
}
その端末の表示幅が900px未満の時に適用するcssスタイル。スマートフォン等、表示幅がせまい時には、div.menuを、縦並びにするcssの意。
@media screen の効果を発揮するには、htmlの<head>～</head>にメタタグの記述を加えなければならない。
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
viewportの設定は、多様な記述があるが、もっとも一般的な記述を掲載している。
さらにcssファイルを表示幅(端末と置き換えることも可)ごとに変えることも、簡素に実装できる。
htmlに、適用cssファイルを記入するだけで可能となる。
<link href="smart.css" rel="stylesheet" type="text/css"
media="screen and (min-width: 0px) and (max-width: 480px)" >
<link href="tablet.css" rel="stylesheet" type="text/css"
media="screen and (min-width: 481px) and (max-width: 900px)" >
<link href="pc.css" rel="stylesheet" type="text/css"
media="screen and (min-width: 901px)" >
smartはスマートフォン、tabletはタブレット、pcはパソコンの意。
paddingやmarginを使っての余白、スペースの細やかな調整は必要となるが、一定以上のhtmlとcssの知識があれば問題なく実装できるはずだ。
ブログのレスポンシブウェブデザイン
ブログでは、レスポンシブウェブデザインを採用したテンプレートにより、極、簡素に実装できる。ブログサービスによっては、わざわざ、レスポンシブウェブデザインを採用しなくとも、スマートフォン用のページが自動生成されるブログサービスもある。
ちなみに私のブログもBloggerで運用しているが、外部のFreeテンプレートを利用して、レスポンシブウェブデザインを実装している。
http://blogtemplate4u.com/
アンドロイドで、文章の幅がせまくなるのを防ぐ方法
アンドロイドで、文章の幅が、画面端までにならず、空白が存在し、文章が端まで表示されない表示トラブルがある。
同じスマートフォンでも、iosを実装しているiphoneでは、一切発生しない表示トラブル。あなたのサイトのcssファイルに、一文を入力することで、解決することが可能だ。
ブログを運営していれば、ほとんどのブログサービスは、スマートフォン最適化を実装されているので、注意する必要はない。
同じスマートフォンでも、iosを実装しているiphoneでは、一切発生しない表示トラブル。あなたのサイトのcssファイルに、一文を入力することで、解決することが可能だ。
p {background-image:url(image);}
pタグの要素が、アンドロイドでは100%ではなく、60%程度の幅で表示されるのが原因のようだ。pタグに画像の要素をcssで設定することにより、解決できる。設定する画像については、特に画像データを用意する必要はない。ブログを運営していれば、ほとんどのブログサービスは、スマートフォン最適化を実装されているので、注意する必要はない。
登録:
投稿
(
Atom
)
