このシリーズでは、デザイナーは知ってるビジュアルを作る”キホン”を実践して身に着けます。各TRYごとに1つの”キホン”をマスターします！
1.お題を確認
2.解説を観る
3.お題で解説されキホンを使う
という順番でTRYを1日ずつ進めていける内容になってます。
解説だけ見てもやらないと忘れるし自分のものになりません。なので、お題を各TRYごとに用意しています。お題はダメなUIをリデザインしていくことで「動画共有サービス（PCブラウザ）」の主要UIをデザインできる内容です。ゼロからじゃないから優しめ＆”キホン”を使うことに集中できる構成にしております
動画で話しているお題の内容です！以下の手順で取り組んでいきましょう〜！
1. まずは「意識して欲しいこと」を元にデザインしましょう。
2. できなくてもOKです。頭と手を動かしておくと解説の吸収が良くなります。
3.次の動画からお題に関する解説をします。それを見て意識すべき知識をつけましょう
4. 動画で解説していたことを元にお題に再度デザインにチャレンジしてみましょう
「キホン」を使ってリデザイン。実践して見た目のキホンを習得しよう。
▼ データはこちら！（Figma）▽
手元でも見れます
両方のUIとも、同じ目的のアプリです。が、使う人の想定が違います。もっというと大事にしたいユーザーさんと、その人が1番サービスを使いたい時が違います。
このUIの違いをテーマに”コンセプトで見た目が変わる、デザインする方法”を解説していきます。その解説を受けて、お題にチャレンジしてみてください！
メンバー限定だぞ！
UIは見た目を作る前に、「どういう形が適切か」が実は決まっています。
これを整理する（要件定義とかって呼ばれたりします）ことで良いUIも作れます。し、優先度もはっきりするので良い見た目も作れます。
まず「誰」をしっかりイメージすることが大事です。そこからしかUIの見た目のアイデアを出すことが難しいです。
なので、作る前はしっかりとこの表のように「誰」をまとめてみましょう。
カフェを探せる。は一緒ですが、こう見ると全く違う使い道になりそうですよね・・・？これが「誰」で作るものが変わる、優先するものが変わることにつながります！
この続きは動画で...!
今回は「3つのテーマ」に沿って、見た目のコンセプトを作る方法を解説していきます。
やり方を真似して、お題デザインに生かしてみましょう！
メンバー限定だぞ！
使って欲しい方向性が違うので、それぞれの「場」として適切なコンセプトが違います。
今回はこれを反映した結果、使っている色や、角丸などのテイストが違う結果になりました。
いろんな方法があります。アイデアを出すのに決まった方法なんてないです。
が、今回は「ユーザーを起点」に”ふさわしい場所/人格"を模索した一例を解説してみました。
付箋の数はかなり少ないです。動画ように絞ってます。
実際に考えるときは様々なアイデアを多く出して、そこから収束していくようにしましょう。
詳しくは動画で！
今回のお題は難しいと思います。解答のレベルでできる必要はありません。こうやって見た目が変わるのか、逆に考えていくのか。これを体験してみてください。
□ プロセスを辿るのが今回は大事！です
さらに詳しく知りたい方はこちらから全フローの考え方が見れます。
https://www.bo-no.design/contents/uibiziyu-1-6
今回のお題は難しいと思います。解答のレベルでできる必要はありません。こうやって見た目が変わるのか、逆に考えていくのか。これを体験してみてください。
□ プロセスを辿るのが今回は大事！です
□ ショートバージョンはこちらから
まずは簡単に見たい方はこちらから
https://www.bo-no.design/contents/uibiziyu-1-5
□ POINT
□ 手順
1 : お題の情報をまずは軽く考えてみる
2 : いつ使われそうか - ユースケースをアイデア出し
3 : ユースケースから求められる情報や使用感をアイデア出し
□ POINT
□ 手順
1 : 具体的な”情報”を考えて見る
2 : 構造-プロトタイプを作成、パターン出し
3 : パターンから検討 / ブラッシュアップ / 決定する
□ POINT
□ 手順
動画で話しているお題の内容です！以下の手順で取り組んでいきましょう〜！
1. まずは「キホン」の解説をチェック
2.「キホン」を使ってリデザインしましょう
3.お題の解答動画もアップします。自分が作成したデザインと比較してみましょう。
4.コミュニティでの質問やフィードバックも募集してます！
「キホン」を使ってリデザイン。実践して見た目のキホンを習得しよう。
手元でも見れます。
00:15 見た目のシステム化とは？
03:13 システム使ったUI作成の実例
06:40 これだけ設定すると良い要素全容
10:49 論理的にUI作るとは？
01:34 設定すると楽になる要素を紹介
05:03 テキストの要素
16:21 配色の要素
19:49 ボタンの要素
22:47 サイズの要素
▼ 動画で載せているFigmaのURLはこちらです
コピーしてOKなので、自分でゼロから設定してみましょう。
Figmaでの設定方法は次の動画で解説しています。
1.設定する
2.Figmaで使えるようにする
3.お題を解くときにシステムで、UI構造を考えながら使ってみる
これをやってみてください！
00:53 コンポーネント機能の使い方
07:53 UIパーツの登録方法
12:41 登録したシステムの使い方
▼ 動画で載せているFigmaのURLはこちらです
コピーしてOKなので、自分でゼロから設定してみましょう。
Figmaでの設定方法は次の動画で解説しています。
1.設定する
2.Figmaで使えるようにする
3.お題を解くときにシステムで、UI構造を考えながら使ってみる
これをやってみてください！
www.bo-no.design/contents/uibiziyu-try2-oti-jie-da
こちらから閲覧できます！
こちらから閲覧できます！
UIにおける「レイアウト」の理解を実践するお題内容です！
まずはただUI作成にトライしてみてください。その後レイアウトの解説動画を見て、UIデザインの過程での変化を感じながらレイアウトの理解を深めてみてください。
以下のやり方を推奨しております！
1. まずは「意識して欲しいこと」を元にデザインしましょう。
2. できなくてもOKです。頭と手を動かしておくと解説の吸収が良くなります。
3.次の動画からお題に関する解説をします。それを見て意識すべき知識をつけましょう
4. 動画で解説していたことを元にお題に再度デザインにチャレンジしてみましょう
リデザインしよう〜！
□ 続き：実践編はこちら
『倍数スタイリング後編 - サイズを試行錯誤→決めて行く流れ』
https://www.bo-no.design/contents/visualsecret02
□ もくじ
00:28 結論 - フォント、余白、オブジェクトそれぞれを倍数で揃えよう
00:41 倍数で作ったデザインイメージ
00:54 倍数で管理するメリット
02:29 倍数管理の方法
03:15 フォントの決め方
05:40 余白の決め方
07:51 オブジェクトのサイズ
09:09 8の倍数の理由
BONOで毎週やっている勉強会の動画です。バナーデザインですがUIでもそのまま使えるので載せております！
ビジュアルをどうこうする部分ではなく、既存のバナーからどういう風に情報の優先度と仲間分けを整理しているか見てみてください💡
既にあるバナーの良くない部分は？それは構造が整理できてない＝表示要素の優先度とグループが整理できてないことです。
何となくやりすぎて”メリハリ”を効かせられない＝目立たせる要素を決められなかったり。配置も適当になってしまっています。作る前に”どの情報が仲間か””何を伝えるのが1番重要か”を整理していくのがバナーでもWebデザインでもUIデザインでも重要になります。
❐ 動画で使っているデザインファイルはこちら
-------------------------------------------
https://figma.fun/4YzOHe
❐ 目次
-------------------------------------------
00:00 改善点を出そう！
04:04 バナーデザインをする流れ
13:13 情報の構造を考える
18:46 パターン作成は盗む
24:42 パターンの決定方法
28:06 モチーフの作り方
30:57 サイズの決め方
33:42 カーニングした方が良い？
35:13 グラフィックTIPS
余白は役割を考えて、サイズを決めよう！というのを解説した動画です！
見た目のシステムで決めた余白から、”どのサイズを選ぶか？”を考えるときの参考にしてみてください。
等倍でデザインをする、は別の動画で紹介しました。その関連として”グリッド”を使ってレイアウトをデザインするテクニックを紹介します。
後半の事例パートを見てもらうと分かると思いますが、グリッドを使うと整った見た目を作るヒントに気づき易くなります。し、自分でもそれを実現しやすくなります。
特にレスポンシブとの相性がとても良いので実践的に取り入れていくと良いですよ〜。詳しいやり方は動画を見てみてください！
こちらから動画で使っているファイルにアクセスできます〜。メンバー限定ですよ〜。
https://www.figma.com/file/iaXpHPClRMRI8YCxVmmJyd/3-1.UIビジュアルの基本?node-id=737%3A11119
動画では詳しく喋ってませんが、グリッドがいつも正しいわけではないです。グリッドで見た目を作ると、かなり機械的な印象になりやすいです。言葉を選ばないと”つまらない”デザインになります。
なのでダッシュボードなどをデザインするときはそれでも良いですが、LPなどでグリッドにこだわりすぎると、目的に叶わない印象を作ってしまうこともあります。
あくまで目安として使ったり、たまにあえてずらしてアクセントにしたり。遊んでみてください。
あえて目立たせるビジュアルデザインもありますが、基本的にはメインコンテンツを引き立てるために使います。
1.グループの区切りを意識させる
2.タイトルetcを強調させる
など
TRY、お疲れ様でした！
今回も全て完璧にできる、というよりかは「そういう視点でレイアウトを組むのか〜！」を体感するのが大事です。
今後自分でデザインするときに気をつけて行ってみてください！
UIに必須な色の種類、使い方、設定を習得しましょう！
▼ お題やスライドのURLは▽
UIにおける「配色」の理解を実践するお題内容です！
まずは自分で作ってみる。配色に関する解説動画を見て、実践してみる。という順番でやるのをお勧めしてます！
1. まずは「意識して欲しいこと」を元にデザインしましょう。
2. できなくてもOKです。頭と手を動かしておくと解説の吸収が良くなります。
3.次の動画からお題に関する解説をします。それを見て意識すべき知識をつけましょう
4. 動画で解説していたことを元にお題に再度デザインにチャレンジしてみましょう
UIを作る上での配色についてです。
Webデザインにもソフトウェアのデザインにも両方使えると思います。
▼ UIで使う”メインカラー”の決め方を知ろう
1.コンセプト - どんなサービスで人の感情はどう動く？
2.参考イメージを集める
3.試してみる
4.決める
1.ロゴやモチーフを作るかの如く方向性が必要
2.サービスのコンセプトを表現する
□ コンセプトに関しては別の動画を参考にしてください
コンセプトから想起される実際のイメージを集めてみる
○ コントラストはFigmaのプラグインや便利ツールを使って調べると良いです！
動画で使っていたFigmaプラグインはこちらです
https://www.figma.com/community/plugin/748533339900865323/Contrast
配色の目的は”必要なものをしっかりと視認してもらう”ことがまず最低限あります。
雰囲気作りも必要ですが、UIにおいて機能性はグラフィックデザインより重要性が高いため、まずはそこを担保する必要があります。
・サービスの表現上、2つ以上の色もサービスカラーとして用いたい場合
・サービスの機能上、2つ以上の色もサービスカラーとして用いたい場合
基本的には役割を決めることが良いと思います。
かつ、「優先度を設定」することで使い分けをすることでボタンにしても使い分けやすくなるのかなと思います’（メルカリの例を参照）
動画で使っているデザインのデータはこちら
https://www.figma.com/file/QmdtMrKp2O1XJY8hVRxukS/10%2F22FB%3A%E5%87%BA%E5%BC%B5%E7%94%B3%E8%AB%8B%E3%81%AE%E7%94%B3%E8%AB%8B%E3%83%95%E3%83%AD%E3%83%BC?node-id=23%3A2842
動画を見るとわかる通り、「何が強調されるべきか」の考え方で配色も変わります。
ただ基本的には、強調するものを絞る、テーマカラーはページ内の最上位の強調アクションに基本的には使用する、が基本です。
動画で話しているような「優先度１」「２」の概念も考えながら配色をデザインしていきましょう。
UIにおける「レスポンシブデザイン」の理解を実践するお題内容です！
まずはただ作ってみても良いですが、ビジュアルシステムの解説を見た後にシステムを作りながらUIに取り組んでみましょう。
□ お題のリデザインデータ
1. まずは「意識して欲しいこと」を元にデザインしましょう。
2. できなくてもOKです。頭と手を動かしておくと解説の吸収が良くなります。
3.次の動画からお題に関する解説をします。それを見て意識すべき知識をつけましょう
4. 動画で解説していたことを元にお題に再度デザインにチャレンジしてみましょう
▼ UI制作でマストなディスプレイ概念を知ろう
1.高解像ディスプレイ
2.レスポンシブとは
3.デザインデータ作成
▼ メリット
○ ディスプレイ考慮がないと不完全なデザインを組んでしまう。
・デスクトップ⇄スマホ：異なる画面幅に対応する
・高解像ディスプレイへの対応・画像の扱い
○知識があるとUIデザインからヒントを得やすい
・実装しやすいデザインの作り方
・どのデバイスでも綺麗に見えるデザインの作り方
▼ 質問：どういうデザインデータを作りますか？
<条件1> “MacBook Air”のディスプレイがメインディスプレイ
2018 年以降に発売されたモデルの MacBook Air。標準解像度は 2560 x 1600、1 インチ当たりのピクセル数 (ppi) は 227 です。数百万色に対応しています。
<条件2>PCで見るし、スマホで見るしって画面を作って
と言われたら。
これを理解するために
1.高解像ディスプレイ
2.レスポンシブ
3.デザインデータ作成
について知りましょう。
レスポンシブデザインを始める前に知っておくべき前提知識を紹介しましたー！
実践とは遠く感じるかもですが、レスポンシブデザインのベースの考えになっています。
・この考え方でいろんなサイトの横幅を変えてみる
・アプリをデザインするときも同じ考え方で大丈夫です
00:00 レスポンシブデザインとは
01:18 考え方:"ブロック"で考えよう
03:04 横幅のサイズを決める方法
08:22 超大事!サイズは%でデザインする
12:35 ブレイクポイントで切り分けよう！
13:18 質問あればコミュニティで！
□ レスポンシブに作る際のデータのポイントを学びましょう
以下のことを実際のやり方を見せていきます。参考にしてまずははじめてみましょう。
▼ この動画の項目
1 : デザインデータの作り方
2 : 可変/不可変の決め方
3 : 画像の扱い
4 : 実装者とコミュニケーションをとろう
□ 動画で使っているFigmaのデータはこちら
画面幅ごとにデザインデータを作ろう
まずはメインになる幅から作り込む
1.固定 / 可変 のUIパーツを考えよう
2.Figmaが好きなら可変に組もう
2倍〜サイズを用意
アイコン類はsvg形式のものを
データは完璧じゃない。コメント/コミュニケーションを取って共有
※ 動画で見せているドキュメントのイメージはこちら
レスポンシブは基本的に知識でカバーできる内容だったりします。今回あまりわからなくても心配ありません。これからいろんなサイトやサービスのレスポンシブを見るようにしていけばどうなっているのか？のパターンを増やしていけます。
レスポンシブの考え方はこの動画でも解説している通り”ブロック”で考えていくと良いと思います〜！
UIにおける「基本構造」の理解を実践するお題内容です！
まずはそのままUI作成にトライする。その後解説動画を見て、再度同じお題にトライしてUI構造の理解でデザインの作り方が変化するのを体験してみてください。
1. まずは「意識して欲しいこと」を元にデザインしましょう。
2. できなくてもOKです。頭と手を動かしておくと解説の吸収が良くなります。
3.次の動画からお題に関する解説をします。それを見て意識すべき知識をつけましょう
4. 動画で解説していたことを元にお題に再度デザインにチャレンジしてみましょう
詳しくは動画の解説を見て知識をつけましょう。実践してみましょう。
🚩 クイズGoogleMeet : ユーザーのカードとコメント欄、どっちが高い階層？
その階層表現について知りましょう。
平面で表現する僕らにとっては欠かせない技術なんですね。
○ スキューモーフィズム
○ 今 - フラット(寄り）のデザイン
https://material.io/design/environment/elevation.html
などを使って、目の動きや、触れる感などを工夫する。
○ Navi : ページ内外の移動や表示をコントロールするもの
○ Action : 『名詞』に対してアクションするもの
○ Body : ページのメイン情報 - ユーザーが主にページに来る目的
※下にあるYoutubeプロフィールで示しながら見ていく
馴染みのあるUIで「Navi」「Action」「Body」を見ていこう！
画面全体 : Youtube-プロフィール
パーツ単位でも : Material Design Card Sample
https://material.io/components/cards#behavior
シャドウの質問に答えつつ、基本をお答えしました。
Q.個人的にボタンは、シャドウが入っていた方が、ボタンっぽくてわかりやすいのかなと思っていたのですが
フラットのものもあると思うのでどういう時に使い分けてるとかありますか？！
Q.このボタンは、（日）のところを指しているのですが他のところも、週、月、年のところも影がついてるのはおかしいですか？
押せますよというイメージにしたいけど、日より目立っているような気もします。
Q.ヘッダーの影つけすぎでしょうか？影のバランスがいまいち分かっていないのかなと思います。
何かアドバイスあればお願いします
ポップインの遷移で、今表示している画面に別の画面を重ねて表示する動きの時は「× 閉じる(キャンセル)」が妥当です。
階層が下のページなどに移動するときは「＜,←戻る」などで１個上の階層に戻るのが通常です。
基本的に”バックナビゲーション”は１つ前の画面に戻る動作であることを覚えておきましょう💡
「モード」と「モーダル」についてかなり基礎的な部分の解説をしています。
この分野、さまざまな専門家が愛を込めた意見を書き溜めていたりするので僕もあまり自信を持って言えません。が、大枠UI作っていく上では理解できる内容に仕上げてみました。
これを起点に、世の中やUIに存在する「モード」と「モーダル」の概念の発見をしながら知見深めて行ってみてください！
▽ 解説に使ったFigjamはこちら
○ BONO : ←と×の違いを具体例を見ながら考えよう
https://www.bo-no.design/contents/uivisual-toxnowei-iwoju-ti-li-wojian-nagarakao-eyou
○ モードレス・ユーザーインターフェース
ーむずいんで、何となくの理解で大丈夫です！
https://www.sociomedia.co.jp/3950
○ モードレスとは
ーモードの逆。
https://www.sociomedia.co.jp/9094
UIビジュアル基礎、やってくださった皆さん、ありがとうございましたー！＆お疲れ様でしたー！
とりあえず美味しいもの食べてくださいね。
今回の修正箇所は、UIの「階層」と「構造」にまつわる部分をあえて指定しています。
まずはなんとなくそういうもんか、で大丈夫なので、こういう概念があることを体験しておきましょう〜！
完全理解はさまざまなサービス見ながらパターンを蓄積しながら、自分でも手を動かす量を増やしていくと良いです💡
データとスライドはこちらから閲覧できます！
#OOUI
