５月１３日
デザインラフ作成のステップ
制作の順番はデザインの基本通りです
1.レイアウト:
・ワイヤーフレームで検討したレイアウトをさらに具体化します
・「余白」「グループ化」「アクセント」を意識します
2.文字:
・Webサイトとして、どこを画像にするか、どこをテキストにするかを考えます
・「読みやすさ」を徹底的に意識してフォントを選び、配置します3.配色:
・サイト全体のイメージを左右する配色を検討します
・「読みやすさ」を維持しつつ「作品の世界観」を守れるように色を選びます
レイアウトデザインの基本
・ 目的:情報の明確化。情報の構造や関係性を分かりやすく整理することです
・5つの基本原則:
・余白をとる
・揃える
・グループ化する
・強弱をつける
・繰り返す
コーディングに向けての注意点①
・画面サイズ: PCを基準に考え、一般的なモニターサイズ（1366px）を考慮し、コンテンツ幅を960px～980px程度にすると無難です
・見出し（h1～h6）: ページの最初にh1（ページ全体の見出し）を配置し、h2以下は階層構造を意識して使用します。SEO的にも1ページにh1は一つが推奨されます
・見出し後の構成: 見出しの直後には、その内容を説明する段落（p）やリスト（ul/li、ol/li）などを配置します
・インライン要素**: 画像（img）、リンク（a）、強調（strong, em）などのタグは、見出しや段落などの内側（インライン要素）に配置することを意識してデザインします
レイアウト表現・ワンポイントテクニック
・ボックス: 文章や他と差別化したい箇所に効果的。角丸にすると柔らかい印象に
・罫線・点線: 見出しや区切りに使用。見出しから段落への繋がりを表現できます
文字デザインの基本
「読みやすさ」は、可読性、視認性、判読性の3つの要素で構成されます
・視認性:遠くからでも文字が認識できるか。ゴシック体は視認性が高い
・可読性:パッと見た瞬間の認識しやすさ。文章では明朝体の方が可読性が高いとされるが、Webの画面解像度も考慮が必要
・判読性: 誤読がないか。文章の意味が正確に伝わるかどうか
コーディングに向けての注意点②
・画像 vs テキスト:SEO、ユーザビリティ、アクセシビリティの観点からはテキストが有利。CSSで表現できるデザインは積極的にCSSで。デザイン重視の場合は画像も可
・画像文字 vs テキスト: ロゴなどフォントの変化を避けたい場合は画像文字が有効
・ vs background:
はHTMLの文法として意味が必要。backgroundはCSS。用途を考えて使い分ける
・Webサイトの重さ: テキストが多いほど軽く、画像が多いほど重くなる。SEO対策として表示速度は重要
フォントについて
フォントは既にデザインされたもの。方向性や目的に合わせて選びましょう
・4つの分類: ゴシック体、明朝体、デザインフォント、毛筆フォント
・歴史と選び方: Webの歴史と印刷業界の歴史の違いを意識。オールドタイプは実績があるがWebフォント非対応の場合も。Webサイト時代のフォントも検討
・バンドルフォント: OS標準フォント。CSSで指定することで表示を安定化
・プロポーショナルフォント: 文字ごとに幅が異なるフォント。メイリオはCSSで太字・斜体が不可
・Webフォント: サーバー上のフォントを呼び出して表示。閲覧環境に左右されない。再販不可などの注意点あり
・代表的なフォント: 各書体の特徴と用途、代表的なフォント名（源ノ角ゴシック、メイリオ、ヒラギノ角ゴシック、源ノ明朝、游明朝、Times New Romanなど）の説明
・UDフォント: 誰にとっても見やすく読みやすいフォント
・フリーフォント: 商用利用の規約などを確認して利用
・フォント制作企業: フォントワークス、モリサワなど
配色デザインの基本
色の心理的三属性：
・色相(Hue): 赤、黄、緑、青、紫などの色味
・彩度(Saturation): 色の鮮やかさの度合い
・明度(Brightness/Value): 色の明るさの度合い
・グラデーション: 「陰影」と「柄」を意識して使い分ける
コーディングに向けての注意点③
・配色決定: デザインラフの段階で配色を全て決定
・カラーコード:16進数（例：#ff0000）かRGB（例：rgb(255,0,0)）の表記を統一して控えておく
・透過表現:RGBA（例：rgba(255,0,0,0.7)）を使うか、PNG画像を利用するかを決定
・複数提案:クライアントに複数のデザインラフを提案し、選択肢を用意する
・配色の意味と目的**: 色には意味がある（例：赤は止まれ、青は進め）。目的を持って配色を考える
・代表的な色の印象:赤（情熱、危険）、青（冷静、孤独）、黄色（活発、危険）など
配色テクニック
・イメージカラー:Webページの印象を左右するメインカラーを最初に決める。ロゴの色をメインカラーにすることも
・真っ黒(#000)を避けるか: 純黒は目にキツイ場合がある。モニターの調整も考慮して判断
・色を使わない:白、黒、灰色（無彩色）を効果的に使う。ワイヤーフレームやデザインカンプは白黒で作成するのも有効
・美しい配色バランス: 基本3色を「70%（ベースカラー）：25%（メインカラー）：5%（アクセントカラー）」の比率で配色するとバランスが取れやすい
コーディングに向けての注意点④
・補足事項: 静止画像のデザインラフでは表現しきれない要素（固定ナビゲーションなど）は言葉で補足する。Adobe XDなどのツールも活用できる
・セクショニング: デザインラフの段階でセクションタグ（header,
nav, main, section, footerなど）を意識するのは後回しでも良い。囲っている箱として捉えておけばOK
・リテイクに強いデータ: スマートオブジェクトの利用など、非破壊編集を心がける
・魅力的なデザイン: おしゃれな画像文字、美しい写真、かわいいイラストなども効果的に使用する。ECサイトなど媒体によっては画像中心になる場合も
Webサイトについて
・LP vs Webサイト:単一ページか複数ページかの違い。複数ページの場合はより複雑なストーリーが必要
・Webサイトで必要なもの:
1.サイトマップ: 複数ページの構成図
2.グローバルナビ: 複数ページへのリンク。ハンバーガーメニューなども
3.新着情報: 日々の情報提供コンテンツ。SNS埋め込みやCMS利用も検討
4.スマートフォン対策: マルチデバイス対応も重要STEP②デザインラフ
コーディングを意識したデザインラフを作成しましょう
今後の課題：ワイヤーフレームからのデザインラフ！しっかり前準備していきたいです。
コメント