MENU CLOSE

カンプデータからのデータ書き出す時に気をつけている3つのポイント
2019/04/27

みなさん、こんにちは。 Mon Webの楠本です。

ブログの更新が全然出来ておらず申し訳ありません…

いよいよG.Wに突入してご家族で旅行に行ったりされている方も多いかと思います。 自分も旅行に行きたいところですが作業をしながら過ごすことになりそうです。 
また、平成最後となるこのG.Wは何か特別なものを感じますね。 元号の変わる瞬間に立ち会えると言うのは中々出来ない経験です。 何かと話題は多いのではないでしょうか。

さて、今回はデザインカンプから画像の書き出しについてを書いてみようと思います。

カンプデータと言うのはデザインの完成図の事で、この完成図を元に画像を切り出して素材と使用し、ホームページを組み上げていきます。
最近は自分以外の方からのデザインから組むことが多いので、カンプデータの制作は必須になります。 
自分一人で全てやっているときは別として、カンプデータが無いとホームページを組むことは出来ません。

その時にカンプデータをもらう時に気をつけていることがあります。
自分が気にしているポイントは、

・制作してあるカンプの横幅の大きさ
・使用されているフォント
・レイアウトの法則性

大きくこの3つに気をつけています。 細かいところは色々ありますが、今回はなぜここを気にしているのかを書いていきます。

①制作してあるカンプの横幅の大きさ



こちらは自分がある程度決めているブレイクポイント(レスポンシブする上での切り替えのpx数)までスムーズに行けるかどうかを見てることが多いです。 要素によってはここら辺では並び替えをしておかないといけないよなとかを考えておきます。
後、結構多いテキストの折り返しは、意味上で読み取れるように判断して、自分の方で強制改行を入れたりすることもあります。
レスポンシブした時には文字は入らなくなっていくので、意味上でいいように改行を入れないととんちんかんな意味や見た目になってしまいます。

②使用されているフォント



次に使用されているフォントです。
これが結構重要で、見出しがホームページ上でテキスト記述できないとSEO対策では不利になってしまいます。

なので、一緒に仕事をしているデザイナーさんには出来るだけWEBフォントを使用してデザインをしていただくように依頼をしています。 あらかじめ伝えることでお互いに修正をすることが減ると考え、これを実践するようにしています。
クライアント様の要望で、どうしても今使用しているフォントを使用したいと言うことがありますがその時には画像で切り出して表示してもOKかの確認をしています。 そこを怠ると相当大変な修正作業になってしまいます…(経験したことあり)

③レイアウトの法則性



最後はレイアウトの法則性です。
これは同じデザイナーさんとお仕事をすると分かってきたりもするのですが、デザインには何かしら法則性は隠れています。(コンテンツの並び方・見出しの大きさ・テキストの大きさ・隙間など)

なので、この法則性をあらかじめcssに記述しておくことが結構オススメです。
その時にはidもしくはclassで指定してあげると、この部分だけいらないと言う時にidもしくはclass指定を外して上げるだけで設定を解除できます。
あまりにも広い範囲のタグ(h2とかdiv,pなど)でしてしまうとそのタグ全部に適用させてしまうので細かく解除作業すると大変です。 なので上記の方法がいいのではないかなと思います。

また法則性は流用できると思うので、他の案件で同じ法則を見つけたらそのcssを引っ張ってきてそれに合わせてあげると作業効率も上がります。 


今回は自分がカンプデータで気をつけている3つのポイントをざっくりですが書いてみました。
細かく書くとどこまでも書けてしまいそうな気がするので、もしリクエストなどあれば上記の事を事細かに書いてもいいかなと思っています。


それでは、また次回に!
良かったらTwitterのフォローとFacebookのいいねをお願いします!