皆さんこんばんは。　Mon Webの楠本です。

さて第2回目の初学者に知って欲しい！シリーズを書いてみようと思います。　出来るだけこのシリーズを続けていって、これからWEBデザイナーを目指す方などに少しでも役立ててもらえればと思っています。

今回はその中でも「コーダーが嬉しいカンプデザイン」について書いてみようと思います。　
こちらは自分がコーディングする時に「こういうデザインをもらえると助かる！」という視点です。　個人差があると思うので参考程度にしていただければと思います。

1.規則性のあるデザイン

自分が一番作業しやすいと思うデザインは規則性があるデザインです。　多分多くのコーダーはこれだと自分は思っています。

コーダーはデザインを見てまず共通している箇所を探します。（コンテンツとの隙間・コンテンツの並び方・フォントの大きさなど）　これをする事で共通するクラスを作って、それを当てればそのスタイルが反映されるという事になります。　またそのクラスのスタイルが変更になった時に、該当箇所だけ直せば一気に修正をする事が出来ます。

最近良く耳にする「コンポーネント思考」という出来るだけデザインを細かいパーツに切り分け、それを元に組み上げる事が多くなってきています。　この思考でコーディングするとCSSの保守性や記述量の減少を見込めると思っています。

なのでデザインをされる方はなるべく規則性があるデザインを作ってみてはどうでしょうか？

2.テキストの取り回し

テキストは一見簡単に見えてすごく難しい箇所だと思います。
大きさ・太さ・文字間の隙間・行間の隙間など表現方法が多様にあります。　その中でも規則性を持っているととても助かります。　見出しはこのスタイル、通常テキストはこのスタイルなど決まっているとコーダーはものすごく喜ぶと思います。

もしDTPが得意な人のデザインは細かくテキストをチェックした方がいいです。　DTPが得意な方は個人的にカーニング（文字修正）を多用しているイメージがあるので、「こことここの文字はこの隙間、ここはこの隙間」と違っている事があるので注意したいところです。　

後、注意したいのがテキストの中央揃えや左揃えです。
WEBデザインではレスポンシブするのが前提なので、文字折れに関しては閲覧環境に依存します。　なので基本的には強制改行を使用しないデザインであるとコーディングはしやすいです。

3.デザインデータがフルHDサイズ

これは結構重要で昨今のデバイスの多様性は目に見張るものがあります。
その中でWEBのデザインをするとなると「どの大きさを基準にデザインしたらいいのか？」というデザイナーさんもいらっしゃるかと思います。

自分自身は最近までは1480pxのアートボードで作る事が多かったですが、チームの意見から最近ではフルHD（幅1920px）のものでデザインをする事になっています。

こちらの大きさからの素材書き出しをすれば小さくなった時に取り回しが良い事が分かりました。　
理由としては小さいサイズで書き出した素材を大きいサイズで表示する時には、引き伸ばされる可能性があります。　その際に思った以上に見た目が粗くなったりするのを防ぐ役目もあります。

画面幅100%の背景素材などは、画面が小さくなると見切れていく事になりますのでそこを考慮したデザインであるといいかなと思います。

4.最後に

いかがでしたでしょうか？

WEBデザインと一括りに言っても様々な所を気にしたりする事により、自らのスキルアップやデザイナーとしての信頼を勝ち得る事が出来るのではないでしょうか？

コーディングは出来ないけど、デザインなら誰にも負けたくない！という方は、WEBデザインをする時には参考にしていただけると嬉しいです。

それでは、また次回に！