在宅Webデザイナーの仕事を探していると、「HTML・CSSの知識が必要」「コーディング経験者歓迎」と書かれている求人をよく見かけます。
しかし、Webデザイナーを目指している人の中には、
「Webデザイナーはデザインだけではダメなの？」
「HTMLやCSSは、どこまでできればいい？」
「JavaScriptやWordPressも使えないと働けない？」
と不安に感じている人も多いのではないでしょうか。
私も久しぶりにWebデザイナーとして仕事復帰するときは、現在のWeb制作でどの程度のコーディングスキルが求められるのか分からず、不安に感じていました。
実際に在宅Webデザイナーとして働いてみると、デザインだけを担当するのではなく、HTML・CSSを使った更新やレイアウト調整、CMSへの反映など、コーディングに関わる仕事も多くありました。
ただし、毎回ゼロから大規模なWebサイトを構築したり、複雑なプログラムを書いたりしていたわけではありません。
この記事では、在宅Webデザイナーとして働いていた私が、実際にどこまでコーディングを担当していたのかを紹介します。
これからWebデザイナーを目指す人や、ブランクがあってコーディングに自信がない人は、ぜひ参考にしてみてください。
在宅Webデザイナーはコーディングも担当する？
結論からいうと、在宅Webデザイナーがコーディングをどこまで担当するかは、会社や制作体制によって大きく異なります。
デザインとコーディングの担当者が完全に分かれている会社もあれば、Webデザイナーがデザインからコーディング、公開後の更新までまとめて担当する会社もあります。
特に規模の小さな会社や、社内のWeb担当者として働く場合は、担当する仕事の範囲が広くなりやすいです。
私が働いていた会社でも、Webサイトのデザインだけではなく、HTML・CSSを使ったコーディングや既存ページの修正、CMSの更新なども担当していました。一方で、サーバー側の複雑な処理や、本格的なシステム開発については、主にエンジニアが担当していました。
Webデザイナーだからといって、すべてのプログラミングができなければならないわけではありません。私の場合は、デザインを実際のWebページとして形にしたり、既存サイトを更新したりするためのコーディングが中心でした。
私が実際に担当していたコーディングの仕事内容
ここからは、在宅Webデザイナーとして実際に担当していたコーディングの仕事を紹介します。
1．HTML・CSSを使った既存ページの修正
最も多かったのは、すでに公開されているWebページをHTML・CSSで修正する仕事です。
たとえば、次のような修正を行っていました。
- 見出しや文章の変更
- 画像の差し替え
- リンク先の変更
- ボタンの追加や削除
- 文字サイズや色の調整
- 余白や横幅の調整
- レイアウトの崩れの修正
- パーツの表示・非表示
- 新しい項目やコンテンツの追加
一からページ全体を作る仕事だけでなく、実際の現場では、このような細かな修正依頼もたくさんあります。
「文章を一か所変更するだけ」という簡単な依頼もあれば、文章量が変わったことでレイアウトが崩れ、CSSまで調整しなければならないこともありました。
見た目には小さな修正でも、PC表示とスマートフォン表示の両方を確認する必要があります。
また、同じパーツが別のページでも使われている場合は、変更による影響がほかのページに出ないか確認することも大切でした。単純にコードを書き換えるだけではなく、サイト全体への影響を考えながら修正することが求められます。
2．デザインをもとにしたページのコーディング
Webサイトのリニューアルや新しいページを作るときには、作成したデザインをもとにHTML・CSSでページを組み立てることもありました。
画像や文章を配置し、余白や文字サイズ、背景色、ボタンなどをデザインに合わせて調整していきます。デザイン画面ではきれいに見えていても、実際にブラウザで表示すると、文章量によって高さが変わったり、画面幅によって要素の位置がずれたりします。
そのため、デザインをそのまま再現するだけではなく、Webページとして無理なく表示できる形に調整する必要がありました。
たとえば、次のような点を確認します。
- 見出しと本文の間隔は適切か
- 画像が大きすぎたり小さすぎたりしないか
- ボタンが押しやすい大きさになっているか
- 文章が増えてもレイアウトが崩れないか
- 画面幅が変わっても読みやすいか
- 既存サイトのデザインルールに合っているか
Webデザイナーがコーディングも担当すると、デザイン上の意図を自分でページに反映しやすいというメリットがあります。
一方で、実際の表示を考えながらデザインを作る必要があるため、見た目だけではなくHTML・CSSの構造も意識するようになりました。
3．スマートフォン表示の調整
現在のWeb制作では、PCだけではなくスマートフォンで見たときの表示も重要です。
私が担当していた仕事でも、スマートフォン表示の確認やCSSの調整はよく行っていました。
PCでは横並びになっている要素をスマートフォンでは縦に並べたり、文字サイズや余白を小さくしたりします。
また、スマートフォンでは画面幅が限られているため、次のような問題が起こることもあります。
- 画像が画面からはみ出す
- 文章やURLが途中で切れる
- ボタンが小さくて押しにくい
- 表が横に長くなりすぎる
- メニューが重なって表示される
- 文字が小さくて読みにくい
- 要素同士の余白が広すぎる、または狭すぎる
このような問題を見つけたら、CSSのメディアクエリなどを使って調整します。
PCで正しく表示されたから完成ではなく、スマートフォンやタブレットなど、画面幅を変えながら確認する必要がありました。
実際の修正では「スマートフォンだけ画像を小さくしたい」「この幅になると文字が重なる」といった細かな調整も多く、レスポンシブ対応の知識は欠かせませんでした。
4．WordPressやCMSを使った更新
すべてのWebサイトをHTMLファイルから直接更新していたわけではありません。
WordPressやMovable TypeなどのCMSを使って管理されているサイトもありました。
CMSとは、専門的な知識がなくても、管理画面から文章や画像を更新しやすくする仕組みです。
簡単な文章の修正や画像の差し替えであれば、管理画面だけで作業できることもあります。
しかし、実際には管理画面から更新するだけでは対応できないケースもありました。
たとえば、レイアウトを変更したい場合や、新しいデザインのパーツを追加したい場合は、HTMLやCSSの調整が必要になります。
また、CMSによって入力方法やページの構造が異なるため、どの部分を変更すれば画面に反映されるのかを確認しながら作業していました。
大学サイトなど、複数のページやサイトが関連している案件では、一か所の変更がほかのページに影響しないか、特に慎重に確認する必要がありました。
CMSを使う仕事でも、HTML・CSSの知識があると、表示が崩れたときの原因を探しやすくなります。
5．既存のコードを確認しながら修正
実際の仕事では、自分が最初から作ったWebサイトよりも、ほかの人が作った既存サイトを修正する機会が多くありました。
既存サイトでは、制作された時期や担当者によってコードの書き方が異なります。比較的新しい方法で作られているサイトもあれば、かなり前に作られた古いコードが残っているサイトもあります。
そのため、まずは既存のHTMLやCSSを確認し、
「この文章はどこから表示されているのか」
「このデザインはどのCSSで指定されているのか」
「このクラスを変更すると、ほかのページにも影響するのか」
といったことを調べる必要があります。
すぐにコードを書き換えるのではなく、現在の仕組みを理解してから修正することが大切でした。
特に共通のCSSを変更すると、複数のページのデザインが一度に変わってしまうことがあります。そのため、必要に応じて新しいクラスを追加したり、修正する範囲を限定したりして、ほかのページに影響が出ないように対応していました。
Webデザイナーのコーディングでは、新しいコードを書く力だけではなく、既存のコードを読み解く力も重要だと感じました。
6．JavaScriptが関係する修正
仕事の中では、HTML・CSSだけでは対応できず、JavaScriptが関係する修正もありました。
たとえば、クリックしたときの動きや表示の切り替えなど、Webページに動きを加える部分です。私はJavaScriptを使った複雑なプログラムを一から作ることを専門にしていたわけではありません。
基本的には既存のコードを確認し、必要な部分を調べながら修正していました。からない部分があれば、エラーの内容を確認したり、似たコードを調べたりしながら対応します。
最近ではAIも活用できるため、コードの意味やエラーの原因を確認しやすくなりました。
実際に、以前なら自分だけでは時間がかかっていたようなJavaScriptの修正も、AIにコードを確認してもらいながら進めることで、短時間で解決できたことがあります。
ただし、AIが出したコードをそのまま使うのではなく、実際のサイトで正しく動くか、ほかの部分に影響が出ていないかを確認する作業は必要です。
すべてを暗記して自分だけで書けなくても、コードを確認し、調べながら安全に修正できる力があれば対応できる仕事も多いと感じました。
7．公開前後の表示確認
コーディングが終わったら、ブラウザで表示を確認します。
私が行っていたのは、次のような確認です。
- デザインどおりに表示されているか
- 文章や画像に間違いがないか
- リンク先が正しいか
- PCとスマートフォンで崩れていないか
- ボタンやメニューが正しく動くか
- 修正していない部分に影響が出ていないか
- 公開環境でも問題なく表示されているか
自分のパソコン上では正しく見えていても、公開環境に反映すると画像が表示されなかったり、リンク先が間違っていたりすることがあります。
また、修正した部分だけではなく、関連するページまで確認する必要がある場合もあります。
コーディングは、コードを書いた時点で終わりではありません。
表示や動作を確認し、問題があれば再度修正するところまでが仕事です。
Webデザイナーとエンジニアの仕事の境界は？
Webデザイナーとエンジニアの担当範囲は、会社によって異なります。
私の場合は、Webページの見た目に関係する部分や、既存サイトの更新・修正を担当することが多くありました。
HTML・CSSを使ったページ制作やレイアウト調整、CMSの更新などは、Webデザイナー側で対応していました。
一方で、次のような専門性の高い作業は、主にエンジニアへ相談していました。
- サーバーに関する複雑な設定
- データベースを使った処理
- CMSの大きなシステム改修
- ログインや会員機能の開発
- 高度なJavaScriptの実装
- システム全体に影響する不具合対応
分からないことをすべて自分だけで解決するのではなく、どこまで自分で対応し、どの段階でエンジニアへ相談するかを判断することも大切です。
在宅勤務では、近くにいる人へすぐ口頭で質問できるとは限りません。
そのため、問題が起きているページや確認したコード、試したことなどを整理して伝える必要がありました。Webデザイナーとエンジニアが協力し、それぞれの得意分野を生かしながら制作を進めていく仕事も多くあります。
コーディングはどこまでできればWebデザイナーとして働ける？
Webデザイナーとして働くために、すべてのコードを完璧に書ける必要はないと思います。
ただし、デザインだけではなく、HTML・CSSの基本的な知識があると担当できる仕事の幅は広がります。
まずは、次のようなことができると実務で役立ちます。
HTMLの基本構造が分かる
見出し、段落、画像、リンク、リストなど、Webページを構成する基本的なHTMLを理解しておくと、既存ページの修正に対応しやすくなります。
コードを見たときに、どの部分が画面のどこに対応しているのか、ある程度分かることが大切です。
CSSで見た目を調整できる
文字の色や大きさ、余白、横幅、背景色、要素の並びなどをCSSで調整できると、実務で対応できる作業が増えます。
特に、Flexboxやレスポンシブ対応など、現在のWeb制作でよく使われる基本的なレイアウト方法は知っておくと便利です。
PCとスマートフォンの表示を調整できる
Webサイトは、さまざまな画面サイズで見られます。
PCでは横並び、スマートフォンでは縦並びにするなど、画面幅に合わせて表示を調整できるスキルは実務でもよく使います。
ブラウザの検証ツールを使える
表示が崩れたときに、ブラウザの検証ツールを使って原因を探せると便利です。
どのCSSが適用されているのか、どの要素に余白が入っているのかを確認できるため、修正作業を進めやすくなります。
分からないことを調べられる
実務では、すべてのコードを暗記している必要はありません。
分からないことが出てきたときに、検索やAI、公式情報などを使って調べ、内容を理解したうえで試せることが重要です。
ただし、調べたコードをそのまま貼り付けるだけではなく、どのような処理なのか、既存サイトに影響がないかを確認する必要があります。
コーディングが苦手でもWebデザイナーになれる？
コーディングに苦手意識があっても、Webデザイナーを目指すことはできます。
求人の中には、デザインを中心に担当し、コーディングは別の担当者が行う仕事もあります。
バナー制作や画像制作、デザインカンプの作成が中心の仕事であれば、高度なコーディングスキルを求められないこともあります。
ただし、HTML・CSSの基本を理解していると、コーディング担当者が実装しやすいデザインを考えられるようになります。
また、簡単な文章修正や画像の差し替えを自分で行えるため、仕事の幅も広がります。
最初から難しいコードをすべて書けるようになる必要はありません。
まずは、
- HTMLで文章や画像を配置する
- CSSで色や文字サイズを変更する
- 余白や横幅を調整する
- PCとスマートフォンで表示を変える
- 既存のコードを少し修正する
といった基本的な作業から慣れていけば大丈夫です。
私自身も、仕事の中で初めて触れるツールや、これまで経験したことのない修正に戸惑うことがありました。それでも、既存のコードを確認し、分からない部分を調べ、必要に応じて周囲へ相談しながら対応していくことで、少しずつできることが増えていきました。
ブランクがあってもコーディングの仕事はできる？
Web制作の方法や使用するツールは、少しずつ変化しています。
そのため、長いブランクがあると、
「昔の知識しかないけれど大丈夫かな」
「現在のコーディングについていけるかな」
と不安になることもあると思います。
私も仕事復帰した当初は、知らないツールや新しい制作方法に戸惑いました。
しかし、HTMLやCSSの基本的な考え方がすべて変わってしまったわけではありません。
以前身につけた知識を土台にしながら、現在使われている方法を少しずつ覚えていくことができました。
特に、既存サイトの文章修正や画像の差し替え、CSSの調整などは、基本的な知識を思い出しながら対応できる仕事です。仕事を始める前にすべてを完璧にしておくのではなく、実際の業務を通して必要な知識を学んでいくこともできます。
ブランクがあるからといって、これまでの経験がすべて無駄になるわけではありません。
デザインを見る力や、Webページの構造を考える力、修正箇所を丁寧に確認する力など、過去の経験を生かせる場面はたくさんありました。
在宅勤務ではコーディング以外の力も必要だった
在宅Webデザイナーとして働いて感じたのは、コーディングスキルだけですべてが決まるわけではないということです。
在宅勤務では、修正内容をチャットで確認したり、作業状況を文章で報告したりする機会が多くあります。
依頼内容が曖昧な場合は、
「文章だけを変更するのか」
「デザインやレイアウトも変更するのか」
「PCとスマートフォンの両方を調整するのか」
などを確認しなければなりません。
また、作業が終わったら、変更した内容や確認してほしい点を相手に分かりやすく伝える必要があります。
コーディングの技術に加えて、次のような力も大切でした。
- 依頼内容を正しく理解する力
- 分からないことを質問する力
- 作業の進み具合を報告する力
- 細かな表示崩れに気づく力
- 修正による影響範囲を考える力
- 納期から逆算して作業を進める力
特にWebサイトの修正では、小さな見落としが公開後のトラブルにつながることがあります。
高度なコードをすばやく書くことだけではなく、一つひとつ丁寧に確認しながら作業できることも、Webデザイナーに必要な力だと思います。
まとめ｜在宅Webデザイナーは基本的なコーディングができると仕事の幅が広がる
在宅Webデザイナーがコーディングをどこまで担当するかは、会社や案件によって異なります。
私が実際に担当していたのは、主に次のような仕事です。
- HTML・CSSを使った既存ページの修正
- デザインをもとにしたページ制作
- PC・スマートフォン表示の調整
- WordPressやMovable TypeなどCMSの更新
- 既存コードの確認と修正
- JavaScriptが関係する簡単な修正
- 公開前後の表示・動作確認
Webデザイナーだからといって、複雑なシステムをすべて一人で開発できる必要はありません。
私の場合も、見た目やWebページの表示に関係する部分は自分で対応し、専門性の高いシステム部分はエンジニアへ相談していました。
まずはHTML・CSSの基本を身につけ、既存ページの文章や画像を変更したり、レイアウトを調整したりできることが、実務への第一歩になります。
分からないコードが出てきても、調べたり、AIを活用したり、周囲に相談したりしながら解決できることも大切です。
コーディングに自信がないからといって、Webデザイナーを諦める必要はありません。
最初からすべてを完璧にするのではなく、できることから少しずつ増やしていけば、ブランクがあってもWebデザイナーとして仕事の幅を広げていけると思います。
コメント