【要参考】
・【STEP4】Webページの制作「各デバイス検証.pdf」参考
スマホによる実機検証は、新しく開発したアプリやWebサイトを利用者が実際に使う端末機を使ってテストを行うことで、問題や不具合を発見し、品質を向上させるもの。 世にWebサイトやアプリをリリースするための重要な作業の一つです。
【ワンポイントアドバイス】
サイトが出来たら、出来る限りの実機検証を行ってみましょう。
実機でしかないバグや見た目の違いが多くありますので、サイトが一通り形になったら実機検証を出来る範囲で行ってみましょう。
【参考サイト】
・デベロッパーツールを同じウィンドウに表示させた状態で、画面幅を上下左右にスクロールすると、画面上に現在のサイズが表示されるので、ブレイクポイントの確認をするのに便利
【要参考】
・【STEP4】Webページの制作「各ブラウザ検証.pdf」参考
ブラウザとは、インターネットを介してホームページ（Webサイト）をパソコンやスマートフォンで閲覧するためのソフトウェアのことです。 Webブラウザとも呼ばれ、Chromeやsafari、Internet Explorerなどが有名です。
【ワンポイントアドバイス】
サイトが一通り形になったら特に使用する可能性の高いブラウザは必ず確認しましょう。
【参考サイト】
各ブラウザでそれぞれ表示方法などが違う（＝ユーザーエージェントスタイル）ため、デザインが崩れることを防ぐために、サイト制作時には、各ブラウザでの表示やタグの対応状況を確認する（クロスブラウザ対応）が必要になる。
chromeとIEまたはFirefoxが主流で、受注する際には最初の契約時にどのブラウザに対応するようにするか決めて契約するとのこと。
・Can I use
ここでHTMLやCSSで非推奨タグを使用していないかをチェックできる。（mdn web docsもおすすめとのこと）
それぞれのブラウザーがバージョンごとに並んでいて、現行で主流のバージョンは中央段のベージュで囲まれたバージョン。
主流バージョンの1つ前のバージョンまで緑色（OKサイン）なら問題ないが、黄色になっていたら注意。
黄色のコメントで「with prefix」となっていたら、ベンダープレフィックスを付ければOK。
【ベンダープレフィックス】→先頭に付ける-moz-や-webkit-など
新しいCSSなど、採用予定の機能が各ブラウザで先行実装された際、それらの機能を動作させるには、 現状ではプロパティや値の先頭に-moz-（MozillaのFirefox向け）や-webkit-（Chrome、Safariなど向け）などのベンダープレフィックスを付ける必要がある。
ただし、ベンダープレフィックスは、 草案（Working Draft）が勧告候補（Candidate Recommendation）になったときには外すことが推奨されています。 すでにGoogle ChromeやFirefoxなどのブラウザでは、CSS3の機能の一部がベンダープレフィックス無しで動作するようになっています。 また、新しいブラウザではベンダープレフィックスが付いていると、逆に動作しなくなっている機能もあります。
ベンダープレフィックスを付けないと現状では動作しないプロパティや値を指定する際にも、 今後の仕様策定の進展やブラウザのバージョンアップに備えて、 ベンダープレフィックス無しの指定を併記しておくほうが良いでしょう。
（参照：https://www.htmq.com/csskihon/603.shtmlより）
・必ずバックアップをとる！
フォルダーごとコピーするとimagesフォルダーもコピーされ容量が圧迫されるので、以下の方法がおすすめとのこと
①フォルダー内で、html・cssファイルをコピペ
②コピペデータ名を前日日付「index_0405.html」など付けて別名保存
③「index.html」「style.css」などの名前はずらさないように（リンクされているので）して毎日バックアップ
※「以前のデザインが良かった」などの直しもあるので、日ごとに必ずバックアップをとる
・レイアウトシフトの回避
レイアウトシフトとは、Webページがロードされる時に画像のスペースが確保されず、画像が表示された時にその分レイアウトがずれてしまうこと
imgタグ使用時は注意し、imgが表示されるまでの枠を確保するように設定する
参考：imgタグのwidthとheightを省略したらダメ！ 画像によるレイアウトシフトを回避する最近登場した2つの優れた解決方法 | コリス
・【手順】
手書きラフ→ワイヤーフレーム→デザインカンプ作成→PC版作成
PC版の制作がひと通り出来たら、
・レイアウトシフト漏れがないかチェック
・クロスブラウザ対応（+非推奨タグチェック）
・レスポンシブデザイン対応 が必要になる。
【要参考】
・【STEP4】Webページの制作＞「WEB動画基礎20220818.pdf」参考
・SNSの埋め込み方 参考
Web動画とは、WebサイトやYouTubeチャンネルなど、オンラインでの視聴を想定した動画全般を指します。 「Webムービー」と呼ばれることもあり、目的はブランディングや商品・サービスのプロモーション、広告配信など多岐にわたります。
WEBサイトに動画を埋め込む方法は２つあります。
①iframeタグを使用する（youtubeなどの動画サイトから読み込む）
②videoタグを使用する（動画ファイルをアップロードして読み込む）
記述例 <iframe width="410" height="200" src="https://www.youtube.com/embed/9No-FiEInLA" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen>
記述例 <video src="sample.mp4"></video>
【参考サイト】
【SNSの埋め込み方】
【要参考】
・【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が作れる方が就職には有利だから
