2018.10.31

制作ブログ

Webデザインを独学で学ぶ人の為の5つのステップ

3,831 view

近年、あらゆる会社や事業所が自社のホームページを持つことが当たり前の時代となってきており、ホームページ制作の為のWEBデザインの需要は年々増加しています。WEBデザインを学ぶ為には専門学校や企業での研修などを通じて学ぶことが一般的かもしれませんが、独学であっても十分に多くのことを学ぶことができます。

こちらの記事では、そんな独学でWEBデザインを学ぶ人がどのようなステップで学ぶことができるのかを解説します。

ステップ1. WEBサイトの仕組みを知る

WEBデザインを独学で勉強をするには、まずはWEBサイトの仕組みを知る必要があります。難しくは考える必要はありませんが、最初に基礎となる部分を学ぶことは、その後の理解や習熟にも大きな影響があるのでまずはきっちりと押さえておきましょう。

HTML

現在インターネットを検索していて見ることができるWEBサイトの多くは、HTMLと呼ばれるプログラミング言語で作られています。HTMLとはWEBサイトを構成するための言語であり、タイトル、見出し、段落などを設定することができるのです。いわばWEBサイトの骨組みであるといえるでしょう。

現在はHTML5という最新規格が実装されており、今までのHTMLと比べて宣言が短くなっている分、よりシンプルになっています。その為、コーディングの画面が従来のものよりも見やすくなり、高度な機能の実装も以前よりもしやすくなりました。

CSS

CSSとはHTMLでつくった骨組みを文字の大きさや色、他にもデザインをつけることにより、より見やすくするための言語です。HTMLでWEBサイトの骨組みを作って、CSSで見やすくデザインをすると考えればよいでしょう。

また、最新規格であるCSS3は従来のCSSと互換性があります。全く新しい言語というわけではなく、アニメーションを動かすことができるといった便利な仕様が増えたものと言えるでしょう。

ステップ2. 柔軟に複数の言語を扱えるようになる

Java ScriptとjQuery

ある程度の構成、レイアウトなどができるようになってきたら今度はWEBサイトに動きをつけていきましょう。そのための言語がJava Scriptというものであり、そのJava Scriptをさらに使いやすくするためのものがjQueryとなるのです。

jQueryとはJavaScriptを扱いやすくしたファイルのことであり、これを使用することで煩雑なJavaScriptの記述も少ない記述で実現できるようになります。他にも色々なプログラミング言語があるのですが、まずはこの二つを覚えておけば動きのあるWEBサイトを作ることができます。

オンラインでの勉強の仕方

プログラミング言語等のWEBデザインを勉強するのにおすすめなのが、オンラインでの勉強方法です。昨今はオンラインでの学習プログラムサイトが充実しているため、自分にあったものを選ぶとよいでしょう。

教科書を利用する

WEBデザインを勉強するためには、色々自分で試してみることも大切ですが、並行してデザインについての基礎知識や、考え方などデザインに関する基本的なことを学ぶために教科書で勉強をすることも大切です。デザイン全般に関する書籍は色々とでているので、自分にあった教科書を選ぶことが大切です。

ある程度知識を得たら、オンラインなどで色々試してみるということが大切になります。ただやみくもに試してみても、なかなかよいWEBデザインはできませんが、知識と実践によってより深い理解を得ることが出来るでしょう。

ステップ3. デザインツールの使い方を学ぶ

WEBデザインを仕事とするのであればテンプレートなどを使うのではなく、ツールを使って自分でデザインをする必要があります。

ツールには色々な種類があるのですが、主なものをご紹介いたします。

Illustrator

デザインの初心者からプロレベルの方まで使うソフトです。色々なことができる有料版もありますが、まずは無料体験版で色々試してみるとよいでしょう。またIllustratorはレイアウトの決め方や文字組み、イラストの扱いなどが簡単なため比較的初心者の方でも覚えるのに時間はかからないでしょう。

Photoshop

Photoshopはもともと画像を加工するためのソフトであり、画像を加工するときには使いたいソフトです。WEBデザインを考える上でも画像の使い方によって、WEBページの見やすさが大きく異なってくるのです。

しかしIllustratorと比べて、レイアウトの決め方などが難しく、修正をするのも初心者には難関となっています。まずはIllustratorをある程度使うことができるようになってから、Photoshopを使うようにするとよいでしょう。

Adobe XD

WindowsやMacはもちろんのこと、iOSやAndroidにも対応しており、デザインから共有など全てを行ってくれる優れものです。Photoshopとも連携していています。

ステップ4. WEB制作の原則を学ぶ

制作ルール

WEB制作をする時に、ある程度ルールを作っておくことが大切です。まず見やすいページにするために１ページに１つの目的を明確に設定するのです。見る人にとって、そのWEBサイトが何を伝えようとしているのかわからないということが無いようにしましょう。

また書体は２つまでにするのが良いでしょう。強調するために違う書体を使うのは良いのですが、あまりに色々使ってしまうと、かえって読みにくくなってしまいます。その他、読みやすいという点では整列に気を使うことも大切となります。

本で勉強する方法

WEB制作関連の本は色々でています。実際どんなサイトが見やすいのか、色々な本を読んで研究をするとよいでしょう。また「ここだけは気を付けたい」といった入門書から、配色や配置などのことに書かれた本など色々とでています。

ステップ5. 検索ネットワークの仕組みを知る

WEBデザインのスキルをある程度習得して、自分でWEBサイトを作ることができるようになると、今度はできるだけ多くの人にみてもらいたいと思うのではないでしょうか。

そこで必要なのがSEO、そしてアクセス解析です。

SEOとは

SEOとは検索エンジンの最適化であり、GoogleやYahoo!などの検索エンジンで少しでも上位に表示されるようにする施策のことです。

SEOの必要性

またSEOの大きな役割として、GoogleやYahoo!で検索をした時にあなたが作ったWEBページの内容をわかりやすいようにする働きがあります。この働きこそが検索エンジンの最適化なのです。

アクセス解析

より多くの人にWEBサイトを見てもらうためには、どのようなユーザーが、どこから訪問したか、よく見られているページはどこかなどのデータを分析する必要があります。それがアクセス解析です。

自分のページが見る人にとってどう見えているかを把握することにより、よりよいWEBページを作ることができるのです。

まとめ

WEBデザインは簡単ではありませんが、基礎をしっかりと勉強することで独学でも多くのスキルを身に着けることが出来ます。

今はオンラインや本など色々なものがでているので、是非それらを活用しつつ勉強してみてください。