トレースだけで終わらない デジタルデザイナー人材の育成
デジタルデザイナーとはなにをする人？
一般的なイメージ
一般的なイメージ
実際にやってること
表層…ビジュアライズ
骨格…実際の画面の下書き。どこになにを置くか
構造…プロダクトの全体図
要件…具体的にどんな機能が必要か
戦略…誰に向けてなにをするのか
表層…ビジュアライズ
骨格…実際の画面の下書き。どこになにを置くか
これらができれば… 構造…プロダクトの全体図
要件…具体的にどんな機能が必要か
戦略…誰に向けてなにをするのか
•
デジタルデザイナーと言えます。
•
儲かります。
•
上流から関われるので、
•
部分的なデザインをするよりもやりがいがある
\ UIトレース /
UIをそっくりトレースすることで、 表層デザイン(ビジュアライズ)に必要な以下のスキルが 学べます。 •
フォント
•
余白やオブジェクトの成立するサイズ感
•
トレンドキャッチ
•
UIデザインのおおまかな流れ
学べる度
表層…★★★★★ 骨格…★★★★☆ 構造…★★☆☆☆ 要件…★☆☆☆☆ 戦略…☆☆☆☆☆
今日のながれ •
いっしょにトレース
•
ひとりでトレース
お題
ワーク
一緒にやってみよう
はじめる前に
8の倍数の法則 •
Full HD, 4kなどディスプレイ解像度の規格
•
マテリアルデザインガイドラインやHIGにおける各種サイズ
•
1バイト = 8ビット
すなわち、コンピューターは8の倍数に支配されている。 それを覚えた上で取り組むと、気付きが多い。
ワーク
1.
Illustratorを立ち上げる
2.
幅414ピクセル, 高さ736ピクセル(iPhone 6/7/8 plusのサイズ)
3.
作成 をクリック
ワーク iOSのアプリでは、システムフォントが用いられる。 システムフォントは、和文が 「Hiragino Sans」。欧文が 「SF Pro Text」。これをいちいち切り替えて使うのは面倒な ので、合成フォントを用いる。合成フォントとは、和文と欧文 で使うフォントを指定できる機能。※IllustratorではHiragino Sansが選択できないので、「ヒラギノ角ゴ ProN」で代用。 1. まずはSF Pro Textをダウンロードする。windowsなどで ダウンロードできない場合は素材フォルダにフォントファ イルがあるのでインストール 2. メニュー > 書式 > 合成フォント 3. 新規 -> 「iOS System Font Regular」という名前にしてOK 4. 漢字、かな、全角約物、全角記号を「ヒラギノ角ゴ ProN」 の「W3」に 5. 半角欧文、半角数字を「SF Pro Text」の「Regular」に 6. 同様に、太字バージョンもつくる。2-4の手順を「W6」 「Bold」にする
ワーク
1.
表示 > ピクセルにスナップ にチェック
2.
ウィンドウ > アートボード > アートボードを選択 > メ ニュー > アートボードを複製
3.
アートボード間の距離を開ける。ツールパネルからアー トボードツールをクリックし、複製されたアートボード を横に移動させ、十分なスペースを持たせる
4.
素材集.zipの「app_store.jpg」を配置する
5.
画像を選択し、変形 -> W: 414px ※縦横比が固定され ている必要あり
6.
左側のアートボードにぴったり配置
OSデフォルトのパーツは、既成品を使う
1.
ステータスバーなどを一からつくるのは時間の無駄なので、 iOS UI Kitなどをつかう
2.
使用したいステータスバーを選択したら、トレースする方に ペーストする
ここからの方針
1.
ページ余白を見つけて、トレースする側のアートボードにガイドを引く(※ガイドは ペンツールなどで線を引き、線を選択した状態で「⌘ + 5」)
2.
まずは配置した画像の上に文字やシェイプを入れてなぞってみる
3.
使用している色や余白がどの程度か判明するので、都度アートボードの外にメモっ ておく。そうすると、ある程度法則が見いだせる
4.
画像の上からシェイプやテキストをなぞっていく。「⌘ + ;」でズーム、「⌘ + -(マ イナス)」でズームアウト。これらを駆使しながら1px単位で詰めていく
5.
アイコンはペンツールでなぞってつくる。慣れてくればすぐいけるが最初はじっく り時間をかけてコピーしていく。また、アイコンをトレースするときは 表示 > ピ クセルにスナップ のチェックを外す(厳密にトレースするため)
374px
ガイドを引く
1.
赤枠がページ全体の余白。この赤枠に囲まれた部分がコンテ ンツ領域。ここをスライドさせることでコンテンツを切り替 えている
2.
まずはここにガイドを引く。ペンツールで、赤枠と赤枠のあ いだに線を引く。「変形」パネルを見てみると、横幅374px だということが分かる。これがメインのコンテンツ幅。
3.
374pxの長方形をつくり、右側のアートボードの中心に配置 する。整列パネルを用いる。「整列」を「アートボードに整 列」に設定したうえで、「水平方向中央に整列」ボタンをク リック。
4.
ペンツール(P)で、配置した長方形の側線に合わせて2本の線 を引く。
5.
引いた線を選択し、⌘ + 5 でガイド化
なぞる、メモる①
1.
トレースしやすい大きなところからなぞっていく。このとき、 トレース元の画像は埋め込んでレイヤーをロックしておく。
2.
右図のように、白で半透明(不透明度50%)のシェイプにする となぞりやすい。拡大して1px単位で詰めていく。
3.
角丸も設定する。見た感じ5pxほどの角丸。メモる。
4.
次はテキストをトレース。文字ツール(T)を選択する。
5.
まずは文字を入力。フォントは先ほどつくった合成フォント。 スポイトツール(i)で文字色をコピー。このとき、文字色をメ モっておく。
6.
1pxずつサイズを調整。また、字間の調整を option + 左右 矢印キー で行う
なぞる、メモる②
1.
同様にして、右図の赤枠部分をトレースしてみる
2.
メモは、①余白サイズ②色について最低限取っていく。
3.
※余白のサイズのとり方…シェイプをつくって、余白ぴった りにしたときのサイズをメモる
4.
なぞったものは、右側のアートボードに移していく
線について
1.
iOSの線は、1pxではない。厳密に言うと0.5px。
マスクをかける
1.
画像部分がただのシェイプなので、画像を配置してマスクを かける
2.
gamecover_1.jpg を配置(メインビジュアル用のカバー)
3.
変形パネルから、縦横比を固定した状態で横(W)380pxに(多 少大きめにしておく)
4.
画像を下に、シェイプを上に配置し、シェイプを基準にして 天地中央で整列する
5.
画像とシェイプを選択し、クリッピングマスクをかける
アイコンをトレースする
1.
表示 > ピクセルにスナップ のチェックを外す
2.
ペンツールで形をとっていく
3.
まずはおおまかに形をとる
4.
1つを残してすべてのアンカーポイントを選択し、スムーズ ポイントに変換。残り一つを選択し、スムーズポイントに変 換
5.
方向線を引っ張りながら形を整えていく
6.
方向線を片側だけいじりたいときは、optionキーを押しなが らドラッグする
7.
ロケットアイコンのように真ん中に穴があくようなものは、 パスファインダーの中マドをクリックすることで実施可能
8.
Appのアイコンは、パスファインダーの「前面オブジェクト で型抜き」を実施することで
9.
出来上がったアイコンはグループ化しておく
全体にマスクをかけ、完成工程に持ち上げる
1.
トレースが完了した状態だと、不要な箇所が見えているので、 アートボードサイズのシェイプをつくり、トレースしたオブ ジェクトをすべてグループ化した状態でマスクをかける
2.
背景に白を置く
3.
新しくアートボードを作成する。1280 x 720
4.
背景にグラデーションを敷く(左: #C1591D, 右: #BA1E1D, 角度 -45°)。※ビビッドな隣接色同士でグラデーションをか けるのがトレンド。
5.
トレースしたUIを均等に配置し、シアーをかける。シアーは 水平に-20くらいでOK
6.
画面にドロップシャドウをかける
7.
左側に配置、テキストを入れて完成
こっちもやってみよう。
まとめ •
プロが用いるデザインのレギュレーションがわかった
•
ルールが分かれば案外簡単にできることがわかった
•
これなら自分も稼げるかもしれないということがわかった