なぜエンジニアが作る画面はダサいのか…?「理由」と「対策」を徹底解説【エンジニア向け画面デザイン講座】 - Qiita
なぜエンジニアが作る画面はダサいのか…?「理由」と「対策」を徹底解説【エンジニア向け画面デザイン講座】UXUIDesignUIデザイン画面設計 1.はじめに エンジニアの私がデザインを本気で勉強した結果、デザイナーとエンジニアはそもそも思考が大きく違っているということがわかりました。 今回は「それ」をデザインに苦手意識のあるエンジニア方にも理解してもらえたらと思い、わかりやすくまとめてみました。 2.アプリの画面デザインを考えてみよう まず、こんなアプリを考えてみてください。 フィットネストレーナーが使うアプリ トレーニングルームでお客様とお話しながら使う 端末はタブレット そして 会員の個人情報確認 前回までのトレーニング状況の確認 次回の予約受付 といったことをします。 使える情報としては、こんな感じです。 あなたならどう画面デザインをするか、もしお時間があったら考えてみてください。
Tokyo2020 聖火台 | nendo
東京2020オリンピック・パラリンピックの開・閉会式演出企画チーム統括であった野村萬斎氏の 「太陽の下に皆が集い、皆が平等の存在であり、皆がエネルギーを得る」というコンセプトに基づいてデザインされた聖火台。 求められた「太陽らしさ」を表現するために、耐熱ガラスの球体に炎を閉じ込めたり、 炎を回転させて球状にしたりと、延べ85案が検討された。 試行錯誤の末、「五輪」をモチーフにした5枚のパネルが上下2段で構成された球状のものに。 オリンピック開会式の終盤に、最終聖火ランナーを迎えるようにして「咲く」。 これは、太陽だけでなく、植物が芽吹いたり花が咲いたり、 空に向かって手を大きく広げたりといった、 太陽から得られるエネルギーや生命力を表現したもの。 炎の燃料には次世代エネルギーとして注目されている水素エネルギーを使用。 水素は、2011年に発生した東日本大震災からの復興が進む福島県の施設で製
Minimal Icons - Oliur
A minimal icon set with over 50 icons for popular apps. Perfect for giving your homescreen a clean and minimalist look. Updating regularly with highly requested icons and more colours coming soon. Wallpaper is also included in the pack. Free updates forever! Here is a quick guide on how to apply them. Purchase & Download Now Want to be an affiliate? Contact me. This slideshow requires JavaScript.
TENTのTEMPO
『フライパン ジュウ』など一部製品は専用ストアでお取り扱いしています。 https://jiu10.stores.jp/
ローソンPB新パッケージの「わかりにくすぎる」という問題 ユニバーサルデザインの専門家に訊く - wezzy｜ウェジー
ローソンは2020年春、プライベートブランド商品のロゴ・パッケージを刷新した。これまでの「ローソンセレクト」を「L basic(エル ベーシック)」「L marche(エル マルシェ)」の2つのブランドに一新したという。手掛けたのは国内外で幅広いクリエイティブを行うデザインオフィスnendoだ。 確かにデザインは美しい。しかし店頭に並んだ商品を見ると、統一感はあるが何の商品だかわかりづらい。Twitterでも「前のデザインの方がわかりやすかった」という消費者の声が目立つ。 筆者の和久井は、ライターと並行して合同会社ブラインドライターズという、視覚障害者を中心とした会社を運営している。スタッフには、中心視野が欠けていて焦点が合わない人、全体的にぼやけて見える人、トイレットペーパーの芯から物を覗いているように見える視野の狭い人など、さまざまな視覚の状態の人がいる。彼らにも見てもらったが、「非常
ユーザーインタフェース設計で意識したいデザインの考え方｜はのめぐみ
こんにちは！はのめぐみです。キッチハイクというサービスでプロダクトデザイナをしています。 2月にデザイン戦略部メンバーで社内勉強会を行い、アプリケーションのデザイン原則についてレクチャーをしました。この note ではその内容を紹介していきます🙌 勉強会のゴールは「足並みを揃える」ことキッチハイクのデザイン戦略部は、コアスキルや得意分野が違うメンバーが集まっています。バランスがとれたメンバー構成である一方、UI や Figma の知識、ルール感覚はチーム内でバラバラです。UI デザインをコアスキルとしているのは私1人というのもあり、みんなの足並みを揃えたいと思っていました。 知識がないと、どう調べればいいかすらわからないこともあります。自分が「当たり前だ」「常識だ」と思っているものも、専門外の人にとってはピンと来ないときも多いと思います。 そこで、デザインの当たり前をチームの当たり前にす
アプリのアップデート300本ノックから学ぶUI改善のヒント｜宮﨑 晃
こんにちは、HR業界でアプリマーケティングをしている宮﨑です。 ・アプリのアップデート前後のUI変化 ・Push通知など気になったGrowth施策 こうしたものを「#アプリノック」としてTwitterで投稿すること3ヶ月。300本以上のネタが溜まってきました。 今回のnoteでは「フォッグの消費者行動モデル」というフレームワークを使ってまとめていきます。 行動 = 動機 × 実行能力 × きっかけ ザックリいうとユーザーに何か行動を促す際に「動機/実行能力/きっかけ」の3要素をどう揃えるか？というモノ。 詳しくは深津さんの記事がとってもわかりやすいのでおススメです。 アプリノックがUI改善の勘所だけでなく、Growthの知識も一緒に学べるコンテンツになっていくと嬉しいです。 それではいってみましょう！ 【動機】がないと、やる気にならない①慣れない体験にはイメージ作りを よくわからない体験は
2019好きなゲームUI/UXまとめ｜尾形
↓本記事はアドベントカレンダー「Game Graphic Design Advent Calendar 2019」用に書きました。 ----------------------------------------------- 記事内容の削除についてのお詫びにつきまして 本記事は、ゲームタイトルの作例をもとに自分の目線で文章を書いておりました。 しかし、「ゲームUI演出ブログ」での記事削除などの事例もあり、 法的な部分での判断により記事を削除いたしました。 本記事にコメントを寄せていただいた方、みていただいた方々、そしてご紹介したゲームタイトルに関わっていた制作者の皆様方、本当に申し訳ございませんでした。 中には記事になったものに対して不快に思われた方もいるかもしれません。 制作者の皆様に強く敬意を表すとともに、以後改めて著作物であることを強く意識していこうと思います。
UIのデザインでよく見かける、目の錯覚による違和感を取り除くデザインテクニックのまとめ
WebページやスマホアプリのUIをデザインした時に、数値上は均整がとれているのに、人の目の錯覚で違和感を感じることがあります。ちゃんと揃えて配置したのに、同じサイズなのに、同じ色なのに、なんだか違和感があることはありませんか？ この目の錯覚による違和感を取り除くUIデザインのテクニックを紹介します。 Visually distorted - when symmetrical UI looks all wrong by Gil Bouhnick 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 01. ボタンと同じ色だとテキストは明るく見える 02. 同じフォントでも小さいサイズだと細く見える 03. 背景画像の上のテキストは読みにくい 04. 行間が間違っているテキスト 形の扱い方 05. 整列されたのに揃っているように見えない
Fluid Interfaces実践 - なめらかなUIデザインを実現する｜dely design
This domain may be for sale!
スマホにおけるボタンの配置、上と下、左と右、どのように配置するのが最適なのか詳しく解説
スマホでボタンをどこに配置するとユーザーは操作がしやすいのか？ 上部と下部、水平に並べたボタン、垂直に並べたボタン、3つ以上のボタンなど、ボタン配置について包括的な分析を行い、ボタンをどのように配置するのが最適なのか解説した記事を紹介します。 The Optimal Placement for Mobile Call to Action Buttons by UX Movement 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに グーテンベルクの原則 上部と下部のボタン 水平に並んだボタン 垂直に並んだボタン 水平と垂直のハイブリッド スティッキーボタン まとめ はじめに ボタンをどこに配置するかによって、ユーザーがタスクを完了する時間に影響を与えることを知っていますか？ タスクを素早く完了することで、より満足のいくエ
がんばらないデザインシステム - MOL
TLDR: Material Designをカスタマイズして利用した話 最近、デザインシステムって言葉よく聞きますよね。airbnbではDLSというデザインシステムを持っていたり、UberはBase Webというデザインシステムを持っていたり、アメリカ連邦政府も持ってたりします。国内のIT企業でもデザインシステムを作成しているとの事例もよく耳にします。 デザインシステムとは？ デザインシステム：デザインの基準やドキュメント、原則に加えて、基準を達成するためのUIパターンやコンポーネントなどのツールキットをすべて備えたもの。 デザインシステムの定義と作成方法、導入事例 | UX MILK では、デザインシステムってのはどういったもんなんでしょうか？これまでも、スタイルガイドやコンポーネントライブラリといったものは聞いたことがありますが、デザインシステムというのはそれらも含めたもう少し大きなモ
UIデザインツール、結局どれ使ったらいいの問題 - istyle Tech Blog
軽さ（体感） いきなり感覚的な情報で申し訳ないですが、XDが圧倒的に軽い印象です。沢山アートボードを作っても重くなりません。 コンポーネント Sketchのコンポーネントは、コンポーネントだけで1画面にまとまっているので、確認や調整がしやすいです。 レスポンシブ対応 基本どのツールも大差は無いです。 テキストの調整のしやすさ Sketchはmasterのテキストと変更後のテキストを簡単に確認できます（このあと記述のオーバーライド機能を参照）。他のツールはmasterに一度飛んで確認するか、変更したテキストを全てに反映するなどになるので、調整が少し難しいです。 プロトタイプの豊富さ InVision Studioはトリガーが沢山あり、web用（マウスの動き）、スマホ用（指の動き）、キーボード操作、タイマーの4種でトリガーを決められる所が特徴です。 アニメーション XDでは簡単なモーションアニ
PhotoshopとIllustratorのほぼ全機能を搭載したAdobe XD並みに軽いプロトタイピングツールが発売
私は ある出来事 をきっかけにAdobe製品をやめて他社の製品でWebデザインをしようと考えていました。 最初に考えていたのがPhotoshopの代わりにAffinity Photo、Illustratorの代わりにAffinity Designer、そしてAdobe XDの代わりにSketchまたはFigmaのようなプロトタイピングツールを使用しようと考えていました。 最初はこうしようと思っていた しかし、さまざまな可能性を試した結果、今までPhotoshopとIllustratorとAdobe XDの3つのアプリでおこなっていたことをたった1つのアプリで完結させることができ、しかもあらゆる作業をAdobe XD並みの速度でできる方法があるという事に気づきました。 たった1つのアプリで完結させることができるという事に気づいた ここ最近はたった1つのアプリでWebデザインを完結させるワーク
Figma3.0リリースでFigmaがDOPEなデザインツールになった｜SketchでもAdobe XDでもない選択肢｜Nao Komura｜note
みなさんはFigmaというデザインツールをご存知でしょうか。 正直な所、Adobe XDやSketchなどと比べると知名度も低いし、それらのツールと比べても機能は充実しているのですが使い所が微妙。 (ちなみに、Figmaの公式サイトにもXD、Sketch、Invision Studio、Framerと比較したページはあるのですが全部同じ内容で肩透かしをくらいます。) という具合に個人的に推しているデザインツールではあるものの、惜しい部分が多くまだ布教できる段階では無いな、という印象も持っていました。 しかし...... バージョン3.0のリリースでその印象が大きく変わり、最強のデザインツールFigmaを布教するぞ、という気持ちになりました(謎の使命感) ということで、Figmaの機能の紹介をメインに主要なUIデザインツールであるSketchとAdobe XDとの比較なんかも合間合間していこ
さよならSketch、こんにちはFramer X｜KANTA YAMAGATA｜note
Jorn van Dijk（@jornvandijk）のリツイートから2ヶ月近く経った先日、ようやくFramer X βの招待が届きました。Trailerが格好良すぎてReactとシームレスになるのかという期待で一杯だったので嬉しかったです。実際、AirbnbやFacebookのデザイナーもこんな感じでした。とりあえず動画を観ていただけたら。 タイトルはUSノリですが、正直Sketchはある1プロジェクトで使ったことがあるだけです。Figmaなどの他のデザインツールは使ったことがないです。なのでここでは比較を行いません。以前からあるFramerとの差分の紹介を中心にしていきます。Framerはなぜか日本では使われていない印象がありますが、これがデザイン環境の向上に少しでも参考になれば幸いです。 Linking複数画面の遷移をつくるには、FramerではFlowComponentを利用したコ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Progress indicators – Material Design 3
Pairsのデザインシステムを運用してみて。デザイナー視点のツール編🛠 - eureka design
Framer — The internet is your canvas
Apple Design Resources
