【初心者向け】はじめてのウェブ制作！デザインからコーディングまでサイトができるまでを徹底解説！

こんにちは。うしろの制作室です。
今回は「ウェブ制作を始めたいけど、やり方がわからない」という方に向けてデザインからコーディングまでの手順や注意点について解説していきます。

制作の準備！
サイトのデザインを制作しよう！
1. XDの使い方
コーディングしよう！
サーバーへの設置
Webサイトの完成

制作の準備！

ウェブサイトの制作にあたり、まずは必要なものの準備をしていきましょう。
必要なものは以下の通りです。

デザインソフト
エディターソフト
ブラウザ

サイトのデザインを制作しよう！

サイトのデザインを制作するにはデザインソフトを使用します。
制作したデザインファイルのことを【デザインカンプ】と呼んだりするよ！

今回はAdobe XDを使用してデザインカンプを作っていきます。
他の制作ソフトとしてはFigmaなどを使用することも多いです。

今回は簡単に、Webサイトに必要な下記の項目をワイヤーフレームのみ作っていきます。
※本来はワイヤーフレームを作成後、細かいデザインを作っていきます。

ヘッダー
ナビゲーション
メインビジュアル
コンテンツ
フッター

XDの使い方

まずは新規ファイルを作り、アートボードを編集します。
アートボードのサイズは1920pxで作っておきます。PC版のサイズに合わせて編集しましょう。
また、スマホ版を作る場合は375px～390pxのサイズで作ります。
テンプレートにスマホの目安サイズが表示されています。

コーディングしよう！

デザインが完成したらそれをウェブブラウザで表示するためにHTML・CSSファイルの制作（コーディング）をしていきます。

Webサイトを構成するのはHTMLファイル・CSSファイルです。他にもJavascriptのファイルなども使用されますが、基本はこの２つを覚えておきましょう。

HTMLはWebサイトの骨組み。CSSはサイトの見た目やデザインを作るものです。

VSコードの使い方

コーディングするにはまずエディター（VSコード）を立ち上げます。新規フォルダを作り【index.html】という名前のファイルを作ります。
※index.htmlはウェブサーバーで最初に表示するためのファイルです。名前は変えないようにしましょう。

index.htmlファイルをVSコードで表示したら、テキストで”！”と入力することでHTMLファイルのひな型を簡単に作成することができます。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

HTMLファイルの<>で囲まれているもののことをタグと呼びます。
<body></body>と書かれている間にテキストや画像を専用のタグを使い入れることでWebサイトを作ります。よく使うタグなどは以下の通りです。

<img> 画像を入れるときに使う
<h1> タイトルを入れるときに使う<h1>～<h6>まであり、重要度により決める
<p> テキストを入れるときに使う
<div> 要素をまとめたりするときに使う

その他にも山ほどのタグがあり、実際のコーディングでは多くのタグが使われます。

デザイン・スタイルの適用

先にも書いた通り、CSSファイルでサイトの見た目を作ります。
style.cssという名前のファイルを作りHTMLファイルの<head>タグ内に以下のリンクタグを指定し読み込ませていきます。
相対パス・絶対パスなどリンクの設定の仕方などはまた別の記事で紹介しますので今回は割愛。

<link rel="stylesheet" href="style.css">

CSSファイルの中身の書き方としては、タグなどの要素を指定し、色やフォントサイズなどのスタイルを適用します。

例として<body>に背景色を赤にするという書き方です。
他にもスタイルの種類がたくさんありますので作りながら覚えていきましょう。

body{
        background-color: red;
    }

ブラウザでの確認方法

コーディングしたindex.htmlファイルをブラウザで開くことでコーディングの確認ができます。
実際にはVSコード内でのプレビューができるプラグインなどを使用することで効率よく制作することができます。

サーバーへの設置

ここまで簡単にWebサイトに必要なファイルの制作をしてきました。
作ったHTMLファイルを公開するにはサーバーにファイルを設置し、公開状態にしないといけません。
サーバーの用意は各種レンタルサーバーなどの契約をし、ドメインを取得することで一般的なウェブサイトと同じように公開することができます。

レンタルサーバーとして筆者はロリポップやConoHa WINGなどをよく使用していますがエックスサーバー等もよく利用されるものですのでお好きなものをご使用ください。

ファイルをサーバーにアップロードするためにはFTPサーバーを利用します。
FTPとはファイルをアップロードするための通信プロトコルですが、細かいことは追々覚えていきましょう。
FTPソフトとしてはFileZillaを使っています。

また、ドメインと呼ばれるサイトのURLの取得も必要です。ドメインはお名前.comやムームードメインというサイトからすでに利用されていないものを探して契約します。
https://ushiro-creation.com/
上のサイトの場合のドメインは【ushiro-creation.com】になり、.com以外も取得可能です。
一部法人用だったり、国によって取得できるものもあります。