Flat UIまとめ

•

4 likes•1,937 views

最近流行のFlat UI（フラットデザイン）についてまとめた資料です。スマートフォンサイトやPCサイトなどを作成するときのポイントとして役に立てばと思います。

Flat UI まとめ
2013/05/19
@mauekusa

フラットデザイン
立体的フラット
立体的でなく、エフェクトを使わない
フラットなデザイン

色ブロック
アイコンシンプル

Flat UI 事例
Facebook
Brit + Co.
ClearWeather フラバ ﬁtbit Svpply
InfomaticFigure

まとめ
ビビッドカラーとの相性が良い
シンプルで分かりやすいUI
シャドウや罫線を用いない
文字サイズにメリハリを出す

Recommended

UI TypographyAkio Yonekura

一生食える強みの作り方まとめManabu Uekusa

スマートフォンゲームダウンロード数まとめ

スマートフォンゲームダウンロード数まとめ

スマートフォンゲームダウンロード数まとめManabu Uekusa

20130709 トリプルダブル共催セミナー MobilePerfectSP紹介

20130709 トリプルダブル共催セミナー MobilePerfectSP紹介

20130709 トリプルダブル共催セミナー MobilePerfectSP紹介Manabu Uekusa

コンビニコーヒー比較Manabu Uekusa

八子クラウド座談会 Mobile perfectsp紹介

八子クラウド座談会 Mobile perfectsp紹介

八子クラウド座談会 Mobile perfectsp紹介Manabu Uekusa

鳥貴族糖質制限メニューManabu Uekusa

スマホタブレット2012年出荷台数

スマホタブレット2012年出荷台数

スマホタブレット2012年出荷台数Manabu Uekusa

Recommended

UI TypographyAkio Yonekura

一生食える強みの作り方まとめManabu Uekusa

スマートフォンゲームダウンロード数まとめ

スマートフォンゲームダウンロード数まとめ

スマートフォンゲームダウンロード数まとめManabu Uekusa

20130709 トリプルダブル共催セミナー MobilePerfectSP紹介

20130709 トリプルダブル共催セミナー MobilePerfectSP紹介

20130709 トリプルダブル共催セミナー MobilePerfectSP紹介Manabu Uekusa

コンビニコーヒー比較Manabu Uekusa

八子クラウド座談会 Mobile perfectsp紹介

八子クラウド座談会 Mobile perfectsp紹介

八子クラウド座談会 Mobile perfectsp紹介Manabu Uekusa

鳥貴族糖質制限メニューManabu Uekusa

スマホタブレット2012年出荷台数

スマホタブレット2012年出荷台数

スマホタブレット2012年出荷台数Manabu Uekusa

#padlab タブレットレビュー会

#padlab タブレットレビュー会

#padlab タブレットレビュー会Manabu Uekusa

Windows8タッチ操作まとめ

Windows8タッチ操作まとめ

Windows8タッチ操作まとめManabu Uekusa

iPhone5レビューManabu Uekusa

糖質制限ダイエットManabu Uekusa

Windows8 UI まとめ

Windows8 UI まとめ

Windows8 UI まとめManabu Uekusa

ブログ1周年サイト分析Manabu Uekusa

ソーシャルメディア調査報告書2012 グラフまとめ

ソーシャルメディア調査報告書2012 グラフまとめ

ソーシャルメディア調査報告書2012 グラフまとめManabu Uekusa

Fits スライムの折り方まとめ

Fits スライムの折り方まとめ

Fits スライムの折り方まとめManabu Uekusa

今日のスカイツリーManabu Uekusa

残響塾大声で叫べば世界が変わる

残響塾大声で叫べば世界が変わる

残響塾大声で叫べば世界が変わるManabu Uekusa

スカイツリー今日のライトアップ

スカイツリー今日のライトアップ

スカイツリー今日のライトアップManabu Uekusa

短期間でのスマホ向けWeb開発

短期間でのスマホ向けWeb開発

短期間でのスマホ向けWeb開発Manabu Uekusa

facebook for wordpressまとめ

facebook for wordpressまとめ

facebook for wordpressまとめManabu Uekusa

スマホ&タブレットデザインのこつ

スマホ&タブレットデザインのこつ

スマホ&タブレットデザインのこつManabu Uekusa

SKYTREE VIEW ソラマドまとめ

SKYTREE VIEW ソラマドまとめ

SKYTREE VIEW ソラマドまとめManabu Uekusa

スマホサイトをHTMLなしで作れるcodiqaまとめ

スマホサイトをHTMLなしで作れるcodiqaまとめ

スマホサイトをHTMLなしで作れるcodiqaまとめManabu Uekusa

スマホウェブの本命 jQueryMobile

スマホウェブの本命 jQueryMobile

スマホウェブの本命 jQueryMobileManabu Uekusa

MarsEditManabu Uekusa

ワイド画面プレゼンManabu Uekusa

新しいiPad 使った感想Manabu Uekusa

LoRaWANスマート距離検出センサー DS20L カタログ LiDARデバイス

LoRaWANスマート距離検出センサー DS20L カタログ LiDARデバイス

LoRaWANスマート距離検出センサー DS20L カタログ LiDARデバイスCRI Japan, Inc.

論文紹介: The Surprising Effectiveness of PPO in Cooperative Multi-Agent Games

論文紹介: The Surprising Effectiveness of PPO in Cooperative Multi-Agent Games

論文紹介: The Surprising Effectiveness of PPO in Cooperative Multi-Agent Gamesatsushi061452

More Related Content

More from Manabu Uekusa

#padlab タブレットレビュー会

#padlab タブレットレビュー会

#padlab タブレットレビュー会Manabu Uekusa

Windows8タッチ操作まとめ

Windows8タッチ操作まとめ

Windows8タッチ操作まとめManabu Uekusa

iPhone5レビューManabu Uekusa

糖質制限ダイエットManabu Uekusa

Windows8 UI まとめ

Windows8 UI まとめ

Windows8 UI まとめManabu Uekusa

ブログ1周年サイト分析Manabu Uekusa

ソーシャルメディア調査報告書2012 グラフまとめ

ソーシャルメディア調査報告書2012 グラフまとめ

ソーシャルメディア調査報告書2012 グラフまとめManabu Uekusa

Fits スライムの折り方まとめ

Fits スライムの折り方まとめ

Fits スライムの折り方まとめManabu Uekusa

今日のスカイツリーManabu Uekusa

残響塾大声で叫べば世界が変わる

残響塾大声で叫べば世界が変わる

残響塾大声で叫べば世界が変わるManabu Uekusa

スカイツリー今日のライトアップ

スカイツリー今日のライトアップ

スカイツリー今日のライトアップManabu Uekusa

短期間でのスマホ向けWeb開発

短期間でのスマホ向けWeb開発

短期間でのスマホ向けWeb開発Manabu Uekusa

facebook for wordpressまとめ

facebook for wordpressまとめ

facebook for wordpressまとめManabu Uekusa

スマホ&タブレットデザインのこつ

スマホ&タブレットデザインのこつ

スマホ&タブレットデザインのこつManabu Uekusa

SKYTREE VIEW ソラマドまとめ

SKYTREE VIEW ソラマドまとめ

SKYTREE VIEW ソラマドまとめManabu Uekusa

スマホサイトをHTMLなしで作れるcodiqaまとめ

スマホサイトをHTMLなしで作れるcodiqaまとめ

スマホサイトをHTMLなしで作れるcodiqaまとめManabu Uekusa

スマホウェブの本命 jQueryMobile

スマホウェブの本命 jQueryMobile

スマホウェブの本命 jQueryMobileManabu Uekusa

MarsEditManabu Uekusa

ワイド画面プレゼンManabu Uekusa

新しいiPad 使った感想Manabu Uekusa

More from Manabu Uekusa (20)

#padlab タブレットレビュー会

#padlab タブレットレビュー会

#padlab タブレットレビュー会

Windows8タッチ操作まとめ

Windows8タッチ操作まとめ

Windows8タッチ操作まとめ

iPhone5レビュー

糖質制限ダイエット

Windows8 UI まとめ

Windows8 UI まとめ

Windows8 UI まとめ

ブログ1周年サイト分析

ソーシャルメディア調査報告書2012 グラフまとめ

ソーシャルメディア調査報告書2012 グラフまとめ

ソーシャルメディア調査報告書2012 グラフまとめ

Fits スライムの折り方まとめ

Fits スライムの折り方まとめ

Fits スライムの折り方まとめ

今日のスカイツリー

残響塾大声で叫べば世界が変わる

残響塾大声で叫べば世界が変わる

残響塾大声で叫べば世界が変わる

スカイツリー今日のライトアップ

スカイツリー今日のライトアップ

スカイツリー今日のライトアップ

短期間でのスマホ向けWeb開発

短期間でのスマホ向けWeb開発

短期間でのスマホ向けWeb開発

facebook for wordpressまとめ

facebook for wordpressまとめ

facebook for wordpressまとめ

スマホ&タブレットデザインのこつ

スマホ&タブレットデザインのこつ

スマホ&タブレットデザインのこつ

SKYTREE VIEW ソラマドまとめ

SKYTREE VIEW ソラマドまとめ

SKYTREE VIEW ソラマドまとめ

スマホサイトをHTMLなしで作れるcodiqaまとめ

スマホサイトをHTMLなしで作れるcodiqaまとめ

スマホサイトをHTMLなしで作れるcodiqaまとめ

スマホウェブの本命 jQueryMobile

スマホウェブの本命 jQueryMobile

スマホウェブの本命 jQueryMobile

MarsEdit

ワイド画面プレゼン

新しいiPad 使った感想

Recently uploaded

LoRaWANスマート距離検出センサー DS20L カタログ LiDARデバイス

LoRaWANスマート距離検出センサー DS20L カタログ LiDARデバイス

LoRaWANスマート距離検出センサー DS20L カタログ LiDARデバイスCRI Japan, Inc.

論文紹介: The Surprising Effectiveness of PPO in Cooperative Multi-Agent Games

論文紹介: The Surprising Effectiveness of PPO in Cooperative Multi-Agent Games

論文紹介: The Surprising Effectiveness of PPO in Cooperative Multi-Agent Gamesatsushi061452

論文紹介：Video-GroundingDINO: Towards Open-Vocabulary Spatio-Temporal Video Groun...

論文紹介：Video-GroundingDINO: Towards Open-Vocabulary Spatio-Temporal Video Groun...

論文紹介：Video-GroundingDINO: Towards Open-Vocabulary Spatio-Temporal Video Groun...Toru Tamaki

知識ゼロの営業マンでもできた！超速で初心者を脱する、悪魔的学習ステップ3選.pptx

知識ゼロの営業マンでもできた！超速で初心者を脱する、悪魔的学習ステップ3選.pptx

知識ゼロの営業マンでもできた！超速で初心者を脱する、悪魔的学習ステップ3選.pptxsn679259

LoRaWAN スマート距離検出デバイスDS20L日本語マニュアル

LoRaWAN スマート距離検出デバイスDS20L日本語マニュアル

LoRaWAN スマート距離検出デバイスDS20L日本語マニュアルCRI Japan, Inc.

Observabilityは従来型の監視と何が違うのか（キンドリルジャパン社内勉強会：2022年10月27日発表）

Observabilityは従来型の監視と何が違うのか（キンドリルジャパン社内勉強会：2022年10月27日発表）

Observabilityは従来型の監視と何が違うのか（キンドリルジャパン社内勉強会：2022年10月27日発表）Hiroshi Tomioka

Utilizing Ballerina for Cloud Native Integrations

Utilizing Ballerina for Cloud Native Integrations

Utilizing Ballerina for Cloud Native IntegrationsWSO2

論文紹介：Selective Structured State-Spaces for Long-Form Video Understanding

論文紹介：Selective Structured State-Spaces for Long-Form Video Understanding

論文紹介：Selective Structured State-Spaces for Long-Form Video UnderstandingToru Tamaki

新人研修　後半 2024/04/26の勉強会で発表されたものです。

新人研修　後半 2024/04/26の勉強会で発表されたものです。

新人研修　後半 2024/04/26の勉強会で発表されたものです。iPride Co., Ltd.

Amazon SES を勉強してみるその２2024/04/26の勉強会で発表されたものです。

Amazon SES を勉強してみるその２2024/04/26の勉強会で発表されたものです。

Amazon SES を勉強してみるその２2024/04/26の勉強会で発表されたものです。iPride Co., Ltd.

Amazon SES を勉強してみるその３2024/04/26の勉強会で発表されたものです。

Amazon SES を勉強してみるその３2024/04/26の勉強会で発表されたものです。

Amazon SES を勉強してみるその３2024/04/26の勉強会で発表されたものです。iPride Co., Ltd.

Recently uploaded (11)

LoRaWANスマート距離検出センサー DS20L カタログ LiDARデバイス

LoRaWANスマート距離検出センサー DS20L カタログ LiDARデバイス

LoRaWANスマート距離検出センサー DS20L カタログ LiDARデバイス

論文紹介: The Surprising Effectiveness of PPO in Cooperative Multi-Agent Games

論文紹介: The Surprising Effectiveness of PPO in Cooperative Multi-Agent Games

論文紹介: The Surprising Effectiveness of PPO in Cooperative Multi-Agent Games

論文紹介：Video-GroundingDINO: Towards Open-Vocabulary Spatio-Temporal Video Groun...

論文紹介：Video-GroundingDINO: Towards Open-Vocabulary Spatio-Temporal Video Groun...

論文紹介：Video-GroundingDINO: Towards Open-Vocabulary Spatio-Temporal Video Groun...

知識ゼロの営業マンでもできた！超速で初心者を脱する、悪魔的学習ステップ3選.pptx

知識ゼロの営業マンでもできた！超速で初心者を脱する、悪魔的学習ステップ3選.pptx

知識ゼロの営業マンでもできた！超速で初心者を脱する、悪魔的学習ステップ3選.pptx

LoRaWAN スマート距離検出デバイスDS20L日本語マニュアル

LoRaWAN スマート距離検出デバイスDS20L日本語マニュアル

LoRaWAN スマート距離検出デバイスDS20L日本語マニュアル

Observabilityは従来型の監視と何が違うのか（キンドリルジャパン社内勉強会：2022年10月27日発表）

Observabilityは従来型の監視と何が違うのか（キンドリルジャパン社内勉強会：2022年10月27日発表）

Observabilityは従来型の監視と何が違うのか（キンドリルジャパン社内勉強会：2022年10月27日発表）

Utilizing Ballerina for Cloud Native Integrations

Utilizing Ballerina for Cloud Native Integrations

Utilizing Ballerina for Cloud Native Integrations

論文紹介：Selective Structured State-Spaces for Long-Form Video Understanding

論文紹介：Selective Structured State-Spaces for Long-Form Video Understanding

論文紹介：Selective Structured State-Spaces for Long-Form Video Understanding

新人研修　後半 2024/04/26の勉強会で発表されたものです。

新人研修　後半 2024/04/26の勉強会で発表されたものです。

新人研修　後半 2024/04/26の勉強会で発表されたものです。

Amazon SES を勉強してみるその２2024/04/26の勉強会で発表されたものです。

Amazon SES を勉強してみるその２2024/04/26の勉強会で発表されたものです。

Amazon SES を勉強してみるその２2024/04/26の勉強会で発表されたものです。

Amazon SES を勉強してみるその３2024/04/26の勉強会で発表されたものです。

Amazon SES を勉強してみるその３2024/04/26の勉強会で発表されたものです。

Amazon SES を勉強してみるその３2024/04/26の勉強会で発表されたものです。

Flat UIまとめ

1. Flat UI まとめ 2013/05/19 @mauekusa

2. フラットデザイン立体的フラット立体的でなく、エフェクトを使わないフラットなデザイン

3. 色ブロックアイコンシンプル

4.

5.

6.

7.

8.

9.

10.

11. Flat UI 事例 Facebook Brit + Co. ClearWeather フラバ ﬁtbit Svpply InfomaticFigure

12. まとめビビッドカラーとの相性が良いシンプルで分かりやすいUI シャドウや罫線を用いない文字サイズにメリハリを出す