「Webデザインをする際にどんなことを注意すればいいかわからない」
「紙のデザイン専門だけど､これからWebデザインについても学びたい」
こういった悩みにお答えします｡
過去200件近くの案件で支給されたデザインをコーディングしてきました｡
根本的にコーディングで困るデザインや､ちょっとしたことなど､Webデザインで気をつけるポイントをまとめます｡
- 目次
やってはいけない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