2019年4月24日Web制作ツイートシェアはてブ送るPocketコーダーがコーディングを行う時は、必ずデザインカンプを元に作業します。「何だこのデザイン・・・」「ここどうやって実装するんだ・・・」みたいなデザインに遭遇することもあります。今回はコーディングで似たようなトラブルに遭遇した方、デザインを作る方に向けてコーダーの困るデザインカンプと、その対処法を紹介します。まとめ文字が画像になってるあまりないのですが、たまにテキスト部分が丸ごと画像になっていることがあります。↓こんな感じでこれだとフォントや文字サイズ、行間などのデータが全くわかりません。加えて、テキストコピーができないため全て手入力する必要があります。単語一個や短い文ならいいのですが、数行に渡ると時間はかかるし誤字脱字の可能性も高まります。・文字データがわからないクライアントに確認を取るのが一番です。連絡が遅いけど緊急でやる必要があるなどの場合は、他の部分のデータと合わせましょう。案件によっては、基準となるベーシックフォントが定められている場合もあります。無いとは思いますが、デザインカンプの文字全てが画像だった場合は即クライアントに確認を取りましょう。・テキストコピーができないこういうときは、GoogleドキュメントのOCR機能(文字起こし)を使いましょう。テキスト部分の画像を書き出して保存します。右クリック→アプリで開く→Googleドキュメントを選択します。Googleドキュメントが開かれ、画像のテキストが全てドキュメント上にテキストデータとして表示されます。後はテキストをコピーしてHTMLに貼り付ければ終わり。注意点:1.途中で改行する文章を貼り付けると、Googleドキュメントでは半角スペースを入れてきます。2.画像の解像度が低いと、うまく文字起こしされずに全然違う内容を表示する事があります(細かい漢字にありがち)余白がバラバラページ内の余白に統一感がなく、数字も適当に振られていると調整が結構大変です。面倒なのが、以下のように下層ページごとに余白の幅が異なるときですね。1つ目のページはメインコンテンツからフッターまでの距離が82px、2つ目のページは149pxです。これだと余白はバラバラだし数字も適当で統一感が一切ありません。対処法こういうデザインが来るときは、割とクライアントも余白に関しては適当だったりします。1pxもズレない前提で、みたいなことはまずありません。「余白がバラバラなので、こっちで調整して統一していいですか?」などと聞くと、大体OK貰えます。あとは元デザインから離れすぎないように注意して、コーディングがやりやすいよう調整しましょう。通常Webサイトをデザインするときは、モニターやスマートフォンのデバイスサイズ、解像度を元に画面サイズを決定します。そのため、この画面サイズを全く考慮しないデザインカンプがくるとコーダー側は困ります。僕の実体験ですが、デザインカンプがなぜか横幅4000pxで来たことがあります。サイズデカすぎてデータ重いし、基準のサイズがわからなくて非常に困りました。クライアントに確認したら、とりあえず1920pxで!という指定が来たのですが、4000px前提で作られているから縮小すると余白やフォントサイズがまあ変な値になるわけで・・・この手の案件は、デザインがコーディングを前提に考えられてない場合が多いので注意が必要です。「スマホ版はいい感じで!」なんて言われることがあります。いい感じって何だよ!と言いたいところですが、レスポンシブに限らず割とよくある話だったりします。・「かっこいいアニメーションつけて!」などなど・・・ちょっとアニメーション入れるくらいならいいのですが、稀に「いい感じのキャッチコピー入れといて!」などコーダーの業務範囲を完全に超えているものも来たりします。仕事を受け始めの時期だと、あれもこれもと受けがちですがこの辺の要求をずっと聞いてるとキリがありません。線引きはきっちりしておきましょう。受注前にデザインカンプを精査して、必ず確認をとりましょう。デザインカンプにPC版しかなかった場合、「レスポンシブデザインはなしでよろしいでしょうか?」と質問しておくべきです。スマホ版の依頼も来たら、きっちり追加料金を取りましょう。コーディングに加えて軽いデザインもやっているのですから。応じなかったらお断りの方向で・・・まとめ色々書きましたが、わからないことがあったらクライアントに確認を取るのが一番です。コメントをキャンセルメールアドレスが公開されることはありません。東京都内でWebコーダーとして活動中。ブログではプログラミングやガジェット、お役立ちツールなんかを発信していくつもりです。Web制作のご依頼はお問い合わせから承っております。