１、基本的なWEBページの構成
WEBページはPhotoshopなどで作ったデザインをもとにHTML（Hyper Text Markup Language)という言語で組み立てて制作しています。
HTMLはテキストにリンクを貼ったり、画像、動画、音声などを埋め込むことができ、文章に『これは見出しです』『これは段落です』といった意味づけをすることで、検索エンジンやブラウザにサイトの構造を伝えることができます。
しかし、このままの状態だとテキストに書かれているだけの見え方になってしまうので、CSS（Cascading Style Sheets）やJavaScriptといった言語を使い、レイアウトや装飾、動きを調整してWEBページを構成します！
・HTMLの基本的な役割について
HTMLファイルは「タグのついた文字データ」に過ぎません。
私たちがパソコンを利用してWebページへアクセスすると、サーバーに対しそのページのHTMLファイルを要求されます。するとサーバーはその要求に応え、指定されたHTMLファイルをユーザーのパソコンへ送信します。
これを私たちが普段見ているようなWebページとして表示させる必要があります。
その役割を担っているのが、Webブラウザです。Webブラウザは「HTMLパーサー」や「HTMLレンダリングエンジン」といった機能を利用して、HTMLファイルをWebページとして表示させます。
ブラウザの主な種類
- Chrome（Google社）
- Edge（Microsoft社）
- Safari（Apple社）
- Firefox（Mozilla社）
・CSSの役割について
CSSは、HTMLで書かれたページをWebブラウザやメーラーにどのように表示するかを定義するための言語です。
CSSは、主に見た目の装飾に関することを定義します。一方、HTMLはページの構造や要素を定義します。そのためCSSとHTMLは常にセットで使用されます。CSSを記述するためには、まず構造化されたツリー構造のHTMLを作成し、そのHTMLに対してCSSのスタイルを実装していきます。
CSSでできること
- 文字の色、サイズ、行間、行揃えなどの指定
- 背景色、背景画像、ボーダー、角丸などの指定
- レイアウト、余白の調整
・JavaScriptの役割について
JavaScriptは、Webブラウザ上で動作するプログラミング言語です。
HTMLとCSSで構築されたWebサイトに動きを加えたり、さまざまなWebサービスを実現したりと多種多様で一番多く活用されています。
- ブラウザに表示された画面に動きを与えられる
- サーバーと通信して情報を送受信できる
- Webページ上に複雑なアプリケーションを作れる
- スマホアプリを作れる
- チャットボットなどサーバーで動くアプリケーションを作れる
- スプレッドシートと連携して業務効率化を図れる
２、ワークフロー
下の図は、一般的なWEB制作のワークフローをまとめたものです！
ワークフローで大切なことは、発注者（クライアント）が目指すデザインのゴールをヒアリングの際にしっかり汲み取り、リリース後の運用面も考えたサイト設計をすることです！
特に画面の情報設計は、Webサイトの機能が決まる重要な工程になります。デザインを先行させて、後から情報を入れ込むのではなく、情報設計の段階で記載内容を整理して配置し、ユーザーの使いやすさと視線の流れを考えた作りにしましょう。
| ワークフロー | 発注者とのやり取り | 使用するツール | ||
| 1,受注 | ・メール・電話・クラウドソーシングなど | |||
| 2,ヒアリング | 打ち合わせ
見積もり提出（1回目） |
＜ヒアリングシート＞
・Excel・ノートなど様々 |
||
| 3,調査分析 | ・Web検索・現場下見取材・既存サイトがある場合Google Analyticsを使ったサイト分析 | |||
| 4,サイト設計(技術使用書・サイトマップ) | ・Power Pointなど | |||
| 5,画面設計(ワイヤーフレーム作成) | 見積もり提出(2回目)
打ち合わせ |
・AdobeXD・Photoshop・Illustratorなど | ||
| 6,デザイン | ・AdobeXD・Photoshop・Illustratorなど | |||
| 7,コーディング
プログラミング・CMS |
・エディタを使いHTML、CSS、JavaScript、PHPの言語を書く
・CMSを使い管理や更新するシステムをカスタマイズ 主にWordPress MovableType |
|||
| 8,テストアップ | FTPクライアントを経由してサーバーにデータをアップロード | |||
最後は納品、運用といった流れになります。
＜まとめ＞
最後に運用とありますがサイトを作るだけでなく、制作した後もしっかりクライアントが求めている結果に繋がっているのかも大事になります。
WEBの構成作業は基本的には役割分担されていることが多いです。
AdobeXDを使い画面設計をする人がいて、設計されたものをコーディングする人と分かれていますので自分がやりたいと思えることをまずは挑戦してみて下さい！