しもむらのITブログ

(更新日: )

Webデザインの始め方３ヶ月で達成可能【完全初心者向け】

,
SEO初心者

Webデザインを始めたい人HTML/CSSなどのプログラミングを始めたけど何から勉強すれば良いかな？

記事の信頼性

記事を書いている僕は、プログラミング歴3年ほど。
エンジニアになって完全に人生が変わりました
» 参考：【実体験】プログラミングに出会って人生が変わった３つのこと

エンジニアとして活動することが多いのですがデザイン的なことをすることも多くその過程をまとめていきます

この記事を読むことでWebデザインの学習方法、スキルアップ方法、その後のキャリアアップまでイメージできるようになると思います
それでは、見ていきましょう

Webデザインとは

まずWebデザインとは、Webデザインには厳密な定義はないと思うのですが、この記事ではWebサイトを制作する上で必要なデザインスキルと言うことで紹介していきます

イラストレーターとして絵を書くみたいなことは想定していないです

なお、Web制作で必要なプログラミング知識に関してはこちらの記事で詳しくまとめているので、エンジニアに興味がある方はこちらからどうぞ


https://shimomuratomoki.com/programming-university-self/

本記事のもくじ

【1】Webデザインとは

【2】Webデザイン独学方法

【3】基礎学習後のステップアップ方法は３つ

【4】よくある疑問・質問

【5】フォローしておくべきTwitter

Webデザイン独学方法

Webデザイン独学方法

1.Photoshopに慣れる

Webデザインの入り口としてまずはPhotoshopに慣れましょう デザインツールは色々とあるのですがやっぱりAdobe Photoshopを使っている人は多く情報が多いです
この自己投資は必須です

Photoshopの学習でやる教材

Photoshopでまず身に付けるのはこちらです とはいえ全ての動画をやる必要はなく気になるもの動画を見てやってみましょう

そして切り抜き、合成、バナーのデザイン、テキスト エフェクトのやり方に何となく慣れましょう

ちなみに僕もそれらの動画を使ってバナーなどを模写しました！

※Photoshopは機能がたくさんあります。全て覚える必要はなく使いながら慣れていくのが大切です

2.既存のバナーなどを模写する

ツールの使い方に慣れたら既存のバナーなどを模写しましょう
やるべきはこちらです

  • サムネイルの模写
  • バナーの模写
  • クラウドソーシングサイトでコンペ作品の提出

Webデザインが作れるようになる為には自分でゼロから作る必要があります

とはいえバナーなどでは好きなデザインを作ると作るのではなく既存のデザインを真似して作ることが多いです

また、クラウドソーシングサイトなどでググるとコンペ案件がたくさんあります

コンペの参加は誰でも出来るので提案してみるのは良いと思います
クラウドワークスであれば他の人の出したコンペ作品などをみることも出来るので参考にするのも良いです

僕はYouTube動画のサムネをパクっています

このサムネなんかは完全にマナブさんの動画をパクっています🙇‍♂️

ただ、YouTubeのアルゴリズム的にも視聴者としても、なんとなく言いたいことがサムネだけでわかるかなと思うので良いかなと。

YouTubeでサムネの作り方の解説動画を作りました！

Photoshopでテキスト、ぼかし、切り抜きを中心にサムネの作り方を解説しましているので参考になると思います

3.Adobe XDに慣れる

バナーなどの画像がある程度出来るように慣ればWebデザインの基礎にいきます
※ここはUI/UXデザインと言われることもあります

ワイヤーフレームはAdobe XDで作ります

PhotoshopやFigmaでも作れますがAdobe XDの方が直感的に触れるので初心者におすすめです

ワイヤフレーム制作の教材

ワイヤーフレームが作れるようになると、こんな感じのWebサイトの完成イメージが共有できます

ちなみにXDだとリンクで共有できるのでめちゃくちゃ便利です

先ほどのワイヤーフレームのリンクはこちら

4.ポートフォリオを作成する

ある程度、作品が出来たらポートフォリオサイトを作りましょう

参考になるサイト

↓こんな感じのサイトが出来ます^ ^


すみません。サイトの動画は僕の動画です

なおBootstrapの知識が必要です Bootstrapはこちらの記事を参考に制作すると良いです

【Bootstrap入門】Bootstrapでレスポンシブなサイトを1時間で作る Bootstrap tutorial

あとWordPressでポートフォリオサイトを作るとさらにスキルアップですね

WordPressでサイトを作る為にはこちらを参考にどうぞ

WordPressを独学する勉強方法【仕事にするまでにしたこと】

インターネットに公開するのが恥かしい人もGoogleDriveなどでフォルダにしておいて仕事のチャンスがあった時にこんな作品を作れますといった感じで見せられるようにしておくのが良いと思います

ちなみに僕のデザインポートフォリオはこちらです

基礎学習後のステップアップ方法は３つ

基礎学習後のスキルアップ方法

1.トレンドのデザインを常にキャッチアップする

Webデザインはトレンドや流行りが結構あります なのでトレンドを取り入れるのが必要です

参考になるサイト

Webデザインとして良いサイトを作るコツは自分オリジナルを作らないことかと思います

デザインの正解がわからない状態で下手にオリジナルデザインを作ってしまうと返ってクオリティーの低いものが出来てしまいかねません。

なので、既存のサイトを真似しつつ組み合わせてサイトを作り上げるのが大切だと思います

2.ノンコーディングで作れるデザインの仕事をする

などがあります

PhotoshopやAdobeXDを使い慣れたら直感的に触れるので簡単に出来ます ココナラなどでも制作代行などがたくさんありますね

ココナラなどで仕事を探しつつ、作るのは無料で作れるので自分で試しに作ってみて仕事が来た時に出来ますと言えるように用意すると良いと思います

» ココナラで仕事を探す

3.エンジニアと組んで単価をあげる

コーディングやプログラミングが出来ないと言う方はエンジニアと組んで仕事をすると良いと思います
大体のWeb制作はデザインとコーディングがセットで発注されるのでデザイン部分だけ仕事をするでも良いと思います

なお、僕でも大丈夫ですw こちらからお問い合わせください

コーディングの学習へ進みたいならこちらの記事を参考にしてください

https://shimomuratomoki.com/programming-university-self/

【モチベーションの保ち方】フォローしておくべきTwitter

フォローしておくべきTwitter

Webデザインを独学で勉強していると正解がわからず、モチベの維持が一番難しいかなと思います

僕の場合、やる気が出る日と出ない日の差が大きく、やる気が出ない日はTwitterで他人からやる気をもらっています

フォローしておくべきTwitter

すみません。最後は僕です、、、
ザックリ紹介すると

  • るちこ
    →Webデザイン会社事業承継して夫婦で経営。DesighHacksの講師
  • いちげ氏
    →愛媛で活動するデザイナー。いちげ温泉と言うコミュニティーを運営
  • へっせん
    →デザイナー、サムネイリスト。DesighHacks受講生コミュニティーを運営
  • ハイジ
    →サムネ職人。サムネに特化したサムネ部を運営
  • しもむらともき
    →Web制作フリーランス。デザインからコーディング,動画編集,SEOコンサルなど一括して仕事を受ける

Twitterのタイムラインを見ると、皆さんTwitterでアウトプットしていたりコミュニティーを運営していますよね

WebデザインはデザインのトレンドだけでなくGoogleのアップデートやマーケティング分野も深く関係しているので最新の情報を得られるTwitterはうまく使うと良いと思いますよ

また、勉強に行き詰まっている人などは、Twitterなどからご連絡いただけたら、可能な限り回答します。 勉強がんばりましょう！

追記

ありがたいことに、たくさんの方から嬉しいお言葉いただけました
ためになったらシェアして頂けたらとても嬉しいです😊

 

 

【経験談】Web制作フリーランス４つの営業方法【大学生OK】

クラウドソーシングサイトで仕事を取るのは正直キツイと思っている人、WEB制作の勉強をしていてそろそろ仕事を取りたい人へ営業方法です。クラウドソーシング、SNSや知人からの紹介、メール営業の方法を教えます

 

 

 

大学生がWEB制作を独学する手順【月20万稼いだ大学生が解説】

大学生がWEB制作を独学する手順【月20万稼いだ大学生が解説】お金のない大学生に向けた記事です。無料で学習できるサイトを紹介していきます。実体験として実績を積んでスキルを上げれば大学に行きながら月20万円も到達可能ですよ。

 

Tags ,

関連記事

新着記事