Adobe XD　初日

目的

ワイヤーフレーム、デザインカンプの作成

【参考イメージ確認：リンク】Wireframe Showcase

フォトショ等は重いので、ワイヤーフレーム等の作成にはXDが軽くて最適

Chapter１：XDの基本

Adobe XDとは・・・UI/UXデザインツール

UI：ユーザーインターフェースの略
　　ユーザーが、見たり触れたりして接する部分のこと

UX：ユーザーエクスペリエンスの略
　　ユーザーが、ひとつの製品・サービスを通じて得られる体験

プロトタイプ・・・モック（試作品）

ｖ：選択ツール、ｚ：虫眼鏡、スペース：手のひら

Chapter２：新規ファイルの作成

新規ファイルからデザインカンプを制作する場合、
あらかじめ横幅のサイズ（PCの画面幅）は決めてから制作する
　※後から変更は可能ですが、ちゃんと決めてから制作を始めること

ファイル名は半角英数でつけるのがベスト

• アートボードのサイズを決める
• アートボードに名前を付ける
• 移動して制作しやすい配置にする
• グリッド（レイアウト、方眼）を使用してガイドをつける
• アートボードガイドを表示してオブジェクトを正確に配置できるようにする

Chapter３：レイヤー

上に表示されているものが「前面」
下に表示されているものが「背面」に表示される

• 一覧上でレイヤー位置を変えることで「前面」「背面」が入れ替わる
• レイヤーに名前を付けることで編集したいレイヤーを見つけやすくなる
• グループ化して書くオブジェクトの属性や位置を変えずにまとめて移動や
  変形（拡大・縮小等）の処理ができる

Chapter４：シェイプ・色

Webサイトのコンテンツ枠やボタンなどに使用されるシェイプ（図形）を作成できる

Chapter５：テキスト

①ポイントテキスト（任意の位置へのテキストの入力）
　ボタンデザイン、ロゴなどの短い文字列を追加する
　自動で折り返されない

②エリア内テキスト
　複数の段落で構成されたサイト内の文章など
　エリア内で自動で折り返される

【フォントについて】

Webページでは「画像化されている文字（以下画像文字）」と「HTMLで書かれたテキスト（以下テキスト）」がある。基本的に「テキスト」を使用する

画像文字は

• 画像の上に乗せる文字
• 目立たせたい箇所に使うようにする

	画像化された文字	HTMLで書かれたテキスト
メリット	好きなフォントを利用できる 画像内の好きな位置に配置できる	使えるフォントに制限がある ※Webフォントの範囲で好きなフォントを利用できる 簡単に修正できる スマホ等の画面の小さな端末でもサイズを変更して表示できる
デメリット	サイト表示が遅くなる 修正時に画像を再度作成しなければいけない スマホ等の画面の小さな端末で見づらくなる 拡大すると表示が粗くなる	基本的に閲覧者のPCにインストールされているフォントのみ 好きな位置に配置するのが難しい 閲覧者の環境で書体が変わる
使いどころ	画像の上にのせる文字 目立たせたい見出し	通常の文章 更新頻度の高い文字

【フォントのインストール】Google Fonts

Chapter６：リピートグリット

Webサイトのデザイン中に同じオブジェクトを複数作るケースがある
「リピートグリット」機能では、同じオブジェクトを繰り返し作成でき、スタイルを変更すると、その変更も反映される