【初心者】Webデザイン入門、独学で何から学べばいいか分からない人へ【未経験】
Webデザインを独学で始める方で、まず何から手をつければ良いか分からない方がいらっしゃると思います。
HTML/CSS等のWebデザイン入門系の参考書を手に取って一通り読み終えても、そこから「独学を進めることが出来ない…」という相談も実際のレッスン生の方でいらっしゃいました。
今回はWebデザインを一から学ぶ方向けに、独学で何からどういう手順で学べばいいか、例を挙げてお話したいと思います。
前回「Web制作入門記事まとめ」という記事もアップしてますので、そちらもご参考頂きつつ、さらに学習の流れの説明をさせて頂きます。
是非役立てて頂ければ幸いです。
Webデザイン独学Step1「ウェブサイトとHTMLに慣れ親しむ」
まず独学の一例として順を追って細かく挙げていきます。
- 色々なウェブサイトを見る。
- ウェブサイトでよく用いられている構図・レイアウトを知る。
- 既存サイトのソースコードを覗いてみる。
- ソースコードから、HTMLの構造をざっくり知る。
- デベロッパーツールでの検証の方法を学ぶ。
本当に何から学べばいいか、独学のやり方が分からない方向けなので、細かくて当たり前のような項目もあると思います。
色々なウェブサイトを見る
Webデザインを学ぶ上で基本中の基本です。
Webデザイナーは、他の人よりウェブサイトに詳しく、幅広い知識がなければなりません。
意識的に色々なサイトに訪れて、触れていきましょう。
▼Webデザインに参考になるサイト集
▼様々なウェブサイトを画像で紹介しつつ、デザインについての知識も学べる良書です。
Webデザイン良質見本帳 目的別に探せて、すぐに使えるアイデア集
ウェブサイトでよく用いられている構図・レイアウトを知る。
ただ闇雲に色々なサイトを見るだけではなく、自分なりに分析して、知っていきましょう。
性別や年齢によってよく見られるサイトも違ってきます。
普段自分が見ていない、異性に良く見られるサイト、自分と別の年齢層では有名なサイト、特定のジャンルに特化した人気サイト。
有名なサイトは、仕事の会話の中で相手との共通言語のように出てくることもあるので、必ず一度は目を通して自分なりに分析しておくと良いでしょう。
- どんな目的のサイトか。
- ターゲットはどういった層か。
- どのような色使いをしているか。
- レイアウトはどうなっているか。
- 目を引く部分はどこか。
- 他のサイトと異なる部分はどこか。
国内人気サイト
▼2020年版の国内人気サイトのランキングです。有名サイトがずらっと並んでいます。
グーグル、ヤフー、YouTube、ツイッター、Amazon、楽天などが上位。
これらは検索エンジン、ニュース・ポータルサイト、動画サイト、SNS、商品販売(EC)サイトといったジャンルになるかと思います。
ＬＰ、ランディングページ
また、Web制作の業務においてはクライアントは何かしらの商品の売り上げアップを望んで依頼することがほとんどだと思います。
そういった直接売上に結びつくような集客目的の１～数ページの広告ページの事を、ランディングページ、略してLPと呼びます。
LPは１ページで商品の魅力が伝わるようアピール力があるサイトの構成になっています。
コーポレートサイト・店舗サイトなど
ジャンルごとに機能・レイアウトの用いられ方などに特徴があったりするので、その点を気にしてみると勉強になると思います。
サイト集などではジャンルごとに絞って一覧することが出来る場合があります。
▼こちらのサイト集でもメニューからジャンル絞り込みが出来るのでご活用ください。
既存サイトのソースコードを覗いてみる。
何から手をつけていいか分からないという入門者方の中にはサイトのHTMLのソースを見たことが無い方もいるかもしれません。
ChromeやEdgeであればサイト上のどこでもいいので右クリックして、もしくはMacならCtrl+クリックで、「ページのソースを表示」という項目を選択してみてください。
ソースとはHTMLで書かれた、サイトの元のコードのことです。
ソースコードから、HTMLの構造をざっくり知る。
ソースコードが表示できたでしょうか。
難解そうなHTMLのコードがズラ－っと表示されたかと思います。
ウェブサイトはこういったHTMLのコードを元に、ウェブブラウザがどう表示するかを解釈して表示させています。
実際にはHTMLファイル以外にも、HTMLファイルから呼び出されて以下のようなファイル群が読み込まれます。
- JPGやPNGなどの画像ファイル
- デザインを指定するCSSファイル
- 動きや計算、特別な処理を指定するJavaScriptファイル
Webデザイナーの仕事において、コーディングと呼ばれる分野ではこのHTMLやCSSなどを自分で一から記述して構築していきます。
難しそうですよね、、、。
こういったコードには手をつけずに、完全にデザイナーとして、見た目のデザインだけ担当する方もWebデザイナーと呼ぶこともあるかと思います。
ただ、一般的には雇用募集などでも、こういったHTMLなどのコーディングも出来て、サイトを一通り作ることが出来る人を幅広く「Webデザイナー」と呼ぶことが多いかと思います。
▼書籍でも、Webデザイン入門というと、概ねHTML/CSSの事を指します。
1冊ですべて身につくHTML ＆ CSSとWebデザイン入門講座
HTML＆CSSとWebデザインが 1冊できちんと身につく本
逆にデザインはほとんど担当しないけれど、HTML/CSSを編集するコーディングを主に担当するという方は、コーダーと呼ばれたりもします。
コードを見るのが初めて、ほとんど触ったことがないという方は面食らってしまうかもしれませんが、勿論、こういった難解なコードだけを見て構築していくわけではありません。
次に、もう少し見やすいコードの検証方法を試しましょう。
デベロッパーツールでの検証の方法を学ぶ。
ソース表示を閉じてウェブサイトの画面に戻り、先ほどと同じように右クリックから「検証」「開発者ツールで調査」等の項目を選んでみてください。
見ていたウェブサイトの隣にソースコードが同時に表示されたかと思います。
この画面ではソースコードと実際の表示を照らし合わせて、どこがどういった記述によって、どう表示されているかを確認して検証することが出来ます。
コードが表示されている部分の左上の矢印のアイコン(スマホのアイコンの左隣)をクリックして、サイトの表示エリアへマウスを動かしてみましょう。
マウスを置いた部分が色づけされて、どんなタグが使われているかや、幅、高さなど色々な情報が出てくると思います。
そこでクリックすると矢印アイコンでの選択が解除され、その部分がソースコードでどういった記述になっているか見られます。
Web制作におけるコーディング作業の分野ではこのデベロッパーツールを用いながら、コードを書いては実際の表示を見て、望む表示になるかどうかを検証して修正し、作業を進めていきます。
Webデザインの実際の作業の流れがなんとなくイメージ湧いたでしょうか。
ここまでは独学のステップ1。まだ何も始まっていません。
ソースコードを見て苦手意識を持つのはまだ早いです。
色々なサイトを見て、そういったサイトが作れるようになる、という意識でテンションをあげながら次に進んでいきましょう。
Webデザイン独学Step2「HTML/CSSを学び、自分で書いてみる」
多くのウェブサイトを見て、HTMLなどの概要をつかめたら、次は実際にHTMLなどを学んで実践していきましょう。
- HTMLの基本・頻出タグを学ぶ。
- HTML/CSS用のコードエディタを導入して使い方を学ぶ。
- 学んだHTMLタグを使ってHTMLを自分で書いてみる。
- CSSの基本・頻出プロパティを学ぶ。
- 学んだCSSプロパティを使ってHTMLで書いたサイトを装飾する。
- デベロッパーツールを活用したコーディング修正方法を学び実践。
このステップについては前回記事と重複している内容も多いので、以下ご参考頂ければと思います。
Webサービスを活用する
▼ゲーム感覚でHTMLなど学べるWebサービス。
ProgateではHTML/CSSの初級編が無料で学べます。
有料では全てのコースが月額980円(税別)で学べ、HTML/CSSからJavaScript、PHP、Pythonなどかなり上級の言語まで一通り学べる充実した内容となっています。
iOS/Androidアプリもあり、お手軽に学習出来るところもメリットですね。
▼短い動画で学習できるドットインストール
こちらは3分の動画で学習できるWebサービス。無料でもいくつかの動画がお試しで閲覧出来ます。
有料会員は月額1080円(税込)で、全ての動画が見れるようになり、質問や文字起こしの検索など便利な機能も使えて学びやすくなるようです。
入門書を買ったり・図書館・電子書籍を活用する
身近にぱっと手に取れる一冊を買って置いておくと、いつでも見返せて便利です。
電子書籍もかさばらず非常に便利ですが、パラパラっと見る軽快さには欠けます。
大事な一冊は電子ではなく手元に置いておくとよいと思います。
▼ポケットシリーズは小さい中にHTML&CSS全事典ということで知識が網羅されています。
できるポケット Web制作必携 HTML&CSS全事典 改訂版 HTML Living Standard & CSS3/4対応 できるポケットシリーズ
また、地域の図書館にも少し古めの書籍であれば置いている可能性があります。
借りれる期間は限られてるので短期集中型で学ぶにはお財布にも優しい独学方法だと思います。
Webデザイン独学Step3「模写コーディングでサイト制作実践」
HTML/CSSを学びコーディングを少しずつ掴めてきたら、さらに本格的な実践です。
スマホ対応のサイトを模写して、実際の制作のレベルまでスキルを高めていきましょう。
レスポンシブデザインについて学ぶ
現在のウェブサイトにおいて、スマホによる閲覧率が非常に高くなっています。
１つのコードでPC/スマホ/タブレットなど様々なデバイスに対応するレスポンシブデザインについて学びましょう。
▼デベロッパーツールでスマホやタブレット/PCの画面サイズにして、サイトのレイアウトがどう変化するか確認すると参考になります。
模写コーディング
既存のサイトをデザインデータだと想定して、見た目をそっくりに模写する模写コーディングに挑戦してみましょう。
スマホのサイトから優先的にコーディングする方法をモバイルファーストと呼びます。
現状スマホ閲覧が主流になっているのでスマホサイトから模写しはじめ、完成してからレスポンシブでPCへ対応させましょう。
▼模写のおすすめサイトや、必須の拡張機能を紹介しています。
▼模写以上に簡単なコーディング練習用のデザインを用意しました。こちらから始めるのも是非おすすめです。
独学で行き詰ったら、Webサービス、スクールなどを頼る
独学だけでは行き詰る場面は必ずあるかと思います。
大丈夫です。みんな必ず一度は頭を抱えます。
そういった時には検索してこういったブログを参考にしたり、書籍を読み漁って見たり、Webを通じて教えてくれる人を探したり、自分の力以外を頼りましょう。
▼基礎からしっかりプロレベルまで学べる書籍も存在します。
初心者からちゃんとしたプロになる Webデザイン基礎入門〈HTML、CSS、レスポンシブ
問題を解決するために人を頼る力、それも能力のひとつです。
100%独学にこだわる必要はありません。
50%独学であれば充分独学と言えると思います。
せっかくやる気になって学んでいく途中で、独学にこだわるばかりに、停滞、後退してしまうのは非常に勿体ないです。
行き詰った時には是非自分以外を頼ってください。
私もこのサイトや他のウェブサービスなどから講座を行ったり、相談を受け付けています。
ご興味ある方は是非サイト下部のお問合せ / 個人レッスンご希望のフォームからご相談頂くか、ココナラなどでもサービス出品していますのでそちらからでもメッセージ頂戴出来ればと思います。
最後までお読みいただきありがとうございました！
今すぐ使えるCSSレシピブック
HTML5/CSS3モダンコーディング フロントエンドエンジニアが教える3つの本格レイアウト スタンダード・グリッド・シングルページレイアウトの作り方
