Web制作について

Webとは?
Webというのは様々な意味がありますが、ここではWebサイトやページについて説明。
不特定多数の人に情報を伝えるためのページやそのメディアファイルなど。
デザインは配置や配色さらには大きさ・バランスを考える、コードではHTMLからはじまり、サーバー側で動くプログラムまで。
見出し、文章、画像、動画、ボタン、ナビゲーション、一覧、表、と上げるときりがないですが、一つのページを作るうえで、様々なブロックの表現方法がある。
不特定多数の人に情報を伝えるためのページや、それらを構成するメディアファイル(画像、動画など)の集まり。
制作について
制作会社、大手の制作・広報部門、ECサイト、メディアサイトのデザインやコーディング。
それに携わるのはWebクリエイターと呼ばれる人。
様々なオーサリングソフトと呼ばれる制作用のツール、AIソフトを使って作り上げる。
Web制作・ページの作成に必要な知識
ノーコードでも作成できるWebですが、一から構築する際には外せないキーワードや技術。
- HTML
- CSS
- JavaScript
- FTP
更に知っておくと便利なこと。
- jQuery
- WordPress
- PHP
- データベース
HTML
これがないとはじまらない。見出し・段落・画像・動画・様々なコンテンツを表現するためのテキストファイル。
CSS
HTMLは装飾をするためではありません。色を付ける・レイアウトするといったことはCSSで行う。
JavaScript
HTML・CSSに動きをつける。データの処理やサーバーとのやり取りも可能。
JavaScriptベースのライブラリ
jQueryをはじめとしたライブラリ。これはスライダーやハンバーガーメニューなどを作るのにとっても便利。
FTP
作ったページをどうやって公開するか。公開する場所はレンタルサーバーを借りて、ドメインを結びつける。しかし、ファイルをアップロードしないと自分の作ったページは誰も観ることはできない。FTPというソフトやプロトコルと呼ばれる約束事・ルールのソフトを使って公開する場所にコピーする。
すると、ページが誰でも見れるように。
WordPress
HTMLやCSSがわからなくても、ページを作成することができるアプリ・ソフト。
がっつりカスタマイズするにはHTML・CSS・PHPの知識が必要。
PHP
HTMLやJavaScriptではできない、サーバー上で動くプログラム。アクセスしてきたユーザーがデータをサーバー側に保存したり、共通のHTMLをパーツ化したりと便利。
掲示板やアクセスカウンターなどを実現できる。
データベース
データを保管する場所、方式。テキストエディタでは見ることができない最適化・圧縮化されたデータ。
顧客データ、設定データ、学習データなど。様々なデータベースがある。WebではMySQLなどがよく利用される。
Web制作に役立つアプリ
Adobe Photoshop
写真などのラスター形式(ドットでできた画像)の編集ソフト。
Adobe Illustrator
ベクター形式(座標でできたデータ)の画像データを作成するためのツール。
Adobe Firefly
画像生成することができるアプリ。
Figma / XD
Webデザインソフト。PhotoshopやIllustratorでも可能。
2つのソフトよりレイアウト配置などに特化している。
VS Code / Dreamweaver
HTML、CSS、JavaScript、PHPなどを作成するためのソフト。テキストエディタでも可能だが大きな特徴はコードの補助機能や拡張機能がある。
FTPも設定・拡張することで可能に。
Filezilla / WinSCP
FTPクライアントソフト。