こんにちは！

UtakataでPM（プロジェクトマネージャー）とデザイナーを兼務しているshimoidaです。

今回は、デザイナーがHTMLとCSSを「少しだけ」学んでおくと、仕事がどう変わるのかをお話しします。「デザイナーだけど、コードは苦手…」という方や、「PMとして、制作チームとうまくやり取りしたい」という方に、ぜひ読んでほしい内容です。

■「少しだけ」学んだきっかけ

私はもともと、デザイン会社で4年間、紙のデザイン、パッケージ、ロゴ、Webサイトのデザイン、そして印刷所へ渡す入稿まで、基礎的なことを叩き込まれてきました。

その後、フリーランスとして働きながら勉強する期間に、HTMLとCSSも少しだけ学びました。エンジニアになりたかったわけではなく、「自分が作ったデザインが、実際のWebサイトでどう動いているのか、知っておきたい」という気持ちからでした。

今振り返ると、この「少しだけ」が、今の仕事でとても役に立っています。

■学んでよかったこと①：見た目の調整は、自分でできる

Utakataのコーポレートサイトは、かなり前に私がデザインしたものです。公開から時間がたつと、「ここの余白は、もう少し詰めたい」「スマホで見ると、この文字が画像に重なっている」といった、気になるところが出てきます。

そんなとき、CSS（見た目を決める言葉）が少しわかっていれば、ちょっとした修正は、実装会社に頼まず、自分で手直しできます。

たとえば、余白、文字の大きさ、画像の枠、メニューの間隔など。ブラウザの「検証」機能で、気になる部分がどんなルールで作られているかを見て、数字を変えて試し、納得できたらサイトに反映する、という流れです。

すぐに直せることで、小さな違和感を放置せずに済み、サイト全体の完成度も上がっていると感じます。

■学んでよかったこと②：「直せること」と「直せないこと」の線引きがわかる

コードを少し知っていると、サイトの修正を頼まれたときに、「これは、CSSで簡単に直せる」「これは、文章がテーマ（サイトの土台）に直接書かれているから、実装会社に頼まないと直せない」と、仕組みから判断できるようになります。

・見た目（色・余白・大きさ・位置）：CSSで直せる

・文章や構造（文章そのもの、並び順、新しい要素の追加）：サイトの土台（テーマ）を直す必要がある

この線引きがわかるだけで、「何でもかんでも頼む」「無理なことをお願いして、やり取りが長引く」といった無駄が減ります。

■学んでよかったこと③：実装会社への指示が、具体的になる

実装会社に修正をお願いするとき、「ここをもう少しきれいにしてください」だけだと、伝わりにくく、確認のやり取りが増えてしまいます。

コードの知識が少しあると、次のように伝えられます。

・Before：「サービスのページの文章が、管理画面で直せるようにしてほしいです」

・After：「サービスの説明文は、テーマに直接書かれているようなので、管理画面から編集できる入力欄を作ってほしいです」

相手が何をすればいいかがすぐにわかるので、見積もりも早く出てきますし、認識のズレも減ります。

■学んでよかったこと④：PMとして、見積もりやスケジュールの感覚がつかめる

PMとしては、「この修正は、半日で終わるのか、数日かかるのか」を、ざっくりつかめることが助かります。

コードの知識があると、「見た目だけの調整なら早い」「データの仕組みを変えるなら時間がかかる」といった感覚がわかり、クライアントへの説明や、スケジュールの組み方が現実的になります。

■どうやって学んだか

特別なことはしていません。

・ブラウザの「検証」機能で、既存のWebサイトの作りを眺める

・自分のサイトの、小さな部分（余白や文字の大きさ）を変えて、結果を確かめる

・わからないことは、その都度調べる

「全部理解しよう」とせず、「今困っていることを解決する」ために学ぶのが、続けやすいと思います。

■おわりに

デザイナーがコードを学ぶのは、エンジニアになるためではなく、「他の職種の人と、スムーズに話せるようになるため」だと思っています。

Utakataでは、PMもデザイナーも、それぞれの得意なことを活かしながら、わからないことは聞き合える環境があります。「デザインやPMの経験を活かしたい」「新しいことを学びながら働きたい」という方は、ぜひ気軽にお話ししましょう！