サイトをレスポンシブ化する際の細かい注意点

responsive01

この度、こちらのブログをレスポンシブ化致しました。

一年程前に勉強の為にレスポンシブ化しようと思いつつも、元々のブログをレスポンシブ化するのは思ったよりめんどくさく、途中で断念をしました。一から作った方が楽なんじゃないかと感じました。

(正直pxで固定サイズにしてたのを、%単位に代えていって、サクッとできるかと思いましたが)

今回改めてレスポンシブ化を始めて、現在も完璧ではないですが、それなりに出来て構造もある程度理解できたので、作った際の事を一度書いておきます。

 

レスポンシブ化を実際にやってみてわかった事

箇条書きとなりますが、いくつか挙げていきます。(私のブログで実現できていない部分も書いていきます)

 

■スマートフォンでは画像が荒れる

スマートフォンでみた場合、解像度の関係なのか、画像がすごく荒れて見えます。

その為、表示したいサイズより2倍のサイズの画像を用意する。

 

■画像サイズが小さくなる際にサイドバーをわざと下に落とすが、落ちた後スマートフォンではリンクが効かなくなる(?)

上記を解決する為、画像サイズが小さくなった際は、サイドバーのウィジェットを消すようCSSで書き、その代わりにフッターに同じ内容のウィジェットを出すよう書くことで解決。

 

■スマートフォンの画面サイズの場合リンクが押しづらい

リンクのタッチする範囲を大きめにした方がいい。ここは私のサイトでもまだ課題です。

小さい画面を指でタッチする事や、外出先で注意散漫な状況なので、デザインは細かくリンクがごちゃごちゃしているよりは、シンプルで分かりやすくした方が良い。

 

■その他

スマートフォンでは一つのページを多少縦長にしてもスワイプしていくのでストレスは少ない。(ページ推移する方がストレスになる場合も)

 

◇今回参考にした文献◇

・実際の作業で参考になった本

 

 

・フラットデザインの考え方で参考になった本

 

今後またブログを更新する際に、なるべく効率よく作り直す場合

今回は自分でちゃんと一回作る事で、構造を理解したかった事、細かい修正箇所などが必要になった時など、自分でレスポンシブデザインを理解したかった為、自分で作りました。

今後は、デザイン変更のみなら、既にレスポンシブ化されている無料のテンプレの中で自分の理想の形と近いものを選んで、ある程度出来上がっているものを元にして作った方が良いと思いました。

 

このエントリーをはてなブックマークに追加
TAGS: