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クライアントソフト。

現在、未来とともに過去を知っておきたい

インターネット・Webの歴史