ホームページのデザインを独学するには?私の勉強法を紹介【模写から始めよう】

 

こんにちは!ちづみ(@098ra0209)です!( ´ ▽ ` )

今はカンボジアに住んでまして、パソコン一つでお仕事をしています。その仕事の一つにウェブデザインがありまして、今回は私のおすすめする勉強法参考の本を紹介したいと思います。

ねこ
独学でウェブデザインを勉強したいけど、どうすればいいのかにゃ〜?

という疑問にそって書いていきます。

この記事をざっくりいうと
  1. 既存のサイトから模写する
  2. ツールを使って実際に作成する
  3. デザイン4大原則に当てはまる部分を考える
  4. デザイン4大原則を意識しながら自分なりに作ってみる

 

 

簡単にウェブデザインを仕事にするまでの私の説明を。。m(_ _)m

筆者の場合
  1. もともとはコーディング(html、css、phpとか)の勉強から入った。
  2. サイト制作を受注する中でデザインが必要になったので、そこから勉強した。
  3. はじめはhtml、cssファイルのテンプレートを使ってなんとかデザインを作って、徐々にAdobeのツールもいじってデザインを作るようになった。
  4. 今は主にXDやfigmaを使ってデザインをしている。

という感じです!ホームページを作る時の

デザイン→コーディング→wordpressとかで構築

サイト制作の全体の流れをそれとなくですが自分でできるようになったので、サイト制作を仕事にしたい方はウェブデザインの勉強をして損はないと思います。

 

 

 

まねっこ最強説です(自己流は出さない)

 

Webデザインの入り口はとにかくまねして作るに限ると思います。例えば、参考本の通りに作る。好きなサイトを模写して作ってみる。とか。

「尖ったデザインをしたいぜ!」「私なりの個性あふれるデザインを作るぜ!」というのももちろん大事ですが、

その前に、まずはとことんマネから入って、同じようなデザインを再現することが一番勉強になると思います。

 

模写してみる

まずは簡単で好きなデザインのサイトをそっくりそのままツールで模写してみましょう。みるだけでなく、実際に作ってみること、作りきることが大事です。

参考サイトから画像をダウンロードして、figmaXDで同じように作る練習をしていました。

figmaは無料ツールで割とやりやすいし、XDも無料版が出ているので、有料ソフト買うのに抵抗ある方はまずは無料ツールでやってみることをおすすめします!

模写するサイトの探し方は

ピンタレストはこんな感じ

や、好きなサイトをクロームの拡張機能

Full Page Screen Capture

でフルスクリーンでスクリーンショットをとって、実際に作ってみます。

まずはシンプルで簡単なデザインを選ぶことをおすすめします。具体的な基準としては↓

選ぶ基準
  • 長すぎないもの
  • セクションが平行になっているもの
  • 色が少ないもの

から始めるといいと思います。

今回はsnowpeakさんのサイトを参考に、こんなデザインを選んでみました。

 

 

これをフルスクリーンでスクリーンショットして、XDなどのツールを開いて横に起き、そっくりそのまま模写してみましょう!

 

 

デザイン4大原則に当てはまっているところを考える

 

デザイン4大原則とは
  1. 近接 Proximity
  2. 整列 Alignment
  3. 強弱 Contrast
  4. 反復 Repetition

やっぱりデザイン4大原則てすごくて、この要素が組み込まれているとみんなが「いいな」と感じるデザインになるんですよね。なので沿って作るのは大前提だと思います。

すでにあるサイトはこの4大原則をしっかり組み込んであるものが多いので、真似して作った参考サイトがどこがどう当てはまっているのか考えてみましょう。

 

近接 Proximity

 

例えばこの部分

 

写真とそれに関係する文字が近くに来ています。

テントの写真テントという文字が近く、一つのまとまりになっていますね。

近接は簡単にいうと「関係性のある内容でかたまりを作りましょう」ということです。距離的に近くすることで見やすく、内容もわかりやすくなります。

 

整列 Alignment

 

次はこの部分

とかこの部分

 

 

縦一列にラインに沿って綺麗に並んでいます。これが整列です。

 

私が意識していることは、「四角が見えてくるように作る」でして、線はないけど、四角が浮かんで来るように縦横の整列を意識しています。これは名刺やチラシ作りでも大いに意識しています!

ちづみ
これは特に意識しているよ!「四角が見えてくるように」はどういうことかというと、

例えばこの部分ですが、

 

見方によっては

 

こういう四角が見えて来るし、あるいは

 

こう見えるかなと。

整列を意識すると浮かび上がってくるはずで、整った印象になりますね。

ウェブデザインの勉強の入り口としても、まずは四角が見えてくるような整ったデザインから作るように心がけるといいですね。

 

強弱 Contrast

特に強調したい部分などの文字を大きくしたり、目立つ色に変えたりします。同時に、そんなに強調しなくてもいい部分はより小さく、おとなしい色にしたりします。

 

重要な部分は声を大きくしてはっきり言う感覚と同じですね、これを意識してデザインすると、テキストの内容は変わらずとも、テキストのわかりやすさ、伝わりやすさを増し増しにしてくれます。

反復 Repetition

タイトル部分など、同じようなデザインで繰り返されています。繰り返しの要素を作ると全体のまとまりが生まれます。

 

ここまで説明すると、「当たり前じゃね?」という感覚のものが多いかもですが、私の感覚からも、実際に手を動かしながら作るとなかなか意識できないことがあるので、実際に作ることは前提に、ぜひ意識して見てください!

 

ちづみ
他のサイトもたくさん見て、4大原則に当てはまる部分探しをしてみよう!

 

実際に自分で一から作ってみる

 

上記のサイトの模写を2〜3回行えなんとなくWebデザインとWebデザインに置けるデザイン4大原則のことは身について来ると思います。

次は実際に自分でサイトを作ってみましょう!

 

私はヘッダーなどの画像はここから選んでいます。

 

画像素材の参考サイト

O-dan

Unsplash

で、実際に取りかかると疑問になってくるのが、

ねこ
文字のサイズとかコンテンツ幅とかはどうしたらいいのかにゃ?

だと思いますので、その時はこの記事を参考にしてみてください〜m(_ _)m

Webデザインをする時のおさえたいポイントと注意点をまとめてみた

2018.09.04

 

デザイン独学におすすめの書籍

 

デザインを学ぶ上で参考になった本たちを紹介します。

 

何がダメか!について主に触れている本です。良いデザインについて書かれてる本が多い中、とても興味深く読める上に「なぜダメなのか」を考えるのはめちゃ大事です。

 

 

このデザインはどんな背景でどんな意図で作られているのかがわかります。上の本もですが、UI設計について学べる本です。UIUXはこれから重要視されてくので、学習’してほんと損はないかと!

コーディングの知識が入って来ますが、ウェブデザインをするなら、コーディングについても触れた方がいいですし、コーダーがウェブデザインをするなら大いに役立つ本だと思います!
他にもおすすめする本がありましたらぜひ教えてください!(`・∀・´)@098ra0209

 

では!!!