ハシウェブ

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

アフィリエイト広告を利用しています

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

この記事は、最初の投稿から4年以上が経過しています。

最終更新から1626日が経過しています。

やってはいけない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くらいを想定してデザインするといいかなと思います。

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

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


Warning: simplexml_import_dom(): Invalid Nodetype to import in /home/hashi84/hsmt-web.com/public_html/wp/wp-content/themes/hsmt-web/functions/custom_ogp.php on line 32

Fatal error: Uncaught Error: Call to a member function xpath() on null in /home/hashi84/hsmt-web.com/public_html/wp/wp-content/themes/hsmt-web/functions/custom_ogp.php:38 Stack trace: #0 /home/hashi84/hsmt-web.com/public_html/wp/wp-content/themes/hsmt-web/blog/web-design-point.php(53): get_ogp('https://webseey...') #1 /home/hashi84/hsmt-web.com/public_html/wp/wp-includes/template.php(772): require('/home/hashi84/h...') #2 /home/hashi84/hsmt-web.com/public_html/wp/wp-includes/template.php(716): load_template('/home/hashi84/h...', false, Array) #3 /home/hashi84/hsmt-web.com/public_html/wp/wp-includes/general-template.php(204): locate_template(Array, true, false, Array) #4 /home/hashi84/hsmt-web.com/public_html/wp/wp-content/themes/hsmt-web/single-blog.php(100): get_template_part('blog/web-design...') #5 /home/hashi84/hsmt-web.com/public_html/wp/wp-includes/template-loader.php(106): include('/home/hashi84/h...') #6 /home/hashi84/hsmt-web.com/public_html/wp/wp-blog-header.php(19): require_once('/home/hashi84/h...') #7 /home/h in /home/hashi84/hsmt-web.com/public_html/wp/wp-content/themes/hsmt-web/functions/custom_ogp.php on line 38