Webデザインの独学は何からはじめるのがいい？【アウトプット編】

webデザインを独学する際に何から始めればいいの？

webデザインを独学する際に何から始めればいいのか迷っている方向け。

この記事を読むことで、webデザインスクールに通わなくてもある程度webデザインを独学する方法がわかるようになる簡単にできるwebサイトを模写する５つの手順をご紹介します。

webデザインを独学しようと思っているけど、何から始めようか困ってしまうことってありませんか？

webデザインは分野がとても広いので、初めてだとどこから始めようか迷ってしまう思います。

webデザインの独学をするには、まずhtml/cssから身につけるのがおすすめです。

ちなみに、この記事は４部構成で、下記のようになります。

html/cssである程度コーディングができるようになれば、「html/cssでこういう表現ができそうだ」と、デザインを考える際にも役立ちます。

私は、独学でhtml/cssを学も途中で挫折。
そのあと縁がありwebデザインスクールに入学。

webデザインスクールで学んだ経験から「あの時こうやっていればもう少し独学で知識を身につけることができた」と思うことをこの記事ではご紹介していきます。

それでは、これからwebサイトを模写する５つの方法について解説していきます！

どんな作品を作りたいかテーマを選ぶ

模写をする時に全く同じものを作るのではなく、あなたが作ってみたいと思うテーマを選ぶことです。

模写というくらいなので、全く同じものを作ってもいいのですが、あなたが好きなテーマを扱うことでテンションが上がり完成させることへの力になってくれます。

好きなテーマというのは、例えば、

このように、どんなテーマでサイトを作るのかを予め決めておくと、ただ模写するよりも濃厚なアウトプットができるようになります。

参考にしたいサイトを探す

テーマが決まったら次に参考にするサイトを探しましょう。

今回は模写なので、あなたが作ってみたいテーマに当てはまるような構成のサイトを探してみてください。

また、今回は模写が目的なのでフレームワーク（サイトの構成）は手をつけず画像だけ差し替えることをイメージしてください。

テーマに当てはまるようなサイトを探すには下記を参考にしてみてください。

それでは詳しく解説していきます！

ポイント①アピールしたいことを伝えられるサイトを選ぶ

今回の目的は模写なので、あなたがアピールしたいことを伝えられるような構成のサイトを選んでおきましょう。

サイトの構成を下手にいじるとフレームワークが崩れたりするので見た目が変化してしまします。

そうなると模写とは言えなくなってしまいますよね。

最初は難しいかもしれないので、ブログに近い感じのサイトを選んでみたり、ECサイトのフレームワークあたりから初めてみるのがおすすめです。

慣れてきてたら最終的にランディングページあたりがコーディングできるように慣ればかなりスキルが上がっていると思います。

ポイント②なるべく簡単なフレームワークのものを探す

慣れていないうちは、簡単に作成できそうなサイトを選びましょう。

そうは言っても、「簡単な物だとあまり練習にならないんじゃないの？」って思われるかもしれません。

いきなり難易度が高いものを選ぶと一人で完成させることが難しくなっていくので挫折しやすいです。

そのため、いきなり難易度が高いものを選ぶのではなく、簡単な物から選ぶようにしてください。

模写なので最後まで完成させることが重要になります。

では、どのようなサイトを選べばいいのかというと、最初のうちは同じテーマで検索をかけて「あ、これ作ってみたいな」ってサイトを探すといいかもしれません。

例えば、パン屋さんのサイトを作りたいのであれば、「パン屋」で検索をかけてみましょう。

そこで、「あ、これ作ってみたいな」「これなら作れるかも」って感じるサイトを選んでみてください。

ポイント③全体をスクリーンショットする

参考にするサイトを選んだら、最後にサイト全体のスクリーンショットをとっておきましょう。

後々Photoshopで読み込んでサイトの設計図を作成します。

このスクリーンショットをとっておくことで後々コーディングする際に非常に便利になります。

では、「サイト全体のスクリーンショットなんてどうやってとるんだよ。」ってことなんですけど、下記のサイトを参考にさせていただきました。

→Requ.log（参考サイトに飛びます）

webサイトを作成する際に便利になるので同時に覚えておいて欲しいのですが、参考サイトにアクセスしてサイト全体のスクリーンショットを確認していただきたいのですが、参考サイトを開く際に、もしPCでご覧になっている方であれば、「windowsの場合：Controlを押しながらクリック」「macの場合：commandを押しながらクリック」で別タブで開くことができます。

を押しながらクリックすることで、別タブで開くことができます。

webデザインをするときにはいろいろなサイトを参考にするので、後々再確認するときなどに便利などに別タブで開いておくと便利ですよ！

Photoshopなどで作りたい作品の完成図を作成する

次にコーディングしやすいようにPhotoshopなどで予め完成図を作っておきましょう。

完成図を作成する理由としては、模写をする際に予めどのようなものを作るのか完成図があるとコーディングする時に便利だからです。

ポイントとしては下記の通りです。

以上になります。

実際にコーディングをするとわかると思いますが、「ここからここはどのくらい余白を空けるんだ？」などの悩みが出てきます。

そのときに、予め完成図を作っておくことでスムーズなコーディングができるようになります。

完成図を見ながらコーディングしていく

最後にPhotoshopなどで作成した完成図をみながらコーディングをしていましょう。

最初は答えもありませんし難しいと思われると思いますが、ググったりしながら完成させましょう。

だんだんと慣れてきたら、難易度を上げてスキルアップをしてみたり、模写ではなくオリジナルでデザインをしたサイトを作成してみるのも面白いと思います。

webデザインの独学は何からはじめるか：まとめ

今回は、webデザインを独学する際に何から始めたらいいのかということで、シリーズ形式でお送りしてきました。

ここで一度まとめておきたいと思います。

今回お伝えしたシリーズは下記の通りです。

webデザインは範囲が広くやることも多いので私みたいにwebデザインスクールに通えば学習効率も上がりますが、まずは独学で勉強してみたいと思ったら何から始めればいいのか迷ってしまうと思います。

今回は、もし私がスクールに通わず、「独学で始めるとしたらこのような学習方法にするだろうな」と思ったことを今回はお伝えしました。

何から始めたらいいのか全くわからないという方は参考にしてみてください。

それでは、ありがとうございました。