スマホ用ホームページのデザインのポイント3つ
スマホ用ホームページをデザインするときは、以下の3つのポイントがあります。
(1)要素や画像の横幅をパーセンテージで設定する
(2)フォントは14px以上、行間は150〜190％で設定する
(3)スマホ特有の操作に対応する
ここからは、これら3つのスマホ用ホームページをデザインするときのポイントについて解説していきます。
要素や画像の横幅をパーセンテージで設定する
一言にスマホといっても、ディスプレイ幅は多種多様なので、指定した値で大きさが固定されるピクセルはスマホ用ホームページに適していません。
スマホ用ホームページのデザインを考える時は、どのディスプレイ幅にも対応できるように、要素や画像の横幅をパーセンテージで指定するようにしましょう。
フォントは14px以上、行間は150〜190％の間で設定する
スマホ用ホームページは、小さなディスプレイで閲覧することになるので、見やすさが非常に重要になってきます。
そのためスマホ用ホームページのデザインそのものをシンプルにして、文字は小さく表示するのではなく、14px以上に設定するようにしましょう。
また、フォントによって行間が狭くなってしまい圧迫感が出てしまうので、テキスト行間を150〜190％に指定しておくといいでしょう。
スマホ特有の操作に対応する
スマホは指でタッチする、スワイプするなど特有の動きで操作するために、スマホ用ホームページをデザインするときはこれらの動きに対応する必要があります。
例えばスマホ用ホームページのリンクボタンをデザインするときは、人差し指や親指で操作することを想定して、押しやすい44px以上の大きさでデザインします。
あまりに小さなリンクボタンは、異なった場所をタップしてしまう原因になりユーザーのストレスにつながるので、自分がスマホでホームページを閲覧するなら、どんなデザインのホームページが操作しやすいか考えながらデザインしてみましょう。
簡単にスマホ用ホームページをデザインする方法は？
ここまでスマホ用ホームページをデザインするときに気をつけたい3つのポイントについてご紹介してきましたが、「むずかしそう…」と感じた方が多いのではないでしょうか？
そこでここからは、スマホ用ホームページのデザインを簡単に作る方法をご紹介していきます。
レスポンシブデザインにする
「レスポンシブデザイン」とは、ホームページを閲覧する人が使用している画面サイズに応じて表示を最適化することができるデザインのことです。
これまではパソコンからホームページを閲覧する人が多かったですが、近年スマホからの利用者が増えており、パソコン・スマホの両方にホームページを対応させる必要があります。
レスポンシブデザインでホームページをデザインすることで、1つのページのHTML・URLでスマホ・パソコン両方のホームページを管理できます。
ホームページ制作会社に依頼する
レスポンスデザインでスマホ用ホームページをデザインする場合、ホームページを作る基礎的な知識や技術が必要になります。
誰にでもできるわけではないので、難しいと思ったらホームページ制作会社に依頼してレスポンシブデザインのスマホ対応ホームページをデザインしてもらう方法もあります。
この場合の作成費用の相場は、パソコン用ホームページのみのデザインや開発費用の1.5〜2倍程度必要です。
例えばパソコン用ホームページのみの費用が10万円だった場合、スマホにも対応したレスポンシブデザインのホームページ製作の追加費用は5〜10万円ということになります。
ホームページ作成サービスを利用する
最も安く簡単にスマホ対応のホームページをデザインするのであれば、ホームページ制作サービスを利用することをおすすめします。
スマホ対応のホームページ制作サービスはさまざまですが、その中でも「Komaca」はアクセス解析まで無料から利用できるのでおすすめです。
Komacaアプリ、もしくはKomacaホームページからスマホ対応のホームページのデザインを行いますが、デザインにはさまざまな機能が用意されているので、デザイン初心者にもおすすめ。
もちろん自分で画像を用意すれば、お好みの画像やカラーでスマホ対応のホームページをデザインすることができます。
「Komaca」なら簡単にスマホ用ホームページができる
スマホ対応のホームページをデザインするときは、ご紹介した3つのポイントに注意する必要がありますが、「難しい」と感じた方は以下の3つの方法で簡単にスマホ対応のホームページをデザインすることができます。
(1) レスポンシブデザインでホームページを作る
(2) ホームページ制作会社に依頼する
(3) ホームページ制作サービスを利用する
スマホ対応のホームページがデザインできる「Komaca」は、アクセス解析まで無料から利用できて、お好みの画像やカラーでデザインできるので、あなた好みのホームページをデザインすることができるのでおすすめです。
UnsplashのWalls.ioが撮影した写真
unsplash.com
