【要参考】
・【STEP4】Webページの制作「SNS運用基礎20220817.pdf」参考
SNSとは、Social Networking Service（ソーシャル・ネットワーキング・サービス）の略で、インターネットを介して人間関係を構築できるスマホ・パソコン用のサービスの総称です。
【ワンポイントアドバイス】
Webを利用するポイントとして、「Webサイト」「ブログ」「SNS」はWeb運用として重要なコンテンツの３つです。役割と特徴をしっかりと把握して、Webに関わるお仕事に関われるようにしましょう。
【参考サイト】
【SNSの埋め込み方】
実務ではデザインラフの制作はお客様と、多くのやり取りが必要になるでしょう。
デザインは必ず複数パターンの提案（最低2パターン）をして、お客様とのイメージの共有を具現化して行けるよう進めましょう。
【参考サイト】
Web用画像には、 主に「jpg」「gif」「png」「svg」が昨今のWebサイトで使われます。 その特徴と違いを確認しておきましょう。
【ワンポイントアドバイス】
「jpg」「gif」「png」「svg」について、まず悩んだら「jpg」透過表現を必要とすなら「png」、「gif」はアニメーションが必要な時ぐらい、「svg」複雑な画像は重たくなるので、条件次第で使う。と良いでしょう。
【参考サイト】
・SVG→線やシェイプ等の組み合わせでできたベクターデータのため、jpg・gif・pngと違い拡大してもぼやけない。
デメリット：写真には使えないこと。また最近出始めた形式のため、使うサーバーによっては別で表示させるコードが必要になるとのこと。
ロゴなど簡単な色使いの物などは向いていそう。
・グラデーションなど情報量が多いものや写真、たくさんの色使いのイラストなどは向いていないが、簡単な色使いのものやロゴなどはJPGよりPNG-24が向いている（簡単なものであればPNGの方がデータ量が低い場合もある）
・（先生よりおすすめのサイト）TinyPNG
品質を下げすぎずに、適切なファイルサイズに圧縮してくれるサイト
【要参考】
・【STEP4】Webページの制作＞「WEBデザイン実習の教科書.pdf」参考
Adobe Dreamweaver（アドビドリームウィーバー）は、ひとことで言うとホームページ制作ソフトです。
編集機能やレイアウトの表示機能、ファイル管理機能など、制作や更新作業に必要な機能がひとまとめになっている、統合ソフトウェアとなります。
アドビシステムズのホームページでは、“Webデザインソフトウェア、HTMLエディター”となっています。“Webオーサリングツール”や“Webサイト作成ソフト”などとも呼ばれます。ホームページは基本的に「HTML＋画像」なので、頑張れば「メモ帳＋ペイント」でもなんとか作れます。しかし、作業効率などやミスの防止などを考えると、専用ソフトを利用した方が効果的です。
【ワンポイントアドバイス】
Dreamweaverの歴史は長いです。いま世にいるデザイナーのほとんどの方がDreamweaverを過去に使った又は習った事のあるケースが多いです。ただし、昨今ではDreamweaverの需要は落ちています。
その理由は、様々ですがこれからの希望職に合わせて、習得してみてください。
【参考サイト】
※最初のサイト定義が重要！しっかり決めておかないと後で大変になるので、フォルダの場所などしっかり決めておく
例：デスクトップに「○○○サイトの件名など」→「images」フォルダなどもできたら作っておく
【新規ファイルを一から作る場合】
右側ファイルウインドウ→デスクトップ▼横の「サイトの管理」→「新規サイト」
サイト名：（Dreamweaver上だけの名前なので、日本語でもOK。○○様とか○○サービスとか案件名など）
※その下の【ローカルサイトフォルダー】右側フォルダマーク「フォルダーの参照」デスクトップとか参照
「フォルダーの選択」→保存→完了
【元々TeraPadなどで作ったファイルを開く場合】
「開く」でhtml、CSSを開いて都度保存で上書き保存反映される
◆編集タブ→環境設定
・W3Cバリデーター：コードのエラーチェックはどのバージョンでやるかの設定
通常は現行のHTML5で、昔のサイトを触るときなどはそのサイトに合わせて選択
・コードヒント：終了タグ”</”がおすすめとのこと（好きなタイミングで閉じられる）
・コードフォーマット：インデント→2でも4でもOK、タブサイズ→4じゃなく2とかにするとタグの階層（親→子→孫）が深くなってタブが増えても見やすい
◆表示タブ→分割、左右表示・コード・コードだと見やすい
練習のためにもリアルビュー？は見ないで作業するようにとのこと
◆enter→<p>、shift+enter→<br>
◆ウィンドウ→プロパティでタグの細かい設定ができる
◆文字選択→【B】：太字、【🔗】：リンク
◆文字の上【≡ P ▼】の≡で「H2」等見出しや、クラス/ID指定とかもできる
クラスは「.～」、IDは「#～」で入力
◆下のDOMパネル→Pやsectionやdivなどタグで囲む
ドラッグで他のタグの下層に持っていける
◆右の挿入→画像も入れられる
※自動で末尾に入ってしまう”/”は消して、altの画像説明は必ず入力する（プロパティでもOK）
◆Table→表作れる
※先頭と末尾に「+body」が自動で付いてしまうけど消してOK
※width、borderも自動で付いてしまうが古い書き方で非推奨なので消すこと！
<table>～</table>にする
◆いったん一部分だけ消しとくとき
選択→コメントボタン
再表示するとき→コメントの削除でOK
◆「 」とか自動で入るのを消す方法
検索タブ→「現在の文書内を置換」→下段を空白（何も入れない）で「すべて置換」で消える
※「現在の文書内を置換」は、開いているファイル内のみ置換されるので、もし誤った場合でも戻せるが、
「ファイルを横断して検索/置換」だと、フォルダ内のDreamweaverで開いてないファイルも書き換えられてしまい、誤った場合戻す操作ができないので注意する！
◆右側【CSSデザイナー】→ソース→+「新規CSSファイルを作成」or作成済の場合「既存のCSSファイルを添付」（スタイルCSSやリセットCSS）
→「ファイル/URL」：「style」とか入れる、「リンクさせる」で追加
→htmlのhead内に自動リンクされる
◆【CSSデザイナー】htmlの<p>～</p>とか選択した状態で、+セレクタ→「CSSルールにフィルターを適用」に選択タグが表示されたらEnterで、CSSファイルに”P{ }”が記入される
◆左メニュー→…→「親タグを選択」をチェックして、表示させるように設定すると便利とのこと
◆Alt押しながら複数行選択で同時作業ができる
例：<td>～</td>
<td>～</td>
↓
<th>～</td>
<th>～</td> など始まりタグとかだけ同時変更できるが、末尾タグは手作業で修正が必要になる
◆（Dreamweaver内で？）ファイルタブでファイルを移動したときは自動でパスを書き替えてくれる
右上の≡ （メニュー）で新規フォルダー作れる
※（先生より）Dreamweaverのリアルタイムプレビューは使わないのがおすすめとのこと
(F12とかの）リアルタイムプレビューで見てしまうと、余計なコードが追加されてしまい見づらくなる→消すのが面倒になるので、編集はDreamweaver→直接ローカルのhtmlファイルをネット（chrome等）で表示させながら作業するのがベスト
★ネットで表示させたローカルhtmlを検証ツール（デベロッパーツール）で細かく調整して、CSSコードを表示させて【ctrl+A→ctrl+C】→Dreamweaverで【ctrl+A→ctrl+V】で全体コピペで上書き保存がやりやすいとのこと
（齋藤先生はhtmlだけ先に書いて、あとは全部検証ツール上でCSS書いているとのこと）
※リセットCSSについて
・リセットCSSは、style.cssに一緒に書くと読み込み速度が遅くならない（SEO対策になる？）ので、おすすめとのこと
・（先生より）リセットCSSは自分好みにカスタマイズしていく、サイトごとに毎回書かなくても、オリジナルのリセットCSSを持っておき、コピペして反映させるのがおすすめ
・湊先生は、style.cssの最初にリセットCSSを記載し、境目が分かるように「/*=====RESET=====*/」とかコメントでメモしているとのこと
・hp製PCはファンクションキーロックされているので、ロック解除するか、都度fnキー押しながらF7やF12を押せば反応する
・サーバー部分（FTP?）は、Dreamweaverのは使用せず、FFFTPなどを使った方がいいとのこと
・Webサイトは複数のブラウザで表示チェックするのが普通（各ブラウザで微妙に表示が違うので）なので、契約時にどのブラウザで見れるようにするかを決める
・chromeの拡張機能が便利（やるなら自分のPCで）
色スポイトとか、使用フォント、スクショ機能とかおすすめとのこと
【要参考】
・「デザインの考え方」の教科書⑦.pdf」参考
※16P Adobeフォントのライセンス、20P デザインラフの提出は複数種類、について理解しておく
ラフは、WEBサイトを作る上で、レイアウトなどのイメージを作り、チーム内やクライアントと共有するためのものです。 割と重要なものになります。 いきなりワイヤーフレームを作ったり、デザイン案を作ったりというケースもありますが事前にラフを作っておくことにより、より一層スムーズに制作が進められるようになります。
【ワンポイントアドバイス】
ワイヤーフレームの次はデザインラフを提出する事がよくある制作の流れです。デザインラフは画像でサイトの仕上がりをお客様に見せる為です。逆を言えば、デザインラフはしっかりと完成形をイメージして制作する必要があります。コーディングというお仕事は、デザインラフ通りに再現する事が求められます。HTML/CSSをしっかりと意識して作成しましょう。
・デザインラフは2種類以上出すのがポイント（教科書20Pより）
・width、max-width（最大この幅まで）、min-width（最小でもこの幅以上）は一緒に指定してOK
一緒に指定した場合は、より条件が被っている方が優先される
文字が縦に長くなってしまう余白などのスマホ対応はmin-widthなど使えばよさそう
・レイアウトは好みなので、インラインやフレックスボックスなど、好きなものを使えばOK
ただ、前任者の書いたソースの修正などがあるので、理解できるようにしておく
・コードを書くときはまず、必要な文章を用意、HTMLを書いて都度タグチェッカーで確認しながら進める
【要参考】
・「マルチデバイス対応の教科書①②.pdf」参考
↑大事な10点をよく理解する
【ボックスモデルに関わるセレクタ】
width、height、padding、margin、border
【ボックスをレイアウトさせるセレクタ】
float、clear、position、overflow、display
「レスポンシブWEBデザイン（Responsive WEB Design）」は、PC、タブレット、スマートフォンなど、デバイスの画面サイズよってResponsive=反応するWEBデザインという意味で、WEBサイトを単一のHTML（ワンソース）で実現する制作手法です。ブラウザのスクリーンサイズを基準にCSSでレイアウトすることで、デバイスごとに専用サイトを用意することなく、マルチスクリーンに対応したWEBサイトを制作できます。
サンプルページ（レスポンシブWebデザイン基礎）
【ワンポイントアドバイス】
昨今のWebサイトでレスポンシブWebデザインは必須とも言える技術になります。使い方が様々ですが、特にメディアクエリはCSSの基礎理解がとても重要になります。シンプルに整理して覚えていきましょう。
【参考サイト】
viewport（ビューポート）とは、日本語に訳すと「表示領域」という言葉がしっくりくると思います。例えば、デスクトップ環境（PCなど）のブラウザなどでは、ブラウザウインドウの表示領域がviewportになります。… 表示のされ方は、制作者がmeta要素のviewportで指定することができます。
【ワンポイントアドバイス】
viewport はサイト制作の時最初の1度しか書かないので、単純に入れ忘れに注意しましょう。
【参考サイト】
メディアクエリは、CSS スタイルに適用できるシンプルなフィルタです。メディアクエリを使用すると、画面の種類、幅、高さ、向き、解像度など、コンテンツをレンダリングするデバイスの特性に基づいて、スタイルを容易に変更できます。
【ワンポイントアドバイス】
メディアクエリは様々な記述方法がありますが、まずは1つのルールで書いてみましょう。
【参考サイト】
◆【Retinaや4K対応のために画質を2～3倍などで出力する方法】
※「マルチデバイス対応の教科書②.pdf」参考
Photoshopの場合（出力したいレイヤーごとでパーツごとに出力も可能）
レイヤーが指定された状態で、レイヤーパネル右上の三本メニュー→書き出し
書き出し画面左上のサイズ欄で、2X（2倍）や3X（3倍）などで書き出しできる
◆marginは相殺させない（ぶつけない）のがコツ
ボックス同士のtop、bottomがぶつかった部分が相殺（マイナスマージン）になり、レイアウトがうまくいかないことが多いので、marginの上下幅を指定するときはtopで指定したら他のボックスでもtop指定、bottomなら他で指定するときもbottomという風に統一するほうが良いとのこと
◆width=ウィズと読む（先生とかはウィズスに慣れてるからそれで読んでるとのこと）
◆none=ナンと読む
◆calc関数
半角スペース入れて記入する（例： calc(10px – 5px) のような感じ）
◆これから新規につくるサイトは、（新しいので）displey flexを使う
ただ、昔はfloatで作られたものが多く修正もできるようにならないといけないので、理解しておく
floatは使えるようになるが、新規に作成するときには使わず、display flexを使うのがコツとのこと
◆idは、ページ内リンクやJavaScriptの動作を指定するときなど限定的なときのみ使用し、極力使わないようにする
idは点数が
◆メディアクエリは初期値を把握し、複雑にしない
整理整頓してわかりづらくならないようにして、点数に注意して記入、バックアップもする
◆ブレイクポイント（このポイント、例えば画面幅等になったらこの表示指定する、等）をばらばらに設定したり、書き方を突然省略するなど変えたりしない（点数が変わってしまい下に書いたものが点数低いと上書きされなくなってしまうため）
◆様々なサイズのスマホが販売されるため、ブレイクポイントに決まりはなくトレンドも変動するので、「ブレイクポイント 2023 トレンド」などで検索して設定するのがいい（その人の主観になる）
◆min-widthは、小さい順（例：640px→960px→1280pxなどの順）に記載する
max-widthは、大きい順（例：1280px→960px→640pxなどの順）に記載する
（得点が同じ場合は、下に書いたものが通常上書きされるルールのため）
◆max-widthはPC→モバイルの順に作成するとき、min-widthはモバイル→PCの順に作成するとき
◆最低でも文字の1.3倍くらいのline-height（行間）にする
「共有」は、作業チームのコミュニケーションをスムーズにしたり、情報伝達を容易にしたりする機能です。1つのWebサイトやアプリを作る際には、多くの人の意見をとりまとめたり、必要に応じて修正を加えたりする必要があります。Adobe XDにはそんなチームの共同作業をスムーズに進めるための各種機能が含まれています。
【参考サイト】
【リンク相関図の作成】 例）ハンバーガーメニュー
①プロトタイプモードで、リンク元になる文字やオブジェクトをクリック
（ハンバーガーメニューの場合、メニューマーククリック）
②右側に出る▶を、リンク先ページにドラッグ
③右側メニュー／トリガー：タップ、種類：オーバーレイ、アニメーション：左にスライド
④リンク先の×（閉じるボタン）クリック
⑤②と同作業
⑥右側メニュー／トリガー：タップ、種類：オーバーレイ、アニメーション：右にスライド
⑦デザインモードで、リンク元のアートボード名クリック
⑧右上の▶プレビューでテスト再生できる
・種類：スクロール先 はアンカーリンクのようにページ内に飛ぶ場合など
・種類：トランジション は通常リンク？
◆XDでのダイレクト選択ツールのような機能
選択ツールWクリックで、アンカーポイントが出て多少の変形ならできる
◆Webサイトの文字サイズ
昔は12pxとか小さい文字サイズが流行ったが、今はデフォルトが主流とのこと
デフォルトのサイズは16pxで、変えない方が楽
＜デフォルト＞
h1 48px
h2 36px
h3 24px
h4~h6 16px
pタグ 16px
◆webデザイナーの仕事はワイヤーフレーム・デザインカンプまで
コーディングはコーダーの作業なので、別で考えてOK
・全くわからない状態だと、無茶なデザインをしてしまう恐れがある
・コードが書ける＝より幅が広がる ので、理解はしておく
【要参考】
・「AdobeXDの教科書.pdf」参考
★Adobe XD ラーニングとサポート 先生より、XD操作方法練習できるのでおすすめとのこと
Adobe XDは、アドビが販売しているベクターベースのプロトタイピング作成ツールである。
【ワンポイントアドバイス】
XDはまだ求人票で必要なスキルと掲載は少ないですが、取り入れている企業と、取り入れているデザイナーさんは増えています。
まずは、基本操作と利点などをしっかりと確認しておきましょう。
【参考サイト】
Adobe XD では、Photoshop や Illustrator などの他のアドビアプリケーションからデザイン素材を読み込むことができます。XD では、これらのデザイン素材をさらに拡張することも、これらのデザイン素材を使用してインタラクティブプロトタイプを作成することもできます。
【ワンポイントアドバイス】
実際のお仕事では、お客様とのやり取りに合わせて連携方法が変わるでしょう。必要に応じて、ai（Illustrator）なのかpsd（Photoshop）がいいのか、XDがいいのか、お客様に合わせて判断していきましょう。
【参考サイト】
・切り抜きはない、クリッピングマスクは使える
・プロトタイプモードで動きをテストできる
・相手がXDを持っていなくても動きを共有できる（共有する際はクラウドに入れる）
※通常文字の縦書きはできないが、縦書きプラグインを入れるとできる（プラグインの入っていない方で開くと崩れる）
プラグインがない状態で縦書きを表示させる場合は画像を表示させる（↓アセットの書き出し参照）
【レイヤー】
・shiftで複数レイヤー選択できる
※フォルダ分けや名前できちんと整理した方がいい
【アートボード】
・アートボード左上のアートボード名クリックで選択された状態で、Alt+Shiftでドラッグでアートボードをコピーできる
・左メニューのアートボードアイコンクリックで右側にモバイル版のサイズが表示され選択できる
【ガイド】
・何も選択していない状態で、左、上からガイドが持ってこれる（左、上に戻すとガイドが消える）
・ガイドを持ちながらShift押すと細かく調整できるっぽい？
・表示タブでガイドの表示、非表示切り替えできる
※オブジェクトなどの移動時、持ったままAlt押すと、近いオブジェクトとの距離pxが表示される
【ファイル読み込み】
・レイヤー維持されたままでPSDファイルなど読み込める
【クリッピングマスク】
・枠の図形に画像をデスクトップなどからドラッグ
・選択ツールで選択した状態で、「選択したオブジェクトで書き出し」でマスクした形で画像保存できる
この画像を使ってもいいし、Photoshop等で元々画像を作成しても、CSSで希望の形に表示させてもなんでもOK
【リピートグリッド】
・例えば【画像：段落】のような横並びのものなど、並んでいるものをすべて選択して、右側メニュー「リピートグリッド」で緑色の枠で囲まれたら、線をドラッグで等間隔でコピペできる
・等間隔幅も、一つ変えたら他も連動される
＜応用＞
◆画像を連番表示
「01.jpg」「02.jpg」「010.jpg」とか順に名前付けしてリピートグリッド内の画像枠にドラッグで、連番表示される
※頭に0を付けないと、2の前に10や100など来てしまうので、01、02などにする
◆文章を順に表示
画像とは違い、メモ帳などに改行などで書いて、Shift JISで保存し、文章枠にドラッグで改行ごとに表示される
※改行で次の枠に行ってしまうのであまりおすすめではないとのこと
【アセットの書き出し】
・Photoshopなどのデータの中で、画像の一部だけ（フォントなども）画像として書き出せる（jpgもpngも大丈夫なのでpngなら透過画像ができる）
・画像まるごと使う場合はそのままWeb用に保存でOK
①必要なレイヤーをグループ化→グループ名を「○○○.jpg（またはpng）」など拡張子を記入して名前付け
②ファイル→生成→アセット
③画像化されたファイルができる
（文字は間隔が離れた縦書きなどの場合、モバイル版でレイアウト変更をする可能性があるので、段落かたまりごとに透明pngで画像用意するのがおすすめとのこと）
【ワイヤーフレーム画像の書き出し】
書き出し→すべてのアートボード→jpg or pngで書き出しできる
★先生より、下記の順での作業がやりやすいとのこと
①必要な情報を文字起こし
②手書きで配置メモ
③PCサイズのワイヤーフレーム（Photoshop or XD）
④レスポンシブ・モバイルサイズのワイヤーフレーム
（↓契約後？）
⑤デザインカンプ（色や写真を載せたカラー版ラフ）
・XDかFigma（フリーソフト）が使いやすい
・ワイヤーフレームは白黒グレーで作る下書き、写真や色を付けたものがデザインカンプ
・企業によって使用ソフトや作成ソフトの指示があるのでPhotoshopやXDどちらでも作れるようにしておく（XDが多い印象とのこと）
・画面を開いたときの最初の視角範囲＝ファーストビューは、高さ550～650px、横1000～1200pxに収める（PC）
・レスポンシブ・スマホ版でも文字の大きさは基本変わらないイメージで作る（別でコーディングが必要になる？ため）
【授業でのLP作成について】
◆既存商品のLPだけど、社名や社名ロゴは架空で作ったほうがいい？
↓
（田中先生）どっちでもいいけど、余裕があれば架空で作ればロゴや名刺、DMなども作ってストーリー性を持ってPFに載せられる/ロゴは余裕がなければジェネレーター（URL載せて）でもいいよとのこと
（齋藤先生）時間が無くなって大変だから既存のままでいい、素材やアイコンを借りてきて使っていいとのこと
◆元々企画のフィンランドは営利的でないので既存商品で進めているが、授業ではページ数の多いWebサイト制作は予定ある？
↓
（田中先生）予定はないけど、もし余裕があれば作ってサーバーに載せてPF載せてもOK
（齋藤先生）予定はない、普通のサイトよりもLPが作れる方が就職には有利だから
情報をしっかりまとめてからレイアウトを考えると良いでしょう。そのレイアウトが、HTMLとCSSというルールに変わるだけです。
まずは、PCサイズとして下記の例のような、コンテンツ部分が960pxでその外側部分を入れて、1280pxでワイヤーフレームを作成してみましょう。
【先生より、コーディング系おすすめサイト】
・coliss
・MDN Web Docs
・PhotoshopVIP
【作業について】
・先生は、ワイヤーフレームを印刷したら手書きでpxなど書き込み、横に置いて見ながら作業するのがおすすめとのこと
・本は、このサイトを作ってみましょうのような本より、CSSサンプル集のような「このCSSでこんなことができます」というようなサンプルが羅列された本がよい
※そこまで頻繁には内容は変わらないけど、数年前とかの本だと情報が古く今のHTML・CSSのバージョンに追い付いていない場合があるので、なるべく現行のバージョンに対応した本を選ぶ
【パターン1】
①新規作成→横960px×縦3000pxくらい（増えてOK）、解像度72、RGB、カンバスカラー白、アートボードの☑外す⇒OK
②イメージタブ→カンバスサイズ→幅1280px、カンバスカラー：薄いグレーなどわかりやすい色→OK
③高さが足りなくなったら、カンバスサイズ→基準点を↑に調整して、高さを増やす
④普通に長方形ツールなどで白い部分を増やして作業
【パターン2】こっちのがやりやすいかも
①新規作成→横1280px×縦3000pxくらい、解像度72、RGB、カンバスカラー：薄いグレーなど、アートボードの☑外す⇒OK
②薄いグレー+真ん中白でふたつ長方形ツールで背景作る
③長さが足りなくなったら、カンバスサイズの変更後に②の2つをそれぞれプロパティで高さ変えるだけでOK
定規から引っ張ってくるとぴったり希望の位置に置くのが難しい
↓
表示→ガイド→ガイドを新規作成→横線：水平方向、縦線：垂直方向でぴったり作れる
・ガイドが不要になったら、移動ツールでガイドを定規まで入れ込めば消える
・【ctrl+：】でガイドの表示・非表示切り替えができる
・【ctrl+0】で全体表示、【ctrl+1】で100％表示できる
【要参考】
・「デザインの考え方」の教科書⑥参考
ランディングページ最適化はコンバージョン最適化、もしくはコンバージョン率最適化と呼ばれるより広範なインターネットマーケティング手法の一つであり、セールスリードや顧客となりうるウェブサイト訪問者の比率を向上させることを目的としている。
【ワンポイントアドバイス】
未経験でいきなりWebサイトを作るよう業務を指示する制作会社はありません。もし言って来たら疑ってください。個人レベルや担当者がWebサイト制作の知識理解が足りない等で、依頼されるなどの事は逆によくあるかもしれませんのでお気を付けください。
そこで、まずは最初の一歩としてチャレンジするのであればLP（ランディングページ）のような、1ページのページ制作をしっかりと行ってみると良いでしょう。
【参考サイト】
ワイヤーフレームとは、webページのレイアウトを定める設計図のことです。
（印刷業界ではデザインカンプとも呼ばれる、たたき台のこと）
webサイトの制作現場で聞かないことがない、といえる単語であり、サイト制作において決して欠かせない要素です。単に「ワイヤー」と呼ぶことも多いです。
【ワンポイントアドバイス】
ワイヤーフレームの段階では、お仕事の契約成立に至っていない場合が多いです。
ワイヤーフレームをしっかり作り、見てもらって契約するとなった段階からお仕事となります。
逆を言えば、しっかりとしたワイヤーフレームを作成できるという事は、「仕事を獲得できる力がある」という証明にもなります。お客様のご要望（相手の気持ち）をしっかり理解する事を心掛けて制作をしてみましょう。
【参考サイト】
・使用ソフトはPhotoshopです。
・サイズはPC基準です。規格は世の中のサイト例を参考にしてみましょう。
・先に必要な文字や情報をテキストで書き出し、手書きでイメージ図を書くと作業しやすいとのこと（先生より）
・Photoshopの作業は、まずは色を入れず、白黒で制作しましょう。（白黒グレーの3色）
・余白を意識し、サイズバランスもWEBサイトの完成形と同じにしましょう。(実務ではpxピクセル単位で仕上げます)
・バナー制作と同じく、
①掲載が必要な内容(情報)を先にしっかりまとめる（5W1H・目的、コーディングの工程も考えながら）
②情報の順番づけ
③レイアウトを考える 手順で制作すると良いでしょう。
そのレイアウトが、HTMLとCSSというルールに変わるだけです。
HTMLの文法、CSSで表現できることを意識してデザインすること。
※特に「デザイン」を作ってから、どう「コーディング」するの？
とならないように、計画的にしっかりとデザインを考えていきましょう。
【要参考】
①バックグラウンド系プロパティ／疑似クラス・疑似要素セレクタ
CSS で飾りを追加しましょう | HTML-CSS 入門講座 | 情報デザイン工房 濱屋 ※L6.2 L6.4以下
サンプルファイル（ CSSの記述【疑似クラス・疑似要素】）
【参考サイト】
・background-colorプロパティ（背景色）
・background-attachmentプロパティ（背景画像の位置）
・background-imageプロパティ（背景画像のファイル）
・background-repeatプロパティ（背景画像の繰り返し）
・backgroundプロパティ（背景の一括指定）
・background-sizeプロパティ（背景画像のサイズ）
【参考サイト】
擬似クラスとは … 擬似クラスとは指定の要素が特定の状態である場合にスタイルを適用させるセレクタです。 文章構造の範囲外にある情報によってスタイルを変化させることができます。
擬似要素とは、要素の一部に対してスタイルを適用できる指定方法です。 HTMLの要素を擬似的にCSSで設定するので、コーディングに手を加えることなく装飾を適用することができます。
【ワンポイントアドバイス】
疑似クラス・疑似要素はここまで学んだ基本的なCSSを更に効果的に使う為の技術です。
ここまで学んだ内容を復習しながら使うと良いでしょう。
サンプルファイル（ CSSの記述【疑似クラス・疑似要素】）
・link 擬似クラス（未訪問リンクスタイル）
・visited 擬似クラス（訪問済リンクスタイル）
・hover 擬似クラス（オンカーソルスタイル）
・active 擬似クラス（アクティブスタイル）
・first-child/last-child 擬似クラス（先頭・最終の子要素指定）
・nth-child 擬似クラス（n 番目の子要素指定）
・nth-of-type 擬似クラス（同一のセレクタを持つ n 番目の子要素指定）
・not 擬似クラス（指定値以外の要素指定）
・first-letter擬似要素（要素の 1 文字目を指定）
・first-line擬似要素（要素の 1 行目を指定）
・before/after擬似要素（要素の直前・直後にコンテンツの挿入）
【参考サイト】
ここまで学んだCSS以外にも様々なCSSがあります。また新しいものも出てきます。ただしブラウザによって使えるタグが異なったり、デバイス依存もあります。OSにも影響もあります。日々変わる業界の動向にアンテナを張っていきましょう。
【ワンポイントアドバイス】
まずはこれまで学んだCSSをしっかりと覚えてまずは、「知る」次に「使う」そしてお仕事で「使いこなす」を目指しましょう。
コツとしては、「自分なりにまとめる」をしっかりと定期的に行うと良いでしょう。
【参考サイト】
・子要素がインライン要素（aタグやimgのように横に並ぶ要素）または inline-blockなら、親要素にtext-align:center;
・ブロック要素（divやpタグのように縦に並ぶ要素）または tableなら、子自身にmargin:auto
・インライン要素でもブロック要素でも関係なく中央寄せする場合は、親要素にdisplay:flexとjustify-content:centerセットで
参考：【CSS】margin:autoとtext-align:centerの違いと使い分け
「text-align: center;」
【aやimgなど横に並ぶインライン要素 または inline-block の子要素】を真ん中に配置するとき、【親要素】に使う
条件 ・親要素に指定する
・親要素に余白がある
・子要素がインライン要素 または inline-block
先生より：余白を文字などの左右に割り振ることで、結果的に文字が真ん中に配置される仕組みのため、余白がない場合は真ん中配置にならない
参考：https://html-css.hamaya2020.com/lesson-5.html#L5-2-3
「margin: 0 auto;（margin:auto）」
【divやpタグのように縦に並ぶブロック要素 または table】を真ん中に配置するとき、【子自身】に使う
条件 ・子自身に指定する
・親と子の幅が一致していない（親のpaddingを除いた幅より小さい）
・子自身がブロック要素（またはtable）
先生より：「margin: 0 auto;（0＝上下、auto＝左右）」の考え方を前提とする
※border・親marginは省略、box-sizing: border-box;（width・height = content + padding + border 領域の合計値）の条件で
例えば親要素がwidth: 600px;、padding: 10px;
子自身のブロック（またはtable）がwidth: 200px;、padding: 10px;、margin: 0 auto;の場合こうなる…？
| 親 左 padding | 親 左 content | 子 左 margin | 子 左 padding | 子 content | 子 右 padding | 子 右 margin | 親 右 content | 親 右 padding |
| 10px | 290px (600-(10+10))/2 | auto 親横幅600px- (親padding10px+10px) ＝580px -子width200px =380px /2=片側190px | 10px | 180px (width:200px-10-10) | 10px | auto 190px | 290px | 10px |
参考：https://html-css.hamaya2020.com/lesson-4.html#L4-5-2
「display:flex
justify-content:center」
【インライン要素でもブロック要素でも関係なく要素】を真ん中に配置するとき、【親要素】に使う
※この場合、インライン要素が改行されると左寄せになるため、改行しても中央寄せにしたい場合は「text-align:center」を使う
