マリオの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デザインの参考に】ミニマリストに大人気！洗練されたシンプルで美しいHTML5ウェブサイトテンプレート10選【フラットデザイン/サンプル】 - Web Design Facts

2018/05/08 52 users ミニマリスト Web Design Facts サンプル

2018 - 05 - 08 【WEBデザインの参考に】ミニマリストに大人気！洗練されたシンプルで美しいHTML5ウェブサイトテンプレート10選【フラットデザイン/サンプル】 デザイン 参考サイト HTML CSS ワイヤーフレーム 昨今、日本だけではなく世界中で要素を最小限に抑えた暮らしをする方が増えてきました。 WEBサイトも例外ではなく、ミニマルなデザインが今求められています。 そこで本日は... 続きを読む

2018年のアプリデザインを予測！知っておきたいトレンド7選｜はんざわさき｜note

2018/01/05 63 users Note 予測 アプリデザイン 主流 去年

2016年からアプリやwebデザインは完全なフラットデザインではなく、やや立体感のあるデザインが主流になりました。 引き続き2017年もその傾向はありましたが、徐々に進化を遂げています。 今回は、去年の傾向から「2018年のアプリデザイントレンド」を予測してみました。 ディフューズシャドウ 2016年から根強い人気のディフューズシャドウ（Diffuse Shadow）は、2018年も多くのアプリで... 続きを読む

フラットデザインのウェブサイトはユーザーの時間を無駄にしブランドを傷つける可能性がある - GIGAZINE

2017/09/07 89 users GIGAZINE ネガテ ウェブサイト ユーザー ブランド

by Heima ウェブサイトやアプリに用いられる「フラットデザイン」は、モダンですっきりした印象を人に与えます。しかし、コンサルティング会社であるニールセン・ノーマン・グループの調査によって、フラットデザインには、ユーザーに余計な時間を割かせ、決断力を弱める効果があると判明。ボタンなどのナビゲーションがフラットデザインになることで、ユーザーのページ滞在時間は増えるものの、ブランドへの見方がネガテ... 続きを読む

【保存版】使わないと損！デザインに使えるおすすめ背景素材サイト15選 – フリーランスの悩める日々

2017/07/14 58 users フリーランス 背景 パターン フック 保存版

ここ数年でフラットデザインが流行ってるので、デザインする時に背景は単色が多かったのですが、LPのデザインなどをするようになり、背景のパターンをよく使うようになりました。 色々と重宝するので、いつも利用している素材サイトをまとめてみました。 いちいち探すのがめんどくさい人は、ブックマークしてね。 続きを読む

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

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

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

iPhoneは｢隠れ機能｣で効率をアップできる | iPhoneの裏技 | 東洋経済オンライン | 経済ニュースの新基準

2017/02/25 97 users iPhone iPh 初代iPhone 一目 抽象化

直感的に操作できることを売りにしていたiPhoneだが、「iOS 7」でフラットデザインを採用して以降、画面内の表示が抽象化され、どこにどんな機能があるのかが一目ではわかりづらくなっている。米国で発売された初代iPhoneからはすでに10年が経過しており、その間に追加された新機能も膨大な数に上る。ひととおりの操作を簡単に行えることは確かだが、教えられるまで、気づかない機能もあるはずだ。以前のiPh... 続きを読む

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色をアク... 続きを読む

フラットデザインへの長期接触： このトレンドが、どうユーザーの効率を徐々に下げているか – U-Site

2015/12/22 60 users U-Site コンテキスト Long 手がかり 原文

クリックできるUI要素のシグニファイアがなかったり弱かったりすると、ユーザーは次第にページ中をあやふやなままクリックしたり、マウスオーバーするようになる。そうすると、効率が落ちる一方、コンテキストからの手がかりやクリックへの即時フィードバックがより期待されるようになる。 公開：2015年12月21日付（日本語版）、2015年11月8日付（原文）　著者：Kate Meyer 原文（英語）： Long... 続きを読む

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

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

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

配色を考えるときに便利なサービスをまとめたサイト「UIPALETTE」 ｜ ライフハッカー［日本版］

2015/10/02 75 users UIPALETTE 配色 ライフハッカー マテリアルデザイン

「UIPALETTE」は配色を考えるときに便利なサービスをまとめたサイトです。マテリアルデザインやフラットデザインなどで使える配色パレットや、その他類似色を生成するサービスなどを使うことができます。 以下に使ってみた様子を載せておきます。 まずUIPALETTEへアクセスしましょう。左側にさまざまな配色に関するサービスが並んでいます。選択すると右側のページがそのサービスに切り替わりますよ。 このよ... 続きを読む

配色をもっと楽に！色の便利ツール、テクニックをまとめたサイトHTML Color Codes - PhotoshopVIP

2015/09/03 63 users PhotoshopVIP カラーピッカー hex RGB 配色

デザイン制作において頭を悩ますひとも多い、配色。困ったときに色を選ぶ手助けをしてくれるツールやチュートリアルをまとめたサイト、HTML Color Codesを今回はご紹介します。 カラーピッカーで直感的に色を選んだり、人気のあるフラットデザインやマテリアルデザインから色を選択したり、HTMLカラーコードから選んだりと、さまざまな配色の選び方を提案してくれます。選択した色のHEXやRGB、HSL値... 続きを読む

ユーザ・インターフェースのためのイージングカーブをつくる | デザイン | 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のマテリアルデザインでは後者のほうが、優れているように思える。ただしマテリアルデザインは、紙のメタファーに囚われているため、今後の技術発展の方向しだいでは、逆にインターフェースの進歩を制約するかもしれない。 以下、自分の理解をまとめたメモ。マテリアルデザインは、デザインとエンジニアリングが... 続きを読む

青色リンクのその先に： クリック可能なものは見てわかるようにしよう – U-Site

2015/05/10 71 users U-Site インタラクティブ 手がかり 原文 遵守

フラットデザインか否かにかかわらず、インタラクティブな要素は、クリック可能とわかる十分な手がかりを提供する必要がある。枠線、色、サイズ、一貫性、配置や、Web標準の遵守といった手がかりによってクリックできることを伝えれば、インタラクティブな要素の外観はそれにふさわしいものとなる。 公開：2015年5月11日付（日本語版）、2015年3月8日付（原文）　著者：Hoa Loranger 原文（英語）：... 続きを読む

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... 続きを読む

Material Designに備えておこう！さまざまなUIコンポーネントが揃ってるPSDとSketch用の無料素材 -Android Lollipop UI Kit | コリス

2015/01/23 70 users ユーザインターフェイス用 iOS版Chrome コリス

2015年注目のMaterial Designをベースにした45種類のUIコンポーネントが揃ったAndroid Lollipopのユーザインターフェイス用のデザイン素材を紹介します。 iOS版Chromeも先日のアップデートでUIが一新され、Material Designが採用されました。 今年はフラットデザインから進化したMaterial Designがガンガンきそうですね。 Android L... 続きを読む

1600種類以上のベクターアイコンが手に入るサイト「Streamline」 ｜ ライフハッカー［日本版］

2014/10/27 79 users str カメきち ベクターアイコン フラットアイコン アイコン

カメきち  - Webサービス,デザイン  12:00 PM 1600種類以上のベクターアイコンが手に入るサイト「Streamline」 「Streamline」は1600種類以上のベクターアイコンが手に入るサイトです。フラットデザインに合うアイコンが豊富に用意されています。基本的に有料ですが、100種類のフラットアイコンが無料で手に入りますよ。 以下に使ってみた様子を載せておきます。 まずStr... 続きを読む

ASCII.jp：あのサイトとはひと味違う！こだわりマウスオーバー20連発 (1/2)｜先端サイトに学ぶCSS3/jQueryアニメーションデザイン

2014/10/24 55 users jQueryアニメーションデザイン ASCII.jp 随所

今回の注目サイト： Omnisense http://omnisense.net/ ICTを駆使したプロダクトを紹介する、フランス企業のWebサイト。 サイトを彩る多彩なアニメーション フラットデザインをベースに、随所に気持ちいいアニメーションを取り入れている「Omnisense」。コンテンツごとに用意されているさまざまなアニメーションは、どれも洗練された動きで、サイトの魅力をぐっと高めている。 ... 続きを読む