コンバージョン率が改善された実例から学ぶフラットデザインの効果的な使い方
一年くらい前は、フラットはただのトレンドでしょ、と言われることもありましたが、この一年で日本でも多くのWebサイトで採用されており、一過性のものではなくなりました。これから制作されるサイトの多くでフラットが採用され、またどんどん進化していくことと思います。 そんなフラットの見た目的な美しさだけでなく、実際に改善された事例を元にした効果な使い方を紹介します。 How Flat Design Increases Conversion Rates 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。� 海外のブロガーから日本の他ブログでの無断転載や無断翻訳を聞くのでご注意ください。削除依頼しても無視っていうからひどい。 ミニマリズムがコンバージョンレートを261%増やした例 コンテンツファーストとモバイルファースト ボタンのデザインを変えたらコン
フラットデザインがクールな円グラフ描画jQueryプラグイン「Pie Chart」:phpspot開発日誌
Pie Chart jQuery Plugin - Flat Framework フラットデザインがクールな円グラフ描画jQueryプラグイン「Pie Chart」 次のようなフラットでインタラクティブなグラフが描画できるプラグイン。 フラットってなんでこんなにシンプルなのにカッコいいんでしょうね 関連エントリ 線グラフを描くだけの軽量グラフ描画JS「Aristochart」 クールでアニメーションするグラフを描画できるHTML5チャートライブラリ「Chart.js」 どんなデータもリアルタイムなグラフにできるフレームワーク「FnordMetric」 テーブルをグラフに変換してくれるjQueryプラグイン
フラットデザインでレスポンシブな超カッコいいフォームを実装できる「Grid Forms」:phpspot開発日誌
Grid Forms Data entry made beautiful フラットデザインでレスポンシブな超カッコいいフォームを実装できる「Grid Forms」 フォームというと<input>で実装されたエレメントが多数出てくるのが当たり前なWEBですが、次のように、紙のフォームのようなフラットなデザインでグリッド状がクールなフォームが実装できます。 レスポンシブに綺麗にリサイズされます。 フラットなサイトではいい感じに活用できそうですね 関連エントリ スマホでのフォーム入力をシンプルに分かりやすくできる「Leader.js」 マークアップにValidateルールを定義してフォームバリデーションできるjQueryプラグイン「Ketchup」 画像をクリックで選択してフォーム送信できるようにするjQueryプラグイン「Image Picker」
フラットなデザインでユーザーが使いづらいのを解消するアドバイス -フォーム編
フラットなスタイルの一番使いにくいところは、どこですか？ 僕はそのシンプルなスタイルのボタン（リンク）です。一見ボタンに見えない、まるで見出しやコンテンツの一部のようにデザインされていると操作に迷ってしまいます。 そんなフラットなスタイルで、ユーザーが最小限の努力で、正確に何をすべきか理解できるフォームを作成するためのアドバイスを紹介します。 Flat UI and Forms 下記は各ポイントを意訳したものです。 フォームのUIで大切なポイント フォームの使いづらい例と改善例 フォームのUIで大切なポイント フォームとは、そのプロダクトやサービスを受ける時に情報を交換するためのインタラクションです。これはサインアップやウェブ検索をはじめ、Eコマースやネットバンクまですべてを含みます。 まずは、フォームのデザインでユーザーに必要とされることとコンテンツで必要とされることの相違点を見てみまし
iOSのデザインはフラットにすればイイってものじゃない - #RyoAnnaBlog
iOS 7でデザインがフラットになったが、二次元になると直感的な操作ができなくなったり、野暮ったくなる事がある。例えば、Safariのブックマークやカレンダーの日時選択。 白背景に青文字は手を抜いたデザインに見えるし、日時の選択も、拡大鏡で工夫されているが文字だけでは操作しにくい。特に日本語のフラットデザインは、白背景と原色文字の組み合わせが悪いように思う。 そこで今回は、Dribbbleにアップされているフラットデザインのアイデアを集めた。 Alarm Clock (wip) by Rick Waalders Experiment with Metro UI by Yura Yarokhovich Musix app by Scardi Shek Analytics by Rovane Durso iOS 7 animation [.ae giveaway] by Fabio Basil
iOS 7がフラットデザインを採用した理由、「既存のメタファーでは表現できない時代に」
iPhone 5c/5sが当初から搭載し、18日から順次各国での公開が始まったiOSの新バージョンである「iOS 7」。そのデザイン上の特徴の一つが「フラットデザイン」である。従来のiOSは、そのアイコンデザインなどがリアルに存在する物のメタファーで構成されていたが、iOS 7ではシンプルさが際立つデザインとなった。 この背景として、UX/UIの専門家であるコンセント 代表取締役/インフォメーションアーキテクトの長谷川敦士氏は「デジタル化が当たり前になり、既存のメタファーだけで表現するには無理が来ている」と述べる。長谷川氏、そして同じくコンセント 代表取締役/プロデューサーの上原 哲郎氏の二人にiOS 7で何が変わったのかを聞いた。
ミニマルデザインとは？7つのヒントと事例 デザイン会社 ビートラックス: ブログ
Keep it Simple – これはAppleのデザインに対する一環したフィロソフィーである。全てをシンプルにする事。それが彼らの中心的な考え方になっている。 実は、彼らに限らずよく海外のデザイン業界では下記のフレーズが頻繁に使われる: Less is more – より少ないことは、より豊かなことEverything you need, nothing you don’t – 必要なものだけPerfection is achieved when there is nothing to take away – 完璧とはこれ以上削れない状態の事であるこれらはシンプルである事がどれだけ重要であるかを端的に表現している。 もしデザインの仕事が問題解決の為のクリエイティブなプロセスだと定義するのであれば、その方法論はシンプルである事に超した事は無い。言い換えると、最も効率的なプロセスで物質の本
フラットだけど立体的なCSS3アニメーション付モーダルダイアログ実装デモ:phpspot開発日誌
Creating CSS3 Animated Modal Windows in an Image Gallery | InsertHTML フラットだけど立体的なCSS3アニメーション付モーダルダイアログ実装デモ。 フラットデザインなのに立体的なUIはなかなかクールで、フラットデザインを実装する上で今後欠かせない要素となってきそうです。 そのモーダルダイアログを実装するデモが公開されており、一見の価値ありです。 関連エントリ ハイクオリティなソーシャル向けのフラットアイコンセット BootstrapベースのフラットUI実装フレームワーク「Furatto」 文具等のフラットなステーショナリーアイコンセット フラットな６２種類のファイル・タイプアイコンセット「File Type Icons」
フラットデザインに即採用！美しい日本語フォント。しかも無料。
最早至る所で見聞きするフラットデザイン。Appleを初めGoogleや各ウェブサービス、アプリケーションのUIでもどんどん取り入れられています。ご存知の通り凹凸が無く巧みに配色を考えられた美しいデザインで、しばらくトレンドとなる事は間違いないでしょう。 そこでやはり気になるのがフォント。こだわりだせば切りが無いものですが、一度これというものに出会うとデザインの基盤として大活躍してくれます。 今回Webで見つけて早速持っているMac全てにインストールしたフォントはこちら。 M+ FONTSの紹介 M+ OUTLINE FONTS はコンピュータなどでの個人利用をはじめ、商業目的での利用、フォント内容の改変、改変後の再配布にも制限の無い、自由なライセンスで公開しているアウトラインフォントです。 海外のフォントはかっこいいのがたくさんありますが、結局英数字だけなので日本語を使用したい場合はバラン
Pros and Cons of Flat Design
With Postcards Email Builder you can create and edit email templates online without any coding skills! Includes more than 100 components to help you create custom emails templates faster than ever before. Start Free If you are an on-trend designer this is the time to jump on the flat design ship if you have not already. Projects using the style – and using it well – are getting a ton of recognitio
フラットなテキスト要素を立体的に表示できるプラグイン「jQuery Flat Shadow」:phpspot開発日誌
jQuery Flat Shadow by Pete R. | The Pete Design フラットなテキスト要素を立体的に表示できるプラグイン「jQuery Flat Shadow」 次のように、テキストを立体的にみせることができるプラグイン。フラットだけど立体感がでて超クール とりあえず、こういう表現ができるんだ、というところで知っておくだけでも応用して新しい表現ができるかも。 動的にこういうことが出来るというのも素晴らしい。 関連エントリ CSS3による多彩なテキストアニメーションが実装できるjQueryプラグイン「Textillate.js」 文字を高速に切り替えながらテキストをカッコよく表示できるjQueryプラグイン「Text Effects」 テキストエリアを動的リサイズ＆カスタマイズ可能なjQueryプラグイン テキストを燃え上がらせられるjQueryプラグイン「jQu
ソシオメディア | メタファからイディオムへ
「フラットデザインはUIを進化させるか」では、フラットデザインの特徴を述べると同時に、これからUIが進んでいくであろうモードレスデザインとの関係について触れました。 今回はその裏にある、UIデザインの本質的な要素の捉え方について、メタファとイディオムという観点から掘り下げてみます。またそこから導かれる、開発プロジェクトにおけるUIデザインの位置づけについても考えてみます。 スキュアモーフィック → フラット フラットデザインと呼ばれる平面的で抽象的なUIのビジュアル表現は、装飾的で写実的なスキュアモーフィックデザイン（現実の物の形や質感を模した表現）に対するカウンターとして注目されています。 つまり、「スキュアモーフィックからフラットへ」というトレンドの変化です。 フラットデザインは、単に見た目に新鮮であるだけでなく、UIオブジェクトから例えばドロップシャドウ、テクスチャ、境界線といった装
実際に触れて楽しんでみよう！ロングシャドウをいろいろ試すことができるオンラインツール -Long Shadow Generator
最近よく見かけるロングシャドウをいろいろと試すことができ、そのスタイルシートも生成してくれるオンラインツールを紹介します。 「ロングシャドウ」って何？ という人は、下記ページを参考に。 フラットの後にじわじわきてるデザインのトレンド -long shadow design
流行るかどうかは別としてロングシャドウデザインを考察してみたら意外と深かった – オレインブログ
フラットデザインが世間を賑わしてまだそれほど時は流れていませんが、海外ではフラットデザイン2.0という呼ばれ方もされることがあるようなロングシャドウデザインというものがどんなものなのか考察してみました。 そして、ロングシャドーデザインを作る方法を勝手ながら考えてみました。 ドロップシャドーデザインとは？ ロングシャドウデザインとは、言葉で説明するとこんなかんじになるのでしょうか。photoshopvipさんの言葉を引用すると、 斜め45度に差し込む光が作る、その名の通り、シャドウ部分を強調した、冬の日によく見受けられる様な、長い影が印象的なデザイン とこのような感じになりますかね。的確な表現かと思います。 ざっくりとどんなものかを検証してみました ハイライトの角度、シャドウの角度、ともに45°できれいに作ってあります。そして、配色ですが分かりやすいようにHSB方式で表記してあります。 ハイ
フラットデザインのコツ的なアレ - 納豆には卵を入れる派です。
P4Dで教えていただいたエンジニアさんに聞かれたので、なんか整理しきれてなくてざっくりなんですが、取り急ぎ、なんかそれっぽくなるコツみたいなのを独断と偏見でまとめてみました。 3色〜5色くらいの色を画面の中で均等に使うのおすすめ 作りたいサービスが何で色分けできるか考えます。ちょうどよく3〜5種類くらいのステータスやカテゴリなどがあったら、それに応じて色が変わるとかするとうまくハマる。かも。 Flat UI Colorで色選び http://flatuicolors.com/ という便利なサイトがあって、ここから3〜5色くらい選ぶとよいです。クリックするとカラーコードがコピーされます。あら便利。赤は他の色と仲良くするのが難しめ。 Sassで彩度を抑えると落ち着いた色調になって、使いこなしの難易度が低くなります 上のサイトもそうなんですが、Flat UIによく使われている色は、鮮やかなが多く
フラットデザインにも有効！？スニーカーからカラーピックしてみる｜株式会社アクトゼロ｜クリエイティブブログ
こんにちは、小林です。 昨日は父の日でしたね。親元を離れて一人暮らしをしている身なので、こういう日でないと何かをプレゼントしたりすることがありません。 孝行について、とても感銘を受けた言葉があります。 【孝行は親がさしてくれて、初めて子ができるもので、子が孝をするのではなく、親が子に孝をさせるのである。（「論語と算盤／渋沢栄一」より）】 孝をさせてくれる親がいることに感謝し、一層頑張っていきたいと思います！ それでは本題に。 iOS7やwindows8などを見ると、徐々にデザインがシンプル化してきているように感じる今日この頃。 その代表的なものとしてフラットデザインがトレンドとして注目されてるのはweb業界では周知の事実です。 細部にこだわったスキューモーフィックデザイン（Skeuomorphic design）は終わったという噂もあったりなかったり…( ﾟдﾟ) でもこういったリッチな世
UIにおけるシンプルの価値と上岡龍太郎
フラットデザインですね。 iOS7のUIの画面キャプチャーを見ながら、Androidが前からやっていたよね、とかWindows8もその流れだよね。といった話題に花を咲かせたここ数日でした。 やっぱりシンプルを極めるとこうなるのかしらね。もっこりしたUIとか影とか立体感がシンプルじゃないよね。 的な話には「画面キャプチャーだけでいろいろ言っている」という違和感を超え、何かしっくりこない気分にさせられていたものです。 そんなときわたしが思い起こしたのは、桂三枝（現：六代 桂文枝）のことでした。 桂三枝といえば「いらっしゃ〜い」です。 「いらっしゃ〜い」 字面だけみると、ただの挨拶というか、だからどうしたのか。と、疑問さえ湧いてくる。 だがしかし、この言葉が三枝から繰り出された瞬間、人は笑うのです。 たぶん、三枝といらっしゃ〜いの歴史を知らない子供でも、笑うでしょう。 そして三枝以外の他のだれか
フラットデザインとは？UIの特長と注意点 デザイン会社 ビートラックス: ブログ
最近「フラットデザイン」という言葉をよく耳にする 。 このデザインスタイルは、グラデーションやシャドウなどの立体的要素を極力避けコントラストの強いカラーパネルと文字要素を活用して構成される。このスタイリッシュなフラットデザインの出現により、今までのエフェクトゴテゴテのUIがいきなり古くさく感じる事態が発生している。 ここ最近ではGoogleが提供する種々のアプリやFacebookのUI、Windows 8、そして多くのスタートアップ企業が提供するスマホアプリで、このフラットデザインをUIのテーマとして採用するケースが増えている。 例えその呼び名を知らなくても、サイトやアプリを通して、多くのユーザーがそのデザインスタイルを目にしていると思う。代表的な例としてはClear、Moni、Clear Weatherなどが挙げられる。 フラットデザインの主な特徴特にはっきりとした決まりがある訳ではない
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
さすが、Apple！刷新されたウェブサイトで見つけた3つのこだわりとは？
「iOS 7」における、デザイン哲学のせめぎ合い