※回答一覧

 出題者   カテゴリ   作成日

坂本　邦夫		 ユーザビリティ・デザイン担当 2015-03-29 20:39:30
 問題   ヒント   回答数 
■スマートフォン対応で見た目に気をつけるべき点は?

Googleから、2015年4月21日よりモバイルフレンドリー(携帯端末・スマートフォン対応)であるかどうかを検索結果に反映させるという公式の発表がありました。対応を急がれている方も多いのではないでしょうか。

　検索結果をもっとモバイル フレンドリーに
　http://googlewebmastercentral-ja.blogspot.jp/2015/02/finding-more-mobile-friendly-search.html

個人的にはよほどスマートフォンからの流入に依存していなければ、4月21日に間に合わずとも、きちんと時間を取って、じっくり取り組めばよいと思いますが、私のようなウェブ制作者のサイトへのアクセスでもスマートフォンからのアクセスが増えていたりする現状を考えると、いずれ対応しなければならないことは間違いありません。

そこで今回は『スマートフォン対応』をする際に、文字や画像・ナビゲーションなどの見た目のデザインで、気を付けるべき点を優先順位を付けていただきます。以下の条件でお答えください。

　・現在のページはスマートフォンに対応しておらず、1から作り直しをする時間はない
　・時間の猶予がないため、2点のみ変更・修正できる

問題

1. まず最初に直したい部分はどれですか? またその理由を教えてください。
2. 2番目に直したい部分はどれですか? またその理由を教えてください。

例　1.文字のサイズを修正する　理由・・・
　　2.バナーを作り直す　　　　理由・・・		 8

 

メンバーの回答一覧　お疲れ様でした！
※講師コメント詳細は冊子に掲載されています。

なるほど
票数		 回答 講師コメント
1 SUGIMOTO
1.文字のサイズを修正する
理由:スマホユーザがアクセスしてきた際、PC版そのままだと、全ての文字が小さく見えてしまう。その場合、ピンチアウトして読み進めなければいけないので、読みづらくなってしまう。
レイアウトが崩れてしまってもいいので、まずは、ファーストビューで文字が読みやすい大きさで表示されるようにする。

2. レイアウトのカラムを1カラムにする
理由:文字を大きく表示してもレイアウトが崩れてると視線の導線がわかりづらくなってしまう。
スマートフォンなので、上から下までスワイプで読めるように、1カラムにすれば、読みやすくなる。
その際、画像がブラウザサイズからはみ出ないように注意する。		 なし (坂本　邦夫)
いかに文字を読みやすくするか、余分な動作をさせないかということや「レイアウトが崩れても」に表れているように、訪問者が期待したことに応えているかを考えたユーザー目線の回答で共感できました。 もちろん崩れない方がよいのは2つめの回答からも感じられますが、画像がブラウザサイズからはみ出さないようにするという配慮も細かいところまで気を配られていると思います。
1 chichichi
1.コンテンツ幅を可変にし、2カラムなどはスマホでは1カラムになるように。
　[理由]
　拡大しなくても見えるようにするため、
　サブナビなどfloatしているボックスを下に落とすだけでもしたらいいのではないかと。

2.細かいテキスト画像を含む主要な画像・バナーを作り直す
　[理由]
　PC前提で読めるサイズで作られているはずなので、縮小すると読みづらいものが多そうです。
　大きい字にしたり、画像+プレーンテキストのように変更すれば、ある程度読めるバナーになると思うので。		 なし (坂本　邦夫)
chichichiさんも先のSUGIMOTOさんと同じように、1つめにカラムを落とすという回答をいただきました。サイドバーに主要なナビゲーションがなければ、それも対応策としてはよいと思います。 また画像の文字も非常に重要です。小さなサイズで表示されたとしても、「何が書かれてあるかがかろうじてわかる」というサイズに変わるだけでも、離脱する人は少なくなるはずです。 またテキストを追加するというのも、スマートフォン対応に限らず、よりわかりやすくするためのよい方法です。
0 yamataco
1. font-size、line-heightを調整
　スマートフォンで見たときに字が小さいと読んでもらえないので。
　ウェブマスターツールのモバイルユーザビリティ―エラーのタップ要素とフォントサイズがある程度解決できるかと思っています。

2. viewportの設定
　ウェブマスターツールのモバイルユーザビリティ―エラーの解決優先を考えました。		 注目 (坂本　邦夫)
yamatacoさんの回答を注目とさせていただきました。 実は「モバイルユーザビリティ―エラーの解決」というシンプルな回答があることを想定していませんでした。 工数の掛からない作業でエラーが回避でき、リスクを軽減できるのであればそれも大きな対応だと考えます。
0 丸田
・ナビゲーションやボタンのサイズをタップしやすい大きさに変更する
理由:ズームして押す負担を減らすため

・文字サイズを大きくする
理由:ズームして押す負担を減らすため

私には出題の意図がうまくくみ取れていないと思うのですが、
優先順位をつけることはわかるのですが、
一部だけ変更するということが現実的に可能なのでしょうか?
部分だけ変えても全体のデザインに影響するのではないかと思うのですが・・・		 なし (坂本　邦夫)
仰る通り、PCサイトをスマートフォンサイトにするために一部だけを変えただけでは、今度はPCで見た場合に崩れているということも多々起きるはずです。 ただし、例えば1カラムのPC専用のランディングページのようなもので、一部を変えるだけでスマートフォンに対応できるようなページも多く存在します。 「モバイルフレンドリー」が何を意図しているのかをあらためて考えるという課題とさせていただいております。そのような意味合いでは「何もしない」というのも正解であると考えています。
0 YN
1. まず最初に直したい部分はどれですか? またその理由を教えてください。
=> モバイル用 viewport を設定して、コンテンツの表示のされ方を制御します。

実際に運営しているサイトは、横幅960ピクセルのサイトで、3コラム構成、比較的テキスト情報の多いサイトです。まずは、コンテンツの肝となるテキストを読みやすくするための工夫を施します。


2. 2番目に直したい部分はどれですか? またその理由を教えてください。
=> カテゴリーリストなど、リンクが集中している部分のレイアウトを工夫し、
モバイル端末でもリンクをタップしやすいよう配慮します。

下層ページでも重要なコンテンツを提供しているため、容易に目的のページにアクセスできるよう誘導する必要があります。		 銅 (坂本　邦夫)
YNさんも実際に運営されているサイトを想定して、viewportの指定と答えていただきました。 そもそもモバイルフレンドリーに対応しないことで、どのくらいの不利益が生じるのか現段階ではわからないという点で、工数をあまり掛けずにエラーを回避するという点で非常に妥当な回答だと思います。 今対応していないサイトであっても、いずれは対応しなければならないわけですが、そしてその全てを今回考えなければならないというわけでもないでしょう。
0 yukko
1　テキストサイズの修正とバナーサイズの修正
まずは何が書いてあるかわからないと意味がないので最低限スマホで読みやすいテキストサイズへの修正が必要だと感じます。また、スマホユーザーは目的なくコンテンツなどを閲覧する傾向があるので画像など訴求力の強いものは見やすい形に変更したほうが良いと思います。これらの修正は簡単ですぐに取り掛かれてユーザーに対して効果の高いことかなと思ったので上記修正を1番目にしました。

2. メニューなどのナビゲーションをシンプルにまとめる
PCのようにカテゴリーが多くなってしまうと、スマートフォン上で並べたときにはそれだけで画面を埋めてしまうことになり、操作しづらくなってしまうので修正を施すと良いと思いました。		 銀 (坂本　邦夫)
yukkoさんは訴求力の強い順から改善していくことを明快にまとめていただいたので銀とさせていただきました。 時間がない場合には効果のあるものから改善に取りかかるのは当然なのですが、限られた時間内で何から手を付けるかをきっちり決めて作業に掛かるのも大事なことだと思います。
0 kamino
1. まず最初に直したい部分は?
時間の猶予がないなら、文字サイズを見直そうと思います。
最悪でも文字さえ読めればサイトを使っていただくことはできると思ったからです。

2. 2番目に直したい部分は?
次はナビゲーションを見直そうと思います。
文字が読めてナビゲーションが使えればなんとかサイトとして成立しそうですし、使ってはいただけそうだと思ったからです。		 なし (坂本　邦夫)
kaminoさんは文字サイズ・ナビゲーションの順でご回答いただきました。 私もまず何か1つと言われたら、文字のサイズから入ります。検索順位での影響は大きな問題なのですが、既存のユーザーの利便性を考えた場合には、一気に何かをするということだけでなく、できることから少しずつ改善していくのも重要であると考えています。
0 たけ
*実際に管理しているサイトで対応を行った際の内容で考えました。
*スマホ対応等も全くできていなかったので、
　まずは「最低限閲覧ができる状態にすること」を優先しました。

----

1. まず最初に直したい部分はどれですか? またその理由を教えてください。
￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣
サイトのカラム構成。


理由:
スマホでの閲覧時、カラム構成の不備が致命的に支障を与えていたため。

例えばコンテンツ部分を拡大しようとすると、
「サイドバー部分がかぶさって表示されて、コンテンツが読めない」
などが生じていました。

対処としては、スマホ閲覧時はCSSでサイドバーは表示させないようにしました。



2. 2番目に直したい部分はどれですか? またその理由を教えてください。
￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣
全体の文字サイズと行間。


理由:
文章量が比較的多いサイトの為、「読みやすさ」を重視する必要があったため。		 金 (坂本　邦夫)
たけさんは実際に管理されているサイトで行った対応をお答えいただきました。 サイト・ページによっては、拡大縮小だけで「見えるようになる」とは限りません。そのような意味で、まったく見られない状態を回避するということが重要だと思います。他には見られなかった回答ということで金にさせていただきました。 また文字サイズと行間というのも、モバイルフレンドリーのエラーを回避する策としては比較的簡単な部類に入ります。 もちろんエラーが出ないことと使いやすいことは同義ではないため、どの部分の行間をどのくらい調整するかは見極める必要があります。