Web

スマートフォンサイトのデザインで気をつけたい4つのポイント

投稿日:

スマートフォンサイトのデザインで気をつけたい4つのポイント

スマートフォンサイトデザインをする場合は「どの情報をいれるか?」「画像の横並びの注意」「サイトが重くならないように」「複雑なデザインにしない」「ボタンが小さくてタップがしにくい」など気をつけなければいけないポイントがあります。

今回はスマートフォンサイトのデザインで気をつけるべきポイントのご紹介です。

photo credit: JD Hancock via photopin cc

デザインのポイント

スマートフォンの基本色

スマートフォンサイトのデザインは基本PC版をもとにデザインしますのでPC版と全く違った感じにはなりません。例えばPC版のサイトは色が白系で作られていて、スマートフォンのサイトは黒系になりません。

PC版とスマートフォンサイトの基本色などが違うとユーザーは別のサイト?と混乱してしまいますので基本似たデザインになります。

スマートフォンの基本色

基本初期の色が違うだけで印象が変わってきます。

画像の横並び

スマートフォンのサイトは表示を早くさせるために画像は必要ありません!という人もいますがやはり画像が入っていると綺麗なサイトになりますし見てて面白くなります。PC版と同じレイアウトのままだと画像が小さくなる場合があります。

画像の横並び

経験上スマートフォンサイトに画像を横並びで表示させる場合は2枚までがいいです。
3枚ともなるとスマートフォンの画面の都合画像が極端に小さくなってしまいます。

大きく画像を見せたいなら1枚で表示させるのが良いでしょう。

グラデーションや角丸の画像は使わない

グラデーションや角丸はCSS3で表示することが可能です。
画像を使う場合は読み込み、修正など考えるとCSS3で表示させたほうがいいです。

グラデーションや角丸の画像は使わない

グラデーションのCSSをつくるのが面倒。。。 と言う人にはこちらがオススメです。わたしも使っています。

URLCSS3のグラデーションを自動生成

PC版のサイトも見れるように

スマートフォンからでもPC版のサイトが見れるようにしておく。
スマートフォンからの閲覧でもPC版を見れるようにユーザーに選択させるようにボタンを設置しておく。

PC版のサイトも見れるように

わたしはフッターに「PCサイトはこちら」のボタンを置いています。
スマートフォンは最低限の情報を掲載するようにしています。もっと詳しいこと知りたいと言う人はPCサイトを見てくださいってぐらいの気持ちでボタンを置いています。

[amazonjs asin="4844362739" locale="JP" title="スマートフォンサイトデザインブック 仕事で絶対に使うプロのテクニック"]
[amazonjs asin="4798129216" locale="JP" title="現場のプロが教える スマートフォンサイト 制作ガイドブック HTML5&CSS3&JavaScript (DESIGN & WEB TECHNOLOGY)"]

まとめ

スマートフォンのデザインは、PCサイトのデザインを基に作りますので新たにスマートフォンのデザインを数十枚作らないといけないと言うことはありません。

トップ、中ページ、アーカイブ、お問い合わせなど4~5ページぐらいで良いです。あとはパーツのデザインを作ればあとは使いまわしでOKです。

スポンサーリンク
  • この記事を書いた人
  • 最新記事

しん

Webサイトの構築、プログラムを制作しています。中小企業、個人のホームページの制作、更新作業も承ります。 仕事以外はバスケをしたり、ジムで筋トレしております。 映画/海外ドラマ/プログラミング/バスケ/トレーニング/カナダ/カメラ・写真

-Web

© 2024 Sedori Plan