WEBデザイナー未経験だった俺がデザイン力を上げるためにやったこと

WEBデザイナー未経験だった俺がデザイン力を上げるためにやったこと

全くのパソコン初心者だったで、WEBデザイナー未経験だった俺がデザイン力を上げるためにやったことを紹介します。

独学でWebデザインのスキルやコーディングを学び、未経験でしたがWebデザイナーとしてWeb制作会社で働くことができました。
Webデザイナーとして働く前の経歴は「未経験からWebデザイナーになった経緯を紹介」で詳しく説明しています。

デザイン力をあげる

WEBデザイナー未経験の僕がデザイン力を上げる為にした事があります。
それは良いサイトを模写しまくりました。

模写の方法として、ギャラリーサイトに掲載されている一つを選んで、トップページ・一覧ページ・詳細ページのキャプチャーを撮る。
そのキャプチャーを下に引いて、全く同じに上からトレースする。
それをコーティングして、ブラウザー上で見えるようにするまでを、何度も何度も試しました

たまに横で見比べながら模写したり、トップページだけするとか、手法を変えながらとにかく模写しました。

良いデザインを真似る

模写をしているとパッと見ただけでは気づかないようなディティールの部分にまで目が行くようになります。
例えば、1pixelの薄いラインや、余白の感覚、薄いグラデーションなどサイトデザインに気づく部分がたくさん出てくるようになります。
1pixelの薄いラインを引くことで、他のラインに立体感が出てる!っなんて驚きと発見にたくさん出会うと思います。
そうすることで他のサイトを見ているときでも、デザインを見る目が養われいくと感覚がありました。

コーディングも一緒で、良いサイトのコーディング技術を学ぶことで、「こんなプロパティあるのか!」「こうやってレイアウトを調整しているのか!」など新しい技術を出会えると思います。
(コーディングが苦手な人は、とにかくデザインを模写をするだけでも全然違うと思います。)

模写した時の感想

ここが1番大事だと思うんですが、ただ模写するだけではデザイン力がなかなか上がらないかもしれません。

大切なのは、しっかりと考えながら模写することです。
  • このサイトのターゲットはどの世代で、性別は男性か女性か?
  • なぜ、このサイトを良いと思ったのか?
  • なぜ、1pixelの薄いラインを引いてるの?
  • なぜ、この商品と商品の間の余白はこの間隔であいているのか?
  • タイトルの一文字一文字の間隔を縮めたらどうか?

などを「なぜ?」みたいなことを考えて、模写します。
その線が何故入っていたのか、身を持って知ることができ、自分がデザインをする時のストックにしておき、今度は「こういう時には線を入れればいいんだ」と応用することができます。

模写したサイトをまとめてポートフォリオに

俺の場合、Web制作会社に提出するポートフォリオサイトとして模写したサイトの気付いた点とかを、まとめてポートフォリオとして提出しました。
(せっかく一通り模写して作ったし、なんかもったいなかったので)
面接のときもそのサイトを見ながら、なんで良いと思ったかって感じで面接で話したのを覚えています!

デザイン力を上げるってなかなか時間がかかると思います。
ただ、こういったことを考えながらデザインを勉強することでデザインの引き出しが多くなってデザインすることが楽しくなってくるので、諦めず何度も何度も模写してデザイン力を上げていきましょう!!!

未経験からでもエンジニアにはなれる!

中堅の年代になり、最近よくどうやってエンジニアになったんですか?と聞かれる機会が多くなりました。私は転職組で未経験からエンジニアになりました。 そこら辺のストーリーは「未経験からWebデザイナーになった経緯を紹介」で書いているのでそちらをご覧ください。

当時はWebの技術を教えてくれるスクールがあまりなく、私はWebの勉強は独学で勉強し転職したのですが、今はスクールの数も多くなっていてオンラインで受講できるところも増えてきました。

もし私が未経験でエンジニアを目指すなら活用したいスクールを紹介してますので興味ある方はぜひ参考にしてくだいさい!

tech boostオンライン

tech boostはエンジニアに特化したキャリアサービスを展開しているBranding Engineerが運営するオンラインプログラミングスクールです。

エンジニアに特化したキャリアサービスを展開しているからこそのカリキュラムを実現しています。 また、転職サポート付きでスクール卒業後もキャリアも安心です。

オンラインスクールだからいつでもどこでも受講可能!これからプログラミングを学びたい方、エンジニアにキャリアチェンジを考えている方に、 特にオススメのサービスです。

初めてプログラミングを学ぶなら「tech boostオンライン」

CodeCamp(コードキャンプ)

オンライン・マンツーマン指導のプログラミングスクールとしてNo.1*の実績を持つサービスです。高い学習効果が評価されテレビや新聞、ビジネス誌など*多くのメディアで紹介されています。

講師は全て現役のエンジニア。未経験から確実に習得するために開発されたオリジナルカリキュラムでWebデザイン、Webサービス開発、アプリ開発などを幅広く学習することができます。

多くの受講生が、現役エンジニアの手厚いマンツーマン指導によって確実にプログラミングを習得し、キャリアアップ・転職・独立起業などの目標を実現しています。

プログラミングのオンラインスクールのCodeCamp

DMM WEBCAMP

転職を本気で考えている方向けのプログラミングスクールです。転職を保証しているため、未経験からIT業界へ転職を求めている方へおすすめです!

プログラミング未経験者でも安心のサポート体制をご用意しており、特に受講者アンケートでは『サポート体制がしっかりしていて魅力的』、『転職を保証していただいていることで安心』というレビーが多くしっかとしたサポートを提供しています。

実務に近い実践的なカリキュラムで、DMM WEBCAMPはチーム開発など、実務により近い実践的カリキュラムを導入しているため、転職先・就職後にいち早く活躍できるスキル・経験を積むことができます。

受講者満足度90%以上のプログラミングスクール【DMM WEBCAMP】

Udemy

私の周りの現役のエンジニアの人も活用しています。基礎をしっかり固めたい方や、実践向けの配信など幅広く解説している動画が豊富にアップされているので活用するのはオススメです。

習得したいスキル(プログラム言語)が明確で、年収アップのために学習している方やAI・機械学習を学んでスキルアップを目指しているエンジニアの方に支持されているます。

1講座あたり数千~数万円程度で実践的なスキルアップを経済的でオススメです。

【Web開発初心者向け!】Web開発入門完全攻略 充実の18時間コース