ハシウェブ

Web制作、プログラミングに関する情報を発信するブログ

【コーディング】コーダーにもWebデザインスキルは必要?

【コーディング】コーダーにもWebデザインスキルは必要?

「デザイン会社、デザイナーからの差し戻し(修正作業)が多い」
「作業時間が見積もり時間より長くなってしまう」

そんな悩みがある人に向けた記事です。

  • 差し戻し(修正作業)が多い原因
  • 何が良いデザインなのか
  • デザインスキルがある程度あることによるメリット

この記事ではこんなことがわかります。

目次
  1. 結論:Webコーダーにも最低限のデザインスキル・知識は必要です
  2. デザインスキル、知識があれば回避できる差し戻し
    1. 両端揃えになっていない
    2. margin、paddingが適切でない
    3. line-heightが適切でない
  3. Webデザインの学習方法
    1. デザイナーにフィードバックをうける
    2. 本で学習する
  4. コーダーにデザインスキルがあることによるメリット
  5. まとめ

結論:Webコーダーにも最低限のデザインスキル・知識は必要です

そもそも、Webコーダーをやる人というのは以下のような人だと思います。

  • パソコン作業は好き
  • プログラマーをやりたいけど、そのステップとしてやってみよう
  • デザインセンスはないからWebデザイナーは無理

そんな人なので、デザインの勉強をあまりせずに
「デザイナーからもらったデザインをそのまま再現していけばいいや」
って、感じでコーディングしているから差し戻しが多いのだと思います。

本職のWebデザイナーのような独創的なデザインスキルが必要なわけではなく、あくまで最低限のデザインができるようになることはコーダーでも大事です。

デザインスキル、知識があれば回避できる差し戻し

デザインスキル、知識がある程度あれば、以下のようなときに自分で判断することができます。

両端揃えになっていない

コーディングスキルが低いという場合もありますが、横並びだときっちり左右が揃っていることがいいデザインです。
これを知っていれば、「デザインカンプではちょっとズレてるな」という場合でもコーダーの判断で両端揃えにしておくこともできます。

See the Pen デザイン 両端揃え by hashi84 (@hashi84) on CodePen.

margin、paddingが適切でない

「デザインは余白が大事」とよくいわれます。
デザイナーはページごとには細かくこだわってデザインしているのですが、ページ数が多いとページごとにmargin、paddingがちょっとズレているということもあります。
これをCSSを使ってclass化していれば、同じようなページ、セクションは共通化しておくことができます。

See the Pen デザインpadding by hashi84 (@hashi84) on CodePen.

line-heightが適切でない

デザイナーによっては、更新項目(お知らせ等)の文字数が増減することを考慮されていないことがあります。
これをデザインカンプのまま1行だと思って「line-height:1.5;」以上にしてしまうと、2行になったときに上下に余白がないということになってしまいます。
また、line-heightをpxで絶対値していしてしまうと、レスポンシブになったときに改行で文字が重なってしまうこともあります。
こういった場合に対応するのは、コーディングスキルでもありますが、line-heightだけでなくpaddingを上下に指定しておくことで回避できます。

See the Pen デザイン 改行 by hashi84 (@hashi84) on CodePen.

Webデザインの学習方法

デザイナーにフィードバックをうける

学習方法といえるかわかりませんが、差し戻しの際にデザインナーにその理由を聞くという方法です。
デザイナーから詳しく教えてもらえる環境であれば、何がいけないのか、どういけないのかを聞いて、その蓄積で自然とデザインスキルが上がってきます。
ただ、あまり聞いてばかりいると「自分で考えろ」と怒られるので良識の範囲で聞くことが大事です。

デザイナー

本で学習する

やっぱり本を読むことが大事だと思います。

ノンデザイナーズ・デザインブック
Webデザインにかぎらず、どんな仕事にも使える書類、資料作成等にも役立ちます。
けっきょく、よはく
デザインセンスが無いという人でも、とりあえず適度に余白をつけるだけでデザインがよくなります。

コーダーにデザインスキルがあることによるメリット

Webコーダーがデザイン会社、デザイナーに、「デザインスキルがあるな」「よっぽどひどいデザインにはならないな」と思ってもらえると、パソコンのデザインカンプのみ渡されて、「モバイルはおまかせ」といってもらえます。

「デザイン分、余計な仕事が増えてる」

と思う人もいるかもれませんが、そんなことありません。

レスポンシブコーディング

デザイナーすべての人がWebコーディング知識があるわけではないので、PCとモバイルでどうやって切り替えればいいのかわからないデザインをしてくる場合があるからです。
こういうときはソースを複数コーディングして、表示、非表示を切り替えなくてはいけなくなります。

こうならないために「PCのデザインにあわせてモバイルは自分でやりますよ」ということで、「デザインどおりではない」といわれなくてすむのです。

まとめ

コーダーがデザインスキルをつけることで、デザイナーの意図するデザインを判断することができ、よりよいコーディングもできるようになってお互いが幸せになります。
ゆくゆくは「デザインは苦手だな」という人でも、素人から見ればきれいくらいのデザインは全然できるようになってきます。

コーダーはあまり評価されずらい仕事ではありますが、その中で一段階上の仕事ができるようになれればと思います。