YU-Create-Lab for Web Creator Webクリエイター・Webデザイナー向けの優クリ-Lab

2018.08.17

【前編】現役Webコーダーが気を付けているコーディングのコツと基本

【前編】現役Webコーダーが気を付けているコーディングのコツと基本

通常Webサイトを作る場合においては、デザイナーやコーダーなど様々な役割の人が関わりますが、フリーランスのWebデザイナーなどの中にはすべてを一人でこなす人も多くいます。そこで今回は「Webデザイナーだけど、コーダーにも興味がある」、「独学でやっているが、方法として問題ないか?」といった疑問や悩みを減らすべく、現役Webコーダーが普段から気をつけていることを前・後編にわけ、ご紹介して行きたいと思います。

下準備として必須なコーディング環境はどうしている?

Webコーダーがコーディングの際に使用している環境は主に2つあります。

1. Adobe Dreamweaver
2. Webサイトのローカル環境構築のためのMAMP(Mac)やXAMPP(Windows)


その他にも”Dreamweaver”の代わりにフリーのコーディングソフトを使うコーダーもいますが、Webデザイナーの方からすると通常Adobe製品の”Illustrator”や”Photoshop”を使っているかと思うので、Dreamweaverのほうが使いやすいかと思います。

ローカル環境に関しては、使っているOSが「Mac」か「Windows」かで使用ソフトが変わります。
どちらも自分のパソコンにWebサーバーと同じ環境を作ることができるので、直接サーバーにあげながらコーディングするのではなく、まずはローカル環境でサイト構築して最終的にWebサーバーにUPします。
 

WebディレクターとWebデザイナーとの意識合わせ

Webコーダーはイメージ写真などでもあるように、一見1日中黒い画面と向き合ってずっとキーボードを打っているかのイメージもあるかもしれませんが、分業の場合はWebデザイナーやWebディレクターと頻繁にミーティングを行います。

その際に大事なのが、「デザイナーが作った内容がコーディングする上で問題のないデータになっているか」や「サイトの動きとしてコーディングに問題がないか」をチェックしたり、クライアントからの要望や動きがあれば「それは事実上可能なのか?」可能であるならば「デザインとして、コーディングとしての方向性はどうしたらよいか」などの全体の連携と構成の確認が大切になります。

当然おわかりだと思いますが、これはコーダーだけではなくデザイナーにも言えることで、デザイン上ではコーディングのことも頭にいれながら、コーダーの意見も取り入れてデザインをまとめていく必要があるのです。


 

Webデザイナーからのデザインをスライスする前に気を付けたいこと

仕上がったデザインを確認後、まず、すぐにスライスしないようにしましょう。
全体を確認しながら見出しやリストになる部分など、コーディングする際にどのような構造にしていくか?をイメージして整理する必要があります。

筆者の場合は渡されたデザインデータに、コーディングする時のイメージを直接デザインに書き込んだりしています。

デザインも自分で行う場合は、デザイン時からコーディングのことも考えつつ、デザインとしては成立するがコーディングする場合には問題ないか、という疑問意識を持ちながら書き込んだりすることもあります。

そして、IllustratorやPhotoshopのレイヤーわけの際にも、「コーディング順にフォルダを整理」したり「フォルダ名をclass名にする」など、細かいことではありますが、作業を行う上での効率や気遣いを考えながら行う”くせ”をつけておくと、仮に自分以外が作業する場合でも、スムーズに移行しやすく、またミスの防止にも役立ちます。

また、デザインにズレは生じていないか、画像ばかり多用するデザインになっていないか、なども必ずチェックします。デザイン上でのズレは1px程度のものであれば視覚的にも問題ないかもしれませんが、コーディングしていくとたった1pxズレたものが目についてしまうことも多いので、そのようなズレはスライス時に必ず確認し、修正しておくようにしましょう。
 

【前編】まとめ

実際、コーディングをしていくとWebデザイナーの時は気づかなかったことや、コーディングとデザインをすることの両視点から見られるようになっていきます。そして、どこに注意をしておかなければならないか”見た目”と”構築”のバランスなどもわかるようになり、自分以外の人に仕事を振る場合や、最終的にディレクターとしてのスキルアップなどにも役立つことでしょう。

後編では、さらにコーディング時の”HTML”や”CSS”について気をつけておくべきことやコーディング後の再チェックに関することなどをご紹介しようと思います。
 

Recommend この記事を読んだ人はこんな記事も読んでいます

【WordPress】初心者コーダーも身に着けたい!セキュリティ対策時の「WordPress」プラグイン

2019.04.15

【WordPress】初心者コーダーも身に着けたい!セキュリティ対策時の「WordPress」プラグイン

■おすすめ「プラグイン1」国産プラグインで安心して使える「SiteGuard WP Plugin」 WordPressのセキュリティ対策プラグインとしては定番の「SiteGuard WP Plugin」。日本のセキュリティ会社「JP-Secur...

【スプレッドシート】制作現場で起こる共有トラブル!ありがちなパターンと解消法をマスターしよう

2019.03.25

【スプレッドシート】制作現場で起こる共有トラブル!ありがちなパターンと解消法をマスターしよう

■「スプレッドシート」とは? エクセルと同じ感覚で使うと起こるトラブルスプレッドシートとは、Googleが無料で提供している表計算ソフトです。スプレッドシートにおいて最大のメリットは、クラウド上で複数の人と共有できること。同時作業がで...

Webディレクターが「Webマーケティング知識を知るべき理由」と「その方法のポイント」とは?

2019.03.15

Webディレクターが「Webマーケティング知識を知るべき理由」と「その方法のポイント」とは?

■Webマーケティングは何を意味しているかWebマーケティングを簡単に言うと、Webでモノが売れる流れを作る活動のことです。あるいは、ユーザーにアクション(購買)を起こさせる仕組み作りとも言えます。具体的な例としては、SEO、リスティ...

【Webディレクター必見!!】低予算、要求だけはハイクラス…。 そんな「モンスタークライアント」を制し、仕事を回す術

2019.02.22

【Webディレクター必見!!】低予算、要求だけはハイクラス…。 そんな「モンスタークライアント」を制し、仕事を回す術

■「コスト意識」のないクライアントとは付き合わないまず、確認すべきこととしてクライアント窓口である担当者のコスト意識。何に幾らかかるかまったく理解せず、「予算はこれで、やってほしいことはこれ」と、予算と内容を別立てで提案してくるクライ...

【SEO】フリーランスのWebライターで生きていくために知っておきたい「SEO知識」

2019.01.29

【SEO】フリーランスのWebライターで生きていくために知っておきたい「SEO知識」

■SEOの原理とは?SEOとは皆さんもご存知の通り、Search Engine Optimization(サーチ・エンジン・オプティマイゼーション)の頭文字を取ったもので、日本語では「検索エンジン最適化」と表現されます。「Yahoo!」や...

ググるだけじゃない!Chromeの「便利な拡張機能」〈後編:Webディレクター編〉

2018.12.13

ググるだけじゃない!Chromeの「便利な拡張機能」〈後編:Webディレクター編〉

1.参考サイトやパーツ取りキャプチャにも便利な「FireShot」まず、はじめに紹介するのは「FireShot」。クライアントの要件に似た参考サイトを探したい時にとても便利です。しかもWebサイトのキャプチャを簡単に取れる機能も持って...