未経験からウェブデザイナーになる！押さえるべきポイントは3つ！役立った学習ツール・練習法を徹底解説

ウェブデザイナーを目指しているけれど、何から始めたら良いかわからない。
そんな方に向けて、私自身が未経験からウェブデザイナーを目指す過程で実際に役立った学習ツールや練習方法をお伝えします。
この記事では、HTMLを学び、作品を作り、ポートフォリオを完成させる具体的なステップを解説します。
実際に私も面接などをする側になったこともあるので経験もふまえてかいせつ
経験上、未経験の時は仕事の実績がないので、習作でかまいませんので作品の数があった方が説得力が増します。

まずはポイント3つ

ポイント01
作品集（ポートフォリオ）を想定して作品作りをする。
理想は「目的」「課題」「解決へのアプローチ」がセットになっていると理想なのですが、未経験の時は想定課題を設定しても説得力を出すことが難しいので、街を歩いている時に見つけた会社のホームページを探してみて、スマホ対応できてない、デザインが古いなどの伸び代を見つけて、この企業がWEB上より認知を高めるにはどんなホームページがいいか。などを作品作りの土台にするといいかと思います。

ポイント02
学習や制作に費やした時間も記載する。
仕事する上でスピードは大切な要素の一つです。
掲載されている品質の成果物をどれくらいの期間で作ることができるのか記載しておくと、面接官も一緒に働くイメージがつかみやすいと思います。

ポイント03
とにかく丁寧に作る。
この子はデザインが好きなのかな？？という部分を見られるので、成果物は丁寧に作ってください。スピードも大切ですが、品質も大切です。
ただ、未経験の時はスピードと品質、どちらかを取るとしたら品質を大切にしましょう。

1. 学びの第一歩：HTMLとCSSに触れる

学習ツール：未経験者におすすめのサービス
Progate
イラストのインターフェースが初心者でもHTMLやCSSを初めて学ぶ心理的なハードルを下げてくれます。スライド形式でHTMLとCSSを基礎から学べ、実際に手を動かす練習ができます。
いろいろな言語のコースがありますが、まずはHTML & CSSコースの無料版からチャレンジしてみましょう。
もちろん有料版で学習できるとなを良いのですが、一無料版を試してみてからでも遅くはないかと思います。

次に取り組んでみてほしいこと
簡単なHTMLページを作る
最初はシンプルで構造でOKです。例えば、好きな趣味や特技をテーマにした1ページサイトを作りましょう。いきなり世の中に出回っているようなデザイン性の高いページを目指すと挫折してしまいます。私もそうでした。。。
まずは小さく始めることがコツです。

以下の構成を参考にしてみてください。

ヘッダー：タイトル
メインコンテンツ：自己紹介や好きなことの説明
フッター：連絡先

まずは複数ページを作るのではなく、1枚だけのページ作成にチャレンジしてみてください。
そして、完成したらまずレンタルサーバーを借りて、ドメインを取得して公開してみてください！
WEBサイトの醍醐味はネットの世界に公開してこそだと思います。
まずは周りの人などにURLを共有して見てもらい感想を聞いてみましよう！

コードを書く際は、知識も大切ですが、とにかく手を動かすことが大切だと思ってます。
たくさんコードを書いてトライ&エラーの数を重ねることが習得するまでのコツです。
経験上、意外と近道はなかったので、とにかく場数をこなしましょう！

2. 作品を制作してスキルを実践する

制作テーマを決める
「何を作れば良いかわからない」という方におすすめなのが、ポイント01でおすすめしたように実際の企業のホームページを題材にしてみるのをオススメします。
ただそれだけだと表現やコンテンツのバリエーションが出しにくいので、下記のようなアイディアも参考にしてみてください。

• グラフィックデザインの作品を紹介するポートフォリオサイト
• 自分の趣味を題材にしたサイト
• 地元のイベントを題材にしたサイト

制作の流れ
1. ワイヤーフレームを作成
　　手書きでもFigmaでもOK。最初にレイアウトを決めておくと迷いません。
2. HTMLとCSSでコーディング
　　Progateなどで学んだ知識を活かし、ブラウザで確認しながら少しずつ進めます。
3. レスポンシブ対応を意識する
スマホやタブレットでもきれいに表示されるように調整しましょう。

3. 挫折しそうなときの対処法

「学びが進まない」「作品が思うように作れない」という壁にぶつかることもあるとおもいます。私も当時は知識ゼロからスタートしたので、たびたびモチベーションや成長速度で停滞期のようなものがやってきました。
参考までに私が挫折しそうなときに取り入れたポイントは下記のような点です。 • 小さな目標を設定する
• 「1日1つのタグを覚える」「週末に1ページ完成させる」など、達成しやすい目標を設定。
• 仲間やコミュニティに相談する
• SNSやオンラインフォーラムで、同じ目標を持つ仲間を見つける。

4. さいごに

一歩ずつ進むことで道は開ける！
ウェブデザインを目指す道のりは簡単ではありませんが、基礎を学び、小さな成功体験を積み重ねることで成長できます。
デザインにしても、コーディングにしても試した回数分だけ成長するので、皆さんの「転職したい！」「社内でキャリアチェンジしたい！」などの大きな目標に向けて取り組んでみてください。
社会人をしていると1日の1/3を仕事して過ごすことになります。8時間以上は睡眠したり、食事したりする時間で取られますので、仕事をするウェイトが大きいことがわかりますね。
そこまで長い時間かかわるものだから、自分の好きな仕事でハリのあるのある生活を送りたいですね。

一緒に頑張りましょう！