デザインの次の重要な作業、コーディングでできること

これからWebサイトを作ろうという方のつまづきポイントに「コーディング」という作業があります。

クライアントの中にはWeb関連のことはさっぱりわからなく、コーディングのことも「専門用語はわからないのでうまいことよろしくお願いします」という状態の方も少なくありません。

で、デザインとコーディングを一緒くたにしたために失敗したり、知らず知らずのうちにぼったくられてしまう危険を防ぐためにも、サイト制作のコーディングの役割についてまとめましたのコーディングとはなんなのか、どういうことができるのか、そういったことを知っておくとWebサイトを自身でつくっておられる方のご参考にもなるかと思います。

コーディングは現場作業

このサイトは、コーディングされたindex.phpファイルやstyle.cssファイルで作られていますが、そのファイルの中身はこのようになっています。

これだけを見てもコーディング作業が「デザインする」というのとは少し違うことがわかります。

テキストエディタでコーディング内容を追加、変更する

ワードプレスにはエディタ無しでファイルを変更できる機能もありますが、データが消える、画面が真っ白になる、非常に危険なためにあまりオススメしません。

テキストエディタはAtomやVSCode、Sublime Textなどが有名です(自身はSublime Textを使っています)。コーディングをする、というのはこれらのエディタを使って上のようなhtml、cssファイルを開きコードを書いてくことを指します。

color:red; //文字の色を赤にする
border: 2px dotted #000;  //太さ2pxの点線枠をつける

Webデザインでこのような書き方はしません。使用ソフトもエディタではなくphotoshopやillustratorを使って制作し、納品物はindex.htmlファイルやmain.jsファイルではなく、jpg、png、psdなどの画像ファイルです。イメージ的には

・Webデザイン → 画像で設計図を作る
・コーディング → 設計図に従って工事する

ようなイメージで間違いではないと思います。

無料制作ツールで作るサイト制作の難しさ

WixやJimdoなどWebサイトを無料制作できるツールは、コーディングすることなくWebサイトを公開できます。しかしこれはコーディングしていないわけではなくて、すでにある程度コーディングされたフレームの中に文章や画像を入れていく、という方式になっているためです。

それらのツールで部分的な色やアニメーションに不安を感じて変更しようとしたとき、別途「コーディング」という作業が必要になります。

同じWebデザイナーでもできる人とできない人がいる

コーディングを主に担当するのはWebデザイナーではなく、コーダーやフロントエンジニアと呼ばれる方々です。しかし現在のサイト制作では流動的なレスポンシブデザインやメニュー表示のアニメーションなど、デザイン画像だけでは対応できないシーンも多くなってきているので、Webデザイナーの方もcssやjsなど習得してコーディング対応するのが主流になってきています。

Webデザインの前にコーディングは考えているはず

これは聞いた話なのですが、Webデザインを依頼した方とは別の方にコーディング依頼をするようなことがあると、「使用上このようにコーディングはできません」とデザインの変更を余儀なくされてしまうこともあるようです。

これはデザイン作業者とコーディング作業者が同一人物ならば起こりにくい問題です。作業はデザインが先ですが、考えるのはデザインと同時かその前でないとコーディングできないデザインになってしまいますので、別担当者の場合には気をつけてください。

Pass On

ikeda
(いけだきょうすけ)1989年生まれ。愛知県のwebデザイナー兼プログラマー兼ライター。基本的に企画からデザイン、プログラミングまで一貫して請け負っているがイラストはへたくそ。誰かの人生がちょっと良くなれば嬉しいです。