未経験でエンジニア、デザイナーを目指す人向け　おすすめ学習法

はじめに

2021年に新卒で入社し、EMCカンパニーで銀行の運用案件に参画している、デザイナーの鈴木です。

私は当初、未経験エンジニア職で採用されており、内定者向けのインターンでコーディングの基礎を学んでいました。しかし、配属後に上司と相談した結果、デザイナーへ職種を変更することになり、デザインの基礎を一から勉強することになりました。
そして現在は、主にWeb媒体で用いる画像の編集や作成業務に取り組んでいます。

今でこそデザイナーと名乗れるものの、ここまでに至る道のりは決して平坦ではありませんでした。大学では経営学を専攻し、PowerPointとWordしか触ってこなかった私は、そもそもクリエイター職の具体的な仕事内容すら理解できておらず、本当に大変な思いをしました。
基礎知識がないまま勉強し始めてしまったことで、遠回りをしてしまうことも度々ありました。

こうした経験を活かせないかと、自分なりの知見をまとめたものが今回の記事になります。
このブログを読まれる方には、ぜひ無駄なく最短ルートで学習を進めていただき、効率的にスキルを身に着けていただければと思います。

それでは、私が各職種の基礎を学ぶにあたって生じた悩みと、それを解消できた学習の方法と結果、便利な初心者向けのおすすめツールなどを紹介したいと思います。

1. 未経験コーダー枠で参加したインターン

必須スキル

・Webサイトの基本構造の把握

困った点

・コーディングの基礎知識がない。
・画像などを実装する際のHTMLとCSSの使い分け方など、そもそものルールや法則が分からない。

学び方

①ProgateのHTML & CSS 初級編〜上級編コースに取り組む

学習コース通りに進めることで、HTMLとCSSの基本的な知識を身につける。

使ったサイト：
Progate

②Webサイトの模写

一通り実践することで、自分が理解できていなかった部分が明確にできる。また、ページを一つ再現できればかなりの自信に繋がる。

参考：
【模写コーディング】おすすめの練習サイト【入門編～上級編】

結果

・サイトを見た際、どこまでがヘッダーで、テキストや画像がどのように実装されているのか大まかに分かるようになった。

おすすめ

・デベロッパーツールを用いた企業サイトの確認

実際に他の企業が運用するページを確認することで、ヒントを貰うことができる。

参考：
Chrome デベロッパー ツールを使用してタグを確認する

・VSCode（エディタ）

エディタとは、コーディングの際に用いるソフトの一種である。各言語でテキストを打ち込み、作成したコードをプログラムとして実行することで、Webサイトなどの構築が可能になる。
中でもVSCodeは動作が軽く、様々な便利機能で自分好みの改造ができるため、多数のユーザーから支持を受けている。
資格の勉強をする場合などは、ある程度自分でタグを手打ちをして正式名称を覚えることが必要。しかし、コーディングも効率を重視する際はこうした拡張機能を積極的に活用すべきだと思う。タグの頭文字を打てば全文を補完するなど、豊富な拡張機能で需要に応えている。

参考：
VSCode に必ず入れておきたい拡張機能

・W3Cの検証ツール

書いたコードをコピペすることで、それが正しい文法に則ったものか確認できる。

参考：
Nu Html Checker

・サルワカ

HTMLやCSSの基礎を説明している。邪魔な広告がないためページが見やすく、図を用いた解説が分かりやすい。

参考：
HTML&CSS入門 Webデザインをイチから学ぼう

2. 配属後のデザイナー業務における自主学習

必須スキル

・Photoshopの操作

困った点

・PCがWindowsで、Macを使用して英語で説明されている、Adobeのチュートリアルではどのツールを使っているのか分からない。
・自分のしたい操作とツール名が結びつかず、検索ワードが分からない。

学び方

①電子書籍での学習

画像を作る上でのレイヤー、ツールの使い分け方を学ぶ。
購入者がダウンロードできる練習用のPhotoshopデータを保存し、書籍の例題通りに編集していくと、各操作とツール名を結びつけられるようになる。
（私はマスクをかける操作が苦手でしたが、書籍で確認しながら同じ画像を編集したことで、正しい手順を覚えることができました！）

業務で使うために勉強を始める場合は、書籍の目次部分を先輩に共有し、特に業務で使う重要なものを抜き出したリストを作成するのもおすすめ。

参考：
Photoshop しっかり入門 増補改訂版

②Pinterestを用いた模写

Pinterestは、イラストや写真をユーザー同士で共有できるアプリ。
（Googleなどの検索エンジンよりもクオリティが高い画像が掲載されているので、自習の際はもちろん、新規デザインのイメージを決める際など、業務でも毎日のように使います！）

興味のあるデザインを検索し、それをお手本にして再現をすることで、自分の作りたいものを明確にできる。

参考：
Pinterest
バナー練習(バナー模写)おすすめのやり方【WEBデザイナー】

結果

・自分のやりたいこと、そのために実行したい動作が言語化できるようになったことで、検索や先輩への質問がしやすくなった。
・自分が作りたいデザインを再現できたことで自信に繋がった。

おすすめ

・Adobeのチュートリアル

英語が分かる方か、Macを使っている方向け。
大半が字幕付きの英語で説明されていて、Macとはツールの配置が異なるため、Windowsの場合は電子書籍がおすすめ。

参考：
Photoshop チュートリアル

・デザインの原則に関する説明をするサイト

基本的な原則である四大要素をはじめ、ブログ形式で分かりやすくまとめられている。

参考：
デザインのキホン！4原則を活用して伝わるデザインに。

まとめ

いかがでしたか？
この記事が、みなさんのコーディング・デザイン学習の第一歩を踏み出すきっかけになりましたら幸いです。
最後まで読んでいただき、ありがとうございました。