これからWebデザイナーを目指すなら、何よりもはじめにWebサイト制作の全工程を知っておく必要があります。

全工程を把握する事でどの工程でどのようなスキルが必要なのかわかりますし、いろいろな情報に振り回される事も無くなり、スムーズに勉強を進める事が出来るからです。

私のWeb制作会社での実務経験を元に、どのようにWebサイトが生まれているのか全工程をわかりやすくお伝えしていきたいと思いますので是非参考にして下さい。

1.サイト名を決める

まずはじめに、これから作成するサイト名を決める必要があります。サイト名は、出来るだけユーザーに覚えてもらいやすいものが良いでしょう。

サイト名が決まった時点でドメインを取得しましょう。ドメインの世界は早い物勝ちなので気になっているドメインがあればすぐに取得する事をおすすめします。

2.コンセプト・目的・ゴールを決める

Webサイトのコンセプトを一文で言い表せるように考えてみましょう。STACKのサイトは「これからWebデザイナーを目指す人の為のお役立ち情報サイト」がコンセプトです。

Webサイトはユーザーにとって「問題が解決出来るツール」になるべきです。検索窓に打ち込むキーワードは、ユーザーの悩みそのものです。ユーザーのどのような問題を解決出来るのかじっくりと考えてシュミレーションして文章に書き起こしてみましょう。

2.illustratorまたはPhotoshopでロゴをデザインする

サイト名が決まれば、次にロゴをデザインします。Webサイトにおいてロゴは、全ページのヘッダーに常に表示される為、訪れたユーザーの目に必ず入ります。Webサイトのシンボルとなる重要な要素ですので時間をかけて丁寧にデザインしてみましょう。

POINT:必要なスキル Photoshop・illustrator

3.サイトに必要なページをすべてリストアップする

Xmindなどのマインドマップツールなどを使って、必要なページをすべてリストアップしてみましょう。ユーザーの為になる事ならどんな事でも良いので、何かアイデアが出た時点でこんなページがあればいいなと思うものをすべて洗い出してみて下さい。

4.サイトマップを作成する

必要なページをリストアップしたものを参考に、サイト全体のページと階層が把握出来るサイトマップを作成します。サイトマップとは名前の通り、サイトの全体像がわかる地図のようなものです。

5.ワイヤーフレームを作成する

サイトマップ完成後、すべてのページのワイヤーフレームを作成します。ワイヤーフレームとはWebページの構成を表した設計図のようなものです。

ワイヤーフレームは、何もPhotoshopなどで時間をかけて細かく作る必要は全くありません。手書きのものでも、構成がわかればそれで良いと私は思います。ここに長い時間をかけていては次に進めないからです。Webデザイナーはスピードが求められます。

6.Photoshopなどのデザインソフトでページデザインを行う

ワイヤーフレームを元にPhotoshopで全ページをデザインしていきましょう。Web業界ではデザインカンプを作成するとも言います。

POINT:必要なスキル Photoshopを使ったデザイン力

7.HTML+CSSでコーディングを行う

作成したページデザイン(主にPhotoshopで作成したpsdファイル)を元に、HTML+CSSでコーディングを行っていきます。

Web制作業界では、Adobe社のDreamweaverを使ってコーディングする事が多いです。

POINT:必要なスキル Adobe Dreamweaver・HTML+CSS

8.jQueryでサイトに動きをつける

HTML+CSSコーディング終了後に、jQueryと呼ばれるJavaScriptライブラリを使いサイトに動きをつけるカスタマイズを行います。

例えば、メインビジュアルに表示される画像の切り替わるスライダーや、タップで表示されるメニュー、スムーススクロールでページのトップに戻るものなどすべてjQueryで簡単に実装する事が出来ます。

POINT:必要なスキル jQuery・CSSカスタマイズ

8.Wordpress化を行い、サイトを公開する

世界のウェブサイトの約27%がWordPressを採用しています(2016年11月の時点)。WordPressを使う人が日本でもどんどん増えていて、最近ではWebサイトのCMS(更新しやすくする為のシステム)の主流となっています。

実際の所、大手企業のサイトがWordPressを採用する事はあまりないと思います。SEOにも強く、習得するとずっと使えるスキルです。これからWebデザイナーを目指すなら必ず覚えておく事をおすすめします。

POINT:必要なスキル WordPress・FTPソフト

9.コンテンツをアップして更新を行いSEO対策を施す

Googleの検索エンジンは年々アップデートを重ねており、昔のようにキーワードだけをサイト内に意図的に組み込んでも検索上位に表示される事はほぼなくなりました。現在は、サイトにアップされているコンテンツの中身を評価して検索順位が決定されているからです。

これからはユーザーの抱えている問題を解決する事が出来るサイトのみがアクセスを勝ち取る事が出来るようになります。現在はコンテンツファーストの時代となっていてWebデザイナーにも必ずSEOの知識が求められます。

SEOの事については「Webデザイナーにも必ず求められるSEO対策の知識」で詳しく解説していますので参考にして下さい。

POINT:必要なスキル SEO対策の知識・コンテンツ作成力

まとめ

いかがでしたでしょうか?

Webサイト制作の全工程がおわかりいただけたと思います。

これからWebデザイナーを目指す方は、デザイン力を身につける事はもちろんですが、コーディング力・WordPress力・SEO対策の知識が求められますので必ず習得しましょう。

どのWeb制作現場でもこの工程は大きく変わる事はありません。この工程表を参考に必要なスキルを一つ一つ確実に身につけていきましょう。

STACKでは現在「Photoshop セミナー 2021」を開催しております。これからPhotoshopを使ってデザイン力を身につけたい方はぜひご参加下さいませ。