PCサイトとどこが違う?スマホサイトのデザイン神戸Web制作即応隊のブログ。ホームページデザインスマホサイトのデザインとはスマートフォンが年々普及しているのは、ニュースにもなっていますよね。様々なホームページのアクセスを調べていると、3割以上がスマートフォンだったりします。PCを持たないけど、携帯はスマホ、という人や、PCは家族で1台だけど、スマホはそれぞれが持っています、という人が、めずらしくなくなってきているのでしょう。そこで考えるべきは「スマホサイト」ではないでしょうか?年々増えつつあるスマホユーザーにも、便利に快適にホームページを見てもらえるためのスマホサイトは、ただ作れば良いわけではなく、色々なポイントがあります。何をスマホサイトと言うか、については定義が難しく、技術的にはPCサイトもスマホサイトも同じと言えますが、今日はスマホサイトのデザインについて、PCサイトとどこが違うのか、どんなデザインにすればスマホで閲覧しやすいかを考えていきましょう。画面サイズをスマホ用にするPCサイトをスマホで閲覧すると、画面が小さく、拡大しなければ文字が読めない...といった経験はありませんか?スマホサイトでは様々な種類のスマホに対応できるよう、画面サイズを設定します。iPhoneで見ても、Xperiaで見ても、同じように見えるのがベストですね。横方向に広がるレイアウトを避けるPCサイトでは、例えば料金表など、縦にも横にも長いコンテンツがありますよね。画像の横に文章が入るレイアウトもよく見かけます。スマホは画面が小さく、縦に持って見ることが多いため、横に長いレイアウトは不向きと言えます。横にスクロールしたり、拡大縮小したりする手間を避けるため、なるべく縦にのみ延びるレイアウトをおすすめします。指での操作を考えたボタンPCサイトはマウスで操作するため、ラジオボタンやチェックボックス、テキストリンクなど、多少小さくてもクリックできます。スマートフォンでは指での操作がメインですので、指で隠れてしまって押しているかどうか分からないようなサイズのボタンはNGです。複数行にわたるテキスト内に、テキストリンクがたくさんあるのも押しにくいですよね。フォームを作るときは入力欄やドロップダウンメニューも、スマホ用に大きく作ると良いでしょう。見たい情報を上に集める例えばあなたがPCもスマホも持っているとして、あえてスマホでホームページを見るのはどんな時でしょうか?「外出していてPCを見られない」「PCを見ている時間はないけどスマホなら」こんなパターンが考えられます。時間のない時なのかもしれません。PCサイトでは画面サイズが比較的大きいため、いろんな情報を一度に見せることができますが、スマホサイトではそれが難しくなります。あなたの会社のホームページを閲覧するとき、あまり時間のないユーザーは何を求めているか、何を見たいと思っているのかを考え、そのコンテンツを上に集めると良いでしょう。ボタンなのか、ただの画像なのかを分かりやすくするスマホには、オンマウスしてクリック、というPCでは当たり前の操作がありません。マウスを持っていくとポインタが指マークになったり、ボタンの色が変化したり、という仕様はスマホサイトではできません。そのためスマホサイトでは、タッチすればリンクがあるボタンなのか、それともただの画像なのかを判断できるよう、デザインには注意が必要です。ボタンには矢印を付けることを徹底したり、「詳しくはこちら」のような文言を付与してもいいかもしれません。地図や、電話番号など、他のアプリを使うことも意識するスマホにはPCにはない機能がたくさんありますよね。電話発信の機能や、GPSでの位置検索などがあります。スマホサイトではホームページの閲覧と並行して、それらの機能を使うことも意識した作りにすると良いですね。電話番号を表示するときは、タッチすると電話発信されるようにしておきましょう。お店に来てもらいたい、予約してもらいたい、といった業種なら特にこの機能を使いたいですね。地図を表示するときは、地図アプリを起動するためのリンクを貼っておきましょう。実際に来店するとき、地図アプリを見ながら来てもらえるとスムーズです。スマホ独自の機能を活かせるスマホサイトにしましょう。日に日に進化していく、スマートフォン。ユーザーに寄り添ったスマホサイトを作りましょう。知っておきたい!TPOに応じたフォントの選び方ご存知の通り、フォントにはたくさんの種類があります。色というのは無意識のうちに「心理」に影響を与えているものなのだそうです。