コーダーがコーディングしにくいデザインカンプ【対処法も紹介】

Web制作

 

コーダーがコーディングを行う時は、必ずデザインカンプを元に作業します。

が、たまに「何だこのデザイン・・・」「ここどうやって実装するんだ・・・」みたいなデザインに遭遇することもあります。

 

今回はコーディングで似たようなトラブルに遭遇した方、デザインを作る方に向けてコーダーの困るデザインカンプと、その対処法を紹介します。

 

では、記事に入ります。

 

文字が画像になってる

あまりないのですが、たまにテキスト部分が丸ごと画像になっていることがあります

↓こんな感じで

これだとフォントや文字サイズ、行間などのデータが全くわかりません

加えて、テキストコピーができないため全て手入力する必要があります

 

単語一個や短い文ならいいのですが、数行に渡ると時間はかかるし誤字脱字の可能性も高まります。

長文は必ずテキストでお願いします・・・_(:3 」∠)_

 

対処法

・文字データがわからない

クライアントに確認を取るのが一番です

もし連絡が遅いけど緊急でやる必要があるなどの場合は、他の部分のデータと合わせましょう。

案件によっては、基準となるベーシックフォントが定められている場合もあります。

 

無いとは思いますが、デザインカンプの文字全てが画像だった場合は即クライアントに確認を取りましょう。

 

・テキストコピーができない

こういうときは、GoogleドキュメントのOCR機能(文字起こし)を使いましょう。

 

まずはテキスト部分の画像を書き出して保存します。

保存した画像をGoogleドライブに入れて、

右クリック→アプリで開く→Googleドキュメント

を選択します。

 

 

Googleドキュメントが開かれ、画像のテキストが全てドキュメント上にテキストデータとして表示されます

後はテキストをコピーしてHTMLに貼り付ければ終わり。

 

注意点:

1.途中で改行する文章を貼り付けると、Googleドキュメントでは半角スペースを入れてきます。

2.画像の解像度が低いと、うまく文字起こしされずに全然違う内容を表示する事があります(細かい漢字にありがち)

 

余白がバラバラ

ページ内の余白に統一感がなく、数字も適当に振られていると調整が結構大変です。

特に面倒なのが、以下のように下層ページごとに余白の幅が異なるときですね。

1つ目のページはメインコンテンツからフッターまでの距離が82px、2つ目のページは149pxです。

これだと余白はバラバラだし数字も適当で統一感が一切ありません。

 

下層ページごとにいちいち違う細かい値を指定してあげなきゃいけないのは面倒です・・・

 

対処法

こういうデザインが来るときは、割とクライアントも余白に関しては適当だったりします

1pxもズレない前提で、みたいなことはまずありません。

 

「余白がバラバラなので、こっちで調整して統一していいですか?」などと聞くと、大体OK貰えます。

 

あとは元デザインから離れすぎないように注意して、コーディングがやりやすいよう調整しましょう。

 

画面サイズが適当

通常Webサイトをデザインするときは、モニターやスマートフォンのデバイスサイズ、解像度を元に画面サイズを決定します。

そのため、この画面サイズを全く考慮しないデザインカンプがくるとコーダー側は困ります

 

僕の実体験ですが、デザインカンプがなぜか横幅4000pxで来たことがあります。

サイズデカすぎてデータ重いし、基準のサイズがわからなくて非常に困りました。

 

クライアントに確認したら、とりあえず1920pxで!という指定が来たのですが、4000px前提で作られているから縮小すると余白やフォントサイズがまあ変な値になるわけで・・・

 

この手の案件は、デザインがコーディングを前提に考えられてない場合が多いので注意が必要です。(ちなみにこの案件は謹んで断りました・・・)

 

一部のデザインがない(任される)

例えば、PC版のデザインデータはあるけどスマホ版はないとき、

「スマホ版はいい感じで!」

なんて言われることがあります。

 

いい感じって何だよ!と言いたいところですが、レスポンシブに限らず割とよくある話だったりします

・「ボタンもうちょいかっこよくして!」

・「かっこいいアニメーションつけて!」

などなど・・・

 

ちょっとアニメーション入れるくらいならいいのですが、稀に「いい感じのキャッチコピー入れといて!」などコーダーの業務範囲を完全に超えているものも来たりします。

 

仕事を受け始めの時期だと、あれもこれもと受けがちですがこの辺の要求をずっと聞いてるとキリがありません。

線引きはきっちりしておきましょう。

 

対処法

受注前にデザインカンプを精査して、必ず確認をとりましょう

 

例えばデザインカンプにPC版しかなかった場合、「レスポンシブデザインはなしでよろしいでしょうか?」と質問しておくべきです。

スマホ版の依頼も来たら、きっちり追加料金を取りましょう。コーディングに加えて軽いデザインもやっているのですから。

 

応じなかったらお断りの方向で・・・

 

まとめ

色々書きましたが、わからないことがあったらクライアントに確認を取るのが一番です

自己判断で動いて消耗しすぎないように気をつけてください_(:3 」∠)_