【Webデザイン】Webデザイナーについて紹介！！！【鹿児島市のB型事業所】

2023年1月21日

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

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

Webデザインとは何か？

「Webデザイン」とは、Webサイトの設計やデザイン、コーディング、プログラミングをする作業のことを言います。

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

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

Webデザインの工程

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

企画

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

デザインの決定

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

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

制作

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

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

HTML：テキストや画像などのコンテンツを表示するマークアップ言語
CSS：コンテンツを配置・装飾するスタイルシート言語
JavaScript：Webサイトに動きや機能を付けるためのプログラミング言語
jQuery：JavaScriptの完成済みのプログラムをまとめたライブラリ。
PHP：サーバー側で動きや機能を付けるためのプログラミング言語

実装

サーバーに上げて、使えるようにします。
ドメインを取得して、WebページのURLを設定します。（実際はかなり序盤の方で取得しています。）
サーバーを準備して、そこにWebサイトで使うファイルやデータをアップロードしていきます。

サーバー：情報やデータを提供するためのコンピュータのこと。
ドメイン：Webサイトの住所のこと。「google.com」や「yahoo.co.jp」のこと

運用

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デザイナーになるのには、資格は必要ありません。
WordPressやホームページ制作ツールを使えば初めての方でも、簡単にWebデザインがおこなえます。

ですが、Webデザインの能力を保証する検定があります。
・ウェブデザイン技能検定（国家資格）
・Webデザイナー検定
・Webクリエイター能力認定試験
・ITパスポート
・SEO検定
・認定SEOコンサルタント
・情報処理技術者試験
他にも様々なIT関連の検定があります。
検定を持っておくと、就職や案件獲得に強く結び付きやすくなります。