Web制作を始めようと思ったとき、最初にぶつかるのが「コーダーとデザイナー、自分はどっちに向いてるんだろう？」という分かれ道なんですよね。
「センスないからデザイナーは無理かな」
「でもコードってカタカタ系？頭良くないと無理そう」
「ググってみたけどスクール側のポジショントーク多すぎて、結局どっちが自分に合ってるのかなぁ」
このページでは、僕の目線でコーダーとデザイナーの違い・向き不向き・試すための方法をまとめました。
一般的に言われる適性も並べつつ、今まで交流してきたコーダー、デザイナーの特徴を中心に書きます。
先に答えを置くと、一度無料の範囲でドットインストールをやってみるのをオススメします。
10分くらいで読めるので、Web制作の入り口でモヤモヤしている方の判断材料になれば嬉しいです。
- Web制作を始めたいけどコーダー／デザイナーで迷っている人
- 自分にどっちが向いているか性格・嗜好で判断したい人
- 具体的な「試し方」を知りたい人
- サクッと診断してみたい人（記事内にフローチャートあり）
＼サクッと診断フローチャート／
コーダーとデザイナー、何が違う？やることを比較
まずはざっくり「何をする人なのか」から。サイトを作るときに、デザイナーが見た目を考えて、コーダーがそれを動くサイトに作り上げる。役割分担はおおむねそんなイメージです。
もう少し具体的に並べてみます。
| 項目 | コーダー | デザイナー |
|---|---|---|
| 主な仕事 | デザインをコードで再現 | サイトの見た目を設計 |
| 使うツール | VSCode / Chrome / WordPress | Figma / Photoshop / Illustrator |
| 主な言語・スキル | HTML / CSS / JavaScript / WordPress | 配色 / 構成 / タイポグラフィ / UX |
| 成果物 | 動くWebサイト | デザインカンプ（設計図） |
| 学習教材の整い度 | 多い（ロードマップ豊富） | 少なめ（型を覚える本が中心） |
| 未経験から副業まで | 半年〜1年 | 半年〜1年半 |
大きな違いは「正解があるかないか」だと僕は感じています。コーダーは「このコードで意図通り動く／動かない」が明確に出るので、試行錯誤しやすい。デザイナーは「このデザインが正解か」が曖昧で、お客さんと一緒に答えを探していく仕事です。
両方できる人もいるんですよね？
はい、副業フリーランスや小規模制作会社では、両方を1人で兼任するパターンも普通にあります。ただ最初の入り口としては、どちらかに絞った方が学習効率が良いです。両方を平行で覚えると挫折しやすいので、まず1つを選ぶのがおすすめです。
作業を比較してみる
もう少し体感的にイメージしやすくするために、それぞれの作業を並べてみます。
コーダーの主な作業
- Figma・Photoshopなどのデザインデータの確認
- HTML/CSSでサイトの見た目を作っていく
- いろんなサイズで見た目がおかしくないか確認
- Javascriptで動きの実装
- サーバーアップ、テストサイトの共有
- 動き、構造の修正
1日の8割くらいはPCに向かって黙々とコードを書いている時間です。お客さんと話す時間は短く、自分の手で「動いた／動かない」を確かめる作業が中心になります。
ディレクターやデザイナーと構造、仕様、見た目の確認のやり取りが多いです。
デザイナーの主な作業
- お客さんから要望をヒアリング
- お客さんの要望からデザインを作り上げる
- デザインの言語化
- Figma・Photoshop・Illustratorなどのデザインツールを用いてデザインの具体化
- フィードバックからの修正・改修
「これでいいかな」「もうちょっと余白を」「色を変えてみよう」といった感覚的な判断が多めの1日になります。お客さんとのコミュニケーションも、コーダーより多くなる傾向です。
- コーダー：「動いた／動かない」の世界。論理的に詰めるのが楽しい人向き
- デザイナー：「これでいいかな」の世界。感覚的に整えるのが好きな人向き
一般的に言われる「向き不向き」をフラットに並べる
「コーダー 向いてる人」「Webデザイナー 向いてる人」で検索すると、たくさんの記事が出てきます。それぞれで言われていることをフラットにまとめておきます。
後で僕個人の意見も書きますが、まずは一般論として頭に入れてもらえればと思います。
一般的に「コーダー向き」と言われる人
- 論理的に物事を考えるのが好き
- 地道な作業が苦じゃない
- 細かいミスに気づける
- 新しい技術を学び続けるのが好き
- 一人で集中する時間が好き
一般的に「デザイナー向き」と言われる人
- 美しいもの・かっこいいものに関心がある
- センスがある
- 絵を描くのが好き
- 流行に敏感
- 人の気持ちを汲み取れる
正直、これらの一般論はざっくりしすぎていて、自分が当てはまるかわからない人が多い気がします。「センスがある」って自分では判断できないですし、「論理的」も曖昧ですよね。
そこで次では、僕が現場で見てきた範囲での「もっと具体的な」適性項目を並べます。あくまで僕の超個人的な観察なので、参考程度にどうぞ。
現役フリーから見た「コーダー向き」な人 7項目
ここからは、僕が今まで会ってきたコーダー仲間や、自分自身が「これ、コーダー向きの人だな」と感じる特徴を具体的に並べます。一般論より少し細かいぶん、自分に当てはまるか判断しやすいと思います。
1個でも当てはまればコーダー寄り、3個以上当てはまるなら強くおすすめできます。
- ① 一度プロゲートかドットインストールをやって、そんなに嫌じゃなかった
- ② 問題解決が好き（パズル・謎解き・トラブルシューティングが楽しい）
- ③ 何かを「直す」のが好き（壊れた家電を分解したくなるタイプ）
- ④ 答えや根拠が欲しい（「なんとなく」より「理由がはっきりしている」と安心）
- ⑤ 構造を考えるのが好き（収納・スケジュール・整理整頓が得意）
- ⑥ 自己表現はちょっと苦手（自分の作風を出すより、誰かの意図を形にするのが楽）
- ⑦ 1人で黙々と進める時間が好き（飲み会より家でPCの方が落ち着く）
特に大きいのは ④ の「答え・根拠が欲しい」です。コーダーの仕事は「このコードを書けば必ずこう動く」という再現性の世界なので、感覚的な判断より論理的な詰め方が向きます。
あと ⑥ の「自己表現が苦手」は意外と大事だったりします。コーダーは基本「デザイナーが作ったものを忠実に再現する」立場なので、自分の作風を主張する場面は少なめ。むしろ「お客さんの意図を正確に読み取って形にする」ことに価値があります。
ばくさん自身は当てはまるんですか？
正直、7項目ほぼ全部当てはまりますね。だからコーダーから入って合っていたんだと思います。逆に「自分のセンスで作品を作りたい！」みたいな欲が強い人だと、コーダーは物足りなく感じるかもしれません。
現役フリーから見た「デザイナー向き」な人 4項目
続いてデザイナー側です。コーダーよりは少なめの4項目ですが、ここに当てはまる人はかなり強くデザイナー寄りだと思います。
1個でも明確に当てはまるならデザイナー適性アリです。
- ① プロゲートかドットインストールをやって、一瞬で嫌な気分になった
- ② イラストを描くのが好き（落書きでもOK・プロ級じゃなくていい）
- ③ 無機質にデータが並んでいるものを見ると、つい装飾したくなる
- ④ 過去にバイトや仕事でPOPやチラシを作って褒められた経験がある
① はわかりやすいですよね。コードを見て「うわ、これ無理」と感じたなら、無理にコーダーに進むより、デザイナーの方が合っている可能性が高いです。
③ と ④ は、僕がデザイナー仲間を見ていて「この人デザイナーやってるの納得だな」と感じた共通点です。日常の中で自然と「整えたくなる」「装飾したくなる」感覚を持っている人は、Webデザインを学んでも違和感なく入れることが多い印象です。
「センスがあるか」みたいな曖昧な基準より、こういう具体的な行動パターンで判断する方が当たりやすいです。
おまけ：Webディレクター向きな人 6項目
本記事のメインはコーダー／デザイナーですが、Web制作にはもう1つ「Webディレクター」というポジションがあります。お客さんとやり取りして、進行管理やヒアリングを担当する人ですね。
未経験からいきなりディレクターは難しいですが、将来の選択肢として「自分はこっち寄りかも」と知っておくのは大事です。
- ① 人と交流するのが好き
- ② オフ会・コミュニティ・勉強会によくいく
- ③ 人とつながるのが好き（つなぎ役になることが多い）
- ④ 雑談が得意
- ⑤ 自分のしたいことを人に説明できる
- ⑥ 全体を把握してコントロールしたい
こちらに当てはまる人は、まずコーダーかデザイナーの基礎を半年〜1年で身につけてから、ディレクション領域に広げる流れが現実的です。技術の現場感を知らないままディレクターをやると、お客さんにも制作メンバーにも信頼されにくいんですよね。
30秒でわかる適性診断【フローチャート】
ここまで読んで、「自分はどっち寄りなのかまだピンとこない」という方のために、4問のフローチャート診断を用意しました。
感覚で「はい／いいえ」を選んでいくだけで、コーダー型・デザイナー型・ディレクター型・触って判断型の4タイプから、自分に近い適性を出します。30秒もかからないので試してみてください。
診断結果はあくまで傾向です。「触って判断しよう型」が出た方は、次で紹介する具体的な試し方を参考にしてみてください。
試すための具体的な方法（Progate / Figma）
適性診断で当たりがついた後は、実際にちょっと触ってみるのが一番確実です。「やってみたら違った」を早めに知るのが、無駄な投資を避ける最大のコツなんですよね。
コーダー寄り・デザイナー寄り、それぞれの「お試しルート」をまとめておきます。
コーダー寄りの人のお試しルート
無料でブラウザだけで始められるオンライン教材。1〜2週間でひととおり触れます。「やってみて嫌じゃなかった」が判断基準。
3分動画で1テーマずつ学べる教材。Progateと違って動画派の人にはこちらが向きます。両方触ってみて好きな方で続けると◎。
教材の本を買って、模写コーディングをしてみましょう。コードが沢山ならんで、言われたとおりに書いてイルのにうまく行かないことがほとんどだと思います。
それでも続けよう、と思えたら適正があります。
デザイナー寄りの人のお試しルート
Youtube・書籍・Webサイトどれでもいいのでデザインのルールを見ていきましょう。
整列・近接・反復・対比の4原則を覚えて世のデザインを眺めると、自身のデザインを見る目が変わります。
無料で使えるデザインツール。アカウント作成→ブラウザで起動。最初の操作感を体験してみるだけでOK。
Webサイトより小規模なものから始めるのがコツ。バナー1枚を作ってSNSに投稿、反応を見る、というサイクルが楽しめるかが分かれ目。
ポイントは「お金をかけずに2週間〜1ヶ月で試す」こと。スクールに10万円払って「やっぱり違った」となるより、無料教材で先に適性を見た方が安全です。
よくある質問
コーダー／デザイナー選びでよく聞かれる質問をまとめておきます。
- 両方できるようになるべき？
-
最終的に両方できると単価は上がります。ただ最初から両方を平行で学ぶと挫折しやすいので、まず1つに絞って、ある程度形になってから広げるのがおすすめです。
- 途中で進路変更してもいい？
-
もちろんOKです。むしろ「やってみてから違ったので変える」方が、ずっと迷い続けるより健全です。1~2ヶ月触って合わなかったら、もう片方を試してみましょう。
- 未経験でディレクターから始めるのは無理？
-
正直、いきなりディレクターは難しいです。技術の現場感を知らないと、お客さんの要望と制作側の事情の橋渡しができないからです。まずはコーダーかデザイナーの基礎を持って、案件を回すうちにディレクション領域に広げる流れが現実的です。
- フローチャートの結果と、自分の希望が違ったら？
-
診断はあくまで参考なので、「自分はデザイナーがやりたい」という気持ちがあるなら、それを優先して大丈夫です。本当に大事なのは「続けられるか」なので、自分が続けたい方を選ぶのが一番です。
まとめ：適性診断＋お試し2週間で、自分の方向を決めよう
長くなりましたが、コーダー／デザイナー選びの全体像をまとめておきます。
- コーダーは「動いた／動かない」の論理の世界、デザイナーは「論理で詰めつつ、これでいいかな」の感覚の世界
- 1日の作業も、コーダーは黙々とPC、デザイナーはコミュニケーション多め
- 一般的な向き不向きは曖昧。具体的な行動パターンで判断する方が当たりやすい
- コーダー向きの7項目・デザイナー向きの4項目・ディレクター向きの6項目で自己診断
- 記事内のフローチャート診断で、4タイプから自分の傾向を確認
- 当たりがついたら、Progate・Figmaで2週間〜1ヶ月お試し
正直、最初の選択を完璧に当てる必要はないと思います。1〜2ヶ月触ってみて「これは違うな」となれば、もう片方に乗り換えればいいだけ。大事なのは「触ってみないと分からない」と認めて、まず手を動かすことです。
このサイトでは、副業からWeb制作を始めて独立するまでに必要なことを実体験ベースで書いています。次のステップとして、独学のロードマップやスクール比較の記事も置いてあるので、自分の選んだ方向に合うものを読んでみてくださいね。
コメント