こんにちは！
「Webデザインの工程」についてわかりやすく解説します。

皆さんが日頃から見ている、Webサイトはどのようにして作られているのかを今回は解説していきます。

Webデザインとは何か？

「Webデザイン」とは、Webサイトのデザインと機能の提案、コーディングをする作業のことを言います。

Webデザインをするには、Webサイトのデザイン力やHTML・CSSのコーディング、WordPress、写真の加工、素材の作成、サーバー導入などが、最低限必要な技術です。
フリーランスなどで活躍していく場合は、PHPやJavaScriptなどのプログラミングやSEO対策、UI／UXデザイン、アナリティクス管理、動画編集、Webリサーチ、プレゼンなどの技術が必要になってきます。

Webサイトは規模にもよりますが、企業紹介のような７〜８ページのもので、およそ三ヶ月かかり、大規模なサービスを提供するようなもので1年以上の期間がかかります。

Webデザインの工程

Webサイトはどのような流れで出来あがるのかを、解説していきます。

企画　ラフデザイン　デザイン　コーディング　プログラミング　実装　運用

このような流れでWebサイトは出来上がっていきます。
次にそれぞれの工程を少し詳しく解説していきます。

企画

まずは企画です。
目的や用途などを決定して、規模や予算を決めていきます。
ここで、クライアントにプレゼンを行い、モデルサイトなどを参考にデザイン性や機能を細かく決めていきます。

ラフデザイン

ラフデザインは、ワイヤーフレームを元にデザインのすり合わせや資料や素材の必要数を明確にしていきます。
必要な資料や取材もクライアントにお願いしておく必要があります。

ワイヤーフレーム：簡単な図形やダミーテキストなど、コンテンツや画像、テキストの配置を決めただけのデザイン。後のデザインの段階で非常に役立つもの。

デザイン

ワイヤーフレームを元にWebサイトをデザインカンプをデザインしていきます。
実際に仕様する、コンテンツを1ピクセル単位で配置して完成品と同様の見た目のものを作ります。
ここで、実際に使う、ロゴや素材、テキストを配置しておきます。
UI/UXデザインやレスポンシブウェブデザインも考えてデザインしてきます。

デザインカンプ：モックアップともいい、完成イメージです。
UIデザイン：利用者の目的を、直感で解決できるようなデザインなど。
UXデザイン：実際の利用者などのデータをもとに、使いやすく満足度の高いデザインなど。
レスポンシブウェブデザイン：PCとスマホでの表示をそれぞれに合わせたデザインのこと。最近はスマホ利用者が多いこともあり、モバイルファーストでデザインする人も増えている。

コーディング・プログラミング

デザインカンプを元にコーディングとプログラミングをしていきます。
まずはHTMLとCSSでコーディングをしていきます。この段階で、デザインカンプとほぼ同じ見た目になります。
次にPHPとJavaScriptをプログラミングしていきます。これで、機能や動きをWebサイトに加えることができます。
ここで、SEO対策を考えながらコーディングしていきます。

WordPressでもWebサイトを作ることは可能ですが、既存のサイト（テーマ）を改造するようにして作るので、似たようなサイトが出来あがる場合があるので、デザインの段階で注意が必要です。
また、一部コーディングやプログラミングもできるので、必要に応じて機能を追加することも可能です。
無料で使えるテーマもありますが、有料のテーマの方が、SEO対策もされており、UI/UXデザインも優れています。

実装

サーバーに上げて、使えるようにします。
ドメインを取得して、WebページのURLを設定します。（実際はかなり序盤の方で取得しています。）
サーバーを準備して、そこにWebサイトで使うファイルやデータをアップロードしていきます。
サーバーは同時に多数の人がアクセスできる構造になっているので、通常のパソコンはおすすめできません。

運用

Webサイトを運用していきます。
アップグレードをしたり、記事の更新、新機能の実装、イベントの開催告知など必要に応じて行なっていきます。

実際は修正や仕様変更、方針変更など色々な要因で作業が長引く場合があります。

Webサイトを作る方法

Webサイトを作る方法を二つ解説していきます。

HTML・CSS・JavaScript・PHP

コーディングとプログラミングでWebサイトを作っていく方法です。

HTMLでテキストや画像などのコンテンツを縦に並べていきます。
CSSでコンテンツの位置や色を設定して全体を整えます。
JavaScriptでコンテンツに動きを加えたり、機能を加えます。他にもWeb上で動くアプリやゲームも作ることが可能です。
PHPはユーザーの入力に対して、情報を表示したり、ユーザー同士で共有したり、お問い合わせを送信したりできます。サーバー側で管理しているので、ユーザーの入力に対してサービスを提供することができます。

このように、4つの言語を使い分ける必要があるが、HTMLとCSSだけで簡単なWebサイトは作れます。
使いやすい機能を付けたい場合はJavaScriptを、コメント機能やお問い合わせ機能を付けたい場合はPHPが必要です。

WordPress

WordPressでWebサイトを作っていく方法です。

WordPressはすでに出来上がっている、Webサイトに手を加えて作っていくサービスです。
比較的初心者などにも扱いやすく、ブログ運用で使っている人から、大手メーカーのランディングページなど幅広く利用されています。

無料で使えるテーマ（WordPressで編集できるテンプレート）や有料のテーマがあります。
無料のテーマは、比較的シンプルで一般利用では必要十分な機能が備わっています。

有料のテーマは、WordPressのバージョンアップに合わせて更新データが配布され、複数の実用性のあるテーマを使うことができます。価格が高いものはUI/UXデザインやSEO対策も施されています。

必要に応じて、HTML・CSS・JavaScript・PHPの編集や追加することが可能です。

ホームページ作成ツール

Webサイトを簡単につくれる、アプリまたはWebサービスを利用する方法です。
この方法では、簡単にWebサイトを作ることができます。
豊富なテンプレートがあり、多様な機能をつかうことができます。
ネットショップなど、クレジットなどの電子決済にも対応することも可能です。

しかし、あまり大規模なサイトには向いておらず、有料のプランでも制限があったりします。
近年ではホームページ作成ツールも増えており、それぞれに特色があります。

無料のプランもあり、手軽に使えるので数百万サイト作られています。

Webデザイナーに求められるスキル

Webデザイナーはいろいろなスキルを身に着けていることが多いです。
次の項目を確認していきましょう。

・コミュニケーション能力
クライアントの欲しいものを十分に理解して、提案する必要があります。

・HTML、CSSのコーディング技術
Webサイトを作る際に絶対に必要な技術。

・Webサイトのデザイン技術
主にAdobe XDでデザインする人が多くなってきています。以前はPhotoshopが多かった。

・レスポンシブ対応技術
近年ではパソコンよりスマホのほうが需要が高まっています。

・ドメイン取得などの知識
WebサイトのURLの設定は絶対に必要な技術です。

・サーバー導入やアップロードの知識
Webサイトを実際に使えるようにするのに絶対に必要な技術です。

・WordPressなどのホームページ作成ツールの技術
作業の効率化ができる場合あります。更新方法がわかりやすいので好まれる傾向があります。

・JavaScriptのプログラミング技術（jQuery（簡単に使えるJavaScript）の使用技術）
Webサイトに機能を持たせたり、動きを持たせたりできる。

・PHPのプログラミング技術
企業サイトには必要な通販やお問い合わせが追加できる。

・SEO対策の技術や知識
Webサイトだけでなく動画サイトやSNSでも使える技術です。

・UI/UXデザインの技術や知識
ユーザーの使いやすさや分かりやすさでWebサイトは生きてきます。

・イラストやロゴ、表などの素材制作技術
Webサイトに必要な素材を制作する必要があります。illustratorなどのデザインソフトの技術は必須です。

・写真やバナーなどの加工編集技術
会社紹介や製品紹介で必要になってきます。Photoshopなどの写真編集ソフトの技術も必須です。

・ライティング技術
社名やキャッチコピー、文章を作る必要が出てきます。

・動画編集技術
今日ではSNSなどに気軽に動画を投稿できるので、需要が高いです。できると新たな仕事につながります。

・チラシやリーフレット、ポスター、名刺などのデザイン技術
技術の応用で出来るようになりましょう。新たな仕事につながります。

・SNS運用技術
TwitterやFacebook、Instagram、YouTube、TikTokなどの使い方を最低限把握しておきましょう。仕事につながります。

・写真や動画撮影技術（ドローン操縦もできればなおよし。）
写真などの素材を準備する必要が出てきます。最近ではスマホカメラでも高画質な写真がとれます。

他にもWebデザイナーに必須な技術や欲しい技術はたくさんあります。Webデザインはできることが多いほどより良いWebサイトが作ることができます。

まとめ

いかがだったでしょうか。
Webサイトについて知識を深められたでしょうか。
みなさんもWebの仕事がしたい場合や自身のサイトを持ちたい場合は参考にしてくだい。

文：畦地

この記事が気に入ったら
いいね！しよう