Webサイト制作の流れ
ワークフロー図
⓪要件定義
-
顧客ヒアリング（サイトの内容・目的）
- 業種
- サイトの名称（企業名やサービス名）
- 企業の所在地や規模
- サイトを立ち上げる理由、目的
- ターゲットユーザー
- サイトの目的を達成するために必要なコンテンツ
- 必要なグローバルナビゲーション
-
サイト仕様作成・確認
- レスポンシブレイアウトの場合は、ブレイクポイントを決定する。
-
スケジュール作成・確認
-
予算見積り
-
契約締結
- ガイドライン、運用マニュアルについて、作成の要不要を契約時に決めておく。
- 作業完了時にデザインデータ納品の要不要を契約時に決めておく。
- 顧客とは、契約時から曖昧なままで作業に進まない。狙いや目的を明確にしていくこと。
①設計
-
サイトマップ作成・確認
- サイト全体のページ数や構成を割り出す。
-
ファイル構成の設計
- HTML、CSSなどのファイル名やフォルダ名を決め、それらの格納方法を決定する。
ディレクトリ構造
- HTMLファイルをルート階層に置くフォルダ構造
- 1ページにつき1つのフォルダを作るフォルダ構造
- Webサイト全体を格納するフォルダ名を「www」とする。
- 「index.html」をフォルダの最初に一つ置いておかないと、他者がブラウザで検索した時にファイルの中身がずらっと表示されてしまってセキュリティ上よくない。（「index of ～」で表示されてしまう。）
ファイル名、フォルダ名
- cssファイルを保存するフォルダ名は「css」にし、ファイル名は「style.css」「main.css」などにする。
- JavaScriptファイルを保存するフォルダ名は「script」または「scripts」にし、ファイル名は「script.js」などにする。
- 「404 Not Found ページ」も作成
ファイル名
- 半角の英字、数字、または英数字の組み合わせにする。
- 英単語はできるだけ簡単なものを使う。
- 英字は小文字のみを使う。大文字は使わない。
- 2つ単語を使う必要がある場合は、単語の区切りを”-” or”_”でつなげる。
ターゲットブラウザの設定
- 古いバージョンのIEにどこまで対応させるかを決める。
- 既存サイトの場合は、アクセス解析などでターゲットとするデバイスをある程度絞る。
-
デザインラフ制作・確認
- 色の三属性[色相(Hue)、彩度(Saturarion)、明度(Value・Brightness)]の概念を利用したHSV(HSB)カラーを用いて理論的で正確な配色を行う。
-
ワイヤーフレーム（デザインカンプ）制作・確認
- レスポンシブレイアウトの場合は、PC向け、スマホ向け両方作成し、モック（html）を作成する。
- PhotoshopやIllustratorなどで1枚の画像ファイルとして作り込む。（カラーリングやボックスサイズなど）
- 現在では、Photoshopなどを使わない「インブラウザ・デザイン（Designing in the browser）」という手法も多くなってきている。
- トップページからどのページへ誘導したいかによって、バナーの配置を考えたり、画像やテキストを強調して目立たせたりなどの工夫が必要。
- 下層ページを含めた各コンテンツの役割や重要度を考え、それぞれの場所へ効果的に誘導できるようトップページを設計する。
- ナビゲーションメニューをきちんと作る。（ハンバーガーメニューは万人には分かりずらい。）
- 画像を極力減らすことで、読み込み速度の向上につながる。
- 今後メニューが追加されるのか否か、等を考慮してレイアウト設計する。
- どれだけ少ないクリック数で見せたい情報を見せるか、が重要。
レイアウトの種類
- フィックスドレイアウト：横幅固定（780px など）
- リキッドレイアウト：横幅パーセンテージ指定（100% など）
- レスポンシブWebデザイン：ブラウザの横幅サイズをWebサイト表示の判断基準にする。作業量はフィクスドの2倍。（ブラウザにやや負荷がかかり、重くなる傾向がある。）
-
テキスト、コピーライト作成
- 他サイトから文字のコピーサイトはペナルティ対象となるので注意。
- プライバシーポリシーは他社のサイトを参考に、自社に合わせて文章を作る。
-
アウトライン作成（大中見出し・段落分け）
-
レイアウト割当て
②コーディング・プログラム開発
-
サイト内容のテキスト化
-
新規サイト設定
- index.htmlを作成・保存＞基本属性の設定（lang, meta, title, favicon等）
-
htmlタグによるマークアップ化
- パーツごとに適切なタグを使用し、適切な要素でマークアップする。
- 読み上げソフトなどで読み上げた時に理解しやすいよう、文章を順序立ててHTML構造を組んでいく。
- head内のタグの順番：mata>title>link
- spanタグ：主にcssを適用するために使用
- フォームのメソッド
GET：URLのパラメータに表示される状態になる。（検索時など）
POST：URLのパラメータに表示されない。（個人情報の送信時など）
文字コード
- meta要素で指定している文字コードとHTML文書そのものの文字コードは一致させる。
改行コード
- LF：UNIX系のOS
- CR+LF：Windows ※どの環境でも崩れにくいCR+LFを採用するのがベター
- CR：主にMac
Dreamweaver
- サイト設定
「サイト」＞「新規サイト」からサイト作成＞「詳細」＞大文字小文字を区別する - htmlファイル作成
「ファイル」＞「新規」から作成＞ディレクトリを指定して「保存」（index.html） - metaタグ追加（css/jsの使用宣言）
挿入バー「ヘッド・メタ」ボタンから追加
css：http-equiv、値：Content-Style-Type、コンテンツ：text/css
js：http-equiv、値：Content-Script-Type、コンテンツ：text/javascript - metaタグ追加（keywords：キーワード、description：詳細）
挿入バー「ヘッド：メタ」ボタンから選択 - スクリプト連携
「スクリプト：スクリプト」ボタンから追加 - favicon設定
ソースを手入力 - デザインビューにテキスト貼り付け
テキスト段階で改行が2つ続いた場合は、<p>タグに自動処理される。
テキストはデザインビューで編集可能。 - ol/ulリスト化
デザインビューで対象とするテキストを範囲選択
プロパティから「リスト」または「番号リスト」ボタンをクリック - dl化
デザインビューで対象とするテキストを範囲選択
挿入バーから「テキスト」選択＞「dl」をクリック
※dl内を分割する場合は、デザインビューで改行2回。空のpタグは手動で削除。 - タグを簡単に変更する（クイックタグ編集機能）
デザインビューで、該当テキストにカーソルを合わせ、「Ctrl」＋「t」＋「t」
編集したいタグを消去してから変更後のタグを入力 - プレビュー：F12
-
各リンク先の設定（サイトマップ参照）
- index.htmlはファイル名を省略可能。同階層のindex.htmlを指定する時は、「a href=”./”」と記載。
- <a href="index.html#link1"> のような書き方もOK
Dreamweaver
- アンカーリンク化
デザインビューで対象とするテキストを範囲選択
プロパティの「リンク」欄にリンク先入力 - メールアドレス化
デザインビューでメールアドレスを選択＞「電子メールリンク」ボタンをクリック
-
画像（動画・音声）の挿入
- alt属性：意味のない画像には記載不要。意味がある画像は、Web標準の観点から必ず記載。
- 動画ファイル：MP4形式で用意すれば主要なブラウザ全てで再生可能。
- 音声ファイル：動画データがないMP4形式、またはMP3形式の音声ファイルを用意すれば主要なブラウザ全てで再生可能。
著作権とライセンス
- 素材の使用条件は「利用規約」を確認する。
- 「商用利用可」と書かれた素材はビジネスで使用することができるが、配布サイトによって使用条件が提示されている場合があるので、必ずしも無条件で使用できるわけではない。
Dreamweaver
- テキストをimgに差替え
デザインビューでテキスト切り取り
「イメージ：イメージ」ボタンから画像挿入、「代替」にテキスト貼り付け。
-
各ブロック毎のグルーピング ※id/class設定等も。
- 適切な要素（header, nav, footer, divタグ）を使って、レイアウトのために情報を区切る。
上手な<div>の使い方
- 見出しと関連するコンテンツをまとめる
- パーツの「境界」を作る
- HTMLの階層を揃える
- 別のボックスのラッパー構造を作る
- HTML5では、以下タグを適宜使用
<main>, <article>, <section>, <nav>, <aside>, <header>, <footer>
ID名 命名規則
- 日本語は不可
- 半角英数字のみ（- _ のみ使用可）
- 半角スペースは不可
- 数字からは開始できない
- 英文字から記述
- 大文字小文字を区別
- 1ページ内で使用できるID名は1回のみ（使い回し不可）
Dreamweaver
- bodyを包むタグ追加
画面左下で<body>タグクリックし、全体を範囲選択
挿入バーから「Divタグを挿入」ボタンからidを指定して追加
-
バリデートチェック・オンラインlintチェック
Dreamweaver
- バリデート
ファイル＞バリデート - リンク先のチェック（リンク切れの確認）
ファイル＞ページのチェック＞リンク
- バリデート
-
ノーマライズCSSでリセット
Dreamweaver
- cssファイル作成
新規作成したら一度ファイルを閉じる
htmlのソースコードを表示した状態で「CSSソースを追加」からリンク設定
- cssファイル作成
-
CSSレイアウト設定（随時ブラウザで表示確認）
- 「ページ全体のスタイル→特定の場所のスタイル」という順番で書く。（例）common.css→index.css
- 解読しやすく、一目瞭然であること。
- フォントサイズを極大、極小にした時にレイアウトが崩れないように随所で配慮が必要。
- idセレクタは多用せず、基本、classセレクタを使用する。（ソースコードが複雑化するため。）
- 複数のクラス名を指定する時：class=”case1 detail2”
- [display:none;]：検索エンジンから対象外にされる可能性があるので注意が必要。
- vertical-align（縦方向のテキスト位置調整）：<p>タグなどブロックレベル要素には効かない。縦方向の位置調整は鬼門で難易度が高い。
- clearfix：フロートの要素に背景をつけたい時などに、フロートがかかっている親に対してかける。
フォントサイズ
- パソコン向けの本文サイズ：14〜16px
- スマートフォン向け：14pxだと小さすぎるので、16px以上
- em, %指定：親要素に指定されたフォントサイズを1emとして決まるため、入れ子になっている場合は注意が必要。
- rem：<html>タグに指定されたフォントサイズを1remとして相対的に指定する単位。継承の問題を気にすることなく、全ての要素のフォントサイズを相対的に決められる。レスポンシブデザインで威力を発揮。
CSSの継承
- フォント関係のプロパティは継承する。
- 背景色は背景画像などのプロパティは継承しない。
- ボックスモデル関係のプロパティは継承しない。
- そのほかの多くのプロパティは継承しない。
レスポンシブWebデザインのCSS
- メディアクエリで囲まれていない部分は、どんな端末にも共通するベースデザイン。
- モバイルファーストCSS：ベースデザインをスマートフォン向けのデザインにする手法
※現在ではモバイルファーストCSSが一般的。 - デスクトップファーストCSS：ベースデザインをパソコン用のデザインにする手法
- ブレイクポイント（デザインを切り替える画面幅）
・768px以下：シングルコラムレイアウト
・768px〜1000px：2コラムレイアウト（タブレット、パソコン向け）
Dreamweaver
- 画像にクラス追加
デザインビューで画像選択＞クラスセレクタから<p>クリック
プロパティからクラスを選択
-
グルーバルナビゲーションにロールオーバーの設定
-
下層ページ作成前の設定
- 各ナビゲーションの<li>要素に、class名の追加
-
テンプレートの作成
- HOMEのページを複製し、テンプレートを作成する
Dreamweaver
- htmlを別名保存
新規ファイルのリンクを自動修正してくれる。
-
下層ページのファイル作成
- テンプレートを複製し、下層ページを作成（リンクは更新）
- description, titleを編集し、全ページのリンクを繋ぐ
-
ナビゲーションのカレント設定
- CSSシグネチャを設定（各ページの<body>タグに個別認識用のidを追記）
- common.cssにカレント設定（現在位置を設定）を追加
-
各下層ページの作り込み
Dreamweaver
- フォーム
ソースビューの、formタグで囲みたい開始位置に「フォーム」ボタンクリック
</form>タグをドラッグしながら終わり位置に移動
メソッドを「POST」に変更＞「アクション」欄にリンク先を記入
テキストフォームなど：デザインビューでテキストを削除＞挿入バー「フォーム」
適切なフォームボタンをクリックしてフォームを挿入
ソースビューで不要な属性を削除、修正 - テーブル追加
挿入するすぐ直前の文字列の末尾にカーソル合わせる
「テーブル」ボタンからテーブル追加
※デザインビューでテーブルを伸ばす行為はNG。（コードに数値が入ってしまう為）
※cssのテーブル幅、セル内余白、セル内間隔は必ず「0」、ボーダーは「1」に設定。
ヘッダーは任意選択。
※「border-collapse」のcss設定は設定欄がないため、手動。「;」を忘れず入力。 - 地図掲載
外部サービス埋め込み前にLintチェック（外部サービスは減点対象）
Google Mapで住所を検索＞共有＞地図を埋め込む＞カスタムサイズ
サイズを指定＞実サイズでプレビュー＞下部コードをコピー
DWデザインビューで改行（<p>タグ作成）
※デザインビューにそのまま貼り付けは不可＞<p>タグ内に貼り付けで完成
- フォーム
-
ローカル環境テスト・検証
Webブラウザチェック
- ブラウザ：主要なブラウザで以下チェック（Edge、IE、Chrome、Safari、Firefox、Operaなど）
- スマートフォン：Android、iPhoneの実機で確認
- ページの読み込み：ページが正しく読み込めるか｜読み込みスピードに問題はないか
- 表示：表示が崩れていないか｜不要な横スクロールが出ていないか｜画像が正しく表示されているか
- 文字・文章：文字化けを起こしていないか｜指定したフォントで表示されているか｜文章の誤字脱字がないか
- 動作確認：リンク切れをしていないか｜プログラムが正常に動作するか
-
サーバーヘアップロード
③公開
ホスティングサービス選定
データアップロード
デモサイト検証
④運用
-
ソーシャルメディア連携
-
SEO（Google等）
- SNS（LINE, Facebook, Twitterなど）からのリンクが多いと効果が上がる。
-
アクセス解析
- Googleアナリティクス
-
ユーザテスト、ヒューリスティック評価
-
セキュリティ対策
⑤その他
-
CMS
- コンテンツ更新は楽になるが、セキュリティに気を付けなければならない。（狙われやすい為。）
- バージョン毎にセキュリティホールができるので、アップデートをまめにかけていく。
- WordPress：ログイン画面からなりすましでログイン等されないように、セキュリティ対策を十分にしておく必要あり。