マリオの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 ボタンを、形はそのままで、... 続きを読む

歴代iOS、iPhoneOS用Apple標準壁紙がダウンロード可能 - iPhone Mania

2020/06/13 13 users 歴代iOS iPhone Mania スキューモーフィズム

AppleTrackが、歴代iPhoneOS及びiOS、iPadOS用のApple標準壁紙をダウンロード可能なサイト、「iOS wallpapers」を紹介しています。 懐かしの壁紙 「iOS wallpapers」で歴代壁紙を眺めていると、iOS6までのスキューモーフィズムの影響を受けているであろう実風景の写真が中心であるものから、iOS7以降のフラットデザイン... 続きを読む

フラットデザインとは？マテリアルデザインとは何が違う？｜ferret [フェレット]

2019/05/14 12 users ユーザー もと 名称 意図 具体

私たちが生活の中で触れる様々なものは様々な意図のもとデザインされています。スマートフォンのホーム画面やホームページにおいても時代とともに ユーザー への想いを込めたデザインが進化し続けているのです。 何種類もあるデザインの中に、「フラットデザイン」というものがあります。名称を聞く機会はあっても、具体... 続きを読む

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

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年版】ウェブデザインの最新トレンド5選 | freshtrax | デザイン会社 btrax ブログ

2018/03/23 41 users freshtrax スキューモーフィズム ウェブデザイン

Windows8が登場した2012年以降、ウェブデザインに関する話題においてフラットデザインという用語をよく耳にするようになった。 AppleもiOS7を発表した2013年からは、従来使われていたスキューモーフィズム、つまり物理的なアイテムに似せたデザインをやめ、フラットデザインを採用している。 iOS6, 7 これらにより多くのウェブサイトに影響を与えたフラットデザインは、現在多くのウェブサイト... 続きを読む

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

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

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

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

今後のトレンド！フラットデザインのメリット・デメリットとは | TechAcademyマガジン

2017/02/07 20 users TechAcademyマガジン 本稿 了解 テックアカデミー

TechAcademyマガジンはオンラインのプログラミングスクール TechAcademy [テックアカデミー] が運営する教育×テクノロジーのWebメディアです。初心者でもすぐ勉強できる記事が1,000以上あります。 本稿は、 Design School Canva の ブログ記事 を、Design School Canvaより了解を得て日本語翻訳し掲載した記事になります。 そもそもフラットデザ... 続きを読む

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

Bootstrap対応の最新ランディングページテンプレート 10選 | Designup

2015/06/04 39 users psd イラストレータ Designup テンプレート 楽チン

Bootstrap対応の最新ランディングページを集めてみました。フラットデザインのテンプレートならPSDを使わなくてもブラウザ上でデザインできてとても楽ちん。イラストや画像の使用が多いランディングページですが、アプリやWebサービスのページなんかではフラットデザインの先進的なLPも増えてます。 フラットデザインの場合、PSDやイラストレータを必要とせずCSSスタイルの指定だけで簡単に作れてしまうた... 続きを読む

モダンミニマリズムという選択―フラットデザインはデザイナーを堕落させたか？ | デザイン | 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 原文（英語）：... 続きを読む