Webデザインを学習するにあたり全体像を見渡す記事が必要と感じたので、作成しました。
情報処理技術者試験の参考書のようなノリで書いていきます。
１．近年のWebページの傾向
エンドユーザーの目に触れる部分について、HTMLの機能をそのまま使ったシンプルなページは少なくなり、ボタンやラベル等の見た目を装飾したページやアニメーションを付けたページが主流になっている。
PCと共にスマートフォンも一般的に使われるようになっており、スマートフォンの表示への対応（レスポンシブデザイン）も必要になっている。
また、従来のページでは、「①ブラウザからサーバへリクエストを送信」「②サーバからブラウザへレスポンスを送信」「③ブラウザでページを更新」を繰り返していたが、③を部品の入れ替えのみで済ませページ更新を伴わないSPA（Single Page Application）が採用されることも増えてきた。SPAでは、簡単な中間の操作では①②を伴わないこともある（ブラウザ上のメモリに保持したデータの操作だけで処理が完結する）。
これらの傾向は、エンドユーザーに感動を与える（UX、User eXperience）ために生まれたものである。
エンドユーザーに分かりやすさや快適さを提供することで、サービスの利用を促すことを目的としたものである。
なお、上記で挙げたような技術は、PCや回線に負荷をかけるものである。
PCや回線の性能が向上したからこそ、UXを重視したデザインが可能になったということも特筆するべきである。
２．近年のWeb開発の進め方
１で前述した通り、近年のWebページではデザインについて考慮するべきことが増えており、Webデザインの専門性が強くなっている。
そのため、従来のシステムエンジニアに加え、専門のWebデザイナーが開発に加わることが増えている。
システムエンジニアとWebデザイナーが協働する上で、システムエンジニアはWebデザイナーと会話できるようにWebデザイナーの仕事内容を理解するべきであり、その逆もしかりである。
Webデザイナーは主に上流工程を担当する。
ウォーターフォールの場合、開発の進め方は以下のようになる。
要件定義工程でWebデザイナーがUIのデザインを決める
↓
設計工程でシステムエンジニアが要件定義に沿った画面設計を行う
↓
画面設計に沿って実装を行う
↓
実装したものを単体試験・結合試験にて検証する
↓
総合試験にて、Webデザイナーはデザイン通りに実装されていることを確認する
３．Webデザイナーが使用する技術
Webデザインを行う上で、レイアウト配置や配色パターン、フォント、画像、アニメーション等を考える必要がある。
良いデザインを行う上での理論や資格はあるが、個人の感覚による部分が大きい。
（感覚は、既存のデザインから学んだり、エンドユーザーの反応から学んだりすることで鍛えることができる）
デザインは、Photoshop、Illustrator、Adobe XD、Sketchといったツールで表現する。
これらのツールを用いることで、デザインを正確かつ軽快に伝えることができる。
（誤解を恐れずに言えば、Microsoft Power Pointをデザイナー向けに機能特化したツールであるとイメージすれば良い）
４．システムエンジニアが使用する技術
システムエンジニアは、以下の技術を用いることでデザインを実装する。
・見た目の装飾やアニメーション
CSSを用いて実装する。
アニメーションはJavaScriptのライブラリで実装することもあるが、CSSもCSS3のバージョンにてアニメーションの機能が追加されたため、CSSで実装することが増えている。
・レスポンシブデザイン
CSS3のメディアクエリと呼ばれる機能を使うことで実装する。
また、レスポンスデザインを実現するためのツールやサービスも存在している。
・SPA
JavaScriptにより実装する。
また、一般的には、Angular、React、Vue.jsといったフレームワークを併用する。
これらのフレームワークを機能強化するために追加して用いるフレームワークも登場しており、例えばVue.jsの場合はVuexやNuxt.jsといったフレームワークを追加で適用することができる。
いかがでしたでしょうか。
体系的な知識はIPAの情報処理技術者試験で概ねカバーできるのですが、Webデザインの分野はカバーされていないので作成してみました。
他チームと調整する場合や学習を進める場合に、こうした体系的な知識は役立つと思います。