Webサイト作成の流れ
受講日：2025年03月24日
- 00依頼をいただく
- 01企画書（企画をまとめる）
- 企画書
- サイトマップ(サイト全体の構成を表したもの)
- 見積り
- 場合によってはワイヤーフレーム
Adobe XD：ワイヤーフレームの作成で使用する
- 02デザインに必要な素材の作成
- ロゴ
- ピクトグラム
- アクセスマップ
- 写真
- 原稿
- 03デザインラフの作成
※必要に応じて、PCだけでなくスマホ・タブレットの素材も用意
- 04コーディング
- 素材の確認
- マークアップ
- CSSでデザイン
- サーバーにテストアップ
- 納品
デザインカンプの作成
- XDやPhotoshopで作る人が多い。
- 採用ではPhotoshopとillustratorを使える事が重視される傾向にあるので、特に使いたい物が無ければ、Photoshopで作るのが良い。
HTML・CSSとは
Webサイトの構成要素について
HTML
検索エンジンがサイトを認識するために設定。HyperText Markup Language（ハイパー・テキスト・マークアップ・ランゲージ）の略。Web ページ内の各要素の意味や文書構造を定義。
THMLは、Googleやsafari等のクローラーに対して、サイトを見つけてもらうためのサイン。「このサイトには何を記述してある」という事をマークアップするための言語。マークアップとは、クローラーにサインを送るための手段で、タグでタグの補足を囲む事。
CSS
人間がビジュアルを捉えるために設定。Cascading Style Sheets（カスケーディング・スタイル・シート）の略。レイアウトデザインや各要素の装飾（色・サイズなど）を定義。HTMLで作成したサイトのデザインを、CSSで整える。
JavaScript / jQuery
動きを付けたり計算などの処理を行う。
HTML・CSS習得のコツ
サイトのコードを参照する方法
- 検証ツール（デベロッパーツール）で、Elements・stylesを参照する。
- 気になる所で右クリック＞検証。
メモ書きサイトを作る
WEBサイトを作る時にコピペして直ぐ使えるようなカンニングサイトを作る。
下記の齋藤先生のメモ書きサイトはフッターメニューから情報を確認するとスムーズ。
文法チェックツールを活用する
タグチェッカーにコードをコピペして不備が無いか確認する。
AIを活用する
どういうコードを書きたいか聞くと、具体的なコードを教えてくれる。厳密なスペルまで覚える必要はないが、単語の意味や、文法が成り立ちを理解しておく必要があるので、最初のうちは自分で入力して覚える。（単語や文法が理解できていないと、改修や不具合が発生した時に、自分でサイトをいじれない。）
コーディング練習の参考サイト
- コーディングの模写をする。
- 余白の取り方、文字サイズ等実寸イメージを参考にする。
コーディングの手順
1.素材の確認
実習用に素材集めとテーマ決めをしておく。
- ロゴ
- ピクトグラム
- アクセスマップ
- 写真
- 原稿
- その他（SNSや jQuery）
ファイルの種類
| 拡張子 | 説明 |
|---|---|
| GIF | Photoshopでアニメーション、パラパラ漫画が作れる。ただし256色。背景透過できる。 |
| jpg・jpeg | 元々写真用のフォーマット。フルカラーだけど圧縮率が指定できて、小さいファイルが作れる。小さくすると画像が劣化する。jpg、jpegは同じなので、jpegのファイルが送られてきた時は、jpgに直して管理するとごちゃごちゃにならない。 |
| png-8 | GIFとほとんど同じフォーマット。GIFの特許を主張した人がいたので、ほぼGIFだけど抵触しない形式として作られた。 |
| png-24 | 一般的はPNG。可逆圧縮。ただし圧縮率は変更で きないので、ファイルは重くなる。 |
| webp | ビットマップ系。jpgより圧縮率のいい形式だが、illustratorやPhotoshopでwebp形式の画像は作成できない。webpデータを作成したい時は、jpg→webpのサイトで変換する。 |
| svg | ベクター系。ロゴでよく使われている。 |
適切なファイル指定
2.マークアップ
2-1HTMLの基本構造
<!DOCTYPE html>
<html lang=”ja”>
<head>
（文書の情報を記述）
</head>
<body>
（文書の本体を記述）
</body>
</html>
2-2.HTMLで骨組みとなるタグ要素
- html 要素（HTML の文書）
- 文書がHTML の文書であることを表す。
- <!DOCTYPE html>
- <html lang=”ja”>
- head 要素（文書情報）
- 文書のメタデータを記述。クローラーはhead要素を読み取るが、head要素で記述した情報はWeb ページとしてブラウザ上に表示されない。
- <meta charset=”UTF-8″>
- <meta name=”description” content=” ” >
- <title></title>
- body 要素（文書本文）
- 文書の本文を記述。body 要素で囲まれた領域が、 Web ページとしてブラウザ上に表示。
- <header></header>（ヘッダー）
- <main></main>（メイン）
- <footer ></footer >（フッター）
2-3.構造化タグ
- 画像や原稿(文章)をマークアップ。クローラーに見てもらうのに大事。
- h1～h6（見出し）
- img（画像）
- a（アンカー）
- ul,li（リスト）
- em（強調）
- p（段落）
- デザインに合わせてマークアップする。
- div 囲った部分をグループ化してレイアウトやデザインを指定する。
- span 囲った部分をインライン要素としてグループ化する。
- クラス名を付けて差別化
- <p class=””rule_img001″></p>
- <h4 class=”mainbox”></h4>
- <div class=”mainbox”></h4>
3.CSSでデザイン
3-1.リセットCSS
デフォルトで設定されている文字や行間の余白設定等をリセットする。
htmlとリセットCSSを紐づける。
3-2.セレクタ(selector)を記述する。
先にselectorの記述をしておくと、後のコーディングがとても楽になる。
htmlとCSSを紐づける。
3-3.「レイアウト」以外の内容のCSSの記述。（文字・配色）
- 背景画像
- background: url
- background-repeat:
- background-color:
- background-position:
- フォント
- font-family:
- font-size:
- font-weight:
- color:
- 行間
- line-height:
3-4.レイアウトのCSSの記述。
- 横並びのタグ
- overflow:hidden;
- float: left;
- float: right;
- 真ん中揃えのタグ
- text-align: center;
- margin:0 auto;
- margin:0px auto 20px;
- 表示ルールのタグ
- display: block;
- display: inline;
- display: flex;
3-5.スマホ対応(メディアクエリ)を追加する。
SEOではモバイルフレンドリーが重視されるので、しっかり対応する。
3-6.SNSやjQueryは後で埋め込む。
先に入れても、他の情報を追加していくうちにレイアウトが崩れてしまう場合が多い。サーバーにUPしないと動かないものもある。
3-7.ブラウザ対応の確認サイト
4.サーバーにテストアップ
リンク切れや画像の確認・ブラウザやデバイスごとの表示を確認する。
5.納品
納品後も運用保守というサポート業務があるので、準備しておく。
授業の感想
前職でECサイト運営を担当しており、サイトのUI改善やSEO対策に携わってきたものの、コーディングについてはかなり大まかな概念しか分かっておらず、裏側の実態を理解できていない事に歯がゆい思いをしてきたので、勉強していくのが楽しみ。その反面、WEBサイトは納品して終わりではなく、運用保守・不具合対応で苦労されている開発会社さんの姿も見てきたので、WEBデザインの中でも、継続的な責任感が特に必要とされる仕事だという認識がある。気を引き締めて勉強をしていきたい。
