ENERGY BLOG

スマホデザイン制作のルール

投稿日:2016年05月23日

photo-1432888498266-38ffec3eaf0a

webデザインは、モバイルフレンドリーアルゴリズムを受け、現在ではスマホファーストのデザインに移行してきました。
それにともなって弊社では、現在デザイン・コーディングの制作マニュアルを作成中です。

例えば、「コンテンツ幅について」。
解像度が高いスマートフォンに対応するため、弊社ではiPhone6を基準とし、原寸で幅375pxですが、パーツは全て2倍の750pxで作成します。
その際注意が必要なのは、要素を奇数で作成した場合、実寸の半分に指定すると、整数にならない場合があります。それはデザインの崩れや、線がはっきり表示されないなどの原因になります。
そして、注意が必要なのは、先ほどのiPhone6は原寸の2倍の解像度で対応できますが、iPhone6 PlusやAndroidなど、1.5倍や3倍の解像度などもあります。どこまで考慮するかによって変わってくるので、制作前に解像度を予め決めておく必要があります。

次に、「下層ページのパターン化について」。
ページごとにある程度自由にデザインの効く印刷物と違い、web制作は見出しの見せ方、余白、ボタンのデザインなどをパターン化することが基本です。
自分自身もやりがちですが、このページは少し調整してサイズやデザインを変えてみようなど安易にしてしまうと、コーディングでは何倍の時間がかかり、なによりサイト全体の統一感が失われます。
デザインにこだわるところ、パターン化するところなど、線引きをしっかりして、ユーザーにとって見やすいサイトになるようにることが大事です。

その他、挙げていくとキリがありませんが…複数が関わるサイト制作をいかに効率よく、そして読みやすいサイトにできるかを考慮して、マニュアルを完成させたいと思います。

西上

▲ トップへ戻る