CLOSEHOMEホームNEWSお知らせPROFILE私についてWORKS業務内容PRICE料金ついてPRODUCTION制作実績CONTACTお問い合わせカンプデータからのデータ書き出す時に気をつけている3つのポイント2019/04/27みなさん、こんにちは。ブログの更新が全然出来ておらず申し訳ありません...いよいよG.Wに突入してご家族で旅行に行ったりされている方も多いかと思います。自分も旅行に行きたいところですが作業をしながら過ごすことになりそうです。平成最後となるこのG.Wは何か特別なものを感じますね。元号の変わる瞬間に立ち会えると言うのは中々出来ない経験です。何かと話題は多いのではないでしょうか。今回はデザインカンプから画像の書き出しについてを書いてみようと思います。カンプデータと言うのはデザインの完成図の事で、この完成図を元に画像を切り出して素材と使用し、ホームページを組み上げていきます。最近は自分以外の方からのデザインから組むことが多いので、カンプデータの制作は必須になります。自分一人で全てやっているときは別として、カンプデータが無いとホームページを組むことは出来ません。その時にカンプデータをもらう時に気をつけていることがあります。大きくこの3つに気をつけています。細かいところは色々ありますが、今回はなぜここを気にしているのかを書いていきます。1制作してあるカンプの横幅の大きさこちらは自分がある程度決めているブレイクポイント(レスポンシブする上での切り替えのpx数)までスムーズに行けるかどうかを見てることが多いです。要素によってはここら辺では並び替えをしておかないといけないよなとかを考えておきます。後、結構多いテキストの折り返しは、意味上で読み取れるように判断して、自分の方で強制改行を入れたりすることもあります。レスポンシブした時には文字は入らなくなっていくので、意味上でいいように改行を入れないととんちんかんな意味や見た目になってしまいます。2使用されているフォント次に使用されているフォントです。これが結構重要で、見出しがホームページ上でテキスト記述できないとSEO対策では不利になってしまいます。一緒に仕事をしているデザイナーさんには出来るだけWEBフォントを使用してデザインをしていただくように依頼をしています。伝えることでお互いに修正をすることが減ると考え、これを実践するようにしています。クライアント様の要望で、どうしても今使用しているフォントを使用したいと言うことがありますがその時には画像で切り出して表示してもOKかの確認をしています。最後はレイアウトの法則性です。これは同じデザイナーさんとお仕事をすると分かってきたりもするのですが、デザインには何かしら法則性は隠れています。(コンテンツの並び方・見出しの大きさ・テキストの大きさ・隙間など)なので、この法則性をあらかじめcssに記述しておくことが結構オススメです。その時にはidもしくはclassで指定してあげると、この部分だけいらないと言う時にidもしくはclass指定を外して上げるだけで設定を解除できます。あまりにも広い範囲のタグ(h2とかdiv,pなど)でしてしまうとそのタグ全部に適用させてしまうので細かく解除作業すると大変です。上記の方法がいいのではないかなと思います。法則性は流用できると思うので、他の案件で同じ法則を見つけたらそのcssを引っ張ってきてそれに合わせてあげると作業効率も上がります。今回は自分がカンプデータで気をつけている3つのポイントをざっくりですが書いてみました。細かく書くとどこまでも書けてしまいそうな気がするので、もしリクエストなどあれば上記の事を事細かに書いてもいいかなと思っています。