こんにちは。近年Webデザイナーに転職したり副業で始める人が増えていますが、正直に言うと、
「この人Webのこと全然知らないな・・・」
「これはデザイン初心者だな」
とバレバレのデザインを納品する人が増えました。
僕は常々「Webデザイナー」という職業には、
- デザインの知識
- Webの知識
の両方が必要だと思っています。その上で、特にWebに関しての基本的な知識が抜けていると思われるデザインファイルを非常に見かけます。
そこで今回は、「低レベルなWebデザイナーだな」と思われないようにWebデザインで守るべき基本的なポイントについて押さえていこうと思います。
フォントサイズに小数点が含まれている
Webにおいてはフォントサイズに小数がある場合、ない場合に比べて安定性が落ちます。OSやブラウザ、端末やディスプレイによって意図した通りに表示されないことがあるのです。具体的には、
- 小数点を四捨五入などで丸める場合がある
- フォントによって小数点指定すると見た目が崩れる
というような問題が起こる可能性があります。
確かに最近の環境では主なブラウザでも小数点をそのまま表示できるようになったり、端末側でもそう簡単には問題が起こらなくなりました。しかし、問題は思わぬところで起こるものです。わざわざそのようなリスクを負ってでも、どうしても小数点で指定したいという強いデザイン意図がない限りやらない方がいいでしょう。
（ちなみに、勝手に小数を整数に直してデザイナーに気づかれたことは残念ながら1度たりともありません。）
これをやるとWebをあまり知らない人だと思われるので、避けましょう。
ちょっと横幅を縮めただけで破綻する
これは本当によくあるのでものすごく困るのですが、例えば横幅1440pxでデザインをしている場合、1200px程度ですでに破綻するデザインをする人が結構います。
例えば、次のデザインを見てください。
このデザインは横幅1440pxで作られています。
画像・テキストを常に画面内に収めようとした場合、少し横幅を縮めたら各種要素がパンパンになってしまうことは想像に難くありません。
ブレイクポイントをどう想定するかにもよりますが、一般的に採用されやすい768pxで実装しようとした場合には1000pxを下回った頃には確実に破綻します。
これではレスポンシブを理解していない人だと思われます。そう思われないためには、
- デザイン上で作る時の横幅だけではなく、横幅を可変させた時（768px〜1920pxがよく利用されます）に綺麗に表示されるように意識する
- 「ブレイクポイントの設定上はPCサイズ内だが、横幅によっては一部の要素を非表示にする」というイレギュラーな対応がある場合は注釈を入れておく
などをしておくと良いでしょう。
念の為お伝えすると、これは「コーダーが面倒くさい」というレベルの話ではなく「明確な指示がないと実装方針が定まらず成果物のクオリティがブレる」ことを回避するためのポイントですのでぜひ意識してください。
均等に並ぶはずの要素間の余白がバラバラ
端的に言うと以下の画像のような状態を指します。
これもよく見かけまして、非常に困ります。このように均等に並んでいると思われる要素の余白や配置が微妙にずれている場合、「結局どのサイズにしたいのか」が読み取れなくなります。
また、このような状態でもし「あえてずらしたデザイン」があっても気づきにくくなります。
僕も最近はこっそり統一させてしまうことが増えましたが、本来はデザイナーの意図通りに実装するべきものです。細かい点も綺麗に作ってもらえると成果物の品質が上がっていきます。
細かいように思うかもしれませんが、デザインの意図がないと思われたりデザインツールの使い方がよく分かっていない人だと思われます。やらないようにしましょう。
単位がpxじゃない
信じられないかもしれませんが、ごく稀ではあるものの本当にptでデザインファイルを納品する人がいます。
これもWebを知らない人だと思われますし、正直迷惑なレベルなので絶対にやめましょう。
これらを気をつけてマイナスな印象を与えないようにしましょう。
コーダー側の対策法
さて、コーダー側ではどのような対処法があるでしょう。もちろん可能であればデザイナーに伝える、事前にレギュレーションを定めておくなどコミュニケーションで解決したいところではあります。
しかし常にそれができるわけではないので、コーディング時に上手く直す方法も知っておきましょう。
- 単位がpxじゃない場合、まずはpxに直す
- 各種サイズ指定がほぼ全て小数になるので、適宜四捨五入して整数に直す（特にフォントサイズ）
- 均等に並ぶはずのもの、左右対称になるはずのもの、中央揃えのはずのもの、などを見つけたらコード上では綺麗に配置してしまう
この辺りがコーディング上で直しても良さそうな範囲でしょうか。
2の「ちょっと横幅を縮めただけで破綻する」ケースはハイレベルなテクニックを知っておく必要があります。clamp()というCSSの関数を使って完璧レスポンシブ対応させる方法があります。
詳しくは次の記事からご覧ください。
コメント