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

2020.02.19

【ワークスペース】シェアオフィスのメリットとデメリットは?

■「シェアオフィス」とはどんなもの?一般的にオフィス(事務所)は仕事をする空間・スペースですが、賃貸契約のオフィスもあれば、丸ごと購入するオフィスもあります。その場合において、従業員とお客様のみが利用できるという意味で「専有オフィス」...

【キャリアアップ】Webデザイナーが持つべきプラスのスキルとは?

2020.02.04

【キャリアアップ】Webデザイナーが持つべきプラスのスキルとは?

■Webデザイナーを取り巻く現状と『キャリアアップ・チェンジ』現在もWebサイトは日々増え、さらに人手不足の昨今、Webデザイナーとしての仕事がすぐになくなることはないでしょう。しかし同時に求めるスキルも上がり、ただきれいなサイトを作...

【ワイヤーフレーム】Webディレクターがワイヤーフレーム作成で必ず押さえたいポイント!

2019.11.15

【ワイヤーフレーム】Webディレクターがワイヤーフレーム作成で必ず押さえたいポイント!

■ワイヤーフレームの目的は「デザインではない」 ワイヤーフレームを作る時に誰しもが1度は陥ってしまうと思われるのが『デザインを考え始めてしまい、ワイヤーフレーム作成が進まない』ということ。ワイヤーフレームを作る目的として、サイト制作に必...

【ブックマーク必須!!】Web制作で使いたい『お役立ちサイト』

2019.10.30

【ブックマーク必須!!】Web制作で使いたい『お役立ちサイト』

■ダミー画像作成をするなら『placehold.jp』「フレームワーク」ができて「モックアップ」用のダミー画像をいれる時、どのような方法をとっているでしょうか。ちなみに「モックアップ」は、ページの骨組みであるワイヤーフレームの後、それ...

【コーディングチェック】Web制作で納品前に使えるコーディングの便利ツール!

2019.10.01

【コーディングチェック】Web制作で納品前に使えるコーディングの便利ツール!

■「HTML・CSS」を同時にチェック「Dirty Markup」は、「HTML・CSS」を併せてチェックできるツール。とてもモダンで見やすく、使い勝手のよいオンラインチェックツールです。特徴は何といっても、汚いコード部分をキレイに整形...

【資格】フリーランスWebクリエイターが資格取得するメリット~後編~

2019.09.13

【資格】フリーランスWebクリエイターが資格取得するメリット~後編~

■前編はこちら【資格】フリーランスのWebクリエイターが資格取得するメリット~前編~■資格取得前にキャリアアップの形成計画フリーランスが「資格取得」を最大限に有効活用する上で、まずやらなければならないことがキャリアアップやフリーランス...