Lesson01 -WEB制作について
WEBの仕組み
基本的なWEBの仕組みについて理解しましょう！
インターネットとは
インターネットとはコンピュータ同士を繋げて、ありとあらゆる情報のやり取りをする仕組みのことです。
コンピュータ同士による情報通信技術の総称です。
Webとは
Webとは、インターネットの中で利用されるものの一つです。
そのため、インターネットの中に、Webというカテゴリーがあります。
Webの中には様々な情報を集めたWebページがたくさん存在します。
1つ1つのWebページには住所のようなものが決まっていて、この住所のことを「URL」といいます。
Webページ同士をリンクすることで、Webの世界は成り立っています。
「www」=「World Wide Web」
ワールド・ワイド・ウェブの略称です。(世界中に広がった、クモの巣のような情報網)
Webの始まり
Webは「研究所のデータや文書をリンクさせる仕組み」から始まりました。
研究所では、互いの研究の情報がわからない、目当ての資料を見つけられないといった問題が発生していました。
そこで、1989年に「研究者が、情報を簡単に閲覧できるシステム」が開発されます。
これがWebの始まりです。
Webページとは
インターネット上で公開されている文書のことです。
GoogleChromeなどのアプリケーションに読み込まれるデーター式をまとめて「Webページ」と呼びます。
Webページのデータは、主に以下の要素で構成されています。
- ・HTMLファイル
- ・CSSファイル
- ・画像ファイル
HTML
Hyper Text Markup Languageの略で、ハイパーテキスト＝文書構造の記述やページ同士をリンクさせることができるテキストのことを指します。
HTMLには、WEBページに表示させたいテキスト情報・画像情報・リンク情報などが書き込まれています。
コンピューターが文書の内容を理解できるよう「タグ付け」を行うことで、情報に意味を持たせる（マークアップさせる）ための言語です。
CSS
Cascading Style Sheetsの略で、HTMLタグで囲んだ要素の色・大きさ・レイアウトなどを指定し、デザインするための言語です。
その他、マウスの操作に連動した動きなどはJavascriptという別の言語を記述することで表現することができます。
HTMLで文書（必要な情報）・CSSでそれを装飾・Javascriptで動きをつけるイメージです。
Webサイトとホームページの違い
Webサイト：Webページが複数連携してまとまったもの(=「本」全体のこと)
ホームページ：Webサイトの最初のページ(=本の「表紙」に当たる部分。よくトップページと呼ばれます)
※日本ではWebサイト全体のことを「ホームページ」と呼ぶことが多いですが、制作会社に依頼する際などはこの言葉の違いに気をつけましょう
プロトコル
インターネット上で通信を行うときの手段や規則のことです。
プロトコルにはいくつかの種類があり、代表的なものが以下です。
HTTP
ブラウザ⇄サーバーの間で情報のリクエスト・レスポンスを行うためのプロトコル。インターネット上でこのWebページを見たい（ブラウザ）・見せたい（サーバー）という通信のための規則のこと。
FTP
作ったデータをアップロードorダウンロードするなど、ファイルの転送をするための規則のこと。
「FTPクライアントソフト」という専用ソフトを使う
SSL
セキュリティの観点から、送っている情報を暗号化するための規則のこと。
例えば、お問合せフォームでの個人情報入力やECサイトでのクレカ情報などの入力後、情報を途中で盗み見されないように、サーバーに情報を送っている最中に暗号化しているSSLの設定がされていると、先頭に鍵マークがつき、「https://」というプロトコルになる
SMTP
メール送信のために使用（端末でメールを管理する方法、メールをダウンロードして一台の端末で確認/ PCのみでメールを管理するなど）
IMAP
メール受信のために使用（サーバー上でメールを管理する方法、メールをダウンロードせずに複数の端末で確認 / PC・スマホ・タブレットなどでメールを管理するなど）
URL
Webページがどこに存在しているかを表す住所のようなもの。また、ブラウザのアドレスバーに表示される文字列を指します
URLの仕組み
プロトコル種別://サーバー名/ディレクトリ名(存在する場合)/ファイル名
abc.co.jpというサーバーの中のaboutフォルダの中のabout.htmlへアクセス
日本の中の東京の中の新宿区 のようなイメージ
プロトコル種別
・httpやhttpsの部分です。通信方式を表しています。
サーバー名
・契約をすると任意の名前（＝ドメイン）をつけることができます。
・最初に割り振られる名前だと数字の羅列（IPアドレス）、のため、検索がしにくいというデメリットがあります
ファイル名
・どのページなのかを指します。
・ファイル名を省略した場合「自動的に index.html を表示する」というルールになっているサーバーが多いです
ブラウザ
Webブラウザは各ベンダー（提供元）が様々なブラウザを提供しているため、ユーザーによって使用しているものが異なります。
また各ブラウザごとにレンダリングエンジン（表示のために使用されるエンジン）も異なるため、Web言語で同じ命令を出していてもブラウザごとに表示が異なることがあります。
ブラウザの種類とそのベンダー
- ・GoogleChrome (Google)
- ・Safari (Apple)
- ・Microsoft Edge (Microsoft)
- ・FireFox (Mozilla)
- ・Brave（Brave Software）
- ・Internet Explorer (Microsoft) ※2022年6月にサポート終了
Webページの表示状況を確認する場合、上記のような複数のブラウザで確認を行いましょう。
サーバー
ブラウザと同様、サーバーも様々な提供元が提供しています。サーバーによって速度・容量・できること（PHPやWordpressが使用できる / できないなど）が異なるので、目的や優先順位で使用するサーバーを選定します。
サーバーは専用のサーバーを設置する場合もありますが、管理による維持費などが返ってかかってしまうため、レンタルサーバーを利用することがほとんどです。レンタルサーバーには以下のようなものがあります。
ドメイン
サーバーに任意でつけられる名前のことです。通常サーバーにはIPアドレス（例：192.168.0.1のような数字の羅列）というものが割り振られますが、IPアドレスは数字となってしまうため、どのようなサイトかが分かりづらく、覚えにくいです。（ドメインが具体的な住所名なら、IPアドレスは緯度・経度のようなイメージです）
企業などが自サイトのアドレスを分かりやすくするため、通常「ドメイン」というものを利用します。（例：google.co.jp）
独自に考えたドメインは重複していなければレンタルすることが可能です。
ドメイン管理会社には以下のような会社があります。
どのサービスでドメインを取得するかによって、費用や使用できるドメインが変わってきます。
WEB制作の流れ
WEBサイトを作る工程を理解しましょう。
以下の1〜9の順番に進め、それぞれの工程でどのくらい時間がかかるかを想定し、納品・締め切りまでのスケジュールを立てていきます。
- 1.ヒアリング・ターゲットユーザーやコンセプトの設定・スケジュール作成
- 2.情報収集
- 3.ワイヤーフレーム作成
- 4.デザイン作成
- 5.デザイン素材の書き出し
- 6.コーディング・プログラミング
- 7.（必要な場合のみ）システム構築
- 8.検証・修正
- 9.公開
複数名のチームで制作を行なっていく場合、上記の1〜9の工程は以下の担当者が担うことが一般的です。（制作現場によって若干異なります）
- ・1〜2：WEBディレクター
- ・3〜4：WEBデザイナー
- ・5〜9：コーダー（マークアップエンジニア）
1.ヒアリング
クライアントの要望を確認し、ターゲットユーザー設定やコンセプトメイキングを行います。
また公開日までの詳細なスケジュールを作成します。
コンセプトメイキングではまずサイトを作るための目的を明確にします。
目的を明確にした後、それを達成するための具体的な手段（コンセプト）を考えます。
それによってどのようなコンテンツ・ページ構造・デザインかを決定します。
ヒアリングの前に、事前にお客さんにどのようなことを確認しておいてほしいかを整理するため、「ヒアリングシート」というものがあるとその後の打ち合わせもスムーズに進みます。
ヒアリングシートで得た情報を取りまとめ、企画書を作成しましょう。
WEBサイトを作成する目的、達成したいこと、それを実現するためのデザインコンセプト、具体的なスケジュール感をまとめプレゼンを行います。
この工程を通して、クライアントと制作者との間で作るものを明確に決め、イメージの共有をすることが大切です。
参考：Web制作をする前に必ずおこなっておくヒアリングシートの基本【テンプレート付き】
2.情報収集
ページに掲載するテキスト情報と画像情報（場合によっては動画や音声情報）を集めます。
多くの場合クライアントから一式受け取ることになりますが、撮影や準備が必要な場合誰がどのように行うかを決定します。
3.ワイヤーフレーム作成
WEBサイトにはさまざまな情報が掲載され、また複数ページのデザインとなることが基本です。
そのため、デザイン作成前にワイヤーフレームを作成します。
ワイヤーフレーム＝デザイン作成のための設計図です。そのページの中にどのような情報がどのような順序で掲載されるのかを視覚的に判断できるようにすることで、クライアントにより完成イメージが伝わりやすくなります。
ワイヤーフレームでは色や詳細なデザインのことは考えず、レイアウトのみを考えることになります。
（色をつけてしまうとWEBサイトに対するイメージが生まれてしまい、後の工程のデザイン制作でイメージとの乖離が生まれてしまう可能性があります。）
またワイヤーフレームの段階でクライアントの確認を取り、決定後は大幅なレイアウト変更が起こらないようにしましょう。
参考：
ワイヤーフレームとは？よいページを設計するための確認点や作り方など
ワイヤーフレームサンプル
★Figmaでワイヤーフレームを作ってみよう！★
「Lesson 0:Figmaの基本操作動画」は視聴・作成しましたか？
Figmaを使って簡単なワイヤーフレーム(設計図)を作ってみましょう！
ここで作ったものを今後の講座で実際に使うわけではないので、完璧に完成させなくても大丈夫です！
「プロのデザイナーが使うツールってこんな感じなんだな」という楽しさを、まずは自由に体験してみてください。
4.デザイン作成
ワイヤーフレームを元に、具体的なデザインを作成します。
この段階で大幅なレイアウト変更は行わず、あくまでレイアウトはワイヤーフレームに従います。
作成後クライアントに確認を行い、決定後は大幅なデザイン変更が無いようにします。
5.デザイン素材の書き出し
デザインから素材の書き出しを行います。単独で扱われる写真や画像を中心に書き出しをします。
画像の種類によって形式を選び、適切なファイル名を付けます。
主なWEB用画像の形式
■JPEG（JPG）：
・約1677万色の表現が可能なため写真やバナーなど色数が多いもの向け
・書き出す際は長方形or正方形のみ可能
■GIF：
・256色の表現が可能。色数の少ないアイコン、ロゴなどに向いている
・画像の形は自由
■PNG-24：
・JPEGと同じ色数で表現が可能（PNG-8だと256色のみ）
・画像の形は自由
ファイル名のルール
- ・ファイル名は必ず半角英数字で付けます。
- ・使用できる記号はハイフン（-）またはアンダーバー（_）のみとなり、その他の記号やスペース（半角全角問わず）は使用できません。
- ・ファイル名が適切で無い場合、ローカル環境*で問題なく表示されている画像がサーバーにアップした後で表示されなくなる場合があります。
ローカル環境・・・Web制作においてデスクトップ環境のことをローカル環境と呼びます。またサーバー環境をリモート環境と呼びます。
・ローカル環境で確認：データをデスクトップ上で見ている状態
・リモート環境で確認：サーバーにアップしたデータを見ている状態
6.コーディング・プログラミング
デザインデータを元に、HTML・CSS・Javascript（jQuery）を記述してWebページを作ります。
余白や大きさなどは必ずデザインデータ通りに作成するため、必要な場合あらかじめ数値を書き出しておくと良いかもしれません。
作業時はローカル環境で表示確認を行いながら作業を行い、
全ページ分のデータ作成が済んだらテストサーバー上にデータをアップロードしましょう。
正しくページが表示されているかを必ず確認してから、クライアントに提出をします。
7.システム構築（必要な場合のみ）
必要に応じて、WordpressなどのCMS*を実装する場合、PHPなどの言語を用いてシステム構築を行います。（不要な場合はこの工程は省きます）
CMS・・・Contents Management Systemの略で、WEB言語の知識がない人物でも、WEBサイトの内容が簡単に更新できるようなシステムのことを指します。
これを実装することで、例えばブログ、ニュース、商品情報などのコンテンツが編集しやすくなるというメリットがあります。
8.検証・修正
各種ブラウザで表示の差異がないか検証し、必要であれば修正を行います。
実際のサーバーにアップする場合、検索制御などをかけてURLを知っているユーザーのみ確認ができるようにします。
参考：noindexとnofollowの正しい使い方について
9.公開
サーバーにデータをアップロードして公開します。
検索制御などの設定をしている場合は必ず削除しましょう。
デザインの基礎
Webデザインは芸術作品(アート)を作ることではなく、ユーザーの課題を解決し、情報をわかりやすく伝えるための手段です。
このWEBサイトを作ることによってクライアントが抱えている悩みを解決したり、目的を達成するためにはどうすべきかを考えてデザインを作成しましょう。
デザインの4原則
参考：上手なデザインを作るには？学んでおきたい「デザインの4原則」
近接(近づける)
関連する情報(例:商品の写真と説明文と値段)は、グループ化して距離を近づけ、無関係なものとは距離を離す
整列(揃える)
左揃え・中央揃え・右揃えなど見えない線を意識して要素の端を揃える
反復(繰り返す)
同じ役割を持つ見出しやボタンは同じデザイン(配置のルール)を繰り返すことでユーザーが迷わなくなる
対比（コントラスト） / メリハリ
例えば一番目立たせたい「購入ボタン」は大きくしたり、周りと違う色にしたりして情報の優先順位をはっきりさせる
レイアウトと視覚の基本ルール
視線誘導(Zの法則‧Fの法則)
人の視線は、画面を見るときに左上から右下へ「Z」や「F」の字を描くように動く傾向があります。
「一番見せたいキャッチコピー」や「お問い合わせボタン」など優先順位が高いものは、
視線が止まりやすい左上や右上に配置すると効果的です。
余白(ホワイトスペース)
情報を詰め込みすぎず余白を作って読みやすくすることが重要です。
「余白も立派なデザインの一部」として要素と要素の間にしっかり余白を持たせることで、
見やすさ(可読性)が上がり洗練された印象を与えることができます。
AIの活用について
AIとは
Artificial Intelligence（人工知能）の略で、人間のようにデータを学習し、考え、答えを出すことができるコンピュータープログラムのことです。
膨大なデータの中から、私たちの質問に対して自然な文章で回答を作成したり、画像を生成したり、エラーの原因を瞬時に見つけ出したりすることができます。
わからないことをGoogleで「検索」して自分で答えを探すだけでなく、AIに「相談」して一緒に解決していく時代に変わってきています。
仕事でパソコンや電卓を使うのが当たり前になったように、これからのWeb制作や一般的な業務において、「AIを道具として使いこなすこと」は特別なことではなく、当たり前の必須スキルになっていきます。
AIツールの種類
世の中には用途に合わせて様々なAIが登場しています。
文章・対話系AI(テキスト生成AI)の例
- ・ChatGPT(チャットジーピーティー)： 世界で最も有名な対話型AI
- ・Gemini(ジェミニ)：Googleが開発したAI
- ・Claude(クロード)：自然な文章作成や、プログラムのコードを読むのが得意なAI
AIを使う際の注意点
・100%正しいとは限らない
AIも間違えることがあります。AIの回答を鵜呑みにせず、必ず自分の目で確認しましょう。
・個人情報の入力はしない
具体的な人物名や個人情報(住所・連絡先など)、何かのログイン情報（ID・PWなど）は入力しないように注意しましょう。
・的確な回答を得るためには的確なプロンプト（指示書）を用意しましょう
意図通りの回答を得るには、AIへの指示をわかりやすく・具体的に書くことが大切です。
| 悪い指示内容 | 良い指示内容 |
| カフェのサイトの構成を考えて | 私はWebデザインの初心者です。20代女性をターゲットにした、落ち着いた雰囲気のカフェのLP(1ページ完結のサイト)のワイヤーフレームを作ります。どのような構成(情報)を入れると良いか、5つ提案してください。 |
本講座でのAI活用ルール
やっていいこと(AIを助手として使う)
- エラーの解決サポート：「なぜ画像が表示されないの?」と原因やヒントを教えてもらう
- アイデアの壁打ち：「カフェのサイトにどんな情報が必要?」など、構成案を相談する
- テキストの生成：サイトに載せるキャッチコピーや、ダミーテキストを考えてもらう
- 改善のレビュー：「この配置、もっと使いやすくするには?」とアドバイスをもらう
やってはいけないこと(自分の成⻑を止める使い方)
- ・丸ごとのコード生成：「〇〇のサイトを作って」と最初から最後まで丸投げする
- ・理解なきコピペ：AIが出したコードを、意味がわからないまま貼り付ける
- ・自分で考えない：自分の頭を使わず、AIの生成のみで制作を完結させる
演習：WEBサイト制作の企画立案
クライアントからWEBサイトの制作の依頼があったと仮定して、現在は以下の項目がヒアリングできている状態です。
ここから皆さんなりにこれから作るWEBサイトの企画を考えてみてください。
ヒアリングできている内容
| ヒアリング項目 | 詳細 |
| クライアント名 | STUDIO NNC 合同会社 |
| 業種 | 商社・代理店 |
| 作成するWEBサイト | コーポレート（企業）サイト |
| 作成するページ数 | 全6ページ ・トップページ ・会社概要ページ ・商品一覧ページ ・採用情報ページ ・お問い合わせフォーム ・プライバシーポリシー |
| WEBサイトに求めること | ・情報が見やすく、わかりやすい ・お問い合わせがしやすい ・求職者に気に入ってもらい、応募したいと思ってもらう ・コーポレートロゴが青系なので、青を使用して欲しい |
| 理想のデザイン像 | ・シンプルで落ち着いた印象 ・情報が見やすい ・世代を問わず気に入ってもらえるデザイン |
| サイトのターゲット | ・製品を求めている業者や関連企業（20〜50代） ・求職者（20〜30代） |
| WEBサイトの公開日 | 半年以内 |
企画内容
・WEBサイトのコンセプト
・ベンチマーク（参考）サイト
・デザインコンセプト（色、あしらいの形、写真やイラストの使用など・・）
・スタート〜公開までのスケジュール
