新しいことを始める時、お金がかからないにこしたことはないですよね。
WEBデザインを独学で習得できるかについて考えると、不可能なことではありません。
実際、現場には独学で実践を積み上げてきた猛者達がたくさんいます。
スクール等を受講するのが近道ではありますが、独学でも実務につなげられる、効率的なステップをご紹介します。
独学のおすすめステップ
１.デザインソフトの使い方を習得する
まずは、デザインソフトのソフトを触ってみましょう。
主流なのは、AdobeのIllustrator・Photoshop・XD、またはSketchなどですが、どれも基本的には費用がかかります。
Adobeソフトが色々使用できるAdobe CCは年額7万円強とやはり初学者には高額に感じますが、使えるようになると高額でも使い続けたくなるツールです。
最初は学割を適用して購入できる、Adobe認定スクールのアカデミア版を購入すると使用方法もレクチャーしてもらえる上、定価の約45％オフで使用することができます。Adobeを使ってみたい方はぜひこのアカデミア版をご利用ください。
SketchはWindows版はなく、Macのみの対応にはなりますが、こちらも実務で使用されるようになってきておりおすすめです。まずは30日の無料トライアル期間があり、そのお試し期間の後は年額99ドルのライセンス費用が発生します。Adobeに比べるとお手頃ですよね。
会社によって使用しているツールが異なるので、どちらも使えるとより良いのですが、最初は始めやすいツールで良いと思います。
またお金をかけたくない！という方には、Canvaという無料デザインツールがあります。
クラウドソーシングサービスなどでの小規模案件ではCanvaを使用するお仕事もちらほらありますので、こちらから触ってみてもいいかもしれません。
２.WEBに関わる言語の知識を得る
WEBサイトを構成しているのは、表面的にはプログラム言語ではなくマークアップ言語と呼ばれるHTMLです。HTMLをCSSで装飾・調整して、綺麗な見た目にしています。
HTML・CSSを知るには、まずはひとつひとつ頭に叩き込むというより、こうゆうもんだという概念をざっくり理解すればいいと思います。PCでしたら、お好きなサイトを開いて「右クリック＞ページのソースを表示」でソースコードを見れますので、この仕組みを理解し再現すればWEBサイトページは作れるということですね。
プログラミング言語は静的なWEBサイトを動かしたり、システム的にしたり、機能を持たせることができるもので、こちらも大切ではありますがエンジニアの領域になってきます。
まずは本などでWEBサイトの成り立ち方を頭に入れてください。それを使ったり駆使するのはまた後の話です。おすすめの参考書をご紹介します。良書はいくつかありますが、何冊も読むのは大変なのでまずはわかりやすい1冊をしっかり読むことが一番です。
1冊ですべて身につくHTML ＆ CSSとWebデザイン入門講座
こちらは2019年に発売されてからずっと売れ続けている書籍です。出版された少し後に、WEBデザイン関連の中で一番最初に購入しましたが、初心者にもなんとか読める説明と構成になっていました。
それでも最初の方は専門用語にちんぷんかんぷんなことも一部ありますが、様々な書籍に触れた後で改めてわかりやすく確かにおすすめできる本だなと思います。中古でも出回っているので、基礎知識を得るためにぜひご一読ください。
今すぐ使えるかんたんPLUS+ HTML5&CSS3 完全大事典
HTMLもCSSも最初はなかなか覚えられません。
この書籍は、要素やスタイルを辞書のように使って使い方・意味・属性などを調べることができます。
よく使用するタグ・スタイルを把握することで、凡庸性の高いものがわかってくるのでおすすめです。
３.環境設定をする
WEB制作の本を読んだら必要な環境がわかってきたと思います。
ここではソースコードを書くコードエディターをPCにインストールしましょう。
実は、コードエディターがなくても、Windowsならメモ帳・Macならテキストエディターの機能でコードを書くことは可能です。
ただ、身についた知識があったらメモ機能でも良いですが、理解が進んでいない場合は補完機能が充実したコードエディターを使用した方がミスも減りますし、作業効率が高まります。無料のコードエディターがたくさんありますので安心してください。
ステップ２でおすすめした書籍ではAtomを使用しています。Atomも良いのですが、実際の現場ではVisual Studio Code（以下、VScode）を使用している制作会社が多い印象ですので、私はVS Codeをおすすめします。
Adobeを購入したならDreamWeaverで良いでしょう。
フリーのコードエディターの種類も良いものが多くありますので、また追って別にご紹介します。
４.作りたいサイトのデザインをする
サイト構成のことをワイヤーフレームといいます。
たまにワイヤーフレームなしでコーディングしながらWEB制作する方もいますが、大抵の場合はワイヤーフレームを作成しています。
手書きから始める人もいれば、エクセルなどで各ページのサイトマップを作ったり、Photoshop/illustratorを使う人、XDやSketchで作り込む人、様々なツールがありますが使いやすいツールで良いでしょう。
最初の段階では慣れない操作で躓きながら時間をかけるよりは、使いやすいもので頭の中のイメージ表現性が高いツールがいいと考えます。
ただいずれにせよコンテンツに画像は必要ですし、素材サイトからイメージに合う画像を探し、ここで使用したい画像の加工・準備もしておきましょう。
５.HTMLとCSSのコーディング
コードエディターについては、DreamWeaverは感動するほど便利なWEB制作ツールですが動作が重いのが難点です。スペックが高くないPCを使う場合や、動作は軽い方がいい方には不向きといえます。
Visual Studio Codeが現場でも広く使われていて操作性も良いのでおすすめです。別途ご紹介した書籍でも使用されているAtomも使いやすいエディターといえます。
ソフトもエディターもアプリケーションも同様ですが、広く使用されているものの方がGoogleなどで情報が紹介されている率が高いので、調べやすいツールというのは非常に大事なポイントです。
どんなに良いツールでも何かトラブルやわからなくなってしまった際に、運営側に聞かないと解決できないというのは非常に効率が悪くなります。
参考書・お気に入りのサイトのソースコードなどをお手本にコードエディターでHTML・CSSのコードを書いてみましょう。プレビュー機能でちょくちょくサイト画面を確認しながら進めるとコードの理解が進みやすくなります。
順番：（1）HTMLでテキストや画像などの要素を入れていく（2）CSSで整えていく
６.JQueryにトライ
画像のスライダーやポップアップ、動きのある様々なアニメーションはJavaScript/JQueryを使用されています。
JavaScript/JQueryは急に難しく感じがちな、また一歩踏み込んだ知識が必要です。急に理解しようとするのは難しいので、JQueryの簡単なものから少しずつ実装を試してみましょう。
おすすめの参考書を紹介します。
JQuery標準デザイン講座
初心者向けの基礎的な知識と文法が学べ、実際に作業する形式でひと通りを習得できる一冊です。
実習編では、UIで実装されやすい小さなパーツの制作から始まり、徐々に複合的な作業に進んでいくので初心者でもなんとかついていくことが可能です。
個人的には、JQueryは簡単ではありませんでしたので一気にではなく、少しずつ理解を深めていくのに手元に置いておきたい一冊です。
７.できる範囲でプラスアルファの知識習得
６.でトライしたJqueryではない、JavaScriptも余裕がある時に知識を得ておくと良いです。
JavaScriptなしでWEBサイト制作も不可能ではないので、最初の段階ではあくまでプラスアルファという認識でいましょう。
おすすめの参考書はこちら
確かな技術が身につくJavaScript 超入門
最初は読んでもあんまり頭に入らないくらい情報量が多いので理解することは後回しで良いと思います。１項目ずつ読んで、実際に実践としてよくわからないながらもコードを書いてみること、その積み重ねで後から少しずつ理解を深めるくらいゆるく考えないと私は難しくて挫折しそうでした。
最初から必ずしも必要な言語ではありませんので、余裕ができた先にご参考ください。
８. サイトが完成したらまた４〜７を繰り返す
6.JQuery と7.JavaScript はマストではないので、主には4.WEBデザイン・5.コーディングを繰り返すということです。ひとつひとつゆっくりでも構いません。ぱぱっと作っても練習なので問題ありません。
ただ、目的の明確化やトーン＆マナーの選定、どんな人からの依頼か・どんな人へ向けたサイトか、ターゲットペルソナ設定が具体的であればあるほど制作もしやすいですし、サイト自体も信憑性が高いリアルな内容になります。そして制作自体も楽しいものになります。
９.ポートフォリオ作成
可能であればオンライン上でのポートフォリオがあるとより良いでしょう。ただオンライン上でもサイト制作となると、レンタルサーバーなどの費用が必要になるため、初期段階ではローカル環境で制作して紙印刷するようにまとめておくのでもないより良いと思います。
その内容は実際に制作したサイトの貼り付け、ワイヤーフレーム段階で設定した、レイアウトやトンマナ選定の根拠・サイトの目的と効果なども説明されているようなより詳細であればあるほど説得力が高まります。
自分の使用したツールについても、スキル項目として配置することをお勧めします。
発注する側は基本的にはよっぽどのことがない限り制作サイドのセンスよりも、スキルと実績を中心に見ています。例えば、Photoshopが使えること、Illustraterが使えること、XDが使えること、これはあWEB業務では当たり前レベルに求められるツールではありますが、使える使えないは採用に大きく関わってきます。
どんなツールも使えば慣れます。
未経験でもスキルがあればOKなWEB業務もあるので、たとえツール使用歴が浅かったとしても練習したツールは自信を持って「使えます！」とアピールしましょう。
１０.就活またはクラウドソーシングサービスなどで活動してみる
クラウドソーシングは代表的なものだとCrowdWorks・Lancersなどがあります。
ココナラなどのスキルマッチングサービスもあります。
はっきり言ってこの全国界隈のサービスは争奪戦も激しく実績に繋げるのはそう簡単ではありません。
ただ、仕組み自体は理解しておくと現代のWEB業務で求められていることなどがつかみやすいですし、実績を積めたらラッキーくらいの気持ちで真剣にチャレンジしてみることをお勧めします。
クラウドソーシングの世界では今はWEB関連といっても、SNS運用だったりメルマガ配信用HTMLメール作成、LP（ランディングページ）と言われるペラいちのWEBページ制作やWEBサイト内へのライティングスキルなどの募集が多い印象もありますが、どれもこれも需要がある業務です。理解を深めるに越したことはありませんし、WEBデザインコンペなどもあるので楽しく挑戦してみてください。
就活は未経験可・スキルが浅くても応募可能な業務は多くはありませんが探せばあります。
勤務地やリモート勤務の有無・給与に対しての満足度などは様々にはなりますが、最初の勤務地には多くを望まずまずは全てを吸収する気概で望めばきっと何かしらの実績を積むことができますので、まずは正社員でも派遣社員でもアルバイト出会ってもチャレンジしてみてください。
まとめ：独学でも制作物があれば実務につなげることは可能です！
いかがでしたでしょうか。
できるかも？意外と大変そう？めんどくさそう？振り返ると大変なこともあります。
WEB関連の技術やトレンド・周りのサービスは時の流れと共に変わっていきます。
プログラミングやシステムエンジニアほど激しい変化ではないかもしれませんが、新しいサービス・システム・ソフト・アプリケーションがリリースされるため、続けている限り学び続けることも必要です。
ただ個人差はあると思いますが、ひとつひとつの作業はとても楽しいものでもあります。WEB業に限ったことではありませんが、続ければ必ず何かにつながります。
独学であっても何かしらの仕事につなげることは可能です。
好奇心を大切に！興味が湧いたならぜひ始めてみてください。
お読みいただきありがとうございました。
コメント