Blog2015.06.07chieコーディングを考えたデザインとは?Web制作デザインコーディングシェアTweetこんにちは、chieです。今回はデザインについて少しお話させていただきます。私がWeb業界に入った頃のコーディングと言えば、「テーブルコーディング」が一般的な時代でした。今と違って自由にデザインできず、制限が多かったです。「こんなの組めない!」とコーダーを困らせたことも(笑)その時代に比べると、今はかなり自由にデザインできるようになりましたね。同じ要素なのに、デザインでは微妙に違ったりと無駄にスタイルを増やす原因にも。htmlの知識があれば、気づく点も多々あるため、コーディングしやすいデザインをつくるには、まずはhtmlの知識を身につけることが不可欠です!偶数?奇数?自分でコーディングするデザイナーであれば、多少の誤差はコーディング時に調整すれば良いのですが、デザインのみの納品や、コーディングは他者にお願いすることなども多いはずです。その場合、適当な数値での作成はNGです。私の場合、左はOKですが、右はNGを出します。右は奇数のため、SPサイトに利用しようとすると割り切れないため、表示にズレが生じてしまいます。若干画像サイズが違うため、少しボタンに違和感を感じてしまいます。デザインによっては例外もございますが、基本的には偶数で作成することをオススメしています。同じレイアウトなら空きなどは揃えるべし同じレイアウトが続くデザインの場合、空き、文字サイズ、効果の付け方は揃えると綺麗です。効果が違ったりなんてことも多いのです。なってくると困っちゃうのがコーディングの時。やっかいなのが要素同士の「空き」です。下の要素は赤いラインから右へズレています。デザイナーの意思でそうなっているのかどうかの判断がつかないため、デザイン通りにつくるとなると、無駄にスタイルが増えたりの原因にも。最初から適切にデザインされていれば、その手間も省けます。稀にデバイスフォントと画像フォントが同じだったり、デバイスフォント指示なのに、バラバラだったりします。その場合、細かく指示をいただかないとならないため、デバイスフォントのフォント種類は1種類だけにすることをオススメ致します。わかりやすいレイヤーレイヤーもデザインの重要な部分です。誰が見てもわかりやすいレイヤーは、あとから自分で見たときもわかりやすいので、レイヤーのネーミングは適切なものにしておくことをオススメします。右はフォルダ名を各エリアごとにわけているので、わかりやすいです。postsよく読まれている記事です。1MBは何GB?データ容量の単位を整理してみた!決定!2020年の流行色Photoshopで画像の書き出しができない時の対処法!Photoshopで書き出したjpg画像の色が変わる時の原因と対処Webデザインで使用できるフォント徹底解説。posts1MBは何GB?データ容量の単位を整理してみた!決定!2020年の流行色Photoshopで画像の書き出しができない時の対処法!Photoshopで書き出したjpg画像の色が変わる時の原因と対処Webデザインで使用できるフォント徹底解説。XDイラストお知らせ運用Fireworksクリエーターフォントまとめ初心者サーバ用語PHPスマホアプリjQuery息抜きDreamWeaverWebディレクターJavaScriptプログラミング仕事効率PhotoshopAdobeWordPress作業効率コーディング便利ツールHTML・CSSWEB制作現場デザイン。