独学でWebデザインの勉強を始めて、最初の2ヶ月でやったこと

アイキャッチ画像

8月中旬から本腰を入れてWebデザインの勉強を独学で始めました。
あとからの振り返りのためと、私自身いろんな方のブログを参考にさせてもらってめちゃくちゃ助けられているので、この記事も誰かの役に立つかもしれない…と思ったので、この2ヶ月でしてきたことを記録しておきたいと思います。

というわけで…

SPONSORED LINK

私について簡単に

・30代前半、女性
・文系の大学卒 → 事務職 → 現在グラフィックデザイナー11年目(3社目)
・制作会社に在職中
・HTML、CSSは以前にアメブロやはてなブログのカスタマイズなどでちょっとかじったことはあった
・雑記ブログを2年半運営。WordPressは触っていたがデザインいじったりはできない(有料テーマにおまかせ)
・今年春に転職を考えて、最初はこれまでと同じくグラフィックデザインの仕事を探していた
・いろいろ思うことがありWebに転向しようと考える
・勉強時間は、平日は23時〜24時頃に帰宅してから1〜2時間ほどを毎日。土日は6〜8時間ぐらい(日によります。これより少ないときも)

独学を始めた理由

最初は職業訓練に通いたいなと思っていたんです。
でも現職の繁忙期が重なることや人員不足などもあり、希望していた時期に退職ができず。
それならもう勉強を始めてしまおうと思いました。

何がなんでも独学がいいと思ってるわけでは決してなくて、独学でやっぱりキツい! ってなったらその時は職業訓練かスクールに通おうと思っています。
その場合でも、あらかじめ勉強しておいたほうが吸収が早いだろうし、それに退職してからポートフォリオとかもろもろの準備するのは焦りそう。

もし退職までに次の職場が決まれば嬉しいし、どの展開になってもどれもアリという感じです。

Webデザインの独学 最初の2ヶ月でやった勉強内容

バナーの模写

まずはPhotoshopでバナーの模写をすることから始めました。
見本にするバナーを重ねた上で作るのではなく、横に並べて見ながらマネして作っていきます。

これがけっこう難しいんです。
私はこれまで紙媒体のデザインをやってきて、フォトショは主に画像修正やイラストを描くために使っていました。
フォトショで文字打ったりレイアウトしたりするのが最初はやりにくいなーと感じました。
これイラレだったらすぐできるのに! って思いながらやってました。

参考にするバナーは、ネットしてるときにこれいいな、と思ったものや、ギャラリーサイトで見たものなどです。
retrobanner

これは完全に私の好みになりますが、マイフェバのバナーがおしゃれで好きです。でも、どれもマネしようとすると思った以上にすんなりいきません…!
マイフェバ 関西・北陸・せとうちエリアのおでかけ&観光情報

Photoshopでサイトデザインを作る

架空のお店や会社などのWebサイトを想定して、Photoshopでデザインします。
いろんなサイトを妄想するのは楽しい。
作るのはひとまずトップページのみ。1週間に1サイトのペースで作っていました。

方法はwebクリエイターボックスさんの記事を参考にしつつ、
PhotoshopでWebサイトのデザインをしよう 

デザインの参考にはギャラリーサイトを見たり、
I/O 3000 Webデザインギャラリー
MUUUUU.ORG

『Webデザイン良質見本帳』も参考にしました。

Webデザイン良質見本帳

コーディングを学ぶ

最初はフォトショでデザインを作ってるのみでしたが、独学を始めて2週間経ったあたりからコーディングの勉強も始めました。

以下の本やサイトを利用しました。 どれもわかりやすい!
動画で学習するのは初めてで、ドットインストールで勉強するとサクサク進んでいけることに感動しました…!!
Progateはまだ初級編しかやってませんがとても使いやすいです。

・『HTML5&CSS3 レッスンブック』(エビスコム著)
・『スラスラわかる HTML& CSSのきほん』(狩野祐東 著)
ドットインストール
Progate

本は『スラスラわかる HTML&CSSのきほん』がお気に入りです。
カフェのサイトを本の通りに作っていくんですが、見本のサイトがおしゃれっぽいのでやる気がでました。

HTML&CSSのきほん

Progateは初級編の終わりまで、ドットインストールはHTML入門、CSS入門、HTML基礎文法入門までやって、いまはCSS基礎文法入門の途中です。
ドットインストール レッスン一覧

シンプルなサイトを作る

美容室のシングルページのサイトを作りました。
内容はすべて妄想です……
スマホ対応がまだできていないので、それはおいおい勉強していきます。

架空サイト

ギャラリーサイトを見たり、「地名 美容院」で検索していろんなサイトを見て回りました。

写真は、「unsplash」というサイトや「ぱくたそ」でそれっぽいものを探して使ってます。
unsplashの写真はどれもおしゃれで、見始めるとのめりこんでしまうこともしばしば……

練習サイト用にドメインを取って、サーバーも借りました。
ドメインはムームードメインで、サーバーはロリポップを利用しています。
(ちなみにこのブログはエックスサーバーを利用してます)

ポートフォリオサイトを作る

上記のサイトと並行してポートフォリオサイトも作っていました。
ポーフォリサイト用にもドメインとサーバーを用意。

テンプレートをベースに手を加えて作りました。

▼使わせていただいたのはねこポンさんのテンプレート
ポートフォリオHTMLテンプレート

↓ こんなポートフォリオサイトです

ポーフォリサイト

そのまま使うだけでは勉強にならないし実績とも言えないので、使う箇所を元のコードを見ながらすべて書き写し、知らないコードはググって調べました。
めっちゃ勉強になります!
FlexboxもリセットCSSの存在もこれで初めて知りました。
(最初リセットCSSが何のためにあるかわからず省いて作っていたら、なんかレイアウトが思うようにならない……でも入れてみたらちゃんとできた! …てな感じで試行錯誤)
あとJavascriptは全然できないので省いています。

portfolio boxを使ったポートフォリオサイトも用意しました。
応募先によって使い分けるかも?

紙のポートフォリオを作る

いくつか制作物ができてきたところで、紙のポートフォリオも作り始めました。

もし応募したいところがあった場合すぐに動ける態勢にしておきたいので、クオリティは微妙でもひとまず形にすることを目指します。
今後も勉強していって、いいのができたらイマイチなやつから差し替えていくつもりです。

本は主にこの2冊を参考にしています。

ポートフォリオ参考になる本

ブログを始める

【2018.12.02 修正】
Webの勉強のことをまとめておく用にブログをスタート。
……したんですが、前から続けていたブログとの棲み分けがうまくできず、結局ひとつにまとめてしまうことにしました。
このブログにWebデザインカテゴリーを作って投稿していきます。

3ヶ月目、これからやろうとしていること

この2ヶ月の内容はこんな感じです。
自分的にかなり飛ばしたのではぁはぁ、ぜぃぜぃ、やれやれ……っ! って感じです。本業が繁忙期だったのもある…

この週末はひと休みして、次にやりたいこと。

HTML5/CSS3 モダンコーディング

『HTML5/CSS3 モダンコーディング』を進めていきます。

まずこの本をやって、その後はまた新たにサイトを作っていきたいです。
こういうのやりたいなーというネタがあるのでそれを作ったり、これまでは架空のものばっかりやってたので架空じゃないものも何か作りたい。

あとは、もっとデザインのクオリティを上げられるようにしたいです。

またキリのいいとこで進み具合の記事を書こうと思います!

SPONSORED LINK