この記事では、コーディング業務をしている・していないに関わらず、コーディングに対して苦手意識や課題意識を持っているWebデザイナー・Web担当者向けに、コーディング知識がしっかり身につく本を難易度別に6冊、＋αで読むと更にコーディングへの理解が深まる本を2冊ご紹介したいと思います。
どの本を買ったら良いか迷っている方は参考にしていただけたら幸いです。
Webデザイナーに必要なコーディング知識とは
おすすめの本を紹介する前に、なぜWebデザイナー・Web担当者がコーディング知識を身に付けた方が良いかご説明します。
コーディング知識が ”ない” ”ある” の差は大きい！
まず、みなさんにお伝えしたい事は、コーディング知識が ”ない” Webデザイナーが作成したデザインカンプは、コーディング知識が ”ある” Webデザイナーが作成したデザインカンプに比べ、エンジニアがコーディングする際に必要な情報が不足していたり、レスポンシブが考慮されておらず実装不可能なデザインだったり、開発や運用の際にトラブルが起きたりと、多くの問題を引き起こすことが多々あるという点です。
そして、それによって一番迷惑を被るのがエンジニアです。
逆を言えば、コーディング知識の ”ある” Webデザイナーは「この配置は実装に手間がかかるな・・・」「CSSだけで実装するのは無理だな・・・」という配慮ができるのでエンジニアの負担が減り、スムーズなコーディングが可能になります。
さらにWebデザイナーから直接エンジニアへコーディング指示をすることができるため、デザインカンプ通りにコーディングしてもらうことも可能になります。
また、シンプルなコードでコーディング可能なデザインにすることでページ速度が向上するというメリットもあります。
HTML・CSSとレスポンシブの理解は必須！
Webデザイナー・Web担当者の方には、前述した問題を防ぐためにも、まずはコーディング・Webページの基本的な仕組みや知識を理解しておくことが必要です。
デザインとコーディングを完全分業で制作をしている会社もありますが、作成したデザインをきちんと表現するため・制作現場でのムダを省くため・今後業界で生き残っていくためにも、しっかりとしたコーディング知識を身につけましょう。
ただ、漠然とコーディング知識を身につけると言っても、Webに関連するコーディング言語・知識は膨大にあるため、まずは１番デザインに影響し・比較的学習しやすいHTML・CSSから勉強していきましょう。
Webデザイナーがコーディングを苦手と感じる理由
「コーディング知識が業務に与える影響力が大きいことは分かった。ただそれでも、コーディングに対して苦手意識がある、難しそう。」と思われるWebデザイナー・Web担当者は多いと思います。
それでは、どうすればコーディングに対しての苦手を克服でき、コーディング知識を身につけ、自分のものにしていけるか、私自身の経験を元にご説明します。
私もかつてコーディングに対して苦手意識があった
私はWebデザイナー歴9年目になりますが、今まで2社ほどWeb制作関連の会社を経験してきました。
どちらの会社もディレクション・デザイン・コーディングが完全分業制で、コーディングの実装指示はディレクターとエンジニア間で行っていたため、コーディング知識がなくてもデザイン業務をすることができていました。
そのため、デザインカンプを作成したら、あとはディレクター・エンジニア任せで、公開完了して初めて自分の関わったWebページを見るということがザラでした。
実際、公開されたWebページは私が作成したデザインカンプから見た目やアニメーションなど大きく違うことが多々ありました。
しかし、コーディング知識がなくてもデザイン業務をすることができていると勘違いしていたせいで、コーディングを勉強するキッカケを逃してしまい、自分の専門外と勝手に決めつけることで、コーディングを学ぶことを避けてきました。
その結果、コーディングに対しての苦手意識だけがどんどん膨れ上がりました。
わからない（＝知らない）から苦手と感じる
私自身、コーディングを苦手と感じていた原因は、単にコーディングに関する情報・知識不足だったことが1番の原因でした。
また、デザインだけをしているWebデザイナーは仕事柄、ビジュアルで情報を把握する癖があるため、コーディングといったソースコードを見慣れておらず、感覚的に苦手に感じる人が多い気がします。
HTMLとCSSはプログラミング言語の中では、特にシンプルで分かりやすい言語になっているので、正しい知識を身につけていけば、挫折することなく学ぶことができます。
まずは、わからない（=知らない）→わかる（=知る）ところから始め、苦手意識を無くしましょう。
まずは自分のレベルに合った教材選びから
自分に向いていない教材や、自分のレベルより高い教材を選んでしまうと、挫折につながり、さらに苦手意識が増します。そのため、自分のレベルに合った教材を選ぶことが、苦手克服の一歩になります。
本は苦手意識をなくす最適な教材
本は、わからない（=知らない）→わかる（=知る）ための最適な教材です。
また、良書を読むことは、コーディングの全体像をつかみ、正しい基礎知識を体系的に知り・学ぶことができる上、苦手を克服しさらにレベルアップする際の手助けになります。
次章では、正しいコーディング知識が身につく良書を難易度別にご紹介します。
Webデザイナーにも分かりやすいイラスト・図解が多い本をピックアップしています。
【コーディング初心者のWebデザイナーにおすすめの本 2選】これだけ読めばコーディングの全体像がわかる！
まずは、コーディング初心者におすすめの2冊を紹介したいと思います。
基礎的な内容ですが、コーディングの全体像が分かり体系的に学べるので、どちらか１冊を読むことをおすすめします。
これだけで基本がしっかり身につく HTML/CSS＆Webデザイン1冊目の本
1冊ですべて身につくHTML & CSSとWebデザイン入門講座
【コーディング中級者のWebデザイナーにおすすめの本 2選】これを読めばコーディング苦手克服までもう少し！
では続いて、基礎的なコーディング知識が身についているWebデザイナーにおすすめの2冊を紹介したいと思います。
必ずしも必要な知識ではありませんが、Webデザイナーが実務でも役立つ内容があり、こちらを読めばコーディング指示がとても楽になります。
ほんの一手間で劇的に変わるHTML ＆ CSSとWebデザイン実践講座
Web制作者のためのCSS設計の教科書 モダンWeb開発に欠かせない「修正しやすいCSS」の設計手法
【コーディング上級者のWebデザイナーにおすすめの本 2選】これを読んでコーディング知識を武器にしよう！
コーディング知識は身についていて、大規模なWeb制作・開発の現場でデザインをしている上級者Webデザイナーにおすすめの2冊を紹介したいと思います。
こちらは必ずしも必要な知識ではありませんが、大規模開発に必要な実装の設計方法や手順が載っている数少ない本で、難易度も高いですが、大規模なWeb制作・開発の現場でデザインをしているWebデザイナー・Web担当者の方には是非読んでいただきたい本です。
フロントエンド専門制作会社が教える速く正確なWeb制作のための実践的メソッド
CSS設計完全ガイド ～詳細解説+実践的モジュール集
【＋αで読みたいWebデザイナーにおすすめの本 2選】これを読むと更にコーディングの理解が深まる！
こちらは＋αで読むと、よりコーディングの理解が深まる本を紹介します。
これからの「標準」を学ぶ マルチデバイス対応サイト構築
HTMLコーダー&ウェブ担当者のためのWebページ高速化超入門
最後に
コーディングへの苦手意識を克服したことで変わったこと
私自身、前述で紹介した本で段階を追って学習することで、コーディングに対しての苦手意識を克服していきました。一つ一つ学んで行くことで、今まで難しく見えていたHTMLやCSSがとてもシンプルな言語だと分かり、サイトのソースコードも読めるようになりました。
その結果、レスポンシブ・実装環境を考慮したデザインカンプを作れるようになり、実装できないトラブルもなく、エンジニアへ直接コーディング指示が出来るようになりました。
本以外でもコーディング知識は身に付けられる
コーディングは本以外でも身につけることができます。
実務でもしっかりコードを見て、構造を理解し、分からないことがあれば、辞書を引くように書籍で調べたり、検索するように癖付けましょう。
本で学習が苦手という方は、YoutubeやUdemyなどの動画学習サイトを活用したり、Progateなどの学習サービスで、手を動かしながらコーディング学習することもおすすめです。
そうすることでより速く理解でき、コーディング知識を自分のものにすることができます。
HTML/CSSが理解できたら、次はJavaScriptやCMS構築に必要なPHPも学んだり、インターネットの仕組みなど知るとよりさらにWebデザインやコーディングの知識が深まると思います。
最後までご覧いただきありがとうございました。
今回の記事が読者のみなさまの参考になれば幸いです。