2025/5/13 「ECサイトデザイン基礎⑤【オンライン】」の記録です。
講師：平井先生
ワイヤーフレームからデザインラフへ
ワイヤーフレームをもとに、完成イメージを明確化した「デザインラフ」を作成する。
【1】デザインラフとは？
- ワイヤー：設計図
- デザインラフ：ビジュアルイメージを確認するためのラフ画像
- HTML/CSSに詳しくないクライアントにも「完成形の雰囲気」を伝えるために使う
- コーディングは、デザインラフのOKが出てから行う
【2】制作の順番と考え方
◎基本ステップ
- レイアウト：ワイヤーで決めた構成を視覚化（余白・整列・グループ化）
- 文字：何を画像化し、何をテキストにするか／フォントの選定もここで
- 配色：世界観に合った色でイメージを固める（黄金比：70/25/5）
◎レイアウトの5原則
- 余白（Margin）
- 近接（Proximity）
- 整列（Alignment）
- 反復（Repetition）
- コントラスト（Contrast）
→ 情報の構造・優先度を明確に！
【3】HTML/CSSを意識するデザインラフの注意点
◎サイズと構造
- 横幅：960〜980pxが標準（PC用として）
- セクションごとに h1〜h6 の構造を意識
- hタグの次には必ず本文やリストなどの“内容”が必要
◎要素の分類
- 画像として処理：ロゴ、特殊な文字装飾など
- テキストで処理：本文、ボタン、説明など（SEO＆軽量化）
- imgとbackgroundの違いにも注意（img＝意味ある画像）
【4】文字とフォントの考え方
◎「読みやすさ＝3つの性質」
- 可読性：読んで理解できるか
- 視認性：瞬間的に認識できるか
- 判読性：誤読されないか
◎フォントの種類と使い分け
- ゴシック体：カジュアル・視認性重視（見出し／Web向け）
- 明朝体：品格・伝統的（文章／書籍風）
- デザインフォント：雰囲気・世界観（使いすぎ注意）
- 毛筆フォント：味の演出（強い印象が必要なとき）
【5】配色の考え方とテクニック
◎色の三属性
- 色相（Hue）
- 彩度（Saturation）
- 明度（Brightness）
◎配色のテクニック
- 黄金比：ベース70%／メイン25%／アクセント5%
- 意味と心理効果を考える（例：赤＝情熱／青＝誠実／黄＝注意）
- 色を使わないという選択肢（無彩色の活用）
【6】実制作と提出に向けての注意点
- クライアントに説明が必要な動き（固定ナビ等）は注釈で補足
- セクショニングタグ（header, main, section, etc）はラフ時点では意識程度でOK
- リテイクに強いデータ作り（スマートオブジェクト・レイヤー整理・アウトライン前提）
- 複数提案を出すと良い（文字／配色／レイアウトのバリエーション）
【7】Webサイト制作との違いと今後の展望
- LP＝チラシ／単一ページ
- Webサイト＝パンフレット／複数ページ＋ストーリー
今後必要な要素：
- サイトマップ
- グローバルナビ（メニュー設計）
- 新着情報・CMS（WordPressなど）
- スマホ対応（マルチデバイス設計）
Adobe XDとは？
Adobe XDは、Webサイトやアプリの「プロトタイプ（試作品）」を効率的に作るためのツールです。印刷物に必須のPhotoshopやIllustratorとは異なり、Web制作ではテキストエディタと簡単な画像ツールで事足りることも多い中、XDは「デザインとプロトタイピングの中間」を担う新しい位置づけのアプリケーションとして開発されました。
デザイナーがIllustratorのような感覚で操作できる軽量なツールで、Windows、Mac、iOS、Androidなど、さまざまなデバイスとの連携もスムーズ。プロトタイプをチームやクライアントと共有し、コメントをもらいながら改善していくことが可能です。
操作ステップと機能
STEP1 アプリ起動と作業画面
XDを起動すると、アートボード作成、ツールバー、プロパティインスペクターなどが使える作業画面に入ります。デザインモードとプロトタイプモードを切り替えて操作します。
STEP2 アートボードの作成
Webページやアプリの画面にあたる「アートボード」を自由に追加できます。複数並べることで全体の構成を一望できます。
STEP3 図形の描画
長方形・正方形・円・パスを描くことができ、塗りや境界線、角丸などの調整も可能です。ペンツールでの直線や曲線の描画・編集も対応。
STEP4 アイコンの作成
複数図形を組み合わせて電話アイコンなどのオブジェクトを作成。パスファインダー（合体・型抜き・交差・中マド）を活用して、複雑な形も作れます。
STEP5 テキストの入力
テキストツールで直接キャンバスに打ち込むか、エリアを指定して段落テキストを入力します。Typekitのフォントも利用可能。
STEP6 画像の配置
画像ファイルをドラッグ＆ドロップするだけで簡単に配置できます。図形にドロップすれば自動的にその形でマスクされます。
STEP7 リピートグリッド
リストやカードなど「同じ構造の繰り返し」に便利な機能です。Command/Ctrl + Rで繰り返し設定ができ、間隔の調整や個別コンテンツ（画像・テキスト）のインポートも可能。繰り返しパターン内での個別編集もできます。
STEP8 画面遷移の設定とプレビュー
プロトタイプモードに切り替え、画面遷移やトランジション、スクロール位置の保持、オーバーレイなどを設定します。プレビューで実際の動作を確認可能。
STEP9 共有とフィードバック
作成したプロトタイプはWebリンクで公開できます。クライアントや開発者にコメントしてもらうことも、デザインスペックとして寸法やフォント情報を共有することもできます。Cloudドキュメントでの共同作業にも対応しています。
