こんにちはライターのニカイドウ(@2kai2kaid)です。
前回WEBデザインの勉強でおすすめの本やテキストを紹介しました。
【全部揃えても1万円以内】WEBデザイナーに転職したわたしが参考にした本４冊
今回はデザインの学習サイトや動画編です。
勉強を始める前「勉強をする→テキストで勉強！」のような
ステレオタイプの学習のイメージが強かったのですが、
現在ネット上でもさまざまなプログラミングやWEBデザインの学習サイトなどがあります。
ただ、情報が多すぎて「どのサイトがいいの？」となることもありました。
そこで今回は実際にわたしが利用した学習サイトを紹介していきます。
テキスト・本を紹介した時と同じように、無料で勉強できるサイトも紹介しますので
本格的に学ぶ前に少しだけ基礎をかじりたいと言う方にもオススメです。
【こんな人にオススメです】
・デザインやコーディングの勉強ができるサイト・動画を探している人
・デザインの勉強にしている人
・なるべく費用を抑えてデザインの基礎的な勉強をしたい方
プログラミングの学習サイト Progat[プロゲート]
HTML/CSS・JavaScriptなどの言語が学習できるサイトです。
扱っているプログラミングは多数あり、目的別に学習内容を分けているページもありますので
どの言語から勉強すればいいのか迷うことなく始められます。
また、「初心者でも、独学できるレッスンを」をかかげているように
プログラミングを記述するエディタとは何かなど基礎的なところからも学習内容に含まれています。
登録だけの無料会員と有料会員(月額980円)の２つのプランがありますが、
無料会員でもサイトのコーディングで必要なHTML/CSSなどを勉強できます。
応用編や他の言語も勉強し始めるタイミングで、有料会員になって集中して勉強するのがおすすめです。
また、テキストエディタのAtomの紹介もされており、
特にエディタをダウンロードしていない場合、こちらをインストールしておくとスムーズに
コーディング学習できます。
HTML & CSS の開発環境を用意しよう！（Windows用） | プログラミングの入門なら基礎から学べるProgate[プロゲート]
https://prog-8.com/docs/html-env-win
Atomは画面を見やすいようにカスタマイズすることなどもできますので、
ある程度慣れたら自分用にカスタマイズするのもおすすめです。
エディターatomをより使いやすくするために設定変更やプラグイン入れたりしました
・画面表示(テーマ)変更
・file-icons(コード種類ごとにアイコンが変わる)
・minimap(編集画面の全体を表示)
・Markdown(リアルタイムで画面プレビューできる)
これでかなり作業しやすなりました! pic.twitter.com/B4OAZHLcHj— みどり@ライフクリエイター (@2kai2kaid) June 7, 2019
動画・ゼロイチWEBデザイン:未経験からWEBデザイナーへ
現役のデザイナーの久保さんが開いているチャンネルです。
Photoshopの基礎講座やテクニックについて紹介しているとがあります。
最初Photoshop内のシステムの名前を言われても
どこにあるのかわからないことがよくあったので
(「新しくレイヤーを選んでください」→「レイヤーってどこ？」みたいな感じです)
この動画を見ながら実際に画面と動画の画面を2面で開いて真似して作るようにしていました。
今までやろうと思って後回しにしてたPhotoshopの勉強をしました
すごい素人感溢れるバナーができあがりました 笑 もう少し進化させます! pic.twitter.com/fgjP11T9wn— みどり@ライフクリエイター (@2kai2kaid) May 25, 2019
チャンネル内のこちらの動画を参考にして作りました。
これを作ったときまだPhotoshopを使ってほとんど使ったことがない状態でしたが、
真似して作ることでソフトを使う感覚を身に付けることができました。
また、動画内で
・デザインをするときに配色・配置で気をつけるポイント
・よく使うツールの紹介
・デザイナーの仕事の様子の紹介
などもお話されていて「実際に働き始めたらこんな感じなのかな」というイメージを持つことができました。
WEBデザインの総合学習サイト・chot.design
chot.design – 毎日ちょっとずつデザインを学ぼう
デザインテクニックの勉強向きのサイトです。
特色としてAdobeソフトのillustrator・Photoshopの講座以外に、
UI/UXデザインツールのFigmaやSketchの使い方も紹介されています。
デザイナーさんたちへのインタビューマガジンも配信されており、
デザインをする上で必要な心がけや仕事の様子なども知ることができます。
chot.designでは主にバナー作成や写真加工について勉強したのですが
加工する写真などがネット上ですぐにダウンロードできるように一緒に紹介されており
個人的に勉強しやすいなと感じました。
(テキストだと似た画像探しをしてから勉強に入る時間ロスがあったので)
写真加工の練習!
ちょっとデザインの加工練習を参考にしながらやってみましたhttps://t.co/lnzUcfuic2 pic.twitter.com/NNJXPyhXDz— みどり@ライフクリエイター (@2kai2kaid) September 26, 2019
上記のツイートの画像は
多重露光風の加工をしてみよう | 写真加工テクニック – chot.design –
エモい雰囲気に加工してみよう | 写真加工テクニック – chot.design –
を参考に作りました。
まとめ・毎日ちょっとずつでも勉強すれば力になる！
WEBデザインの勉強のサイト・動画を紹介していきました。
これから勉強をしていきたい人たちに役立てたら幸いです。
また、これから勉強していく人や勉強中(私もですが)の人に伝えたいことがもう一つ。
毎日ちょっとずつでも勉強すれば力になります！
私が最初勉強を始めたとき、
・HTMLはやったことあるから知ってるけどCSSは知らない
・Adobeって何？ 読みはアドベ？？ →Photoshopやillustratorのやつか！
・メンタルやられて休職・退職。体力もダウン。次の仕事も決まってない
みたいな「レベル1・装備：その辺で拾った木の棒・状態：うつ」みたいな状態でした。笑
デザインの勉強を始めたきっかけも
「人と関わることを抑えて働けるようになりたい。その中の仕事でもWEBデザインなら興味あるし
やってみよう」結構後ろ向きな考えでした。
よくネット上で
「デザイン一筋！この分野でのプロを目指してます！」
「プログラミング学習1日12時間して年収〇〇〇万円アップしました！」
みたいなエネルギッシュでプロ意識のある人たちのツイートや記事を見て
とにかく「少しでも安心して仕事や生活できるようにしたい！」って気持ちが強い
わたしがちゃんと勉強して仕事できるまでスキルアップできるのか不安でした。
でも、「何もしないよりきっといいはずだ」と考えて、毎日ちょっとずつですが勉強を続けました。
↑PCスクールに通っていた時の出席簿。
時間だけはあったので、毎日ちょっとずつ通って勉強を続けていました。
派手なことはなかったですが、なんとか就職することもできました。
また、「人と関わるの怖い。傷つきたくない」状態でしたが、
勉強を始めたことがきっかけで、いなフリなど新しいコミュニティを広げて
色々な経験を積んだ人たちと関わり「なんとかなるかも」と思えるようにもなりました。
続けることでただスキルを身につけること以外もできたと思います。
勉強中「面倒だな～。嫌だな～」みたいに思うこともありますが、
前向きに続けることで見えてくる世界がきっとありますので
「ちょっと」でいいのでがんばっていきましょう。
