Category: DTPデザイナーが陥りがちな残念なWebデザイン

DTPデザイナーが陥りがちな残念なWebデザイン 1.アートボードの横幅は大丈夫? 「さあ、Webのデザインを始めよう」と思ったとき、悩むのが横幅の設定ではないでしょうか? Webデザインの場合、基本的に印刷物とは違い、A4サイズ、B5サイズ、など規定のサイズが決まっているわけではありません。 どのサイズにするのはデザイナーの自由です。 だからといって、極端に大きかったり小さすぎるのはデザイナーにとってもコーダーにとってもユーザーにとってもよくありません。 ではどの幅にすれば良いかというと、現在は以下の幅がよいと思います。 PC : 1366px / 1920px スマホ : 360px / 375px なぜ「現在」とつけたかというと、この幅というのは変化し続けているからです。 アクセス解析のサービス「statcounter」で最新のブラウザ幅のシェア率が見れるので、参考にしてみてください。 2.コンテンツ幅にガイドをつけよう アートボードの横幅が決まったら、次はコンテンツの幅を決めます。 コンテンツの横幅というのは、デザインを入れる横幅のことです。 なぜこの幅を決めるかというと、アートボードは表示しているパソコンorスマホの画面の幅であり、その画面いっぱいに作ると、窮屈なデザインになって見にくかったり、デザインにまとまりがでなくなったりするからです。 コンテンツ幅の目安は 1000px前後(900〜1200px)くらいがいいかなと思います。(2020年3月現在) ※目安なので、デザインによっては幅を変えても問題ありません。 ただ、全部この幅に収めると、インパクトが薄いデザインになりがちです。 この幅は、絶対に見せたい項目を入れる幅と思った方がいいでしょう。 例えば、写真や背景色などはコンテンツ幅ぴったりにせずに、横幅を画面幅に合わせて%で変わることを意識してデザインするなど、メリハリをつけるのがお勧めです。 このコンテンツ幅ですが、決めたときに必ずガイドを引くようにしましょう。 そうしないと、コンテンツ幅がバラバラでまとまりのないデザインになってしまいます。 またコーダーも幅がバラバラだと、その分コーディングに時間がかかることに。 ちなみにこちらの幅も、ブラウザの横幅と比例して変わってきており、今後も変わると思います。 なので、今はこのくらいがいい、というおおよ […] …