デザイン無双

トレースだけで終わらない デジタルデザイナー人材の育成

デジタルデザイナーとはなにをする人？

一般的なイメージ

一般的なイメージ

実際にやってること

表層…ビジュアライズ

骨格…実際の画面の下書き。どこになにを置くか

構造…プロダクトの全体図

要件…具体的にどんな機能が必要か

戦略…誰に向けてなにをするのか

表層…ビジュアライズ

骨格…実際の画面の下書き。どこになにを置くか

これらができれば… 構造…プロダクトの全体図

要件…具体的にどんな機能が必要か

戦略…誰に向けてなにをするのか

•

デジタルデザイナーと言えます。

•

儲かります。

•

上流から関われるので、

•

部分的なデザインをするよりもやりがいがある

\ 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.

左側に配置、テキストを入れて完成

こっちもやってみよう。

まとめ •

プロが用いるデザインのレギュレーションがわかった

•

ルールが分かれば案外簡単にできることがわかった

•

これなら自分も稼げるかもしれないということがわかった