calendarcodediamondfacebookfingerglobalgoogleplushatenahomepagetopplainpocketrssservicetwitterwordpresshome2searchfoldernext-arrowback-arrowfirst-arrowlast-arrow

フラットデザイン総まとめ!ツール、UI、テーマに素材

FlatDesign

ECサイトなどでは、デザインがクリーンすぎたり、余白が多いと成約率が下がることもあるので、フラットデザインをクライアントさんに中々提案できずにいます。(フラットデザインについてはこちら

とはいえ、画像が少ないからロードは早いし、なによりコーディングの時短も大きいですよね。そろそろ、フラットデザインに慣れてきたユーザーも多くなってきたし、Webサービスなんかでは積極的に使いたいところです。

今回は、WPテーマにテンプレート、必須ツールやCSSなどフラットデザイン絡みの情報を整理。まとめサイトをさらにまとめてあるので、大体は揃うと思います。

PR
IT/WEB業界への転職なら
Sponsored Link

もくじ

1.オンラインツール
2.WordPressテーマ
3.Bootstrap テンプレート
4.アイコン
5.iOS7
6.フラットデザインのコツ
7.UI
8.CSS/JavaScript/jQuery
9.デザインの参考
10.フォント

1.オンラインツール

flatUI

とりあえず、相当有名になってしまったツールから。フラットデザインでよく使われてる色(カラーコード)を「ワンクリック」でコピペ出来る。HEX/RGB/RGBA指定可能。ブログリニューアル時にも使わせていただきました。

Guideline-Colours

ソーシャルサイトで使われている「サムネイル画像とカラーコード一覧」を見ることが出来る。すごく良くまとまっていて見やすいんですよ。今旬なブランドでフラットデザインを採用しているところは多いので、参考に出来ます。

colourcode

マウスカーソルを移動させて、直感でクリック!スクショもコードもワンクリックで自動生成できるカラースキーム作成ツール。マウスをグリグリ動かしていると、癒されます。

Colours

ウェブサイトのURLを入力すると、配色を自動取得する。フラットデザインを採用しているサイトの配色などもゲット!取得にすこ~しだけ時間がかかるけど、正確に色を抽出してくれるのでありがたいですね。

2.WordPressテーマ

wp

最近、WordPressテーマ探しが趣味みたいになっていました。こちらのサイトはフラットデザインのwordressテーマを37個紹介してあります。Metro(Windows8)ライクなもの、シンプルから定番までひと通り揃っていました。

3.Bootstrap テンプレート

bootstrap

デザインが苦手な人には必要なテンプレート。CSSだけで適用できるものもあるので、これは助かりますね~。個人的には「Flatstrap」がシンプルで好きです。ThemeForestでもBootstrapテーマが販売されてたんですね。

4.アイコン

icon

iOS、イラスト風、天候系まで揃っていました。Macユーザー向けのアイコンに関しては、少し違和感を感じましたが、これはこれでありなのかなと。食べ物系のアイコンはこちら。

Huge

大きめのフラットアイコンのフリー素材まとめ。SEOサービス系のアイコンはあんまり見かけないので惹かれました。それにしてもAdobe系は多いですね。

5.iOS7

ios

カナダのデザイン会社からiOS 7のPSD素材が早速配布されていました。毎度おなじみとはいえ、早いですね~。ちなみにTeehanはストリートビューを早送り動画に変換するシステムなんかも開発しています。

demo

CSS3 で作るフラットなボタンデザイン。ダウンロードzipにはcss/jsの他にフォントのIcoMoonも同封されています。

6.フラットデザインのコツ

flat_point

フラットデザインっぽくならない原因なんかが分かるようになります。悩みの種である日本語フォントは細文字が良く、フォントはGoogle Fonts Latoがおすすめらしいので使ってみます。

fresh

フラットデザインの歴史とはなんぞや?というところから書いてあります。アナログであれば20世紀初頭からあったんですね…。それにしても、タイポグラフィの使い方がデザインのクオリティを左右するので、和文フォントは難しいですが、タイポグラフィも細心の注意を払わなくてはいけないですね。

minute

@ITによるとフラットデザインとは「のっぺり(疑似的な光源はWebではない)」と書いてありました。のっぺりも良いですが、クリック出来るボタンがボタンに見えないケースとか、ユーザビリティの低下にならないように、気をつけなければならない部分もあります。

modernUI

スタイリッシュさを追い求めていくのと、使いやすさは直結しない。確かに余白やフォントなど、アルファベット文化には無い弊害が日本にはあります。

7.UI

UI

UIキットのまとめ。パステルカラー、ボタン、チャート、ナビゲーションバーなど揃ってますね。

flatUI

こちらも編集可能なPSD素材一式。ソーシャルボタン、マップ、メールフォーム、動画フォームなど。

freeGUI

なんと言いましょうか、シンプルで分かりやすいPSDテンプレート。角丸や影付きのボタンアイコンもあります。

8.CSS/JavaScript/jQuery

css_js

フラットデザインUIを簡単に実装できるCSS、javascriptテクニック。アコーディオンとかドロップダウン・ボタンはもちろん、タイポグラフィも準備してあります。

jquery

jQueryモバイルで使えるフラットUIのテーマ。とにかく軽そうです。

9.デザインの参考

desigh_sankou

フラットデザインのサンプル集。タイポグラフィはフォントだけじゃなくて、大きさ・文字詰め・行間などを中心に見ていきます。

flt

デザイン性の高いフラットデザインサイトを載せてある。僕は配色や写真の入れ方、文字の載せ方、ぼかし方を参考にしてます。閲覧数とお気に入り数を参考にダラ見できますね。

bashooka

インスピレーションを得ようとするならこれ。モバイルなんかも結構あり。比較的新しく綺麗なUIを載っけてあります。欧文フォントを日本語にすり替えたら、やっぱダサくなるのかな~とか想像したり。

10.フォント

font

じゃあ、フォントは何を使えばいいの?という時に。フリーフォントなので助かります。個人的にはサンセリフ体(飾りがないフォント。広告物に多い)が簡単かと思います。

ozpa

フォントで画像を作って見せる昔のスタイルは修正が面倒ですよね。そこでローカルに依存しないGoogle Web Fontsの基本的な使い方。現行のブラウザであれば大体表示できます。フォントを選び、CSS設定、適用でOK。セリフサンセリフ・手書きとフィルタリングできるので選択も楽です。

まとめ

フラットデザインを簡単に言うと「影・グラデーション・エンボス・ボーダー・アイコンを使うな、ビビッドカラーと背景画像を使え。コンテンツに集中できるし、メンテも楽。タイポグラフィは細心の注意を払え!」ということですが、ユーザビリティの低下にならないように、ボタンの分かりやすさやマウスホバーで動きをつけたり、インタラクティブ面でも色々と工夫は必要だと思います。

クライアントさんのECサイト(グルメ関係)を立ち上げたとき、ビジネス目的とマッチしていない「フラットデザインだと、盛り上がり感がうまく出せない」などの理由で、フラットデザインは採用しませんでした。不思議なもんで、デザインがクリーンすぎると成約率が下がることもあるんです。自分のブログやサイト、Webサービスなら、一度試してみてもいいんじゃないかと思います。

以上、フラットデザインを簡単に作れるテンプレートや素材まとめでした。

スポンサード リンク

この記事を書いた人
投稿者:commte

株式会社コムテ代表取締役。2015/8:弊社にてWeb制作スクールを開始。 WebDesign + Web制作 (最新情報 配信)。おっとりした話し方をするおっさん。

URL:西田 鉄平
この後によく読まれている記事

Comments

Leave a Comment

コメントする

This site uses Akismet to reduce spam. Learn how your comment data is processed.