ホームページを制作するためには知識や技術の習得が欠かせません。
ここではWeb業界で働くためにどんな知識や技術の習得が必要なのか簡単にご紹介してまいります。
Koichi初心者にとってどの程度必要な勉強なのかを星4段階評価で示しておりますので参考にしてみてください。
執筆者紹介
Web／UIデザイナー歴16年目のフリーランス。これまで数々のスクール取材＆体験を行ってきた経験をもとにしたWebメディアを運営。多数の大手企業Webサイト制作経験あり。» 詳細はこちら
はじめに、必要度順に整理すると
必要度順に分けてみると下記のように学ぶ優先度が分かります。
基本的に星4つのものを習得することで一般的なホームページ制作のスキルは身につきます。
各項目の詳細はこのあとホームページの制作手順に沿ってご紹介していきます。
▼初心者の必要度：★★★★
- Webデザインの基本を学ぶ
- Adobe Photoshop（アドビ フォトショップ）を学ぶ
- Adobe Illustrator（アドビ イラストレーター）を学ぶ
- HTML（エイチティーエムエル）を学ぶ
- CSS（シーエスエス）を学ぶ
▼初心者の必要度：★★★★
▼初心者の必要度：★★★★
▼初心者の必要度：★★★★
あなたがどんな役職につきたいかによって学ぶ範囲と深さが異なりますので、まずは興味のある分野から学ばれることをオススメします。
以下よりホームページの制作手順に沿ってご紹介していきます。
プランニング技術
ホームページを制作するためには始めにどんなサイトをどう作るのかを表した設計図が必要です。
プランニング技術ではその設計図や全体の段取りについて学びます。
WebディレクターやWebプランナーを目指す方は主にこの技術が必要です。
サイト設計図の作り方を学ぶ
初心者の必要度：★★★★
お客様の要望を伺い、ホームページを作ってどんなことをしたいのか？何を達成したいか？などを具体的に落とし込んでいくためにサイト全体の設計図（ワイヤーフレームやページ、サイト構造など）が必要となります。
この設計図はのちにデザイン・構築をされて形作られていきますが、どんなに良いデザインを作っても設計図がよくないと失敗に終わり、逆に設計図が良ければある程度デザインが悪くても成功します。それくらい設計図はホームページ制作において重要な作業となります。
ポチップ
スケジュールの作り方を学ぶ
初心者の必要度：★★★★
ホームページ制作は数々の手順を踏んで作られます。たとえばデザインであれば1ページデザインするために下記の手順が必要です。
- デザイン作業
- 完成したデザインをお客様に提出して確認
- お客様から修正の要望
- 修正を反映させたデザインを提出
- デザイン確定
このような工程がワイヤーフレーム・デザイン・構築などのすべてに存在し、それぞれが綿密に関連してホームページを完成へと導きます。
スケジュールを組み立てるためにはそれぞれの作業にどの程度の時間が要するのかをすべて把握していなければいけません。そのため、サイト制作の全てにおいてある程度の知識が必要です。
ポチップ
SEOについて学ぶ
初心者の必要度：★★★★
ホームページはグーグルやヤフーで検索されて初めて表示されます。検索されても表示されなければどれだけ良いサイトであっても存在しないことと同じです。そのため、どのようなキーワードで検索されているのか、また、そのキーワードでどうすればホームページは表示されるようになるのかを知る必要があります。
SEO（Search Engine Optimization）とはそのために施す対策であり、サイトを多く露出するために行うWebマーケティング手法の一連の取り組みを指します。
SEOはお客様のホームページをいかに露出できるか直接的な技術を学ぶことですので、学んでおけばお客様にも大きく貢献できるでしょう。
ポチップ
デザイン技術
ホームページは最終的にデザインによってお客様やユーザーへ情報を伝えます。情報を正しく伝えるためにはデザインがどのように機能してどうのように見る者に伝わるのか、そのための知識と技術を学ばなければいけません。
Webデザイナーを目指す方は全般的にデザイン技術を学ぶ必要があります。
またWebコーダーはソフトの使い方、Webディレクター/プランナーを目指す方はデザインの基本を知る必要があります。
Adobe Photoshop（アドビ フォトショップ）を学ぶ
初心者の必要度：★★★★
サイト全体のレイアウトから細かい画像加工・装飾までオールラウンドに使われるAdobe社のPhotoshopは、ホームページのデザインカンプ（完成イメージ）を制作するツールとして昔から使われてきた老舗ソフトウェアです。
デザイン制作をするためのベースとなり、Web業界でも標準的に使用されているソフトですのでデザインをされる方はこのソフトの使い方は必ず学ぶ必要があります。
ポチップ
Adobe Illustrator（アドビ イラストレーター）を学ぶ
初心者の必要度：★★★★
IllustratorはPhotoshopでは苦手なイラストやロゴなどの複雑な形をデザインするためのツールとしてPhotoshop同様、Web業界で標準的に使用されているソフトです。
一般的にはPhotoshopでホームページの全体的なデザイン制作を進め、イラストや図形などをこのIllustratorで制作し、それをPhotoshopのデザインへ入れ込むという形で使われています。こちらもPhotoshopと合わせて学ぶ必要があります。
ポチップ
デザインソフトについてはこちらの記事でも詳しくご紹介しています
Webデザインの基本を学ぶ
初心者の必要度：★★★★
ホームページはいざデザインしてみようとすると何をどう作ればよいのか分からないと思います。
Webページは様々なパーツから構成されていますが、それぞれの役割や細かいデザインの仕方、またタブレットやスマートフォンでのレイアウトがどのようにデザインされているのかなど、Webデザインの基本を学ぶ必要があります。
ポチップ
デザイン・配色の基本を学ぶ
初心者の必要度：★★★★
ホームページでの表現の仕方に加え、Webに関わらず誌面デザインの基本や配色などを学ぶことでよりデザインする力が身につきます。
たとえば赤色を用いる場合、なぜそこで赤を用いる必要があるのか？その色を使うことでどんな効果を狙うのか？など、デザインを理論的に考えられるようになり、デザインの説得力をより増すことができます。
Webサイトのトレンドを知る
初心者の必要度：★★★★
ITは年々進化し続けるように、Webデザインのトレンドも日々変化し続けています。あなたが今から作ろうとしているデザインは今の時代にマッチしたものでしょうか？
スクールや書籍で学んだデザインが必ずしも今の時代にマッチしているは限りません。
最近のデザインの傾向は数多くのサイトを見ることで方向性が見えてきます。
サイトデザインを行う前にまずは最近のデザイントレンドを知るようにしましょう。
ポチップ
構築技術
ホームページはデザインされたものをIEなどのブラウザで表示させるために構築作業を行う必要があります。構築されないとサイトは表示できないため、ホームページを作る上でこの技術は必須の作業となります。
コーダーはもちろん、Webデザイナーもこの理解があることで構築を考慮したサイトデザインができるようになります。
HTML（エイチティーエムエル）を学ぶ
初心者の必要度：★★★★
HTMLはタイトルや本文、画像、リンクなど、内容の骨格となる情報を作る役割があります。
HTMLではデザインの装飾などは行いません。ワードの資料のようにただ情報を羅列する作業です。ソースとよばれる文字列が初心者には苦手に映るかもしれませんが基本を知ればそれほど難しい作業ではないことに気づくでしょう。
ポチップ
CSS（シーエスエス）を学ぶ
初心者の必要度：★★★★
CSSはHTMLで作った骨格をデザイン・装飾する役割があります。
こちらもHTML同様、初心者には苦手に映るかもしれませんが基本を知ればそれほど難しい作業ではありません。
簡易的なホームページであればHTMLとCSSだけで完成します。
ポチップ
JavaScript（ジャバスクリプト）の基本とjQuery（ジェイクエリー）を学ぶ
初心者の必要度：★★★★
HTMLとCSSだけで作ったホームページでは、例えば「今は12時50分です」と書いた場合は、何時にホームページを開いても12時50分と表示されたままですが、JavaScriptを使うことでページを開いたタイミングの時間をリアルタイムに表示することができます。
JavaScriptを学ぶと、このように状況に応じたページを作れるようになります。
しかし初心者は必ずしも全て学ぶ必要はありません。JavaScriptを簡易的に利用できるようにしたjQueryという仕組み（ライブラリ）を利用することで動きのあるサイトは簡単に作れます。
要はjQueryの使い方をマスターすることが初心者に必要ということです。
ポチップ
WordPress（ワードプレス）を学ぶ
初心者の必要度：★★★★
ホームページは、完成した後も記事を追加したりページを増やしたりと色々と更新することが一般的です。
更新の度にHTMLとCSSを修正することもできますが、現在ではWordPressという無料のブログソフトウェアを利用して、更新を想定したサイトづくりを行うことも一般的になってきました。
WordPressで構築を行うためには、上記HTML・CSSの他、PHPというプログラム言語を追加で学ぶ必要がありますが、お客さまのホームページを個人で請け負う場合はこの技術は重宝されること間違いなしです。
ポチップ
Adobe Dreamweaver（アドビ ドリームウィーバー）他 を学ぶ
初心者の必要度：★★★★
HTML/CSSの構築はあなたのパソコンに入っている「メモ帳」などで制作は可能ですが、Dreamweaverなどの構築専用のソフトウェアを使うことでよりスピーディーに効率的な構築を行うことができるようになります。
なお、最近ではより安価（または無料）な構築ソフトも出ていますのでそちらを利用しても構いません。
ポチップ
構築ソフトについてはこちらの記事でも詳しくご紹介しています。
まとめ
学ぶ内容の多さに目がくらんでしまった方もいらっしゃるかもしれませんが、ここでご紹介した内容はすべて学ぼうと思う必要はありません。
基本的には星が4つ表示されている項目の中で、特にご自分の興味のあるものから始められるのが良いのではないでしょうか。
1つのものを学び始めると思った以上に難しくないことにも気づくかもしれません。
まずは小さいことから初めてみることが大切です。
