〜まったくの初心者から制作できる人へ〜
- 「Webサイトを作ってみたい」
- 「職業訓練でWebデザインを学ぶことになった」
- 「HTML？CSS？何からやればいいの？」
はじめてこの世界に入る方のほとんどが、ここで立ち止まります。実はWeb制作には、正しい順番があります。いきなりコードを書き始めるのではなく、
設計 → デザイン → コーディング → 公開
という流れで進んでいくのが、プロの現場でも使われている方法です。
このページでは、まったく知識ゼロの状態から「Webサイトを作れるようになるまで」の道のりを、順番で紹介します。
Web制作は「見た目を決めてから作る」のが基本。いきなりHTMLを書くのではなく、まずどんなページを作るのか？を決めます。
■ ワイヤーフレーム（設計図）
ワイヤーフレームとは、ページの構造を決める設計図のこと。ここでは色やデザインはまだ不要で、
- 上にロゴ
- その下にメニュー
- 大きな画像
- 文章エリア
- フッター
といった 配置の計画 を立てます。家を建てる前に間取り図を描くのと同じです。
■ デザインカンプ（完成見本）
ワイヤーフレームができたら、「実際の見た目」を作ります。ここで決めるのは、
- 色・フォント
- 画像
- ボタンの形
- レイアウトの雰囲気
使われるツールは、Figma / Photoshop / Illustrator など。現場では デザインが先、コーディングは後 が基本です。
デザインが終わったら、HTMLを使ってコード作成に入ります。HTMLはページの「文章」と「構造」を作る言語です。
- 見出しを書く
- 文章を書く
- 画像を表示する
- リンクを貼る
まだデザインは気にしなくてOK。まずは 「ページが表示される」を確認します。
HTMLで作った骨組みに、CSS（カスケーディング・スタイル・シート）というコードを使って、見た目を整えていきます。
- 色の変更
- 文字サイズ
- 余白調整
- 横並びレイアウト
CSSには多くのプロパティが用意されており、ここで一気に「サイトっぽく」なり始めます。
HTML/CSSコードを使ってPC用のページが作成できたら、次はスマホ対応です。同時に作成する場合もありますが、最初はあとからスマホ対応を適応させることが多いです。スマホ対応では、
- 画面幅によるレイアウト変更
- メディアクエリ
- モバイルファースト
今のWebサイトはスマホ対応が必須。「パソコンだけのサイト」はもう通用しません。
スマホ対応と合わせて多くのサイトで見かけるのが動きです。画像が横にスライドしたり、ふわっとボタンが現れたり、そういった動きの多くはJavaScriptというプログラミング言語で動いています。そのため、
- ボタンで表示切替
- メニュー開閉
- スライドショー
- 入力チェック
HTMLとCSSが「静止画」なら、JavaScriptで「動くサイト」になります。
HTMLで骨組み。CSSで見た目、JavaScriptで動きが整ってきたら、Webサイトを公開します。サイトを公開するためには、サーバーが必要です。ここで必要な学習は、
- FTPとは何か
- ファイルのアップロード方法は？
- URLで見られる仕組み
サーバーとは？
Webサイトを置く「インターネット上の場所」。自分のパソコンにあるだけでは、他の人は見られません。
サーバーにアップロードして初めて公開です。
Webサイトは作って終わりではありません。公開後のサイトは、運営・運用を行います。そのために必要なのがアクセスの解析だったり、検索エンジンへの表示方法だったりとなります。
- 何人見ているか（アクセス解析）
- どんな検索で来たか（サーチコンソール）
- 改善ポイント
アクセス解析をもとに、検索結果に表示されるための工夫。おもにHTMLで行います。
- 見出し構造
- タイトルの付け方
- alt属性
- 内容の整理
公開する前に準備する場合も多いので、最後のステップではないかもしれませんが、HTML/CSS/JavaScript以外のサーバーで動くPHPというプログラムが必要です。PHPは
- フォーム送信
- メール送信
- データ処理
会員制のログイン機能や、資料請求などの本格的なWebサイト制作の領域です。
