Web Design

【未経験】Webデザインの独学は難しいと感じた3つの理由【職業訓練9日目に勉強したCSS】

2021年6月21日

Webデザイン職業訓練9日目
  • 「Webデザインの独学は難しいの?」
  • 「職業訓練9日目の勉強内容を知りたい

この記事はWebデザイン未経験の方へ向けて書いています。

 この記事でわかること

・未経験からWebデザインの独学が難しいと感じる3つの理由
・職業訓練9日目に勉強した内容のまとめ

 本記事の信頼性

・2019年1月からWordPressで当ブログ開設(最高で月間62,000PV)
・2021年6月から職業訓練Webデザイン6ヶ月コースに通っています。
・使用テキスト:HTML&CSS、JavaScriptのきほんのきほん

職業訓練5日目に「Webデザインの授業についていけない」と感じました。
»【3つの解決策】職業訓練のWebデザイン授業についていけない【5日目に学んだHTML、CSS】

9日目に「未経験からWebデザインの独学は難しい」と感じました。
なぜなら、毎日毎日新しく学ぶことが出てくるから。

もちろん、本質さえつかめればいいのかもしれません。
ただ、未経験の私にはそれすら悩ましい状況なのです。

本記事では、未経験からWebデザインの独学が難しいと感じた3つの理由を書いています。

記事後半では、職業訓練9日目の勉強内容についてまとめました。

こーいち
独学よりも「先生に学ぶ、会社で学ぶ」が最適解と感じました。

【未経験】Webデザインの独学は難しいと感じた3つの理由

Webデザイン職業訓練9日目

 Webデザインの独学は難しいと感じた3つの理由

・理由その1:独学は非効率的
・理由その2:学習方法に不安
・理由その3:モチベーション

順番に解説します。

理由その1:独学は非効率的

自力でテキストや動画だけで勉強するのは非効率的です。

なぜなら、わからないところが解決しにくいから。

職業訓練校で配布されたHTML&CSS、JavaScriptのきほんのきほんなどのテキストをひと通り読んでみました。
感想は「一から順序立てて勉強しても、学校で習っているようには身につかない」と感じたのです。

もちろん、質問サイト『teratail』で質問する方法もあります。
ただし、すぐに返事は来ません。

先に進むしかないのです。
人によってはわからないまま進むことに抵抗を感じる方もいるはず。

こーいち
ゆえに、学校での勉強と比較すると非効率であると感じました。

理由その2:学習方法に不安

独学していると「この学習方法で合っているのか」不安になります。

その理由は、「何から、どうやって、どこまで勉強するのか」すべて自由だからです。

戦略を間違えると多大な時間の損失になります。

独学は費用が安く済みますが、勉強方法を間違えれば時間を失います。
お金は稼げばいいですが、時間は取り返しがつきません。

「時は金なり」です。
» ことわざ『時は金なり』の本当の意味を知っていますか?【結論:時は命なり】

ひょっとしたらWebデザインスクールに投資するほうが、回り道しない分、時間損失が少ない可能性もあります。

私は大学受験のとき、予備校に通わず宅浪しました。
結果は惨敗。

もちろん「予備校に通えば合格できる」と言うつもりはありません。

こーいち
ただ、「失敗のリスクが少ないのは学校に通うこと」です。

理由その3:モチベーション

独学は孤独です。

一緒に勉強する仲間がいないと、なかなかモチベーションが続きません。

カフェなど公共の場所で、周りに人がいるところで勉強するのも方法。
ただ、周りの人たちは勉強とは関係ない人たち。

一緒に勉強している仲間ではありません。

職業訓練やWebデザインスクールのほうが切磋琢磨できる仲間がいるため、刺激になります。

未経験から独学で学ぶ3つの解決策

以下のとおり。

・その1:無料学習ロードマップで独学する
・その2:職業訓練やWebデザインスクール
・その3:Webデザイン会社に転職して学ぶ

その1:無料学習ロードマップ

学習ロードマップを参考にしつつ、勉強するしかないです。

良さそうなのは以下のとおり。
なぜなら、実際に稼げるようになった人がいるから。

ただ、基本的に独学はおすすめしません。

上記マナブさんのロードマップは「有料版」もありますので、それでも良いかもですが。

その2:職業訓練やWebデザインスクール

スクールに通い、プロの先生から学ぶのが効率的です。

職業訓練は無料で学べます(場合によってはお金をもらいながら)。
3ヶ月コースは詰め込み型なので、6ヶ月コースがおすすめです。

ただし、職業訓練に行ったからといって就職できるとは限りません。
» 参考:Webデザインの職業訓練校って実際のとこどうなの?【実体験】

Webデザインスクールもありですが、ちょっと費用が高め。
予算がある方は時間を買う意味で、自己投資もありかもです。

私はWebデザインスクールには通ったことがないので、実際の体験談など他サイトをご参考ください。

こーいち
あくまで選択肢のひとつです。

その3:Webデザイン会社に転職して学ぶ

キャリアに空白ができるのが不安な方は、Webデザイン会社に入ることです。

職業訓練校の先生から「最初の1年はWeb制作の仕事はさせてもらえないところがほとんど」と聞いています。
ゆえに、最初は雑務をこなしながら、スキルを身につけていくのもあり。

とはいえ、私の場合は未経験から転職できないので職業訓練に通っているわけですが。

ちなみに、未経験者でも転職先を保証してくれるDMM WEBCAMPで学んでみるのもありかもしれません。

✔︎ 受講者の90%以上が未経験から始めて、転職成功率98%。
✔︎ 転職できなかった場合は全額返金保証

» 参考:DMM WEBCAMP公式サイト

いずれにしても、独学はおすすめしません。
難しいと感じる3つの理由があるからです。

独学が活きるのは「未経験レベル」を脱してから。

こーいち
初心者レベルになってから「自分の辞書を作るイメージで独学するのはあり」と思います。

【Webデザインは難しい】職業訓練9日目に勉強したCSS

Webデザイン職業訓練9日目

職業訓練9日目は新サイト作成の続きです。

その①:CSSを整える【キービジュアル、スクロールアイコン、title、リード文】

キービジュアルのCSS

CSS

.key{
 margin-bottom: 30px;
}

スクロールアイコンのCSS

CSS

.scroll{
 text-align: center;
 color: #999; /*ちょっと薄いグレー*/
 line-height: 1; /* bodyのline-heightが2なので*/
}

.scroll .material-icons{
 font-size: 40px; /*検証でデフォルトfont-sizeが見れる→マウスをのせる*/
 border: 1px solid #999;
 border-radius: 40px; /* マウスをのせるとサイズがわかる42→21以上or半分以上を入れておけばOK*/
}

疑問点

アイコンフォントサイズ40px → border-radiusは20pxでは?
答え → ボーダーではないからと考える

h2のクラス”title"のCSS

CSS

.title{
 font-size: 26px;
 text-align: center;
 line-height: 1;
 margin-bottom: 30px;
}

リード文のCSS

CSS

.top_about .lead{
 width: 600px;
 margin-left: auto;
 margin-right: auto;
 text-align: justify; /* はじの文字のズレを多少直してくれる */
 margin-bottom: 30px;
}

その②:CSSを整える【ボタン、marginの相殺、画像・文字の横並び】

ボタンのCSS

CSS

.btn a{
 border: 1px solid #3cad5a;  /* 飲食店で青、紫は使いにくい。補色=反対色 or 三角形や四角形にすれば間違いない */
 width: 270px;
 display: block; /* <a>タグはインライン要素 */
 color: #3cad5a; /* いろんな緑がある中での選択理由(カラーピッカーで検索)*/
 text-align: center;
 margin-left: auto;
 margin-right: auto;
 line-height: 65px;
}

.btn a:hover{
 background-color: #3cad5a;
 opacity: 1; /* 不透明度→共通設定で0.6にしていたから戻す*/
 color: #fff; /* 文字色 */
 transition: 0.3s; /*遷移=うつりかわり*/
}

 CSS重要事項

・marginがかち合うと相殺される(大きいほうが優先)。
・paddingは相殺されない
・class名は半角で、いくつも作れる

HTMLの以下class名に、rowを追記

HTML

・<section class="top_menu row">
・<section class="top_lesson row">
・<section class="bottom_contents row">

CSS

html body main .row{
 padding-top: 70px;
 padding-bottom: 70px;
}
/*paddingは相殺されない*/

画像を横並びにして等間隔に並べる

CSS

.top_menu .menu_wrap{
 display: flex;
 justify-content: space-between;
 margin-bottom: 30px;

.top_menu figcaption{  /*CSSの名前はあまり省略しない、見てわかるように*/
 text-align: center;
}

画像・文字を横並びにするCSS

CSS

.top_lesson{
 background-color: rgba(247, 114, 55, 0.4);
}

.top_lesson .lesson_wrap{
 display: flex;
 margin-bottom: 30px;
}

.top_lesson .lesson_wrap .lesson_img{
 margin-right: 30px;
}

その③:CSSを整える【>、+、nth-child()、nth-of-type()、詳細度

>、+、nth-child()、nth-of-type()

CSS

.bottom_contents > div{
 display: flex;
 justify-content: space-between;
}
/* .bottom_contents >.div /*.bottom_contents >.div 子要素のdivを指定できる */

.bottom_contents > div section{
 width: 470px;
}
/* それぞれのdivに対して470pxを持たせる */

.top_voice h2 + div{
 display: flex;
 margin-bottom: 30px;
}
/* 新しい書き方 → h2のすぐ下のdivタグ、+くっついている */

.top_voice h2 + div > p{
 margin-right: 20px;
}
/* h2のすぐ下のdiv、+くっついている */

.top_voice h2 + div div p{
 line-height: 1;
}
/*このくらいの書き方が適切*/

.top_voice h2 + div div p:first-child{
 font-size: 12px;
 margin-bottom: 5px;
}
/* 1個目のPタグだけが選べる、最初の子要素 nth-child(1)でもOK */

.top_voice h2 + div div p:nth-child(2){
 margin-bottom: 15px;
}
/* n番目→2番目の */

.top_voice h2 + div div p:last-child{
 line-height: 1.5;
}
/* last-child=最後のclassとの使い分け、ムリに使う必要なし */

.top_news dl{
 line-height: 1.5; /* line-height: 2 → 1.5 */
 margin-bottom: 15px;
}

.top_news dl:last-of-type{
 margin-bottom: 30px;
}
/* of type 何番目の */
/* 上記の別解 nth-child(4)にすると3つ目の下があく → h2から計算するのでdl3番目があく → ゆえにnth-childを使うなら5番目を使う。
.top_news dl:last-child → 最後の子要素のdlという意味 → 存在しない
dl:last-of-typeにすると最後のdlタグになる */

「nth-child」は兄弟関係の要素をカウントする。
「nth-of-type」は指定した要素のみをカウントする。
» 参考:CSSのnth-childとnth-of-typeについて基本から学ぼう

詳細度について

詳細度とは、スタイルが重複したときにどれを優先させるかの優先度を表したもの。
どれくらい詳しく書かれているかの点数表が存在する。
同点の場合は下に書かれたもの優先される(下記参照)。


0.!important
1.HTML上のstyle属性に書かれたプロパティ
2.IDセレクタ
3.クラスセレクタ、属性セレクタ、擬似セレクタ
4.要素型セレクタ、擬似要素
5.CSSの記載順序がうしろのプロパティ

CSS

html body main .row{
 padding-top: 70px;
 padding-bottom: 70px;
}
/* paddingは相殺されない */

.pb0{
 padding-bottom: 0!important;
}
/* bottom_contents row pb0 → class10点扱い、なんとなく意識しておく */
/* 他に手がないときにpb0を使う
!importantが最強10000点
importantを使うなら他には使わない*/

Web制作は最大公約数的に考える【読みやすい文字数、whatfont、カラーピッカー】

 Webサイト制作で大事なこと

・最大公約数的に考える
・広く広くとっていく

 whatfontについて

whatfont → Webサイトのフォントの詳細情報を見ることができるGoogle Chromeの拡張ツール。

ただし、画像は認識しない。

「人間の読みやすい文字数とは35〜38文字」と聞きました。

当ブログは1行43文字でしたので、早速40文字までに減らしました。

カラーピッカーについて

・X軸:彩度 左に0 → 必ずグレーになる
・Y軸:明度 下に0 → 必ず黒になる

トーン(彩度と明度)を変えないで色相だけ移動させるとなじみやすくなる。

「逆に色相を変えずに、彩度・明度を整えるやり方もあり」と学びました。
» 参考:カラーピッカー

まとめ:Webデザイン独学は難しいので、先生や会社を利用しよう

Webデザイン独学は難しい

 【まとめ】Webデザイン独学が難しいと感じる3つの理由

・理由その1:独学は非効率的
・理由その2:学習方法に不安
・理由その3:モチベーション

独学はおすすめしません。
なぜなら、失敗した経験があるから。

あまりにも非効率です。

予算などさまざまな理由や事業がありますので、無責任なことも言えません。
私自身、職業訓練校で学んでいるだけでWebデザインスクールや会社に入ったことがないです。

説得力はありません。
ただ、ハッキリ言えることは以下のとおり。

・学校では、長年の知見や経験があるプロの先生から学べる
・会社では、ノウハウや市場からのフィードバックを得られる

あまりにもコスパが良いのです。

 記事で紹介したWebデザインスクールリスト

 記事で紹介した転職サイトリスト

なお、職業訓練10日目については、【10の質問】Webデザインを勉強して、IT系友人に聞いてみた【職業訓練10日目】で解説しています。

Webデザイン
【10の質問】Webデザインを勉強して、IT系友人に聞いてみた【職業訓練10日目】
こーいち
学校なら、まずは無料の職業訓練校を検討してみるのもありです。

こーいちより

P.S. Webデザイン独学は難しいので、先生や会社を利用しよう。

関連記事【初心者向け11選】Webデザインギャラリー・参考サイトをまとめました
関連記事【初心者向け】Webデザインの基礎知識をまとめました【入門から色彩、配色まで】

-Web Design

Copyright © Blog Chronicle , All Rights Reserved.