2025.04.08
アジェンダ
- デザインラフについて
- HTML/CSSをイメージしたレイアウト考案について
- 制作に向けての準備
- 制作に向けての準備
- 制作に向けての準備
テーマ：コーディングの準備をしましょう
WEBサイト制作の流れ
- ヒアリング、ワイヤーフレーム制作
- デザインラフ制作
- コーディング
デザインラフとは
- WEBサイトの完成見本のこと
- ワイヤーフレームで作った骨組みに画像やテキストを挿入したり色やフォントサイズを指定したりして具体的にデザインする
- ワイヤーフレーム制作前の手書きスケッチ（ラフ）とは別物でデザインカンプと呼ばれることもある
WEBページの作成②
デザインラフを制作しお客様に完成イメージを見せる
制作の順番はデザインの基本通り
「レイアウト」→「文字」→「配色」
- レイアウト
余白：余白を取る
近接：グループ化
整列：揃える
反復：繰り返す
対比：比べる
コントラストで強弱をつける
面積を意識すること - 文字
読みやすさ - 配色
読みやすさを意識しながら作品の世界観を守る
コーディングの注意点①
- 画面サイズ
1280px - コンテンツサイズ
960～980px - 見出し
ｈ1～ｈ6 - 段落
キー、リスト、タグ - 画像
- リンク
- 強調
レイアウト表現・ワンポイントテクニック
- 目立たせたいもの
- ボックス
- ボックス（角丸）
- 罫線
- 点線
- 帯
- アーチ
- 居合
- ハチマキ
コーディングの注意点②
- どこを画像にするか、テキストにするか
- 画像文字かテキストか
- HTMLなら「ing」、CSSなら「background」
- テキストは軽い、画像は重い
フォントは大きく分けて4種類
- ゴシック
源ノ角
メイリオ
游ゴシック
ヒラギノ角
ヒラギノ丸
Arial - 明朝体
源ノ明朝
游明朝
ヒラギノ明朝
貂明朝
Minion Pro - デザインフォント
UDデジタル教科書体
NK-B
NK-R
NP-B
NP-R
六つ子フォント
Wide Latin - 毛筆フォント
フォントタイプについて
- オールドタイプ
印刷物の時代（Webがない時代）からある文字
Web用に開発されてないので使う場合は不向きな場合もある - バンドルフォント
デフォルトフォント - プロポーショナルフォント
同じフォントでも太さなど変えられる - Webフォント
Webブラウザが各端末にインストールしているフォント
主なフォント
- Notoフォント（源ノ角ゴシック・明朝）
- 小塚明朝・小塚ゴシック
- メイリオ・MSフォント
- UDデジタル教科書体
- ヒラギノフォント
フォント制作会社
- フォントワークス
- モリサワ
- ダイナコムウェア
- イワタ
- ブリッジ
文字の見せ方ワンポイントアドバイス
- ドロップシャドウ
- 光彩
- 境界線
- 文字にボックス配置
- 背景を暗くor明るく
- 背景をぼかす
配色のおさらい
- H（色相・Hue）
色味のこと（赤・黄・緑・青・紫） - S（彩度・Saturation）
鮮やか ⇔ くすむ - B（明度・BrightnessもしくはValue）
明るさの度合い 高い（白っぽい） ⇔ 低い（黒っぽい）
コーディングの注意点③
- 配色はデザインラフですべて決定しておく
- 16進数カラー表記かRGBか統一する（もしくは両方か）
「＃ｆｆ００００」など 16進数
「ｒｇｂ２５５．０．０」など RGB - 透過表現はRGBAかPNGか決定しておく
透過表現「ｒｇｂａ２５５．０.０．０.７」ＣＳＳ
複数提案する場合
レイアウト、文字、配色を変更して作成
配色には必ず意味と目的を
- 赤
愛、情熱、太陽、生命、恋（メリット）
危険、怒り、戦闘、破壊、闘争（デメリット） - 青
冷静、誠実、知的、開放感、静寂（メリット）
冷淡、孤独、憂鬱、悲哀、保守（デメリット） - 黄
活発、天真爛漫、無邪気、幸福、軽快（メリット）
危険、緊張、注意、幼稚、希薄（デメリット） - 紫
優雅、高貴、女性的、王、宇宙 - 橙
柑橘、エネルギッシュ、元気、食欲、夏、ポップ（メリット）
子供っぽさ（黄、黄緑、ピンクなども同様）（デメリット） - 緑
自然、エコ、環境、植物、安らぎ、若葉、若さ、安全 - 白
純粋、けがれなし、クリーン、公正、神聖、平和、清潔 - 灰
上品、大人っぽさ、エレガント、都市、金属、先進的、スタイリッシュ、知的 - 黒
硬質、重厚、権威、気高さ、プロフェッショナリズム、伝統、優秀、安定、先進的
配色テクニック①
イメージカラーを使う
・文字の読みやすさなどの関係で明度は低い方が使いやすい
・まずはロゴデザイン考案を先にすることが多いので配色をうまく使う
配色テクニック②
真っ黒（＃000）を避けるか否か
・黒は目にキツイといわれる
・モニター越しなどは今は調整されて目に優しくなっている
配色テクニック③
色を使わない
・無彩色（黒、灰、白）をうまく活用する
配色テクニック④
うつくしい配色バランス（３色が良い）
＊色の黄金比率（70：25：5）
・ベースカラー75％
・メインカラー25％
・アクセントカラー5％
＜配色の種類＞
コントラスト：異なる色同士、メリハリがある
暖色系：赤、オレンジ
寒色系：青、青緑
原色：明確な色合い
ビビットカラー：ハッキリとした色
パステルカラー：中間色、淡い色
やわらかい色
かたい色
興奮する色
沈着する色
軽い
重い
コーディングに向けての注意点
- 静止画なので補足事項は別途説明する
- セクショニングは後回しでもよいことが多い
- リテイク（修正、出戻り、やり直し）に強いデータにしておく
悩んだらデザインの基本から改めて見直していこう
- レイアウト
- 文字
- カラー
WEBサイトについて
- LPは単一ページか複数ページか
- サイトマップを考える
・トップページ
・会社概要
・お問合せ
・アクセス - グローバルナビを考える
それぞれのページに「リンク」を貼る - 新着情報など日々の情報提供のコンテンツを考える
・LP
・新着情報 - スマートフォン対策を考える
フォントサイズの目安
ｈ1 ３２ｐｘ
ｈ2 ２４ｐｘ
ｈ3 １８ｐｘ
ｈ4 １６ｐｘ
ｈ5 １２ｐｘ
ｈ6 １０ｐｘ
項目と項目の間は１００ｐｘ以上は空ける
＼ 最新情報をチェック ／
コメント