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

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

2019.09.13

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

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

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

2019.09.09

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

■後編はこちら【資格】フリーランスWebクリエイターが資格取得するメリット~後編~■フリーランスと「資格」の関係「会社」という枠から離れたフリーランス活動で大切なことのひとつに 「現状に満足しない」ことが挙げられます。「資格取得」と何の...

【Adobe XD活用】Webディレクターに使ってほしい分かりやすいイメージ共有法 ~前編~

2019.08.30

【Adobe XD活用】Webディレクターに使ってほしい分かりやすいイメージ共有法 ~前編~

■Webディレクターの仕事効率アップ!! 覚えて損はない『Adobe XD』現在、Webディレクターをやっている方でもし「Adobe XD」を知らないなら、是非、この機会に覚えておくとよいでしょう。Adobe XDを使いこなせるだけで、作り...

【最新トレンド】現役デザイナー選出する2019年Webデザイントレンド

2019.08.23

【最新トレンド】現役デザイナー選出する2019年Webデザイントレンド

■ユーザーの視線を引きつける『太さと大きさを備えたタイポグラフィ』『太字で大きく表示されるタイポグラフィ』は、昨年ごろからジワジワと流行の兆しを見せはじめています。最も伝えたい・見せたいテキストを大きなサイズで配置することで、ユーザー...

【業務効率化】Webディレクター必見のGoogle検索新機能!

2019.08.15

【業務効率化】Webディレクター必見のGoogle検索新機能!

■Googleの新機能「アクティビティカード」とは?「アクティビティカード」とは、ユーザーが検索した過去のトピックスに再度アクセスしやすいように、一連の検索履歴をまとめて参照できる機能です。例えば、「旅行・ハワイ・シュノーケリング」と...

【新デジタル技術】海外で体験できるアナログとデジタルの融合!

2019.08.09

【新デジタル技術】海外で体験できるアナログとデジタルの融合!

■〈アメリカ〉“Lumin AR Tour” デトロイト美術館Copyright © 2018 Detroit Institute of Arts. All rights reserved デトロイト美術館で昨年1月より開始。...