デザインと暮らしのメモ
とある会社員デザイナーの、デザインや仕事にまつわる記録です。
Webデザイン

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

アイキャッチ

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

というわけで…

私について簡単に

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

Webデザインを独学しようと思った理由

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

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

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

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の写真はどれもおしゃれで、見始めるとのめりこんでしまうこともしばしば……。

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

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

上記のサイトと並行してポートフォリオサイトも作ろう…と思ったのですが時間がとれず、ひとまずportfolio boxを使ったポートフォリオサイトを用意しました。

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

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

もし応募したいところがあった場合すぐに応募できるようにしておきたいので、クオリティは微妙でもひとまず形にすることを目指します。気になるところは後から直していく予定。

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

・『採用担当者の心に響く ポートフォリオアイデア帳』

・『クリエイティブ業界を目指す人のための ポートフォリオ見本帳』

Webデザイン独学3ヶ月目、これからやろうとしていること

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

この週末はひと休みして、次は『HTML5/CSS3 モダンコーディング』を進めていこうと思います。

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

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