2025.11.26 学習記録 ～デザインラフ～

用語

• デザインラフ（デザインカンプ）
  Webサイトの完成のイメージを画像で作成したもの。
  コーディング（HTML・CSSにする）でデザインラフの見た目をそのまま形にすることになるため、実際の完成形通りに作ることが大切！
• レスポンシブデザイン
  ユーザーが閲覧するデバイスの画面サイズに応じて表示を最適化するデザイン。
• ppi
  1インチ当たりのピクセル数。
• dpi
  1インチ当たりのドット数。動画の業界でよく使われる単位。

レイアウト表現の効果

コーディングに向けてのデザインで考えること

見出し（h1～h6）をどうするのかを意識する

見出し（h1～h6）の使い方とルールをしっかり確認しておく。
ページの最初にはｈ１（ページ全体の見出し）が必要。
１ページにh1は一つがSEO的にも解り易い。
h2やh3の構成も大見出し（h1）に対して小見出し（h2以下）という順序と内容を意識して作成する。

どこを画像にするのかテキストにするのか？

画像よりテキストの方がSEO対策やユーザビリティ・アクセシビリティとして有効！
ただし、デザイン重視で表現しなければならない場合は画像にしても間違いではない。
ロゴの部分の文字はデバイス環境によってフォントが変化しては都合が悪い場合もあり、そのような時には、画像文字としてデザインすると良い。
テキストにすればWebサイトは軽くなり、画像が多ければWebページは重くなる。
※サイトの表示スピードは検索順位への評価にも影響する。

配色はデザインラフですべて決定する

コーディングの作業時に色を考えない。
デザインラフの段階で配色は全て決定し、万が一コーディングの時に行うのは応急処置程度の話だと思って準備をすること。

16進数のカラーの表記なのかRGB表記なのかを統一する

コーディングで必要になるため、正確な16進数のカラー「例： #ｆｆ００００」なのかＲＧＢ「例： rgb(255,0,0) 」のコードを控えておくこと。
※コーディングの時は、出来上がったデザインから「スポイトツール」で正確なカラーコードを使う。

透過表現は、RGBAかPNG画像を使うか

透過表現は、CSSで「 例：rgba(255,0,0,0.7) 」という記載方法が使る。
また画像そのものを透過表現する方法として、PNG画像を利用する方法もある。
※RGBAで表現できた方がベター

静止画像なので、補足事項は別途説明する

スクロールしても固定位置にいるナビゲーションやボタン、背景などは1枚の画像で表現が難しいため、言葉で補足が必要。
※最近ではAdobe XDで表現する方法などもある。

リテイク（修正・出戻り・やり直し）に強いデータにする

素敵なデザインが出来るようになるのも大切だが、実務では「リテイクに強い」事も重要なデザイナーの技術として求められる。
「スマートオブジェクト化」し非破壊データの利用、アウトライン化のタイミングなどしっかりと作成をしながら復習しておくこと。

フォントの選び方

オールドタイプ
古くから良いと言われているフォント（オールドタイプ）のフォントは好まれやすく、使い勝手も良く実績豊富だが、にWebフォントに対応していなければ画像文字にしなければならない点に注意。Webサイト時代のフォントでサイト構築を考える必要性も意識すること。

バンドルフォント
バンドルフォント（標準フォント）とは、Webサイトの閲覧者のパソコンやスマートフォンにインストールされているフォント。
OS標準フォントやバンドルフォントなどとも呼ばれる。CSSによって標準フォントを指定することで、どんな環境でもある程度統一された表示が担保されるため、Webサイトの見栄えを安定させることが可能。
デバイスの進化も意識して下記にあるWebフォントを使わない（通信環境依存対策として）場合というのも視野に入れておくこと。

プロポーショナルフォント
プロポーショナルフォントとは、フォント（書体）の分類の一つで、文字ごとに適した幅が設定されたもの。
各文字の表示枠が文字の実際の幅に合わせて調整され、例えば「i」は狭く、「W」は広く表示される。
また同じフォントでも太さやゴシックと明朝等あり、同じルールでデザインされたフォントで様々な表現が可能になるため、積極的に利用すると良い。
※マイクロソフトが開発したメイリオは、CSSで太字と斜体ができない。

Webフォント
Webフォントとは、あらかじめサーバ上に置かれたフォントやインターネット上で提供されているフォントを呼び出し、表示するCSS3から策定された技術。
これまでのWebサイトでは、制作サイドであらかじめ要素ごとに使用するフォントを指定しておき、Webブラウザが各端末にインストールされているフォントを用いて文字を表示させる方法が主流だったが、指定したフォントが閲覧者のPCにインストールされていないと別のフォントが代用されてしまい、作成者が意図しない見え方になってしまう問題があった。その問題の解決策として注目を集めているのがWebフォント。
ただし、昨今ではデバイスに上記にあるバンドルフォントが進化して標準搭載されているため、通信環境に左右される事を考えて使いどころの判断を考えるのもポイント。

フォントは大きく分けて4種類に分類できる

ゴシック体

うろこ（三角形の山）のない書体のことの全般を総称して「ゴシック体」と呼び、もっとも基本的な書体のひとつ。
線の太さが同じで均一なデザイン。

ゴシック体の使いどころ
・見出し
・プレゼン資料
・看板・ポスター
・パソコン、スマホなどのディスプレイ など

ゴシック体のイメージ
親近感、男らしさ、安定感、カジュアル、力強い
・太めのゴシック体…安定感が、元気、力強さ
・細めのゴシック体…洗練された、女性的

代表的な書体
フリーフォント
・源ノ角ゴシック（Noto Sans CJK JP）
Windows
・メイリオ
・游ゴシック
Mac
・ヒラギノ角ゴシック
表情のあるゴシック体
・ヒラギノ丸ゴシック
サンセリフ体（欧文書体）
・Arial

明朝体

うろこ（三角形の山）のある書体。もっとも基本的な書体のひとつ。
明朝体という名前は日本独自の言い方。
中国の宋の時代に原型ができ、明の時代に完成したとされている。

明朝体の使いどころ
・見出し
・新聞
・書籍
・教科書
・文字数が多い文 など

明朝体のイメージ
繊細、優雅、和、伝統、高級
・細めの明朝体…繊細、上品、女性的
・太めの明朝体…大人、固い印象

代表的な書体
フリーフォント
・源ノ明朝（Noto serif CJK JP）
Windows
・游明朝
Mac
・ヒラギノ明朝
表情のある明朝体
・貂明朝
セリフ体（欧文書体）
・ Times New Roman

デザインフォント

明朝体とゴシック体の両方の特徴を持つ書体や、はっきりとしたイメージを打ち出した書体、デザイン的に工夫された書体、微妙なニュアンスを表現した書体など、さまざまな表情の書体がデザインされている。

フリーフォントが多い書体である
ただし、商用利用として規約などしっかり確認する事と企業（会社）として扱って良いかどうか確認が必要。

フリーフォントを使うときに気をつけたいこと
・無料で使用できる範囲はフォントによって異なる
・印刷・ウェブフォント・ゲームに内包・ロゴに使用など目的によっては使えないこともある
・使用する際に著作権表示やリンクなど制作者を明記する必要があるフォントもある

UDフォント（ユニバーサルデザインフォント）について
誰にとっても見やすく読みやすい、ユニバーサルデザインフォント。
遠くからでも見やすく読み間違いがないように、可読性や視認性、判読性が高くなるようにデザインされており、様々な製品や広告などで使われている。

毛筆フォント

毛筆で書かれたような字形を表現するのフォント。 表彰状や年賀ハガキの作成などによく使われる。
ゴシック体や明朝体等よりも自由度の高い表現が特徴。
楷書体、行書体、草書体、隷書体のような伝統的な筆書体フォントのほか、歌舞伎の看板や筋書に使われる勘亭流、相撲の番付等に使われる相撲文字、千社札や提灯
の文字などに使われる籠文字等々、さまざまなフォントがある。

Notoフォント「Noto Sans」「Noto Serif」

源ノ角ゴシック「Noto Sans」と源ノ明朝「Noto Serif」。
世界中の言語をサポートすることを目標にGoogleがadobeと共同開発したフォントシリーズ。
無料で使用可能でWebフォントとしても利用可能。

小塚明朝・小塚ゴシック

アドビのオリジナル和文書体であり、Photoshop や Illustrator などの、アドビ製品に入っている。
ゴシック体はEL～H の6つのウェイトで構成されており アドビの製品に付属するため比較的よく使われる書体でもある。

ヒラギノフォント

画像を多用するビジュアル雑誌への使用を主ターゲットとして開発された書体。
オーソドックスでベーシックな雰囲気を保ちつつ、明るくシャープであり、現代的でクールなイメージ。
有料のフォントでデザイン業界で良く使われている。

UDデジタル教科書体

日本のフォントメーカータイプバンクが2016年に発売した日本語ユニバーサルデザインフォント。
学校教育においてロービジョンやディスレクシアなどの文字を読むことが困難な子供にとって読みやすく、かつ文字を手書きするときの動
きや形が分かりやすい教科書体フォントとして設計された。

メイリオ・MSフォント

Windows Vistaのシステムフォント向けに開発された和文フォント。
デザイン性が物足りないフォントなので使い方に注意。

Adobe Fontsについて

Adobe Creative Cloud のライセンスに含まれるフォント。各種フォントが使い放題な上、WEBフォントも利用可能。
WEBフォントを使えば、指定フォントがインストールされていないパソコンでも全く同じ表示ができる。アクセス数による制限もないためかなり自由に使える。

注意点
WEBフォントでの使用は再販不可！
自社サイトでWEBフォントを使う分には問題ないが、受託して制作したウェブサイトでWEBフォントを利用するのはライセンス違反となる！
受託制作したサイトでWEBフォントを使う場合は、サイト所有者用に別途Adobe Creative Cloud のサブスクリプションライセンスが必要。

文字の見せ方・テクニック

「配色」には必ず意味と目的を！主な色の特徴

• 赤
  熱い、エネルギッシュ、生命力に溢れる。
  勝者、成功者、リーダー、ヒーロー、正義の象徴。
• 青
  清潔感、爽快感、信頼、誠実、平和。
  落ち着いた印象は冷静さや知性の象徴ともなり、テクノロジー系企業やコンサルティングファームのCIカラーなどにもよく使われる。
• 黄
  明るさ、暖かさ、幸福、親しみやすさ、かわいらしさ、子どもっぽさ、愛嬌。
  「ヒマワリ」「レモン」「とうもろこし」といった植物のイメージ、太陽や光の色。
• 紫
  高貴、女性的、優雅、神秘的。
  王や神、宇宙と結び付けられることも。
• 橙
  エネルギッシュ、元気、ビタミン豊富、楽しい、賑やか、ポップ、子供っぽい。
  太陽や柑橘類の印象。夏。食欲をそそる色。
  飲食ブランドのロゴにもよく使われる。
• 緑
  穏やかさ、安らぎ、安全。若さを象徴する色。
  植物。自然、エコ、環境のイメージ。
• 白
  純粋、クリーン、公正、神聖、平和。
  清潔、衛生的なイメージ、
  結婚式ではドレスは白、平和を祈る場では白いハトを飛ばす。
  医療現場や水回りなどでもよく使われる。
• 灰
  落ち着いた、上品、大人っぽい、エレガント。
  先進的でスタイリッシュな印象、鋭く知的なイメージ。
• 黒
  明度も彩度も持たない唯一無二の色。
  硬質、重厚、権威、気高い。
  プロフェッショナリズム、伝統の象徴。
  安定や優秀さの象徴としても。
  他になびかない強く先鋭的なイメージがあり、ラグジュアリーブランドではかなりの頻度で使われる。

配色の心理効果

暖色系
赤色やオレンジ色など、暖かなイメージを与える色のこと。
寒色に比べ、同じ面積・距離の時により大きく、近く見える性質がある。

寒色系
青色や青緑色など、涼しげなイメージを与える色のこと。
暖色に比べ、同じ面積・距離の時により小さく、遠く見える性質がある。

配色テクニックについて

①イメージカラーを使う

Webページのイメージを大きく左右するメインカラーは一番初めに決める。
文字が読みやすいなどの可読性の問題から、明度を低くした色が使用しやすいとされている。
サイトに使うロゴのカラーをメインカラーに使用しているサイトも多い。
※最初の制作はロゴの考案から進めていくことが多いため、そのイメージと配色を上手く活用すると良い。

配色テクニック② 真っ黒（#000）を避けるか否か？

「真っ黒#000(Black)」は目にキツイ、目が疲れるため、デザイン業界では使わないのが基本。
日常生活のなかでも、本当の意味での黒はほとんどない。
ただし、昨今の各デバイスのモニターでは目にやさしく映るように微調整されている場合が多く、
データ（CSSコード）上「真っ黒#000(Black)」が使われている場合も多い。

②色を使わない

ワイヤーフレームやデザインカンプの作成などは白黒で作成することにより、配色イメージに引っ張られずレイアウトデ
ザインを考えることに集中できる。
最終的なデザインでもそれぞれの配色の脇役となる存在として使うことも可能。
「白」「黒」「灰」の「無彩色」を上手く活用すると良い。

③ 美しい配色バランス（3色がおすすめ）

配色の効果は、色相、明度、彩度、分量（面積）、配置によって変わる。
一般的に、色の黄金比率70：25：5（ベースカラー70％、メインカラー25％、アクセントカラー5％）
を使うとバランスの取れた美しい配色になるとされる。

WEBサイト制作の考え方について

サイトマップを考える
「トップページ」「会社概要」「お問合せ」「アクセス」など複数ページでのストーリーを考える必要がある。
まずは「サイトマップ」を用意してみること。

グローバルナビを考える
それぞれのページに「リンク（a）」が必要。
グローバルナビゲーションという存在が重要になってくる。
※昨今ではハンバーガーメニュー（正式名称はナビゲーションドロワー）などが有効。CSS3でも実装可能。

新着情報等の日々の情報提供のコンテンツを考える
そのWebサイトの運営として、ユーザーに対して、常に新しい情報提供をお届けする為のコンテンツ（Webサイトでよく見かける「新着情報」等）を利用する場合がある。
SNSのタイムラインを埋め込んだり、Wordpressを利用し簡易的に更新出来るように、またクライアント（発注者）さま側で、運用できるようにする工夫する事も多い。

スマートフォン対策を考える
PC用のサイトが出来たら、次のステップとして「マルチデバイス対応（スマホ・タブレットへの対応）」を考えるのも大切。

備考・メモ

クライアント（発注者）さまへは複数提案を出して選択肢を用意すること！

解像度（ppi、dpi）と素材のサイズ（px）は連動しない！

画面サイズはどうする？
様々なデバイス（スマホ・タブレット）に対応する必要があるが、まずはPCを基準に考える。
基準とされるもPCのモニターサイズの多くは「1366px」が現在は多く、特に理由がなければ「1280px」を画面サイズの基準として「960px～980px」をコンテンツ幅とすると無難。
※現時点でのＥＣサイトの楽天市場やヤフーショッピング店の推奨サイズは960px～980px。