やってはいけないWebデザイン 10選

Webデザインと紙のデザインの違いを理解しておらず､紙のデザインと同じ設定でイラレデザインを支給してくることがごくまれにあります｡
イラレを最初に見た段階で幅3000pxのデザインだったりするとびっくりします｡

こういったことは「紙のデザインでは多くの実績があるけれど､Webデザインははじめて」というデザイン会社､デザイナーでたまにあります｡
デザインはいいけれど､それWebでどうやってやるの？どうしたいの？という疑問がたくさんでてきます｡
Webデザインと紙デザインで違うポイントはおさえておいたほうがいいかなと思います｡

「はじめてデザインします」というくらいのWebデザイン初心者は､独学､スクールなどで最低限の学習はしているのであまりこういうことはない感じがしています｡

POINT

Webデザインと紙デザインでは､同じデザインでもイラレの設定が違うので､違いを理解してからデザインする！

「デザインサイズが大きすぎる」のも困りますが､狭いのも困ります｡

現在のパソコンモニタシェアをみると主流は1920px～1366pxです｡
紙のデザインと違ってユーザーによってモニタサイズが違いますし､ブラウザを狭くして見るユーザーもいます｡
デザインサイズは1920pxでつくり､最低幅があるデザインであれば1000px～1200pxくらいを想定してデザインするといいかなと思います｡

デザインから意図がくみとれないと､細かく確認しないといけなくなったり､逆に確認しなければ修正を何度もしないといけなくなります｡

さらにいうと､スマホ､タブレットも想定しながらデザインしていると思えるデザインはコーディングしやすいです｡

POINT

Webデザインは､モニタサイズを意識しながらデザインする！

Webで使えるフォントは､ユーザーの端末が持っているフォントに依存します｡
Webフォントを使えばもう少し多くのフォントが使えますが､多用すると読み込み速度が遅くなり､さらにSEOにも影響がでてきます｡
だからといって､テキストを画像にするのもよくありません｡
デザイナーだとしても､ある程度Webで使えるフォントを理解しながらデザインしたほうが制作がスムーズになります｡

以下サイトで標準フォントがわかります｡

無料で使えるWebフォントだと「Google fonts」が一般的です｡
Google fontsなどを見て使いたいフォントがWebでも使えるのか確認したり､逆にGoogle fontsの中からフォントを決めるという使い方をしていくといいと思います｡

POINT

デザイナーもフォントが使えるかどうか理解が必要！

Webフォントの多用は控える！

画像に重なる透過色に乗算を使うことがよくあります｡
そのまま画像にスライスするものであればいいのですが､半透明にする場合は今のところそうはいきません｡
最新のブラウザだけに対応すればいいといわれるのであれば対応できますが､できるだけ多くのブラウザに対応させたいというのであれば乗算を避けるべきです｡

POINT

Webデザインで､乗算は避ける！

IEのシェアがもっと下がる､または､思い切ってIEを対象から外すとこういった便利なCSSが使いやすくなります｡

デザイン中に指示を記入してくれることはありがたいこともあるのですが､デザインの一部なのか､指示なのかわからないことがあります｡
こういった場合､間違えて指示テキストごと画像をスライスしてしまうこともあります｡

こういったことを防ぐためにも､指示用のレイヤーをつくって指示を記入してもらえるとわかりやすいです｡
また､わかりやすさだけでなく､表示､非表示を1クリックで切り替えできるので作業性もよくなります｡

POINT

デザイン中に指示を記入するときは､指示用のレイヤーに記入する！

共通デザインの見出しや文章､特に更新される項目である場合は､すごく手間をかけてカーニングを調整しても､そこに何文字入るのかわからないので､調整してもあまり意味がないです｡
カーニングを調整するよりも､1行に文字が少ないとき､多いとき､2行以上になったときどうしたいのか複数パターンつくっておいてもらえるほうが意図が理解できてありがたいです｡

POINT

共通項目で使う見出しや文章では過剰にカーニングする必要はない！

これもカーニングと同じようなことですが､半角､全角､スペースでデザインを調整するとコーディングが難しくなります｡
1桁の数字は全角､2桁以上は半角となっていると困ることが多いです｡

半角､全角､スペースでのデザイン調整は､WordでもHTMLコーディングでもよくないこととされています｡

POINT

半角､全角､スペースでデザイン調整はしない！

見出しの下marginがバラバラ､sectionの間隔がバラバラというのはよくあります｡
デザイン中に修正があって､何回も増やしたり､減らしたりしていると完璧に等間隔にしていくのは難しいかもしれません｡
こういった場合は､「●●ページにあわせてください」という指示だけもらえるとコーダーはモヤモヤが少なくなります｡

また､ページごとに色が少しずつ違うこともあります｡
これもメインカラー､サブカラーとか使っている色をまとめた指示をもらえるだけでサイト全体の統一がしやすくなります｡

POINT

デザインの共通化が難しい場合は､テキストで指示をする！

これが一番はじめかもしれませんが､細かいことなので最後にまとめておきます｡
デザインをしたあとでは変換が難しいこともあるので､最初にWebデザイン用に設定をしたほうがいいと思います｡

• 色を「CMYKカラー」から「RGBカラー」にする
• 「ピクセルプレビュー」にする
• 単位を「ミリメートル」から「ピクセル」にする
• 画像は埋め込む

POINT

デザイン前に､Webデザイン用のイラレ設定をしておく！

そんなこと無いだろうと思う人もいるでしょうが､結構あります｡
意外にトップページのほうがどこをh1にしたらいいのかわからないことが多いです｡
メイン画像にはキャッチコピーがあることが多いですが､ほんとうにキャッチコピーなだけで具体的な社名､店名､地域､業種などが含まれていないことが多いです｡
そういった場合､指示がなければヘッダーのロゴをh1にするしかありません｡

下層ページでも､「ページタイトルがなくサブタイトルから始まる」､「ナビの表示と違う」などがあります｡
コーダーがどうしていいかわからないデザインだと適切なh1､h2の見出しを設定できません｡
また､ページタイトルが長いため､ナビのテキストを省略されるデザインがありますが､こういったことをするとCMSでのページ管理が難しくなります｡
タイトルを省略してしまうデザインの多くはSEOを考慮していない､事前設計をしていないためにおこることが多いと思います｡

POINT

ページごとにSEOを考慮したタイトルを設定してからデザインをする！

タイトルは､ヘッダーナビ､フッターナビとまったく同じ文言にする！