スマホレスポンシブのデザインで気をつけるべきことをまとめてみた

 

ねこ
うーん、レスポンシブのデザインってどう作ればいいのかにゃ??

実務のコーディングにしても、スマホレスポンシブはデザインがないことがとても多く、コーディングしながら自分でデザインを作っていく必要があります。

 

その時に注意することの基本をまとめましたのでぜひ参考にしてください。

基本1カラムにする。最大2カラムまで。

カラムというのは列という意味ですが、画面の小さいスマホでは、なるべく1つの列のデザインにします。そのほうが見やすいですね。

こういう3カラムの場合は1カラムに直しましょう。

例えばpcでこのデザインの場合だと、

 

レスポンシブでは1カラムにします。

 

長い文の場合は2列に

例えばこんなデザインの時です。

一見1カラムですが、スマホの場合は折り返しを気にしながら行も意識しましょう。

 

一般的なレスポンシブはこんな感じにしとけばいいと思います。

 

 

 

 

 

近接を意識する

レスポンシブ対応で見落としがちになるのがデザインの4大原則である近接です。近い情報のものは近い場所におきましょうというデザインの鉄則があるのですが、これがスマホレスポンシブでは結構見落としがちになります。

デザインの4大原則についてはこちらにも書いていますので、よければどうぞ!

ホームページのデザインを独学するには?私の勉強法を紹介【模写から始めよう】

2018.09.08

例えばこの部分をレスポンシブにしたい時は、関連のある写真との文字間を狭め、関連性のある写真と文章をまとめましょう。

 

この部分の文章の感覚だと、上の写真についての文なのか、下の写真の文なのか、ちょうど中間あたりに文章がきているため、わかりんくいですよね、

 

 

ここの文章の余白を少し大げさにとってあげたほうがいいですね、まとまりが生まれます。

 

 

左右の余白は20pxほど空ける

レスポンシブはただでさえ幅が狭いですが、文字がピタッと画面のふちにある状態もバランスが悪いので、左右の余白は20px前後空けるようにしましょう。こんな感じです!↓

 

 

 

こんな感じです!参考になれば!

効率のいいwebデザインの勉強なら

webデザインの勉強として、効果的なのは模写です。すでにあるサイトを観察して同じように作ることを繰り返すとデザインのセオリーがわかってくるかと思います。また、このデザインの目的、意図、デザインによる効果なども自分なりに考えて見るのも力がつきます。

私はソフトはXDを使っていますが、模写をしたいけどまずソフトの使い方から効率よく知りたいという場合、こちらのnoteでチュートリアルを出していますので、ぜひご利用ください!

このようなデザインができるようになるチュートリアルで、動画で便利な機能や効率化の方法まで一緒に解説しています。XDが初めてのかたでもできるチュートリアルなのでぜひご利用ください!