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

【タスク管理】便利アプリ「Trello」でディレクションが劇的に変わる!?

2019.07.19

【タスク管理】便利アプリ「Trello」でディレクションが劇的に変わる!?

■「Trello」とはどんなツール? Trelloの特徴はタスク一つひとつを付箋に書き込み、それをカードとして登録、ボードに貼って管理していくということです。そして、付箋を貼り作業が進めば、次に貼っていくというように、ステータスの変化も...

【トラブル回避】「返信が苦痛…!?」連絡ツール利用時のトラブルとその解決法

2019.07.05

【トラブル回避】「返信が苦痛…!?」連絡ツール利用時のトラブルとその解決法

■電話に出たら最後…。緊急事案かどうかは後から判断すべし!!会社員の場合、業務時間外なら仕事の連絡が入ってきても対応する義務はありません。反面、「してはいけない」という禁止もなく、勤務時間外に電話やメッセージに対応する程...

【世界のデジタル・マーケティング事情】2019年の最新トレンド「パーソナライゼーション」とは?

2019.06.28

【世界のデジタル・マーケティング事情】2019年の最新トレンド「パーソナライゼーション」とは?

■デジタル・マーケティングおける「パーソナライゼーション」の重要性マーケティングにおける「パーソナライゼーション」とは、顧客それぞれに合わせたコンテンツやプロダクト、Eメールなどを提供することです。購入履歴や顧客動向、クリック履歴のデ...

【ARアプリ5選】「拡張現実」をスマホで気軽に体験!遂にここまで来た欧米のARアプリ

2019.06.21

【ARアプリ5選】「拡張現実」をスマホで気軽に体験!遂にここまで来た欧米のARアプリ

■あらゆるインテリアのシミュレーションができる「The Houzz」家具はもちろん、電気スタンドなどや小物・壁紙などの内装アイテムを組み合わせ、インテリアやレイアウトを変更してバーチャル上でルームデザインがお試しできるアプリ「The Ho...

【WordPress】意外と見落としがちな4つのセキュリティ対策~上級編~

2019.05.10

【WordPress】意外と見落としがちな4つのセキュリティ対策~上級編~

■〈Check1〉「wp-config.php」へのアクセスは制御する 「wp-config.php」はWordPressのシステムファイルの1つで非常に重要なファイルになります。セキュリティーレベルも非常に高いファイルの一つでもあり、...

2019.04.26

【WordPress】 意外と見落としがちな4つのセキュリティ対策~初級編~

■〈Check1〉WordPress本体の「バージョン」は常に最新状態か?WordPressのセキュリティに関する中でも、一番最初に見た方がよいのがWordPress本体そのものの「バージョン」です。WordPressには脆弱性の対策...