Web制作フローを理解して、Webデザイン資格を取得しよう

こんにちは、28歳の時に未経験からITエンジニアを目指したniyuta（@niyuta）です。

niyuta

これからWeb制作の仕事を目指す人に聞きたいです

Web制作ってプログラミング以外に何を勉強したらいいの？　って思いませんか？

私は最初、(大規模の)クライアントがサイトを作りたい！　と言ってもそれをWeb会社が受注して、どういった流れでサイトが出来上がるのかイメージが湧きませんでした。

という訳で、今回は未経験の方向けにWeb制作の流れを追いながら、どういった資格が役に立つのかまとめました。

全体の流れを知ってWeb制作の幅を広げよう

「Webエンジニア向けのプログラミング資格の種類」の記事で書いたように、Web系エンジニアにとって資格取得は必須ではありません。

Webエンジニア向けのプログラミング資格の種類

いざ、Webエンジニアを目指すといっても何からすれば良いのか？もちろん、未経験からWebエンジニアを目指そうと思うならプログラムを覚えるわけですが、ただ覚えるよりも資格取得を目指した方が良いです。その方が、フリーランスになったとしても自分のスキルを証明しやすいです。という訳で、今回はWebエンジニアを目指す初心者向けのプログラミング言語とその資格についてまとめました。

niyuta.biz

2021.03.19

　
しかし、資格取得の過程での勉強は手早く必要なことを把握するのに有益です。

niyuta

私は全体を把握する目的で資格を取ったりします

Web制作に必要なスキルはプログラミング以外にも、デザイン、ライティング、マーケティングなど多々あります。

スタートとしては、Webデザイナーから渡されるデザイン・カンプがなければ、コーディングは始まりません。

WebデザイナーやWebディレクターの業務を知ることでWebデザインやWeb制作全体の流れが分かれば、ポートフォリオや自分のWebサイトのデザインを考える手順もわかるようになります。

フリーランスや副業であれば、受注範囲をコーディングからウェブ制作に広げていくこともできます。

niyuta

というか、全体が分からなければ、自分の守備範囲も分からないし、守備範囲を広げていくことも出来ませんよね

Web制作の流れとWebディレクター・Webデザイナーの仕事

　
Web制作フローや役割分担は会社や現場ごとに異なりますが、まず簡単な流れを紹介しましょう。

Webディレクターがクライアントへのヒアリングをもとに、サイト制作の目的、ターゲット層、サイトの方向性を決め、Webサイトの下書き図（ワイヤー）を作ります。
　

Web制作の総責任者！Webディレクターってどんな仕事なの？

Web制作の総責任者であるWebディレクターに華やかなイメージを持つ人も多いと思います。制作チームと共に作ったWebサイトが公開された時の達成感、本当にやりがいのある仕事でしょう。でも、未経験の方にはWebディレクターの仕事ってイメージしにくく無いですか？この記事では、Webディレクターの業務内容について説明致します。

niyuta.biz

2021.01.01

Webデザイナーは、Webディレクターの指示とワイヤーをもとにWebデザインを制作します。

サイトカラー・フォント・イラスト・画像・文章などの要素を用いてWebサイト全体のイメージ（デザイン・カンプ）を作ります。

フロントエンド・エンジニアはデザインカンプをもとに、実装方法をサーバーサイド・エンジニアとも連携を取りながら決めます。

実装が難しい部分は、Webデザイナーと打ち合わせが必要になる場合もあります。

CSSの命名規則や、ボタン・見出しなどのテンプレート、ファイルの階層構造など全体をまとめるルールを事前に作成してから、コーディングに取り掛かかります。

niyuta

以上が、フロントエンド・エンジニアの手元にデザイン・カンプが届きコーディングを開始するまでのざっくりとしたWeb制作の流れです

Web制作の検定試験と国家資格

独学でコーディング練習していると、Webデザインに関する部分のWeb制作フローや役割分担は分かりにくいところです。

WebデザイナーやWebディレクター向けのWeb制作の資格学習を通してWeb制作フローを知ることで、なんとなく……ではなくクライアントへきちんと提案理由を説明できるようになるでしょう。

Webデザイナー検定

Webデザイナー検定は画像情報教育振興協会が主催する画像処理エンジニア検定・マルチメディア検定などのCG-ARTS検定の一つです。

Webデザインを決めるためのコンセプトメイキングや運用についても学習できるので、Web制作全体の流れを知るのによいでしょう。

将来Web関連の仕事につきたいと考えている学生の方には入試優遇措置があります。

入試優遇　https://www.cgarts.or.jp/kentei/result/passing2.html

参考：コンセプトから運用まで『Web制作』の知識の習得を評価する検定 | Webデザイナー検定
参考：Webデザイナー検定 ベーシック 出題範囲
参考：Webデザイナー検定 エキスパート 出題範囲
参考：Webデザイナー検定 ベーシック サンプル問題
参考：Webデザイナー検定 エキスパート サンプル問題

ウェブデザイン技能検定【国家資格】

国家試験の技能士認定制度の一つです。

1級、2級はウェブ制作・運営に関する科目のある学校を卒業、または実務経験が受験資格になっているため、未経験者は3級からの受験になります。

3級の試験内容はWebデザインに限った内容ではなく、Web制作に関する基礎知識からHTML/CSSのコーディング実技まで全体的に把握できます。

参考：ウェブデザイン技能検定 受験案内
参考：技能検定「ウェブデザイン」の試験科目およびその範囲ならびにその細則
参考：ウェブデザイン技能検定 練習問題

Webクリエイター能力認定試験

Webサイトを納品するワークフローに沿った出題で、スピードや効率性もアピールできる試験と銘打たれています。

Webデザイナー・Webディレクターなどの専門職以外にも、自社のWeb制作や運営担当と思われる一般職や事務職の方の受験も増えているようです。

参考：Webクリエイター能力認定試験
参考：Webクリエイター能力認定試験 出題範囲
参考：Webクリエイター能力認定試験 サンプル問題

Web制作で使用するAdobeソフトの認定資格

Webデザイン提案で使用するデザイン・カンプはPhotoshopやIllustratorを使用して制作します。（UI/UXデザインやプロトタイプ作成にはAdobe XDが使われる場合もあります。）

コーディングの模写練習する際にはフリーソフトで代用も可能ですが、Web制作会社に勤める場合には使えるようにしておきたいソフトです。

2021年より、ACA（Adobe Creative Cloud）の バージョンCC2020に対応したアドビ認定アソシエイトがスタートしました。

試験時間は前半・後半に分かれており、後半は対象ソフトを使用する実技操作の試験です。

アドビ社以外に、Webクリエイター能力検定・Javaプログラミング能力認定試験を主催しているサーティファイでも認定試験を実施しています。

こちらの公式サイトではCC2020以外のバージョンも掲載されています（2021年3月現在）。

アドビ認定アソシエイト（Photoshop CC2020・Illustrator CC2020共通）

参考：アドビ認定アソシエイト(ACA)
参考：アドビ認定アソシエイト
参考：アドビ認定アソシエイト 出題範囲(Photoshop CC2020)
参考：アドビ認定アソシエイト 出題範囲
参考：アドビ認定アソシエイト サンプル問題 Photoshop
参考：アドビ認定アソシエイト サンプル問題 Illustrator

PhotoshopRクリエイター能力認定試験・IllustratorRクリエイター能力認定試験　共通

参考：PhotoshopRクリエイター能力認定試験
参考：IllustratorRクリエイター能力認定試験
参考：PhotoshopRクリエイター能力認定試験 出題範囲
参考：IllustratorRクリエイター能力認定試験 出題範囲
参考：PhotoshopRクリエイター能力認定試験 サンプル問題
参考：IllustratorRクリエイター能力認定試験 サンプル問題

Web制作フローを理解して、Webデザイン資格を取得しよう　まとめ

プログラミングの資格だけでなく、Webクリエイター系の資格学習を利用することでWebディレクターやWebデザイナーの業務についての理解を深める事ができます。

WebデザインやWeb制作フローについて知ることで、コーディングだけでなくWeb制作全体に関わるチャンスも増やすことができます。

関連業務に関わることも少しずつ学んでスキルアップしておきましょう。

niyuta

この記事があなたのITエンジニア人生の助けになれば幸いです