デザインラフとは？
受講日：2025年05月13日
デザインラフとは
- ヒアリング・ワイヤーフレーム制作→デザインラフ制作→コーディング
- コーディング（HTMLとCSS）を知らない人に見せるもの。
- HTMLとCSSでコーディングした時と同じ見た目のモノを作成する。
- コーダーは、デザインラフにどれだけ見た目が近いものをコーディングできるか(＝再現性)が求められる。
デザインラフ作成までの流れ
- 最初はしっかりと「レイアウト」を考える。（ワイヤーフレーム）
「余白」「グループ化」「アクセント」を意識。 - 次に「文字」に注目。（デザインラフ）
「読みやすさ」を徹底的に意識。 - 最後に「配色」を見てみましょう。（デザインラフ）
「読みやすさ」を維持しつつ「作品の世界観」を守れているか。
配色の黄金比：ベース70%・メイン25%・アクセント5%
- リテイクに強い構成を意識する。
- コーディングを意識したデザインラフを作成する。
レイアウトデザインのおさらい
レイアウトの目的は情報の明確化
情報の整理とは、情報の構造や情報同士の関係を明確にすること。
盛り込みたい要素（情報）について、各要素の従属関係（親子にあたる関係）・並列関係（対等な関係）、さらには情報の優先度や因果関係なども明確にすることで、情報が「伝わりやすく」する。
レイアウトの５つの基本原則
- 余白をとる
全体の圧迫感をなくすために、紙面に「余白」をとる。 - 揃える
- グループ化する
従属関係・並列関係を明確化するために、各要素を「揃え、グループ化し、強弱をつけ」る。 - 強弱をつける
強弱をつけることで、優先度も明示させる。 - 繰り返す
一定のルールの下で、広告全体を通じて５つの法則を守り続け「繰り返す」ことで、従属関係・並列関係がより明確になる。
フォントについて
フォントの種類
フォントは大きく分けて4種類に分類できます。
- ゴシック体
使い所：見出し・プレゼン資料・看板・ポスターパソコン、スマホなどのディスプレイ など。
印象：親近感・男らしさ・安定感・カジュアル・力強い - 明朝体
使い所：見出し・新聞・書籍・教科書・文字数が多い文 など。
印象：繊細・優雅・和や伝統・高級 - デザインフォント
明朝体とゴシック体の両方の特徴を持つ書体や、はっきりとしたイメージを打ち出した書体、デザイン的に工夫された書体、微妙なニュアンスを表現した書体など、さまざまな表情の書体。 - 毛筆フォント
使い所：筆で書かれた日本語フォント。
印象：力強さ・伝統・和風・勢い
フリーフォントの注意点
主なフォントの特徴
- Noto フォント
無料で使用可能でWebフォントとしても利用可能。様々なプロポーションに対応した書体。 - 小塚明朝・小塚ゴシック
アドビのオリジナル和文書体。 - ヒラギノフォント
画像を多用するビジュアル雑誌への使用を主ターゲットとして開発された書体。 - UDデジタル教科書体
日本語ユニバーサルデザインフォント。学校教育において文字を読むことが困難な子供にとって読みやすく、かつ文字を手書きするときの動きや形が分かりやすい教科書体。 - メイリオ・MS フォント
デザイン性が物足りないフォントなので使い方に注意。
フォントを制作している主な企業
- フォントワークス株式会社
- 株式会社モリサワ
- ダイナコムウェア株式会社
- 株式会社イワタ
- 株式会社ブリッジ
5月14日 実習日の課題
受講日：2025年05月14日
今日の授業でやった事
- 前回の授業で作成したワイヤーフレームを基にデザインラフを作成する。
- 作成にあたり、XDを使用する。
作品について
- 作成時間 ：4時間
- サイズ ：幅1280×高さ4820ｍｍ
- 使用ツール：Adobe XD
XDを使用した感想
良かった事
- オブジェクトに画像を埋め込みして、ダブルクリックすると、画像の表示位置を調整できるのが便利だった。
- ガイド間の距離が表示されるので、ガイドラインを引きやすく感じた。
注意したい事
- psd→xdは編集可能だが、xd→psdはできないので注意が必要だと思った。
- XDはPhotoshopやillustratorにない便利な機能も多いが、Adobeがアップデートを終了しているという点は気を付ける必要がある。
- 1つのオブジェクトを選択すると、それと同じグループに属するオブジェクトが全選択されるので、間違えて動かしたくないオブジェクトの位置をずらしてしまいそうになる。
