フラットデザインの話

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

自己紹介 • 静岡大学情報学部行動情報学科 1年 • 「静岡大学バーチャル情報学部」プログラム／グラフィック担当
• 後期から対面授業ｳﾚｼｲ…ｳﾚｼｲ… ※3Dモデリングはしてません

フラットデザインとは? • ミニマリズムを取り入れたデザイン • リッチデザインの対義語 • スキューモーフィズムを取り入れることもある（影など）デザイン手法としての始まりは1950年代 Microsoftは2002年から、Appleは2013年からフラットデザインを採用
Googleのマテリアルデザインもフラットデザインの一種

フラットデザインとは?

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

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

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

配色 • Flat UI Palette v1 フラットデザインのカラーパレットワンタッチでRGBやHEXをコピペできる URL :
https://flatuicolors.com/palette/defo

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

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

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

デザインのコツ • 縁取りはNG （縁取りが必要無い構成にする） • 勝手にグラデーションを作らない • 色数を増やさない（2～3色がベスト） ↑
「縁取り＋グラデーション」よくある手法だがダメ

デザインのコツ • 透明度は100%、70%、30%の3種類に限る

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

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

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

フラットデザインの話

フラットデザインの話

Sora Arakawa

More Decks by Sora Arakawa

Other Decks in Design

Featured

Transcript