スマホとパソコンで使い分け!特徴に合わせてホームページをデザインしよう!

スマホ向けにホームページをデザインするコツ

まずはスマートフォン特有の、画面の小ささへの対応について考えていきましょう。画面サイズが小さいと内容を表示しきれず、スクロールの量が多くなります。それだけ閲覧に手間がかかるということなので、無闇に大きな画像を配置したりせず、適宜フォントのサイズも調節するように心がけてください。

指でのタッチ操作も、きちんと考慮すべき部分です。パソコンでマウスを動かすときと違って繊細な動きができないため、なるべくリンクなどのクリック箇所は大きく押しやすい形で表示させましょう。また、パソコンではリンク上にカーソルを乗せれば変化が起こり、クリック箇所が明確に見分けられますが、タッチ操作では同じようにはいきません。リンク箇所の文字色を変えるなどの工夫を行い、わかりやすいデザインを作っていきましょう。

パソコン向けにホームページをデザインするコツ

パソコンの持ち味は、やはり広々とした大きな画面ですね。スマホとは打って変わって自由に画面を使えるので、見ごたえのある大きな写真をトップページに配置したりして、一目で訪問者の心をつかめるようなデザイン作りを目指しましょう。また、大きな画面は利便性のあるデザイン作成にも適しています。たとえば、メニューリストを上部や左右どちらかの画面サイドに固定表示すれば、いつでもホームページの各所に移動することができるため、使い勝手の良さにつながるはずです。

タッチ操作ではなくカーソルを動かす操作性も、デザインに遊び心を持たせるポイントになります。リンクにカーソルを乗せた際の文字色を変化させてみたり、文字を回転させるなど動きをつけることで、見ている人にちょっとした楽しみを与えてみてはいかがでしょうか。

レスポンシブデザインは、複数のデバイスの異なる画面サイズをWebサイトを表示する上での判断基準とすることで、レイアウト等を柔軟に調整して見やすく表示することです。