初心者から始めるアプリデザイン<UI/UXデザインをFigmaで学ぼう!>Webデザインにも応用可能
Udemy
Shunsuke Sawada
動画:13.5時間
目次:
セクション1: はじめに
セクション2: 初めてのFigma
セクション3: Figmaの基本
セクション4: UIデザインとFigmaの応用テクニック
セクション5: より良いデザインの管理
セクション6: アプリ画面の作り込み 1
セクション7: アプリ画面の作り込み 2
セクション8: 高品質なプロトタイピング
セクション9: アニメーションによる豊かな表現力
セクション10: プラグインを使った作業効率化
セクション1: はじめに
2023/5/31 14:28
アプリの作業工程(★は、この講座でフォーカスする工程)
企画: 目的:だれのために、どんなものをつくるのか
★デザイン:見える化する
★検証:ユーザーが求めたものか、確認する
★実装:実装。この講座では「実装=エンジニア」。
改善:機能の改善、追加など
「検証をなるべく先に持ってくる」のが有益
なぜ figma で綿密にデザインするのか?
ユーザーヒアリングをレベル高く行うため。
講座の流れ:
Figmaの基礎と応用
アプリ画面の作り込み
プロトタイピング
教材
アセット(画像ファイル集)
figma上のサンプル
自分のfigmaアプリにダウンロードして改造が可能
デスクトップ版figmaを入れる
インターネット環境に依存した機能があるので、オンラインでやろう!
キーワード
ユーザーフロー:ユーザーの画面遷移ルート
figma
figma Mirror(現在はfigma)
figmaで作ったモックを、iPhone実機で確認できる
ウェブ版、ダウンロード版がある
ダウンロード版おすすめ。パフォーマンスが良い。
AppStore
いわゆる「アップルストア」
figmaで、AppStoreに載った状態をシミュレーションできる
インタラクション
「ユーザーにどんな操作(触感)を体験させるか」。クリック、スワイプ、アニメーションなど。
2023/5/31 14:48
セクション2: 初めてのFigma
2023/5/31 14:51
Figmaのセットアップ、ツールとしての使い方
figmaのアカウント、neji(Google連携)で作った
フォントの追加方法
Apple Developers からダウンロード
SF Pro をインストール
Google Fonts から選んで入れるのも良い
SF Pro : Apple製フォント
20ポイント以上は SFPro Display を使うと良い
16ポイント以上は SFPro Text を使うと良い
源ノ明朝:Adobe製フリーフォント
とりあえず入れる
GoogleFont:いろいろ落とせるのでオススメ
フリーフォント:いろいろある。利用規約はちゃんと読んで使うこと
Roboto : Google製フォント
フォントのセオリー:
複数のフォントを混合してつかう、はしない!
SF なら SF、Roboto なら Roboto で統一
日本語も、Hiragino なら Hiragino で統一
逆に言うと、言語ごとにフォントをちゃんと選ぶ
?フォントって、リリースしたらどういう経路でクライアントに反映されるんだ?
アプリなら、フォントファイルがバンドルされる?
キーワード:
スケッチ: figmaの競合アプリ。figmaより先発。
デザインファイル:figmaに載っている「デザインのファイル」。チームで共有できる。
ファイルの種類/名称:
designファイル:本命の、アプリデザインファイル。
figjamファイル:最近の機能。コラボレーション用ファイル。
フレーム:
アートボードとも。アプリデザインの土台。メニューの井戸アイコンから作成。
テンプレート用意されている。iPhone11用、など。
figma内の構成:
Team > Project > File > Page
ファイルへの共同編集者は無制限で追加できる
無料プランでは、プロジェクトを1つまでしか作成できない
無料プランでは、ファイルを3つまでしか作成できない
ドラフトファイルなら無制限に作成できる
無料プランでは、ページを3ページまでしか作成できない
ドラフトファイルの中でなら無制限にページを作成できる
Draftファイル:
Draftではオーナーのみが編集できる。他のユーザーは読み取りのみ。
Draftで作成 > 完成したらチームのプロジェクトに追加、がチーム利用時のセオリー
2023/5/31 15:08
2023/5/31 16:53
セクション3: Figmaの基本
7. figmaの基本操作
2023/5/31 18:41
キーワード:
移動
スペースキー+トラックパッド、で画面そのものの位置を移動できる
CSSで見られる!
四角を置く > インスペクト > CSS 、で、作成したパーツのCSSコードが見られる(Sketchにはネイティブでは無い)
円→パックマン→C型、と簡単につくれる
三角→頂点数の変更、で多角形を書ける
サイズ変更:ちゃんと「Scale」ツールを選んでから図形/テキストをD&Dすると、テキストサイズも変更できる。
図形の回転:Shiftキーを押しながら回転させると、グリッド(15度)に回転出来る。
反転:図形を選んで ShiftH で水平方向、ShiftVで垂直方向に反転。
8. 図形をまとめる方法の違い
グループ化:Cmd+g 解除/Cmd+Shift+g
グループコピー:グループを作り、グループ選択>Option+ドラッグ、でグループ単位で複製ができる。
Shiftを押すと、水平/垂直に移動できる。
結合:図形のくりぬき、加算、交差のみ抽出、等できる
flattenSelection:結合関係にある要素を決定し、1つの要素にする。
Frameの作成:複数要素を選択し、Option+Cmd+g。
Frame:グループの「高機能版」みたいなもの。
Frameと他の要素を重ね合わせて、Frameの矩形で切り抜いたり。
Frameの中をグリッドレイアウトにできたり。
理由無いのであれば「グループよりFrame」でいいのでは。
9. 立方体を書く
図形(四角)を置いた後、図形を選択してリターンキーを押すと、頂点が選択できるようになる。(頂点編集モード)
上の頂点2つを選択してスライドさせれば、平行四辺形になる。
10. カスタムシェイプを書く
ペンツールで多角形を自在に書ける。
ペンツールでクリック後、ドラッグさせるとベジエ曲線になる。
多角形を書いた後、頂点編集モードで「一辺だけ消す」「もう一度ペンツールでパスを閉じる」が可能。
11. ベジェ曲線を書く
ベジェの書き方は↑の通り。
ベジェの「ポイントのハンドル2点」について、角度ミラー、角度と長さミラー、別個、を指定できる。
12. テキストを追加する
テキストボックスは「サイズを固定する」を指定することで、折返しモードにできる。
源ノ明朝フォント(Adobeのフリーフォント)、オススメ。
13. テキストのアウトライン化
テキストを入力>選択>"Outline Stroke"(cmd+shift+o)を実行 すると、フォントをベクター画像に変換できる。
ベクターは、もちろん加工できる
ベクターからテキストに戻すことは、もちろんできない。
テクニック:ベジェ等で絵を書き、線を太くして、それからアウトライン化することで、2重円など作れる。
14. 最適な画像サイズ
例えば 画像1枚 3.2MB は重い!軽くしてから使う。
15. 画像を読み込んで使用する
”PieceImage" から画像を選択し、オブジェクトに貼り込むことができる。
「画像を配置する」ではなく「すでにある矩形図形に画像を貼り込む」イメージ。塗りつぶしの一環。
複数の画像を手元に持ち、3の矩形に順に貼り付けていく、が可能。
16. 画像オプションを変更する
画像の色調選択、右ペインからイメージを選択することで可能。
画像にフィルタをかけられる。ブラーなど。
マスクを使って画像を切り抜くことが可能。
ブラーで境界線がボケた場合、矩形を重ねてマスクすると、輪郭をくっきりに戻せて便利。
画像のタイル配置(敷き詰め配置)が可能。
17. 塗りオプションを使う
塗りには、グラデーション、放射、円錐、などのパターンを指定できる。
図形を重ねた場合、上側の図形をブレンドモード指定できる。(オーバーレイ、乗算、など)
18. よく使うスタイルを登録する
図形に施した設定(塗りつぶし、線の太さetc)を「スタイル」として登録できる。
CSSのクラスみたいなもの
Fill、Stroke、Effects、の3種類でスタイルを管理する。
複数のスタイルをグルーピングできる
2023/5/31 20:16
2023/5/31 20:41
19. コンポーネントとインスタンス
複数要素を選択して Cmd+Opt+K で、コンポーネント化出来る。
コンポーネントを複製したものをインスタンスと呼ぶ。元のコンポーネントを「マスターコンポーネント」と呼ぶ。
マスターコンポーネントの設定を変更すると(例:テキストを中央揃え)、インスタンスがそれに追従する。
インスタンスを選択し インスペクト>Gotoマスターコンポーネント を選ぶと、マスターがわかる。
コンポーネントは自動で「Assets」に登録されるので、そこからD&Dでインスタンス追加、が容易にできる。
20. オートレイアウト
フレームを作り、右ペインから AutoLayout を選択する。
そのフレームが AutoLayout に登録される。
フレームの中身(テキスト)を変更して溢れた際、自動でフレームのサイズを拡大してくれる。
21. 制約、コンストレイント
フレーム内の要素(div的な)を選択し、右ペインのConstraintで「フレーム内での位置」を指定する
フレームのサイズ、アスペクトを変更したとき、自動で内部要素がConstraintで指定した位置を取る
レスポンシブデザインに便利!
22. オブジェクトを効率的に整列させる
コンポーネントを一つ作り、いくつか複製させる。
それらをまとめて選択する。
選択範囲の右下に「整列のアイコン」が出るのでクリック。(あるいは右ペインの一番右上アイコン)
いいかんじ、に整列してくれる。
整列が効いている範囲では、要素Aと要素Bの位置を入れ替え、ができる(要素の中央に出るピンク点をドラッグ)
23. 画像をエクスポートする
フレーム全体を書き出す方法
右ペイン下のExportを押せばOK
要素単体を書き出す方法
エレメント単体を選択してExportを押せばOK
解像度の選択がコツ。試して慣れる。複数の解像度を一度に出力すること可能。
Export時、例えばコンポーネントにシャドウエフェクトがかかっていると、シャドウも込みで出力されるので注意。
24. 複雑なオートレイアウト
セクション3の総括
サイズ変更に強いカードコンポーネントをデザインする。
2023/5/31 21:29
セクション4: UIデザインとFigmaの応用テクニック
2023/6/1 11:34
25. イントロダクション
セクション4では、実際にアップストアを作るよ!
26. フレームとエレメントの追加
フレームを使ってスクリーンを定義していく
ピンチアウト
Option + Drag でコピー
!レッスンでは、png画像の模写をFigmaでやっている。
Figma使う人は、てっきり「最初からFigmaで」作りだすものと思っていた。レッスンだからあえて、かな?
27. グリッドとナッジの設定
エレメントを配置していく
グリッドのサイズを8ptに指定する
フレーム を選択 > 右ペイン > Layout grid で設定。
フレーム in フレーム で、内側フレームにグリッドを設定するスタイルを、レッスンではやっている。
エレメント同士のガイド(距離のポイント数など)を確認する:Optionを押しながらフレームにhover。
ナッジ:「エレメントを矢印キーで位置移動する際、Shiftを押していると大きな単位で動かせる。この単位のこと」
Figmaのプリファレンスから、ナッジのサイズを変更可能。グリッドの値(8pt)にそろえておく。
Ctrl+G : グリッドガイドの表示/非表示切り替え
28. なぜグリッドシステムか
なぜ8ptなのか?
偶数だったらなんでもよい。8は掛け算割り算で端数が出にくい。
「ピクセル」と「ポイント」
CSSの 1px は、実画面では1ピクセル ではない。画素数が向上したため実際には4ピクセル9ピクセル使われる。
↑がややこしいので「画面上の4ピクセル9ピクセル=1ポイント」と呼ぶ(デザイン界)。
29. グリッドシステムの例外
Command+D:直前の作業を繰り返す
画面サイズのポイントが奇数で「8で割り切れない」場合は、どうするのが良い?
1.左右のパディングを.5で刻む、はバッドノウハウ。(!なんで?)
2.そうなると「左右のパディングのどちらかを奇数にする」か「内容物をちょっと小さくする」か
この場合、内容物をちょっと小さくするのが正解。
「中心線がズレる」「左右がちょっと非対称」は、目立つ。
だったら、内容物の右端にあるものが、実は1ピクセル小さい、の方がマシ。
30. レイアウトをはじめよう
レイヤー上で、エレメントに鍵アイコンをつけておくと「まとめて選択」時に除外されるので便利。
31. タブナビゲーションの追加
タブナビゲーション: iPhone のSafariの下部にでるナビゲーション
ナビゲーション上のアイコンを作る際は、余白を十分にとる。クリックイベントを「だいたいの位置で」取れるように。
タイディアップ(均等配置):エレメント複数選択し、選択矩形の右下に出るアイコンをクリック。
32. コンポーネントを作成する
タブナビゲーションの中に、アイコン(画像+テキスト)を作っていく。
Opt+Cmd+k:コンポーネント化
コンポーネントは、レイヤー上で「4つのひし形」、インスタンスはレイヤー上で「一つのひし形」
Cmd+クリック:入れ子のエレメントを選択する。
33. ファイルの整理と変更履歴
ページ名 のプルダウンメニューから「変更履歴」を見れる
無料版の場合、変更履歴は30日前まで保持。
2023/6/1 13:33
34. アイコンを描く1
矩形で書けるファイルアイコン
フレーム、矩形、結合 を使って、アイコンっぽい見た目のコンポーネントを作成する。
Ctrl+C:スポイトの起動
結合_Union:アイコンを作成した後、パーツをすべて選択し結合しておく。扱いやすい。
35. アイコンを描く2
ロケットアイコン
まずは縦で描く。後で回転させる。
P:ペンツール
左右対称の図を書く時は:
パスを半分だけ描く>コピー>左右反転(Shift+H) > 位置合わせ > 両方選択して右クリック > flatten
36. アイコンを描く3
ひし形を重ねたアイコン
潰れたひし形を作るには:
正方形の矩形を描く > 45度回転 > flatten > 下の角を選択し、潰す
37. アイコンを描く4
とくにあたらしいことなし
38. タブメニューのアイコンを差し替える
作成したアイコン(フレーム+エレメント)それぞれを、コンポーネント化する。
Create Multiple Components を使うと、一括でコンポーネント化できる。
あるフレーム(F)の配下に、あるコンポーネントのインスタンス(I)を配置した場合:
Fを開き、Iを選択すると、右ベインに「コンテンツ」項目が表示される。
ここで、ページ内にあるコンテンツの一覧が表示されるので「指名して変更」することができる。
この一覧では、コンテンツの「ファイル名」でツリー構造上に整理される!
例: "Icon / icon_a", "Icon / icon_b" と名前のついたコンポーネントは、 "Icon > " 配下にまとめて表示される。
ポイント:
コンポーネント&インスタンスは、便利!「マスターコンポーネントへの変更がインスタンスに連動する」
ファイル名によるコンポーネントのグループ指定、大事。
39. 外部リソースで時間を節約
figma上で、iOS11のアセットが公開されている。
Figmaのコミュニティで、様々な UI Kit が公開されている。
iOS 16 用など、ここから拾ってくるのが早い
40. 高品質な写真で画面を美しく
UnsplashプラグインをFigmaに導入する
ページ内の矩形を選択 > リボンからResources > plugins > "Unsplash" で検索 > Run
開いた Unsplash プラグインダイアログで "Search" > 気に入った写真を選ぶ > 貼り込まれる!
41. Unsplash 無料の仕組み
Unsplashは無料利用可、商用/非商用可、ライセンス記載不要(載せてくれるとうれしい)
42. デザインに写真を設置する
Unsplashプラグイン の苦手なところとして、「過去に拾った一枚の写真をUnsplash上でもう一度見つける」は難しい
気になる場合は、サイトのUnsplashから画像をローカルに保存しておく等が必要
43. 制約を追加する
コンストレイントのおさらい
44. タブナビゲーションの制約
「横に伸ばした時」「縦に伸ばした時」で振る舞いを決めておく
一緒に移動する/固定/中央揃え
単位化(=適切にフレームにまとめる)と Constraint設定 で整える
45. カードとヘッダーの制約
カード(=外側のエレメント)だけに制約をつけても、中の画像には制約が伝搬しない
なので、子エレメントにも個々に制約を設定する。
制約は、ちゃんと設定しておくことで「他の端末サイズのデザインを作る」時に、大変たすかる。
46. カードUIのコンポーネント化
Cmd+Opt+K で、フレームをコンポーネント化。おさらい。
47. カードUIのカスタマイズ
「基本は同じだけど、少しアレンジされている」インスタンスを作る。
基本は「全部のパーツをマスターに乗せておき、表示/非表示で切り替える」。
作ったコンポーネントは、左ペイン > Assets で一覧可能。そこからD&Dでインスタンスを配置できる。
エレメントに画像を貼った場合、右ペインのfillを開き、切り抜き位置の調整、エフェクト調整、ができる。
クロップ(切り抜き)した場合、その後エレメントを大きくした時、画像が引き伸ばしされる。
48. カードUIを追加する
Opt+L : レイヤーを一気に閉じる
インスタンス配置時の注意:
マスターコンポーネントからコピー(Opt + ドラッグ)した場合、マスターの制約は引き継がれる。
左ペイン>Assets からインスタンスをコピーした場合、マスターの制約は引き継がれない。
=制約は、マスターコンポーネント持ちの情報ではない。
(マスターコンポーネントの中のエレメントの制約は、ちゃんと連動される模様)
49. アイテムUIのレイアウト
これまでのおさらいで、カセット式のリストコンテンツを作成。
Optを押しながらサイズ変更、で制約を無視したリサイズが可能。
フレームからエレメントがはみ出している場合:
フレームを選び 右ペイン > Resize to Fit で、フレームのサイズを自動調整できる。
テキストは「はみ出した部分は ... で省略」を指定できる
右ペイン > テキスト 3点 、から選択可能
50. 価格ボタンのデザイン
オートレイアウトを設定することで、カセット内の「テキスト量でレイアウトが崩れる」に対応できる。
テキストのオプションで「数字は等倍に」を設定できる
「コンポーネントの中にコンポーネントを入れる」事はできない。
51. オートレイアウト
復習。
52. サイズ可変のボタンを作る
総集編。オートレイアウト&制約。
「中の文字の長さでサイズが変わるボタン」も、オートレイアウトのパディングで対応できる。
!ただし、インスタンス1つずつにパディング設定していた。だったらWidth固定、の方が良いのでは?
53. UI変更[スクロール時に位置を固定]のお知らせ
新UIでは「プロトタイプ」の中に置かれている
54. リアリティのあるUIモック
画面右上の再生ボタンで、iPhoneシミュレーションできる
シミュレーション時に、画面に固定表示したいもの(ステータスバー等)は:
選択 > 右ペイン > プロトタイプ > 移動時に固定 、を選択
タブナビゲーション、ステータスバーは、半透明&ぼかし、にすると磨りガラスになりリアルなモックになる。
55. iPhoneでデザインを確認
iPhoneのFigjamアプリを使い、作成したモックを見ると、とてもリアル。
セクション5: より良いデザインの管理
56. イントロダクション
このセクションでは、テキストとカラーのプリセットを作成する。
プリセットを「スタイル」と呼ぶ。スタイルは2種類ある。
テキストスタイル
カラースタイル
テキストにテキストスタイルを当てると、「テキストの太さ、フォント」等は変更不可になる。
57. テキストスタイルを作成する
登録したいスタイルを持つテキストを選択し、右ペインから、テキスト>メニュー>スタイル、で登録できる
スタイルには、カラー、アラインの情報は含まれない。
登録したスタイルを、後から内容調整することも可能。
58. インスタンスのスタイルを上書き
インスタンスの一部でテキストスタイルを変更したい場合:
コンポーネントから引き継いだテキストスタイルを解除し、独自に当てればOK。
59. スタイルを使うメリット
モックデザインに一貫性を持たせる。
プロフェッショナル感が出る。
エンジニアへのバトンタッチが容易になる。
60. カラースタイルを作成する
「素のカラーコード直打ち」はしない。統一感を出せない、後からの変更が大変。
グレースケール等は、最初から10段階ほど作っておくと良い
カラー名にプレフィックスを当てておく
カラースタイルの中身を後から変更もできる。その際は、カラーコードを適用したエレメントにもちろん反映される。
61. カラースタイルを適応する
「適用漏れが無いか」を見つけるには、適用作業後、カラースタイルごとに表示/非表示でチェックする。
62. ページを分割して見通しを良く
これまでの作業で「アウトプットになるフレーム」と「補助の部品」がページに載っているはず。
補助の部品は、別のページに移動させることが出来る。
ファイル内に新規ページを作り、コピペで「補助の部品」をそちらのページに移動させるだけ。
63. チームライブラリを公開する
作成した以下のものは、チームに共有できる
カラースタイル
テキストスタイル
コンポーネント(有料版のみ)
左ペインのAssetsより、共有したいものを「公開」することで、チームメンバーから見えるようになる。
チームライブラリで公開したものを変更すると、利用者にも反映される。
反映時、利用者の画面で確認ダイアログが出る。
公開したチームライブラリを非公開にしたり削除したりすると、参照先でももちろん消える。
善意、良識に伴う利用を。
64. 色指定の漏れをチェックする
コンポーネントをクリックすると、右ペインに「使用している色のリスト」が表示される。
想定外の色(=カラースタイル外)が見つかるので、潰していく。
ベタのカラーコードを、この時に「スタイル登録」もできる。
外部コンポーネントを取り込んだ際も「自前のカラースタイル」に置き換えていくのが良い。
65. 折返し時点ラップアップ
キーワードでおさらい(良い!)
8Point Grid System
Component
Constraint
AutoLayout
Plugin
Effect
TextStyle
ColorStyle
TeamLibrary
セクション6: アプリ画面の作り込み 1
66. イントロダクション
画面遷移、に対応していく
67. Today-Detail 1 / 遷移後の画面
Opt + Cmd + b (or 右クリック>インスタンスの切り離し): インスタンスを「独立したフレーム」に変更する
テキストのセオリー(おさらい)
行の高さも「8の倍数」で。
日本語は「Hiragino Sans」
英語は「SF Pro Display」「SF Pro Text」
文章を入れる場合、「行の高さを自動調整」をONにする。
68. Today-Detail 2 / ページのコンテンツを作成
セオリー通り。
69. Today-Detail 3 / 同じ構成要素の別レイアウトを作成
セオリー通り。
70. Today-Detail 4 / シェアボタンを作成する
ボタンの「枠と中のテキストで、テキストを中央揃えする」時は、枠とテキストを選択し「垂直中央揃え」「水平中央揃え」
ボタンの完成形では「背景(=角丸、グレー塗り)」をフレームそのものに持たせてしまうのが良い
フレームの中に「背景用の矩形」の形より、パーツが減らせて管理がすっきりする。
コンポーネントのサイズを調整する(余白を大きくとる)場合:
内包エレメント(テキスト等)の幅を大きく取り、それからコンポーネントを「Resize to fit」するのが良い。
名前つけ、大事!
構造的に。プレフィックスを意識して。
71. Today-Detail 5 / Today-Detail を完成させる
おさらい:仕上げに「制約」をつけ、リサイズに強くする。
セクション7: アプリ画面の作り込み 2
72. App-Detail 1 / フレームの作成と要素の配置・サイズ決め
おさらい
73. App-Detail 2 / 細かいデザインの調整
雑多な構成で位置を揃えたいときは「複数を選択して”位置揃え”」が便利。
!画面画像を元にデザインを作る場合、画像側にもグリッドをかけると助かる。
エレメント/コンポーネントに名前をつけていこう
大事。体系的だとベストだが、意外と難しいと思う
テキストスタイル/カラースタイル、新規のもの出ていたら登録していこう。
74. App-Detail 3 / タイトルコンポーネントと様々なテキストスタイル
サンプル画像からデザインを起こす場合「繰り返し使われているテキストスタイル」を抜き出しておく。
カラースタイルも同様
英語フォントの選択基準
サイズが20以上の場合は SF Pro Display, 未満の場合は SF Pro Text
75. App-Detail 4 / スクリーンショットからアプリの内容説明
「横にはみ出した画像の横リスト」があるケースへの対応。
矩形をキレイに整頓するには「AutoLayout」でサンを入れると良い。
「さらにパーツを追加」の時、コピペするだけで「連続的なレイアウト」してくれるので時短できる!
画面(=フレーム)からはみ出したコンテンツを目視したい場合:
右ペインの「コンテンツを切り抜く」をfalseにすれば表示される。
76. App-Detail 5 / レビューの詳細
5つ星、4つ星……は、5星をまず作り、4つ星以降は星を非表示にする。
77. App-Detail 6 / レビューの詳細
おさらい
78. App-Detail 7 / アプリの付加情報
おさらい
79. App-Detail 8 / アプリの負荷情報
おさらい
80. App-Detail 9 / iOSの機能サポート
おさらい
81. App-Detail 10 / レコメンデーション
おさらい
82. App-Detail 11 / 制約を追加してリサイズに対応
おさらい
83. App-Detail 12 / カラースタイルとテキストスタイルを確認
おさらい
84. スライドのPDF
スライドまとめのDL
セクション8: 高品質なプロトタイピング
85. イントロダクション
プロトタイピングとは:
ページの回遊
アニメーション
画面遷移
画面効果
プロトタイピングの共有:
画面右上の再生ボタンを押してから「Copy Link」でURLを取得。それを展開することで共有できる。
86. はじめてのプロトタイプ
エレメントを選択>右ペイン>プロトタイプ>インタラクション、を設定することで、シミュレーション時のイベントを定義できる。
GUI上で「エレメントの右辺に出るポイント」をD&Dすることでも画面遷移の設定が可能。
画面遷移を設定すると「右ペインで”プロトタイプ”を選択している場合」、遷移の矢印が画面に表示される。
画面遷移
インタラクション>クリック>次に移動>遷移先フレーム名
87. ページの回遊を実現する
シミュレーション時、端末外の領域をクリックし、右下にでてくる「再起動」を押すと、シミュレーションをリセットできる。
コンポーネントにインタラクションを登録すると、インスタンスにも反映される。
この都合があるので、完成モックにはインスタンスのみを置くのが良い。
88. アニメーションを追加する
画面遷移のオプションとして、アニメーションを設定できる。
CSS準拠の設定ができる。(ease-in, ease-out など)
89. プロトタイプの品質を上げる
画面遷移のアニメーションの際、ステータスバーもスライドしてくるように見える。
実際は、そんなことないよね。直せる。
画面遷移のオプションで「マッチングレイヤーにスマートアニメートを適用する」をtrueにすれば解決。
これがなんなのかわからない。。自動判定してくれる系か?
「レイヤー名がまったく一緒だった場合、それらを考慮してくれる」そうだ。
なので、名前の完全一致を意識する。大事。
90. App-Detailへの遷移
Slide-In:前の画面が押しつぶされながら新しい画面が入ってくる
Move-In:前の画面が特に変形はせず、新しい画面が「上に重ねるように」入ってくる。
Push-In:前の画面が、新しい画面に「押し出される」。
91. スクロール位置の問題
スマートアニメートを使うと遷移後の画面位置がおかしくなる(トップになってくれない)問題
現在のFigmaでは解決している模様
92. 横スクロールUIを作る
縦スクロール画面の途中で「横にスライドできる要素」がある場合:
”プロトタイプ”の「Overflow Behavior」で「横方向」を指定することで擬似的に表現可能。
デザイン時、画面枠をはみ出したエレメントを実際に作り、それを「画面幅ピッタリのフレーム」に入れ、そのフレームにOverflow Behaviorを設定する。
93. リッチなUIをプロトタイプで実現
一部の画面ではタブナビゲーションを非表示にしたい、しかも遷移時にアニメーションで非表示にしたい
「別画面に同名(レイヤー名)のエレメントがあった場合、次の画面で連続的なアニメーションんをする」挙動がある
これを利用し、タブナビゲーションを非表示にしたい画面で、タブナビゲーションを画面外に移動させる。
これで「にゅっとタブナビゲーションが画面の下に消える/戻る」が実現できる。
画面左上にでる「Back」のボタンは、画面を縦スライドしても定位置で出ていてほしい
94. ユーザビリティの向上
画面遷移(戻る、など)をドラッグで表現できると、片手で使う際を想定できて良い。
95. オーバーレイを実現する
インタラクションの一環で「クリックしたらこのフレームをオーバーレイ」を指定できる。
オーバーレイでは、透過度合いの調整が可能。
96. 高度なアニメーション1(iPhoneのアプリインストールを真似る)
画面遷移後に「にゅっとエレメントが出る」アニメーションを付与する
方法として「After Delay」を設定し「開いてx秒後に次のページと差し替える」で実現する。
After Delay: 「フレームからフレームへ遷移する」「フレーム同士の名前が違う」が選択可能な条件、の模様。
97. 高度なアニメーション2(iPhoneのアプリインストールを真似る)
応用。「クリックで発生するアニメーション」は、AfterDelayによるオーバーレイ画面遷移で表現できる。
98. スライドのPDF
セクション9: アニメーションによる豊かな表現力
99. イントロダクション
「キーフレームアニメーション」をやる。プラグインでFigmaでも対応可能。
キーワード:モーショングラフィック
100. 繊細なアニメーション
素のFigmaではできないこと、の確認。
101. アニメーションの素材を作る
おさらい。
102. Figmotion
Figmotionプラグインで、キーフレーム単位のアニメーションを指定できる。図形パラメータの時間変化。
FigmaはGIFアニメーションを再生できる。
103. ボタンアニメーションの準備
おさらい
104. 複雑なキーフレームアニメーション
おさらい
105. スライドのPDF
おさらい
セクション10: プラグインを使った作業効率化
106. イントロダクション
107. 練習課題と答え合わせの方法
準備作業
108. すべての画面をつなぐ
準備作業
109. プロトタイプを加速させるプラグイン
Content Reel:「適切な名称」を生成してくれる。会社名/アプリ名など。
Unsplash:「大量のランダム画像を設定」ができる。複数のエレメントを選択し、Unsplashの「Random」を実行。
110. プロトタイプを仕上げる
完走/感想
13時間40分、みっちりやった。4日分け。
「最初の学習」、大事。摂取カロリー高い
基礎を押さえれば8割対応できる
Figmaの操作系は、「ページの中で作り込む」領域はもうばっちり。
ここから先の知識は「上級者」の領域。
集めては行きたい。でもカロリー効率は良くない。
「持ってる人にリスペクトを持って移させてもらう」
レッスンの内容(質)が、もちろん良いのだけれど「もう少し」なところはあった。
折返し以降の章が、長い!
リアルっちゃリアル。案件を先輩に随伴して実作業やってる感じ。
それを真面目についていく時間的余裕、あんまりないかな。
単純作業って、疲れるんだなぁ。
用語しっかり身につけた
コンポーネント、マスターコンポーネント、インスタンス
フレーム
グループ
レイヤー、レイヤー名、プレフィックス