未経験者が最速でWebデザインを上達させ、最速で内定をもらう方法

2022年12月22日2023年8月16日

当ページのリンクには広告が含まれています。

未経験から、特に30代以降からWebデザイナーを目指す場合、時間がないという焦りがあるかもしれません。

今Webデザインは学ぶ環境がとても充実しています。情報は選ぶのがたいへんなくらいあふれていますし、自宅で受けられる講座なども充実しています。ですがそれだけライバルもスピーディーに成長しています。

そんな中で最速のスピードで上達し、最速で内定をもらうにはどうすればいいかをこの記事ではまとめたいと思います。

最速の上達法は答えを見ること

はじめに最速の上達法の結論を言ってしまうと

答え（＝完成形）をたくさんみること。そしてコピーすること。構成・構造を分解すること。

ただこれだけです。逆に考えたり手間取ったりは非効率です。よく「過去問は解こうとせずに最初に解答と解説から読む」のが最速と言われますがそれと同じです。

答えを見るとはどういうことか

Webデザインを学ぶためのいろいろな教材やカリキュラムがありますが、ほとんどすべてに共通するのはゼロから積み上げていく方法であること。例えばHTMLとcssならこんな流れです。

最初にタグの書き方から入る
簡単な一ページを作る
数ページのサイトをつくる

もちろんこれは必要な工程ですが、一度やれば十分です。

これを一生懸命復習したり、覚えようとする方が多いですが無駄なのでやめます。

では何をするかというと、最終的な答え・完成形を見ていきます。よくできているサイトを分解してマネしていきます。

このように完成形から分解・分析していく、コピーをするというのが答えをみるということです。具体的に下記のように「答えを見る」回数を増やしていきます。

Photoshopとillustratorの使い方の「答え」
サイトやバナーなどデザインのポイントの「答え」
HTMLやcss設計の「答え」
WordPress設計の「答え」

※答えと書いていますが、世の中に完璧なものはないですしWeb制作にはいくつも方法があるので具体例・解答例にすぎません。絶対の答えがないからこそ最速でこなして数を打つことが大事とも言えます。

では以降で上の4つについて一つずつ具体例を書きたいと思います。

Photoshop、illustratorは完成品を分解し表現の組み合わせ方を知る

イラレやフォトショは講座や書籍などで勉強してもそのテクニックをどこでどう使うのか、わからないということがあります。操作方法を勉強する段階では各テクニックをバラバラに学ぶことがほとんどです。

なので特に表現方法の組み合わせ方などはわかりません。

例えばillustratorなら透明度の使い方やシャドウなどは完成だけみてもよくわかりません。私の場合たまにグラフィックデザイナーの人が作ったパンフレットデータをWeb用に加工するといった仕事がありますが、作業後はそれをよく分解しています。特にアピアランスは驚くほどたくさんの効果を緻密に組み合わせていたりします。

AIの無料素材などをダウンロードすることもできます。これはどういう方法や組み合わせでやっているんだろうと思ったものを探して分解するのは発見が多いです。※なお権利関係にはじゅうぶん留意すること。

illustratorを中心に書きましたがもちろんPhotoshopも同様です。レイヤー効果をどう重ねているのか分解分解です。自動車を作ろうとしたら、本を読むよりエンジンを分解するのに似ています。

サイトやバナーならまずは業界例をググる

何かを作ろうとするときとりあえず自己流でアイディアを出そうとしたり、デザインの方向性を決めたりしようとしていないでしょうか。

最速を目指すならそれはNGです。最初に参考となる答えを見ます。例えば美容系バナーの場合は下記のような感じでググって画像の結果を見ます。

「美容　バナー」
「美容　バナー　デザイン」

その業界の定番パターンや構図をチェックしていきます。たくさんのサンプルを眺めてパターンをインプットし、案件の目的やターゲットとすり合わせていきます。なお当然ですがパクリにはならないように十分注意することです。一つのものではなく多くのものに目を通し共通点や特徴を見つけることが大切です。

Webサイトの場合は業界別まとめサイトも便利です。業界によって典型的な色や形の使い方があるので結構すぐに傾向をつかめます。

また街中や電車の中でいろんなものを観察する機会があります。通勤電車でつり広告（紙）やトレインチャンネル（動画）を見るのもいいかもしれません。

HTMLとcssは答えをバンバン見ながらコピーする

お手本のサイトを再現する形でコーディングしてみるというのがあります。職業訓練の先生に勧められたのは「完成するまで本物のソースコードは見ない」というやり方でした。

ですが私はこのやり方には疑問があるというかあまり意味はない気がしています。むしろ一瞬でもどうなっているのかわからなかったらすぐにF12で答えを見た方がいいと思います。

これには２つの意味があります。

一つはシンプルに時間の無駄をなくすということ。考えるよりさっさと答えを見て先に進みます。その節約した時間で2つ目のサイトにとりかかりまた正解をなぞります。こうして数打った方がいいです。

もう一つは「こんな書き方があったのか」という発見があること。自分で再現しようとしていると知っている範囲でやろうとするので知識やテクニックが増えません。けっきょく同じ状態になるにしても人それぞれいろいろな書き方・やり方があったりするので、むしろ答えをすぐに思いつくときほど他人のやり方を見たほうが得るものが多いです。

なおビジュアル的に素晴らしいサイトでもSEOやアクセシビリティ的にはよくない場合も多いです。見た目が素晴らしいからといって、あまり鵜呑みにしない方がいいです。

ちなみにソースを一切見ないで書いてみるというのは模擬試験みたいなものなので、先述のようにバシバシソースコードを見るのを繰り返した上で力試し的にやるのはいいかもしれません。ただ最初からそれを繰り返そうとするのは非効率です。

あとcssはたくさんのサイトから学んだ方がいいです。自由度が高すぎてなんとでもなるため自己流になりがちだからです。ザっとでいいのでいろんなサイトのcss設計を把握してみるのは有益です。

WordPressのテーマを分解して学ぶ

WordPressのテーマづくりは初心者にとって壁の一つです。ただこれも完成形を分解する形をとれば一気に取り組みやすくなります。

最初にテーマ作成の流れを把握したら答えの例をみます。答えの例とは、公式などよくできた無料テーマをダウンロードしてきて構造や定番パターンを把握すること。

まずはテンプレートの定番の使いわけです。テンプレート階層表で理解しようとするのもいいですが、むしろ公式テーマから複数のシンプルなものを選んでダウンロードし、比較したほうがツボをつかむのがはやいと思います。

また定番ファイルの中身についても書き方の共通点を見つけます。特にheader.phpやfunctions.phpといったポイントになるファイルです。

しっかりHTMLとのつながりをつかみたければ、吐き出される順番通りつまりheader.phpから順に追いかけていくのがわかりやすいです。

管理画面との関係もなんとなくでいいので把握します。汎用的に使われることを目的に作成されているテーマというのはcss設計も勉強になります。

でも自分の頭で考えた方がいい？

ここまでのやり方をまとめると基本的に一切考えなくていいということになります。クリエイティブな仕事だから考えた方がよさそうですが、本当にいいのでしょうか。

確かにプロは考えることが最も大切なタスクです。でもプロはすでにインプットしている経験や知識があり、それをどう使うかを考えられるからこそ思考に意義があります。しかし基礎をなぞったくらいの未経験者が考えても意味はありません。自分の中にあるもの、インプット量が圧倒的に足りないからです。

そんな部分に時間を使うくらいならコピーしたり分解したりした方が圧倒的に速く上達できます。その方が「基礎知識をもとに自分で考える領域」に早くたどり着けるという言い方もできます。

なお勉強の段階で考えるという行為をいっさい否定しているわけではないです。実際に頭をひねって、試行錯誤してはじめて気づいたり得られたりするものはたくさんあります。それはそれでいいことです。

しかし就職を目指している場合、時間と結果が一番大事です。だから「最速」が最優先です。「最上・完璧」な方法で、というなら考えることもカリキュラムに含めた方がいいかもしれません。考えるというクセやトレーニングはあとあと効いてくることもあると思うからです。ですが就活は受験と同じで結果とスピードが勝負です。限られた時間をどう使うか、という点ではインプットが足りない頭で考えるのは非効率です。

採用試験を突破し仕事に就いてしまえば、お金をもらいながらスキルが自然にあがっていきます。就職までは完璧主義よりも最速がベストです。