こんにちは。制作部デザイナーの中山です。
前回のブログ「未経験からWebデザイナーに転職した私が、悪戦苦闘したからこそ伝えたい大切なこと」の記事から約7ヶ月。そして、シーエムエーに入社してから約1年と4ヶ月が経ち、デザイナー2年目を迎えています。
私はこの7ヶ月の間に大きな大きな壁にぶち当たり、悔しい思いもしながら仕事に取り組んできました。
私の前に大きな壁が立ちはだかったとき、メンタル維持のために世のデザイナー達の2年目の苦しみを綴った記事を読み漁っていました。(笑)
新米デザイナーに壁が現れたときに、世の新米デザイナーはどんな悩みを持っているのか、どうやって乗り越えているのか、少しでも参考になればと思い、赤裸々にお話しします。
この記事の作者

入社2年目。
音楽大学出身。大学在学中にイタリアへ留学。腕を壊したことをきっかけに音楽を離れ、サービス業へ。前職では接客、製造、マネジメントを経験。その後webデザインスクールに通い株式会社シーエムエーに転職する。
趣味はキャンプと料理、今年になって山登りを始める。
寒がりで、半袖で出社したことがまだ一度もない。
元コーダー志望の私、デザインに苦しむ
高い壁はデザインと向き合うきっかけ
セミナーで気づきを得る
気づきを得て、デザインと向き合うことを知る
入社前の制作物は今の私の目にどう映るのか
どう見せたら伝わるのか、自分で考えて、自分で答えを出す
まとめ
元コーダー志望の私、デザインに苦しむ
前回のブログでお話させていただきましたが、私はもともとコーダー志望だったため、デザインの勉強はあまり力を入れていませんでした。当社では基本的にデザイナーとコーダーを兼業しているため、面接時に「デザインもやってみませんか?」と提案いただき、嬉しさと不安な気持ちが入り混じったまま「はい!」と答えたのを覚えています。
入社後はコーディングを主に担当しながらも、バナーなどを制作してはフィードバックをもらい修正を重ね、その後サイトの下階層のデザインを担当させていただきました。
入社して1年ほど経った頃の私
- 良いデザインが明確にわからない
- 言われたことはできるが、それ以上は出来ない
- インプットは出来てもアウトプットが出来ない
- フィードバックで修正は減少傾向だが、良し悪しは理解出来ていない
- デザインの沼にハマると脱出不可能
- ワイヤー通りにしか作れない
- 必殺「先輩にzoomで直接レクチャーしてもらう」を多用
私の中でデザインはとてもふわふわした掴めない雲のようなものでした。
参考サイトも、見ているようで見えていない、どこを見ればいいのかピンとこない、もうなにが正解なのかわからない、とそんな感覚でデザインに取り組んでいました。このモヤモヤをなんとかしたい、と思いながら模索するも、なかなか解決できず時間だけが経っていきました。
▼本当にデザイナーになれるのか、不安な気持ちを払拭すべく、読んでいた本。
いつでも気軽に読めるよう、Kindleで購入。「わかるけど出来ない…」と思いながら読んでいました…
高い壁はデザインと向き合うきっかけ
ちょうど2年目に入った頃、自社サイトのLPのデザインを任され、壁は突然現れました。
参考サイトをたくさん探して、既存のサイトも隅々まで観察して、LPのテイスト、レイアウト、方向性などを決め、下準備をしっかりしてから取り組んだ結果・・・
メインビジュアルが作れない!!!!!!!!!
これが私の壁の始まりであり、デザインとちゃんと向き合うための大きなきっかけでした。
結局私の作ったメインビジュアルが使われることはなく、先輩デザイナーが作ったデザインが採用され、私はファーストビュー以下のデザインを担当することになりました。
入社してから悔しい思いはもちろんたくさんしてきましたが、今までで一番悔しさの残る案件となり、しばらくの間夜も眠れずとても苦しかったです。このままで一人前のデザイナーになれるのか?と自問自答の毎日でした。
▼一番最初に作成したメインビジュアル。全体的な配色とタイトル周りに問題あり…
セミナーで気づきを得る
この状況を打破したい気持ちで私は制作会社が開催するデザインセミナーを受講しました。
そのセミナーで私は、制作の過程で考えている「つもり」が多かったことに気づきました。
なぜそのあしらいなのか、そのあしらいが単体ではどういう効果をもたらすのか。デザインの中にあるたくさんの要素がそれぞれどういう役割を果たしているのかを、「なんとなく」考え、捉えていたのです。
「こんな感じかな~」ではなく「ユーザーにこう思ってほしいから、この要素を使ってこうみせる」と論理立てて考えることの重要性を理解していても、実際には実行出来ていませんでした。
その「なんとなく」と「つもり」がデザインを掴めない雲にしている原因だったとわかり、腑に落ちてとてもスッキリしました。
気づきを得て、デザインと向き合うことを知る
気づきを得てから、先輩からのフィードバックの捉え方が変わったように思います。
一つ一つの修正指示の内容を自分の中で噛み砕き、それをどうデザインに変えていくのかを考えるようになりました。
ありがたいことに先輩から「再考してみて!」と、考える時間を何度も頂けたので、デザインのための思考回路も徐々に出来ていきました。
そして今までの「つもり」デザインからの脱却の過程で、70%の出来で先輩デザイナーに見せていたデザインも、自分の中で「もっとよくできるはず」と時間が許す限り粘ってデザインを考えるようになり、修正も一回で済むことが少しずつ増えてきました。
その過程の中で、どんなに頑張って考えてもデザインが出来ず、苦しさのあまり先輩に助けをお願いしておいて、「やっぱりもうちょっと考えてもいいですか」と取り返したこともあります。(先輩振り回してすみません)
デザインと向き合うのは、辛く、脳みそが溶けてしまいそうなくらい頭を使いますが、それと同じくらい、楽しさや面白さを発見できているように思います。
そんなことを繰り返しているうちに、デザインへの取り組み方が変わってきたことに気が付きました。
変わった点
- デザイン要素の細かい表現に気がつくようになった
- ワイヤーを見て、どう見せたらユーザーに伝わりやすいのか、自分なりに考えながらデザインに落とし込むようになった
- 全体のバランス感など、俯瞰してデザインを見る癖が徐々についてきた
- フィードバックの一言一言の意味をしっかり考え、指摘点を自分で解釈してデザインに落とし込めるようになってきた
- 先輩に直接助けてもらうことが減った
▼先輩から教えていただいたデザイン誌。
購入後に読んだが、デザインと向き合いはじめてからも繰り返し読むたびに発見がある。
入社前の制作物は今の私の目にどう映るのか
転職活動時にポートフォリオを作って提出していたのですが、そのときのポートフォリオや中の制作物が今なら私の目にどう映るのか、恐る恐る目を通してみました。
今見ると気になる点
デザイン
- フォント選びが間違っている、文字が全体的に小さい
- 使っている画像がAIの画像で嘘っぽい
- イラストが不必要に大きすぎる
- タイトルが小さい
- 文字詰めされていない
コーディング
- リンクにpaddingが取られておらず、ボタンの押せる範囲が狭い
- imgタグにサイズが記載されていない
- 読み込んでいる画像のサイズが大きすぎる(3000px…)
- divタグの一つ一つにmarginをつけて中央寄せにしている
サラッと制作物を見るだけでもこれだけ気になりました。
今までは制作しているものがいいデザインなのかそうじゃないのか、なんの要素が悪いのかよくわからない、と常に足が地につかずふわふわしていましたが、現在では、ここが悪い、こうしたら良くなる、というのがわかるようになってきました。
そして自分のポートフォリオを見て、このデザインで本当に私の良さが伝わっていたのだろうか?と全体的なバランスも気になり、何のためのサイトなのか、根本的なコンセプトってなんだろう、そのコンセプトにちゃんと沿ったデザインなのか?という視点でもサイトを観察できて、今まではそんなことまで考えられていなかったなあと痛感し、同時に成長も感じました。
どう見せたら伝わるのか、自分で考えて、自分で答えを出す
今までなんとなくわからない、なんでわからないのかもわからない、という見えない課題と戦っていましたが、自らアクションを起こしたことで大きな気づきを得て、デザインの奥深さや、デザイナーたちの目線がわかるようになってきました。
そして「どうしたらユーザーに伝えられるか、依頼者の課題を解決できるか」ということを改めて、自分で考え、自分で答えを出して、デザインに落とし込んでいくことの大切さを学びました。
まだまだ少しの修正をするのにも考える時間が必要で、先輩たちよりも工数をかけてしまいます。
引き続き、時間短縮しながらも、より良いデザインができるようスキルアップに励んでいきたいと思います。
まとめ
今回は2年目のWebデザイナーのつまずきと気付きについてお話しました。
新米デザイナーはそれぞれ悩みを持ち、たくさんの壁にぶつかっていると思います。苦しく、悔しい思いをしながら、考え、自分に足りない何かを吸収しながら、前に進んでいくのだと私は実感しました。
やはりそれには経験と時間が必要です。その過程こそが重要だと思うので、しっかり向き合いながら、一人前を目指したいと思います!
おすすめの記事
おすすめタグ
- iPhone
- フォント
- remotework
- ディスプレイ広告
- 生成塗りつぶし
- 絞り込み検索
- PageSpeed Insights
- Facebook Audience Network
- Core Web Vitals
- ECcube
- スマートオブジェクト
- 生成拡張
- カレンダー
- SSL
- Facebook広告
- 自作PC
- プラグイン
- 画質パラメーター
- Adobe MAX Japan 2023
- ハッシュタグ
- HTML
- Zapier
- Instagram広告
- 初心者
- カスタマイズ
- サイズパラメーター
- UI
- 中小企業SFA
- PHP
- Google my map
- クリック率
- 自作パソコン
- ASP
- レクタングルバナー
- UX
- SFA
- CSS
- 創業記念日
- TLS
- PC組み立て
- IE
- アセット生成
- Adobe Stock
- 中小企業向けSFA
- 動画制作
- レクリエーション
- Chrome
- Google Search Console
- コーディング
- タスクランナー
- アンチックフォント
- AVIF
- AMP
- Adobe XD
- 保護されていない通信
- XMLサイトマップ
- モダンブラウザ
- gulp.js
- Adobe Express
- AdobeExpress
- 広告
- ワイヤーフレーム
- Transport Layer Security
- shopify
- gap
- node.js
- Webマーケティング
- Canva
- 構造化マークアップ
- Google for jobs
- HowTo
- ECサイト
- gridレイアウト
- WebP画像
- デジタルマーケティング
- 画像作成
- HTML5広告
- Googleしごと検索
- ハウツー
- ショッピングサイト
- object-fit
- 楽天GOLD
- 文字コード
- ChatGPT
- Google Chrome
- 撮影
- 構造化データ
- ショッピファイ
- aspect-ratio
- スマートフォン用新店舗トップページ
- 符号化文字集合
- 業務効率化
- videoタグ
- iPad
- リッチリザルト
- Shopify使い方
- any-hover
- Threads(スレッズ)
- Unicode(ユニコード)
- SNS
- 動画
- 一眼レフカメラ
- ノンデザイナー
- WebP
- docker
- 未経験
- 動画広告
- 写真
- 文字
- wordpress
- Photoshop
- Adobe Firefly
- 新人デザイナー
- GoogleMapsPlatform
- リモート
- デザイン
- リモートワーク
- クラウドドキュメント
- 画像生成AI
- CMS
- スピードアップデート
- ウェブサイト翻訳