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 この記事を読んだ人はこんな記事も読んでいます

【Word Press】Webディレクター必見!「Word Press」に必ず入れておきたいプラグイン

2018.11.01

【Word Press】Webディレクター必見!「Word Press」に必ず入れておきたいプラグイン

■WPでサイト構築をする上でプラグインのメリットとはWPのプラグインの主たるメリットは下記の3つです。1. 運用が楽になる2. 集客を手助けしてくれる3. ユーザビリティが向上することスパムコメントを自動で除外してくれる「AKismet」や...

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

2018.08.31

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

■”HTML”を記述する際に頭に入れておきたいことコーディングする際にHTMLで気をつけておきたいことは主に3つあります。1. HTMLのバージョンに合った文法を書くこと。2. 内部SEOを意識して、”...

【あるある話】Webディレクターの必須スキルはコミュ力!クライアントと制作スタッフとの上手な付き合い方

2018.07.27

【あるある話】Webディレクターの必須スキルはコミュ力!クライアントと制作スタッフとの上手な付き合い方

〈Case1〉システムのクセがすごい「制作スタッフといちばん揉めるのが、他社が作ったシステムの改修業務。 “他人がつくったサイトなんて直したくない”っていうプライドというか、そういう気持ち? を持っているコーダー...

【Webライター】Webメディアを担う大手クラウドソーソングの裏側

2018.06.22

【Webライター】Webメディアを担う大手クラウドソーソングの裏側

■クラウトソーシング会社を利用したライティングの受発注Webに関わる仕事をしている人にとっては、常識となっていますが、クラウドソーシングとは、ネット上のやりとりで仕事の受発注をするしくみです。それを仲介しているのがクラウドソーシング会...

【現役Webディレクターの本音シリーズ】Webライターで生きていくためのSNS活用術

2018.05.11

【現役Webディレクターの本音シリーズ】Webライターで生きていくためのSNS活用術

■SNSをセルフブランディングに使おう筆者に「Webライターになりたい」と相談に来る人には、まず「SNSは何を使っていますか?もし利用したことがないなら、アカウントをとってください」と言っています。SNSには、様々なものがありますが、...

Webクリエイターが知っておきたい!!北米のデザイントレンド情報

2018.04.20

Webクリエイターが知っておきたい!!北米のデザイントレンド情報

■アップグレードされ続けるフラットデザインシンプルで不必要なグラデーションやドロップシャドウを使わないフラットデザイン。2002年にリリースされた、マイクロソフトによるウィンドウズメディアセンターのデザインが始まりだったと言われていま...