ハシウェブ

Web制作、プログラミングに関する情報を発信するブログ

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

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

「Webデザインをする際にどんなことを注意すればいいかわからない」
「紙のデザイン専門だけど、これからWebデザインについても学びたい」

悩み

こういった悩みにお答えします。

過去200件近くの案件で支給されたデザインをコーディングしてきました。
根本的にコーディングで困るデザインや、ちょっとしたことなど、Webデザインで気をつけるポイントをまとめます。

目次
  1. やってはいけないWebデザイン
    1. デザインサイズが大きすぎる
    2. デザインの幅が狭い
    3. 使えないフォントを使う
    4. 乗算を使う
    5. デザイン中に指示を記入するときレイヤー分けをしない
    6. 項目ごと、文字ごとにカーニング調整する
    7. 半角、全角、スペースでデザインを調整している
    8. 同じサイト内でページごとに少しずつ違う
    9. イラレの設定がおかしい
    10. タイトルがない
  2. まとめ

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

デザインサイズが大きすぎる

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

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

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

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

デザインの幅が狭い

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

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

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

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

モニター解像度のシェアを調べてみた(2020年1月版)

※本ページは随時更新しています。過去のシェアデータはページ下部に移動しました。アクセス解析サービス「StatCounter」を利用して、ディスプレイモニター解像度(画面解像度)のシェアを調べました。StatCounterについての詳細は「S

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

使えないフォントを使う

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

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

Font-familyメーカー:フォント種類一覧からサクッと指定

Windows・Mac・iOSの標準フォント一覧からドラッグするだけで簡単にfont-familyを作成できます。

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

Google Fonts

Making the web more beautiful, fast, and open through great typography

POINT
デザイナーもフォントが使えるかどうか理解が必要!
Webフォントの多用は控える!

乗算を使う

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

POINT
Webデザインで、乗算は避ける!

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

CSSブレンドモードで画像を彩ろう

Photoshopをはじめとしたグラフィックツールに搭載されている「ブレンドモード(描画モード)」機能。複数の画像や色を様々な手法で重ね合わせ、独特の効果をうみだします。そんなブレンドモード、実は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を考慮したタイトルを設定してからデザインをする!
タイトルは、ヘッダーナビ、フッターナビとまったく同じ文言にする!

まとめ

やってはいけないWebデザインについてまとめました。

  • デザインサイズが大きすぎる
  • デザインの幅が狭い
  • 使えないフォントを使う
  • 乗算を使う
  • デザイン中に指示を記入するときレイヤー分けをしない
  • 項目ごと、文字ごとにカーニング調整する
  • 半角、全角、スペースでデザインを調整している
  • 同じサイト内でページごとに少しずつ違う
  • イラレの設定がおかしい
  • タイトルがない

Webデザインするときには、こういった点を注意してもらえればと思います。