マリオのUIがフラットデザインになった日を知っているか 〜 【視伝研】UIデザインの歴史を紐解く｜Yamashita Angelica｜note

2023/04/18 366 users 年表形式 考察 おことわり ご承知おき いちファン

※ おことわり ※ この記事内で取り扱っているゲーム作品について、私は開発上の関わりは一切ありません。あくまでいち個人・いちファンとしての考察であることをご承知おきください。今回の視伝研テーマは【UIデザインの歴史を紐解く】です。 年表形式でUIデザインの歴史を作りながらメンバーと意見を交換しました。PCや... 続きを読む

業務系システムは『イケてるフラットデザイン』だと使いにくい？現場が本当に必要だった物との比較

2021/10/05 558 users イケ 現場 比較 業務系システム

でゅら @rahandu アプリケーション全般でそうなんだけど、モニターの解像度がでかくなるにつれて、デザインは余白を作りたがるのなんなんだろう 広くなった意味がないし古いデバイスで作業しづらいし良いことないと思う twitter.com/ichirowo/statu… 2021-10-05 18:00:54 Lacnor @Lacnor_JP ボタンを、形はそのままで、... 続きを読む

パワポ資料をぐっと魅力的にしてくれる「アイコン」を無料でゲットしよう！ - グローバル経営の極北

2018/07/13 1682 users パワポ資料 クク テンプレート アイコン グローバル経営

最近資料デザインを「現代的」にしたいなと思っていて、フラットデザインのテンプレートを購入して研究したりしてます。そこで重要となるのが「アイコン」で、うまく使うだけで資料がぐっと見やすくなります。いろいろとググってみると良いものがたくさんあるので、今回はそれをご紹介。 まずはこちら。 Googleが提供し... 続きを読む

デザインのアイデアが豊富！最近のWebデザインで採用されているレイアウトやUI要素が揃った素材のまとめ | コリス

2017/03/13 221 users スクロール 空白スペース マテリアルデザイン 前提 テクニック

最近のWebデザインは、フラットデザインやマテリアルデザインが少しずつ進化し、コンテンツにフォーカスされたシンプルなデザインが定着してきました。写真は大きく、テキストは読みやすく、空白スペースは大胆に配置されています。 レイアウトは縦長型や分割型、カード型の人気が高く、デスクトップでもスマホでもスクロールを前提にしたデザインをよく見かけます。 最近のWebデザインで使われているさまざまなテクニック... 続きを読む

2017年これからのWeb制作業界の流れ、注目されているテクニックやツール、Webデザインのトレンドなどのまとめ | コリス

2017/01/24 354 users コリス ミニマリズム 切り口 アニメーション コラボレーション

数多くのブログで2017年のトレンドをさまざまな切り口でポストしているので、その中から特に印象的で共感がもてたものをまとめて紹介します。 注目キーワードは、コンテンツファースト、レイアウトの多様化、フラットデザインやミニマリズムの進化、アニメーションの重要性、コミュニケーション・コラボレーション、AR/VR。 2017年のトレンドカラーは、フレッシュなグリーン。 参考: 2017年のトレンドカラー... 続きを読む

大学ノート（ルーズリーフ）をモチーフとした手書きまとめノート風Webサイトを制作したときに使用したCSSテクニック - Qiita

2016/12/27 110 users ルーズリーフ Qiita 白地 アク CSSテクニック

まとめノート風Webサイトを作ろうとしたきっかけ 本当はWeb制作本を執筆してみたかったのですが、資金等の関係もあり、Web上でブログ形式で書いていこうと考えました。そこで困ったのがWebサイトのデザインでした。最近では、ほとんどのブログで フラットデザイン が使われていますね。Qiitaもその１つだと思います。フラットデザインとは、色に関していえば基本は白地や薄いグレー色で、その他1,2色をアク... 続きを読む

フラットデザイン： 起源、問題、フラットデザイン2.0のほうがユーザーに望ましい理由 – U-Site

2015/11/02 340 users U-Site ユーザビリティ上 起源 要素 課題

フラットデザインとは2012年ごろに広まったWebデザインのスタイルである。それは広く今も利用されているが、過度な利用は深刻なユーザビリティ上の問題を引き起こしかねない。フラットデザインによって発生するユーザビリティ上の最大の課題の1つに、クリック可能な要素のシグニファイア不足がある。フラットデザイン2.0は、それに対する優れた解決策を提供してくれる可能性がある。 公開：2015年11月2日付（日... 続きを読む

ユーザ・インターフェースのためのイージングカーブをつくる | デザイン | POSTD

2015/06/26 186 users POSTD アニメーション 導入以来 モーションデザイン 理解

フラットデザインの導入以来、UIにおけるアニメーションの質の重要度が増しています。では、質の高いアニメーションはどのように作られるのでしょうか？その理解のため、イージングカーブがどのように機能しているかということについて見ていきましょう。フラットデザインの導入以来、アニメーションの質が、今までにないほど、優れたインターフェース作成のために必要不可欠なものとなっています。モーションデザインを通して、... 続きを読む

モダンミニマリズムという選択―フラットデザインはデザイナーを堕落させたか？ | デザイン | POSTD

2015/05/25 104 users 堕落 POSTD iOS7 マテリアルデザイン 役割

iOS7やマテリアルデザインの登場によって、フラットデザインが増え、“モダンミニマリスト”というデザインムーブメントが生まれました。そのような変化がデザイナーの働きにどのような影響を及ぼしたのか、これからがどうなっていくのかについて、建築のモダンミニマリズムを参照しながら検討してみましょう。フラットデザインはWebデザイナーの役割を奪った？私はそうは思いません。 私は最近、『デザイナーの堕落』とい... 続きを読む

よくわかるマテリアルデザインの設計 | fladdict

2015/05/22 1137 users iPhone fladdict iOS メタファー 後者

iPhoneとAndroidではiPhoneのほうが良くできているが、iOSのフラットデザインとAndroidのマテリアルデザインでは後者のほうが、優れているように思える。ただしマテリアルデザインは、紙のメタファーに囚われているため、今後の技術発展の方向しだいでは、逆にインターフェースの進歩を制約するかもしれない。 以下、自分の理解をまとめたメモ。マテリアルデザインは、デザインとエンジニアリングが... 続きを読む

Windows 10で崩壊するModern UI - 趣味まるだし

2015/04/27 350 users 我々 Windows UIデザイン トレンド シーン

※下記はWindows 10のTechnical Preview版を元に書いたものです。製品版では変更になる可能性があります。 「フラットデザイン」の先駆けとなり、あらゆるシーンでUIデザインのトレンドを変えたModern UI。我々が愛したそんなModern UIは、Windows 10の登場で崩壊しつつあります。そしてその影響は特にWindows Phoneにおいて顕著です。 Windows ... 続きを読む

ブラウザー上で動作する HTML5 ドラムマシン公開。作ったパターンは WAV 形式でダウンロード可能 - Engadget Japanese

2015/03/23 388 users WAV ソフトウェアデベロッパー ブラウザー上 パターン 形式

ブラウザー上で動作する HTML5 ドラムマシン公開。作ったパターンは WAV 形式でダウンロード可能 BY Munenori Taniguchi 2015年03月23日 16時09分 0 ソフトウェアデベロッパーのJamie Thomsonが、ブラウザー上で動作する「HTML5 Drum Machine Emulator」を公開しました。 ローランドの TR-808 をフラットデザインで描いたか... 続きを読む

フラットデザインの成り立ちとGUIへ実際にどう使うのかがものすごくよく理解できるムービー - GIGAZINE

2015/02/23 127 users GIGAZINE Graph GUI ムービー テクスチャ

影やテクスチャなど余計な装飾を排除したフラットデザインは、ウェブ上で使用するとユーザーがページのどこをクリックしていいかわからなくなるという欠点を持ちつつも、現在では色んな場所で使われています。なぜフラットデザインが優れているのか、そしてどうしたらフラットデザインをコンテンツに使うことができるのか、LGの公開しているムービーを見ると、非常によく分かるようになっています。 LG G3 : Graph... 続きを読む

フラットデザインに合うアイコンが6500種類も手に入るサイト「ROUND ICONS」 ｜ ライフハッカー［日本版］

2014/10/07 191 users ライフハッカー アイコン psd SVG EPS

「ROUND ICONS」はフラットデザインに合うアイコンが6500種類も手に入るサイトです。いくつかのパックに分かれており、Ai、PSD、SVG、EPS、PNGなどの形式で配布されています。無料ではありませんが、クオリティの高いアイコンがまとめて手に入るのは嬉しいですね。 ROUND ICONSへアクセスすると、サンプルがたくさん表示されています。パックごとでまとめてダウンロードすることができま... 続きを読む

コンバージョン率が改善された実例から学ぶフラットデザインの効果的な使い方 | コリス

2014/10/02 230 users 一過性 コリス ブラッド トレンド 実例

一年くらい前は、フラットはただのトレンドでしょ、と言われることもありましたが、この一年で日本でも多くのWebサイトで採用されており、一過性のものではなくなりました。これから制作されるサイトの多くでフラットが採用され、またどんどん進化していくことと思います。 そんなフラットの見た目的な美しさだけでなく、実際に改善された事例を元にした効果な使い方を紹介します。 How Flat Design Incr... 続きを読む

web開発者のための さまざまな動きを表現できるチュートリアルまとめ「30 Fresh Articles and Tutorials for Web Designers」 | DesignDevelop

2014/09/27 268 users DesignDevelop 主流 チュートリアルまとめ 要素

webサイトを魅力的に見せるためには、デザインはもちろん、動きにも力を入れたいもの。シンプルなフラットデザインが主流となっているため、特に重要な要素となってきているのではないでしょうか？今回はそんな時に参考にしたい、さまざまな動きを表現できるチュートリアルまとめ「30 Fresh Articles and Tutorials for Web Designers」を紹介したいと思います。 Styli... 続きを読む

進化するフラットスタイル！確認しておきたい最新Webデザイン23個まとめ - Photoshop VIP

2014/09/24 116 users フラットスタイル Photoshop Vip エントリー

フラットデザインという言葉が登場してからある程度経過し、CSSアニメーションを加えたり、SVGファイルを活用したりと、デザインスタイルも少しずつ変化しているようです。今回は最新のフラットスタイルを見ていきましょう。 海外デザインブログGraphic Design Junctionで、フラットスタイルを採用した最近のWebサイトデザインをまとめたエントリー「32 New Examples Flat ... 続きを読む

CSS3アニメーションに挑戦！色が移り変わる背景を実装しよう | Webクリエイターボックス

2014/08/06 196 users Webクリエイターボックス 背景 CSS3アニメーション

フラットデザインが流行ってからは、背景を一色で塗りつぶしたデザインのサイトが多くなりました。しかしそれだけではなんだか味気ない！という事で、CSS3のアニメーションを使って、徐々に色を変化させてみましょう！色の組み合わせや順番を調整して、パッと目を引くデザインに！ Themifyではホームのファーストビューでビビッドな色を少しずつ変えながら表示しています。今回目指すのはこんな感じの背景です。このサ... 続きを読む

フラットデザインのアイコンセット 40 #2 | NxWorld

2014/07/22 112 users アイコンセット NxWorld デザインアイコン 機会 カラー

まだまだ使う機会も多そうだし、カラーの参考とかにもしたいと思ってメモしていたフラットデザインのアイコンセットが溜まってきたので整理兼ねてシェアします。中には単なるデザインアイコンではなく、アニメーション付きのもあります。 続きを読む

ハイクオリティなフリー素材がPSD形式でダウンロードできるサイト20選 | 株式会社LIG

2014/07/15 246 users PSD形式 株式会社LIG grap ラクチン フリー素材

こんにちは、デザイナーのサリーです。 フラットデザインが流行してから、アイコンやモックアップ素材を使う機会が以前より多くなったように感じます… 素材をダウンロードしたとき、編集がラクチンだと助かりますよね。 今回はPSD形式などのまま素材をダウンロードできる、とっても太っ腹なサイトを20個ご紹介します。 PSD形式のフリー素材を配布しているサイト GraphicBurger http://grap... 続きを読む

フラットデザインに似合うボタンが、スライダーを調整するだけで作れるサイト「2.5dBUTTON」 : ライフハッカー［日本版］

2014/07/12 434 users スライダー カメきち マウス ライフハッカー HTML

Webサービス , デザイン , 趣味 フラットデザインに似合うボタンが、スライダーを調整するだけで作れるサイト「2.5dBUTTON」 カメきち 2014.07.13 07:00 「2.5dBUTTON」はフラットデザインに似合うボタンが作れるサイトです。マウスを乗せるとポコッと立体的に浮き上がるボタンが作成できます。作ったボタンはHTML、CSSごとダウンロード可能です。 以下に使ってみた様子... 続きを読む

【デザインまとめ】綺麗なデザインの管理画面 40種類 | モノづくりブログ - 株式会社8bit

2014/05/15 675 users 株式会社8bit 管理画面 デザイン デザインまとめ 40種類

今日は管理画面のデザインを、まとめてみました。いつもより多めな40種類です。トレンドを反映してか、フラットデザインが多いですね。 通常の静的なサイトのデザインとは異なり、投稿がある場合無い場合とたくさんのパターンを考えながら制作しなければならないので、デザイン力が問われます。これらを日本語に置き換えるとまた違って見えたりするのですが、ひとまず、ご参考になればと思います。 ▼ The Kamarel... 続きを読む

是非ストックしておきたい フリーアイコンセットまとめ「20 Fresh and Beautiful Icon Sets for Free」 | DesignDevelop

2014/04/23 128 users DesignDevelop Dribbble デザ 主流

常に新しいデザインのものがリリースされるアイコン。主流のフラットデザインから、立体感のあるデザインまで、いろいろなタイプが登場しています。今回はそんなフリーアイコンセットまとめ「20 Fresh and Beautiful Icon Sets for Free」を紹介したいと思います。 （Dribbble – Outline Icons Part 3 by Adrian Goia） さまざまなデザ... 続きを読む

IllustratorでWeb制作をするときに気をつけたい5つの設定 | 株式会社LIG

2014/04/18 217 users Illustrator DTP 株式会社LIG 九州ライター

CCの魅力を感じつつもCS6製品で様子を見ている、月額支払いがちょっと怖い。そんな九州ライター村上です、みなさんこんにちは。 今人気のフラットデザインはIllustratorが得意とする部分なので、最近Illustratorを使ってWebサイトを作ろうという動きが増えてきました。Illustrator使いとしては非常に嬉しい事です。しかし、DTPを得意とするIllustratorでWebサイトを作... 続きを読む

これは今読むべき！Web制作の今がわかりやすく説明されている「現場のプロが教えるWeb制作の最新常識」を読みました！ | 男子ハック

2014/04/13 112 users 男子ハック 現場 Web制作 最新常識 プロ

Web制作の現状やトレンドを知っているか知らないかでは大違い 目まぐるしいスピードで変化しているWeb制作の現場。最近では「フラットデザイン」「レスポンシブデザイン」「パララックス」などWeb制作の職業についていなくても耳にしたことがあるキーワードがたくさん。他にもHTML5やSass、Gitなど新しい言語やプロジェクト管理について、今のWeb制作の現場がどうなっているのか非常時わかりやすく説明さ... 続きを読む