スマホサイトレイアウトデザインのあり方について
皆様 「おはようございます。 そして会えない時のために、こんにちはとこんばんは。おやすみなさい」 いつも弊社のブログをみて頂き有難うございます。
映画好きな方はおき好きかもしれませんが、１９９８年のアメリカ映画「トゥルーマン・ショー」でジムキャリーの有名な台詞ですね。
アクセス解析を見るとブログを見ている時間がまばらだったので、読者の方がいつこのブログを読んで頂けるかな〜と考えてしまいました。
朝のアクセス集中は通勤中かな・・・・
昼のアクセス集中は昼飯時まで情報収集とはすごいな・・・・・
夕飯どきアクセス集中は私なら飲みに行ってしまってる・・・・・・
深夜どきのアクス集中は寝不足は肌に悪いですよー・・・・・
と思っております。価値のあるブログが書けるよう努力致します。
「日々成長ブログ！」
に名前変えようかな（笑）
＜スマホサイトレイアウトデザインのあり方について＞
さて本日の備忘録は、「スマホサイトレイアウトデザインのあり方について」についてです。
以前ブログで、サイトのスマホ対応の重要性を説明させていただいた事がございます。
その時は、Googleのクローラーが見たときにどのように評価されるのかという、あくまで機会に対する対応をご説明しました。
スマホ対応のサイトにリニューアルして、検索結果が上位に向上した方もいらっしゃると思います。
しかし、実際にサイトを見ているのは機械ではなく人間です。
つまりSEO対策がどれだけ出来ていても、テキスト量がどれだけ多くても、読む人にとって見にくいデザインだとどうでしょう。
私だったら、綺麗なサイトに移動します。
このときに勘違いするのは、「じゃあスマホ用は情報量を減らそう」という考え方です。
確かに画面は小さいですし、通信状況もPC環境に比べると弱い傾向にあります。
機械から見ればそのほうが、読み込みが早いので良いサイトと言えるかもしれません。
ただ人間はソースやHTMLと行ったプログラム言語を見て購入を決めるのではなく、写真や文字情報（大きい文字に目がいく）で購入の決断をします。
スマホユーザーに購買行動を起こしてもらう為にスマホ・モバイル対応に適したデザインをテーマに解説したいと思います。
＜スマホデザインはアプリのようにするべし＞
じゃあ一体スマホデザインの場合どこに注意を払えばいいのかと考えます。
スマホデザインの原則として考えて欲しいのは各種スマホアプリから訪れているという点です。
検索エンジンでもSNSでもアプリからユーザーは流入します。
つまりアプリの画面を操作しているわけです。
それがページを開いたら突然PCで見るようなデザインが小さくなっていたら、もしくはデザイン崩れを起こしていたらそのさいを引き続き見ようとしなくなるでしょう。
ですのでスマホサイトも シンプルで操作性の高い 「アプリのようなデザインで構成」 するべきです。
次の３点をポイントとして筆者はあげます。
１：アプリのような雰囲気のサイト構成
PCでは人は 「Z目線」 や 「S目線」 のように波打つようにサイトを見て行きますが、スマホでは 「I目線」 縦にスクロールしながら見て行きます。よって縦長にしてボタンや文字を縦並びでアプリのように配置していってください。横スクロールを入れてしまうとサイトの全体像がつかみづらく見ている方はストレスを感じてしまいます。縦長になりすぎて最初は心配になると思いますが躊躇なく縦長レイアウトにしてください。
２：軽量化された画像や無駄のないソース Javascript cssなど
画像や動画などサイトには情報をよりわかりやすく伝えるコンテンツとしてテキスト以外のデータが盛り込まれています。これまでPCのみを対象としてきたサイトによくあるのは、データ容量が大きいままだという事例です。画像も動画も全てデータです。つまりスマホの通信料を使ってしまうわけです。無駄のないソースというのはプログラミングですね。すごく簡単に説明すると 「話がすごーく長くて何いってるかわからない人」 の話と 「結論から簡潔に話す人」 の話どちらを聞きたいですか？と同じ理由です。検索エンジンでも１のことをより少ないプログラムで表記している方を好みます。
３：シンプルなデザイン、レイアウト、導線
これはスマホに限った話ではないのですが、WEBデザインをする上で伝えたいことを全て書き込もうとしているサイトを見かけます。また、行間が狭かったり写真の枚数がやたら多すぎたり、余白がなかったりと単純に読み物としてしんどかったりするわけです。辞書や事典よりも小説、小説よりも漫画の方が読みやすいのはそのページある情報量が詰め込みすぎていないからだと思います。（これは筆者の感覚で物によりますが・・・）
つまりシンプルな配置にして隙間や余裕のあるデザインにすることでユーザーにとって見やすいサイトとなります。
最後にスマホデザインのポイントを箇条書きにしておきたいと思います。
もし相違点やご意見ご質問ありましたらご連絡ください。
・文字量は多い方がいいが、見えずらくなるので「アコーディオン」「タブ」「moreリンク」と言った、興味がある人だけがより多くの文章を読める施策を入れる。
・画像のサイズは常に大量の画像を掲載するスペースがないのがスマホなので、「スライダー」「サムネイル」などの手法を駆使して、ここにはまだ違う情報写真があるよ！とわかるよにしてあげる。
・画像の中にテキストを書く場合は、スマホの画面だと小さくなるのでなるべく１０文字以内で改行するくらいで良い。
・画像の容量はなるべく軽くする
・メニューは折りたたんでクリックすると出現する。
・フッターは２列〜３列程度に要素を配置するようにする。
・ボタン関連は 「電話」 や 「メール」 などコンバージョンにつながるボタンは押しやすい大きさで常に表示。そして横並びで多数並べない、押し間違いが連発する為。
・EFOと呼ばれる問い合わせフォームは一つ一つの縦幅を大きく広くとってあげて、押しやすいようにする。
・SNS連携は大きな効果をもたらします。ご自身のアカウントと連携させましょう。
・MAPの埋め込み。来店型の店舗を運営している方は必ずGoogleマップと連携させましょう。アクセスの案内が向上します。
と言った形でスマホ対応のデザインを常に意識してサイト制作しています。
スマホひとりに１台の時代です。
この機会にぜひサイトの見直しを試みてください。
本日も、読んでくださったかたありがとうございます。訂正すべき点が見つかりましたら修正・加筆させて頂きます。
次回は具体的な ”スマホユーザーを捕まえるWEBコンテンツ” についてブログを書きたいと思います。