訓練日誌-2024/2/20（デザインラフについて）

デザインラフにつてい
コーディングについて
フォントについて
Webサイトについて

デザインラフについて

デザインラフとWebページは全く一緒になるように作成すること
フォントやカラーもコーディング時と同じものを使用すること

コーディングについて

デザインラフと全く一緒になるように作成すること
＜制作手順＞
１．レイアウトを考える・・・デザインの９割がレイアウトで決まると言われるほど重要
２．文字フォント・・・見やすいことが最重要
３．配色・・・作品の世界観を作り出す、選んだ配色に意味を持たせること　３色仕様が良いと言われている、カラーで迷ったときはカラーパレットと検索すると良い
　　　　　　　色の黄金比率　ベースカラー70：メインカラー25：アクセント5

＜ポイント＞
・画像サイズ・・・PCのモニターサイズの多くは１３６６ｐｘなので、１２８０ｐｘを画面サイズの基準として「９６０ｐｘ～９８０ｐｘ」をコンテンツ幅が無難
・見出し・・・h１タグは１サイトに一回が良い　使用する場所はロゴに使用するのが良い　h１タグにimgで挿入する　その際altで会社名入れるの忘れずに
・テキスト構成・・・「見出し→pタグやul li ol li→img」などの順で構成する　

＜注意点＞
・画像にするのかテキストにするのか？・・・テキストの方がSEO対策やユーザビリティ・アクセシビリティとして有効なため、出来るだけCSSで表現
・画像を背景にするのか添付するのか？・・・背景にするとGoogle検索でヒットしないので、どこをどっちにするのか考えること
・リテイク（修正/出戻り/やり直し）に強いデータにしておくこと

フォントについて

大きく分けて４種類
・ゴシック体・・・noto sans（見やすい）、ヒラギノ（Mac 見やすい）、游ゴシック（Windows 　おしゃれ）、UDフォント（お堅いHPに使用される）、MSゴシック（ダサい）
・明朝体・・・源ノ明朝（Noto serif）、ヒラギノ明朝（Mac）、游明朝（Windows）、貂明朝（表情がある）
・デザインフォント・・・誰にとっても見やすく読みやすいユニバーサルデザインフォント（UDフォント）UD デジタル教科書体 NK-R、Wide Latin
・毛筆フォント・・・表彰状や年賀ハガキの作成などに使用される

フォントを制作している主な企業（有料）
・フォントワークス株式会社
・株式会社モリサワ
・ダイナコムウェア株式会社
・株式会社イワタ
・株式会社ブリッジ

文字が見えにくいのはダメ！
文字の見せ方
・ドロップシャドウ
・光彩
・境界線
・ボックス
・背景を明るく・暗く
・背景をぼかす

Webサイトについて

ランディングページとの違いはページが単体なのか複数なのか。です
Webサイト作成で必要なもの
・サイトマップを作成する（「トップページ」「会社概要」「お問合せ」「アクセス」などの構成）何ページかによって見積もりを変える
・グローバルナビを考える　※一番クリック率が高い場所
・新着情報を常に更新するために、コンテンツを考える
・スマホ対策を考える　（ぢんな配置にするかなど）