Web デザインにはサイト制作にさまざまな工程と流れがある

Webデザイン入門 独学
Webデザイン入門

1.Web デザイナーはChatGPT の出現で消滅するのか?

今んとこ、ChatGPTとかAIはめっちゃ進化してるけど、まだまだWebデザイナーにとって代わるっちゅうわけやないんやで。AIは確かにデザインのサポートとかアイデア出しにはええけど、人間が持ってる創造力とか細かいニュアンスにはかなわんねん。やっぱり最後には人間のセンスとか感性が大事やから、Webデザイナーの仕事はまだまだ必要やで。AIと一緒にうまいことやっていくんがこれからの道やな。

Web デザインといっても、制作するweb サイトの規模にもよりますが、そのすべてを一人でおこなうことはありません。Webサイト制作には、さまざまな工程と流れがあり、それらの工程はさまざまな職種の人々が働いています。

ただそれぞれが自分本位で仕事をしてしまうと、サイトの統一がとれなくなります。そこでサイト全体をまとめる「プロデューサー」が必要になってきます。全体の予算管理からスケジュール管理、クライアントへの提案など、さまざまな役割を担っているのです。

そのプロデューサーから降りてきた案件を、どう制作現場で活かしていくかを統括するのが「ディレクター」というわけです。その下に「プランナー」がいて、どのような内容にするか企画します。その下に「インフォメーションアーキテクト(IA)」がいます。

いよいよ制作するとなると「デザイナー」の出番です。そのデザイナーが作ったものを、HTML やCSS でコーディングする人が「コーダー」です。PHP など動的な表現を担うプログラマーというわけですね。

さらにフロントエンド側でコードやプログラムを扱う「フロントエンドエンジニア」、サーバー側で「バックエンドエンジニア」などの職種もあります。ほかに「解析ツール」などもありますが、これらの仕事を掛け持ちでやる人もいるので、職種の呼び方は各社まちまちと考えていいと思います。

1.Web サイトを作るための技術・ツール

ベースになるのはHTML とCSS です。

ただしこの段階では動きのないページなので、JavaScript を使います。このとき JQuery などのフレームワークを使って能率を上げたりします。Web サーバー側でバックエンドの作業にはPHPやRubyなどのプログラミンを使います。

HTML(エイチティーエムエル)

これがWebページの骨組みや。文章とか画像の配置を決めるために使うねん。

CSS(シーエスエス)

これで見た目をカッコよくするんや。色とかフォントとか、デザインを整えるためのもんやな。

JavaScript(ジャバスクリプト)

ページに動きをつけるためのもんや。ボタン押したら何かが動くとか、そういう仕掛けを作るんやで。

フレームワーク(React, Vue, Angular)

これらはJavaScriptの便利なツールやな。効率よくコードを書けるようにしてくれるんや。

ライブラリ(jQueryとか)

これもJavaScriptのツールやけど、よく使う機能が簡単に使えるようになってるねん。

CMS(コンテンツ管理システム)

WordPressとかのことや。ブログとかサイトの内容を簡単に管理できるツールやね。

バージョン管理(Git, GitHub)

コードの変更履歴を管理するためのもんや。チームで作業する時にめっちゃ便利やで。

デザインツール(Adobe XD, Figma)

これでサイトのデザインを作るんや。見た目を確認しながらデザインできるから便利やね。

レスポンシブデザイン

スマホでもパソコンでも見やすいようにデザインする技術や。今の時代、これがめっちゃ重要やで。

ホスティングサービス(Netlify, Vercel, AWS)

作ったサイトをインターネットに公開するためのもんや。サーバーを借りて、そこにサイトを置くんやな。

これらの技術とツールをうまいこと使いこなして、ええWebサイトを作ってや!

2.Webデザイン入門

基本を学ぶ

まずはHTMLとCSSを勉強するんがええで。これがWebデザインの基本中の基本や。インターネットには無料の教材とかいっぱいあるから、それ使って勉強したらええわ。

実際に手を動かす

理論だけ勉強してもあかんで。実際に自分で簡単なページを作ってみるんや。まずは自己紹介ページとか、趣味のページとか、シンプルなもんから始めるんがコツや。

デザインの基本を学ぶ

色の使い方とかレイアウトの基本とか、デザインの基本もちゃんと勉強しとかなあかんで。これもインターネットで調べたら、いっぱい情報が出てくるわ。

インスピレーションを得る

他の人が作ったWebサイトをいっぱい見てみるんや。ええなと思うデザインをメモしとくと、自分のデザインに活かせるで。Pinterestとか、デザインギャラリーサイトが役立つわ。

ツールの使い方を覚える

FigmaとかAdobe XDとか、デザインツールの使い方も覚えとかなあかん。これらのツールを使えば、効率よくデザインできるようになるで。

レスポンシブデザインを学ぶ

スマホでもパソコンでも見やすいサイトを作るための技術や。これも基本やから、ちゃんと勉強しといたほうがええわ。

小さなプロジェクトをこなす

勉強して作った知識を実践に活かすために、小さなプロジェクトを自分でやってみるんや。友達のサイトを作ってあげるとか、自分のブログをデザインするとか、なんでもええで。

こんな感じでやっていけば、ええWebデザイナーになれるで。頑張ってな!

何なりとお申し付けください。