Upgrade to Pro — share decks privately, control downloads, hide ads and more …

フラットデザインの話

9a9ba864ec37c5c72c72f0377fe4ccf4?s=47 Sora Arakawa
September 28, 2020

 フラットデザインの話

静大情報LT大会 -2020年9月-

9a9ba864ec37c5c72c72f0377fe4ccf4?s=128

Sora Arakawa

September 28, 2020
Tweet

Transcript

  1. フラットデザインの話 静岡大学 情報学部 行動情報学科 1年 荒川 奏良 (Sora Arakawa) 2020/09/28

    静大情報LT大会
  2. 自己紹介 • 静岡大学 情報学部 行動情報学科 1年 • 「静岡大学 バーチャル情報学部」 プログラム/グラフィック担当

    • 後期から対面授業ウレシイ…ウレシイ… ※3Dモデリングはしてません
  3. フラットデザインとは? • ミニマリズムを取り入れたデザイン • リッチデザインの対義語 • スキューモーフィズムを取り入れることもある(影など) デザイン手法としての始まりは1950年代 Microsoftは2002年から、Appleは2013年から フラットデザインを採用

    Googleのマテリアルデザインもフラットデザインの一種
  4. フラットデザインとは?

  5. 今回の内容 • 配色 • フォント • その他、デザインのコツ

  6. 配色 • デフォルトのカラーパレットから勝手に色を選ぶのはNG • フラットデザイン準拠のカラーパレットを使いましょう (無料のウェブサービスが多数あります) • 文献を読めば自分でも作れますが…面倒なのでw

  7. 配色 • デフォルトのカラーパレットから勝手に色を選ぶのはNG • フラットデザイン準拠のカラーパレットを使いましょう (無料のウェブサービスが多数あります) • 文献を読めば自分でも作れますが…面倒なのでw ↑ 7色に輝くゲーミング静大

    ※よい子はマネしないでね!
  8. 配色 • Flat UI Palette v1 フラットデザインのカラーパレット ワンタッチでRGBやHEXをコピペできる URL :

    https://flatuicolors.com/palette/defo
  9. 配色 • マテリアルデザインカラー:使用例までチェックできる配色見本 Googleが提唱する「マテリアルデザイン」のカラーパレット 3色のHEX値を確認できる UIプレビュー機能搭載 URL : https://saruwakakun.com/html-css/material/colors

  10. 配色 • WebGradients フラットデザインに準拠したグラデーションのカラーパレット HEX値やCSSコードをコピーできる URL : https://webgradients.com/

  11. フォントの選定 • 太字はNG (DemiBold、W7くらいが上限) • 角ゴシック体が基本 • 丸ゴシック体、明朝体ならセーフ? • デザイン書体はNG

  12. フォントの選定 • 太字はNG (DemiBold、W7くらいが上限) • 角ゴシック体が基本 • 丸ゴシック体、明朝体ならセーフ? • デザイン書体はNG

  13. デザインのコツ • 縁取りはNG (縁取りが必要無い構成にする) • 勝手にグラデーションを作らない • 色数を増やさない (2~3色がベスト) ↑

    「縁取り+グラデーション」 よくある手法だがダメ
  14. デザインのコツ • 透明度は100%、70%、30%の3種類に限る

  15. デザインのコツ • 四角形だけでデザインするとMicrosoftっぽくなる • 角丸を取り入れるとAppleっぽくなる

  16. まとめ • フラットデザインはいいぞ

  17. おしまい ご清聴ありがとうございました