レスポンシブデザインを理解する
ワードプレスでホームページを作成するにあたって、”テーマ”に何を使うかは、ホームページの出来栄えに大きく影響します。
第二回でも少しお話ししたように、PC用のページを作ることで、スマホ対応を同時にやってくれるレスポンシブデザイン対応のテーマを選ぶことをお勧めしました。
レスポンシブ対応でないテーマを使う場合は、PC用のページ作成と、スマホ用を別々に作成するか、そうでなければPC用で作ったページが、スマホの画面サイズに合わせて縮小されて表示されるので、文字が非常に小さくなって見れたものではありません。
今の時代、Web閲覧はPCで見るよりもスマホやタブレットなどで見られる方が圧倒的に多く、むしろスマホで見られることを中心にデザインする必要があるくらいです。
いずれにしてもスマホでの表示がどうなるかは、非常に重要です。
私の場合、テーマとしては、
- Attitide
- Simplicity 2.0
- Principle
- 賢威
- Emanon
- Cocoon
を中心にページ作成をしています。ちなみにこのサイトはAttitude（→Cocoonへ変更）を使っています。
PC用とスマホ用の表示で一番の違いは、画面のサイズ、特に横サイズになります。
横に広く使えるPC表示に対して、スマホ表示では横は非常に小さくなります。このことをページを作るときには常に意識する必要があります。
特に画像を挿入するときに、PCでは画像を横並びにしたり、画像の横に文字を回り込ませたりすることで見栄えを良くしたりしますが、スマホ表示では、画像サイズが横方向は350～400ピクセル程度で制限されてしまいます。
また、画像を横並びにしていたレイアウトを縦並びにするようなことを、テーマがやってくれたりします。
PC用にデザインしたものを、スマホ用にどう変換するかはテーマによって異なるので、テーマ毎のクセを把握しながらデザインしていきましょう。
上級者になると、ワードプレスのテーマの編集というのを使って、phpファイルやcssファイルを必要に応じて編集することで、デザインそのものや、スマホ対応時に変換方法などをカスタマイズすることもできます。
このサイトでも、私が困って対応したテーマの編集について少しだけですが共有していますので、多少慣れてきたら参考にしてみてください。
このサイトのトップページで、PC表示とスマホ表示の違いを見てみましょう。
PC用の表示
スマホ表示
特に画像や表のサイズには注意してください。通常は、スマホ表示ではMaxサイズを設定して、それよりも大きいサイズの時には縮小してMaxサイズにして表示してくれるのですが、必ず自分でPC表示とスマホ表示を確認しながら進めてください。
また、スマホ表示のメニュー表示などは、テーマによって異なります。好みもありますので、UIとしてどう違うかも確認してみてください。
また、WPtouchというスマホ用のデザインをしてくれるプラグインがあります。これを利用すればレスポンシブ対応でないテーマでも自動的にスマホデザインに変換してくれます。
to be continued …
追伸（2020年4月）
テーマも時間とともに進化しています。レスポンシブ・デザインに関しても、本当に最近のテーマは良くできていると思います。
このページも記事で取り上げたように、AttitudeからCocoonに多少苦労しながら変更しています。弊社のホームページは、VizvectorからEmanonに変更したりしています。
テーマは面白いです。
初めてのホームページ作成！初期費オール０円キャンペーン実施中
コメント