なぜエンジニアが作る画面はダサいのか…?「理由」と「対策」を徹底解説【エンジニア向け画面デザイン講座】 - Qiita
なぜエンジニアが作る画面はダサいのか…?「理由」と「対策」を徹底解説【エンジニア向け画面デザイン講座】UXUIDesignUIデザイン画面設計 1.はじめに エンジニアの私がデザインを本気で勉強した結果、デザイナーとエンジニアはそもそも思考が大きく違っているということがわかりました。 今回は「それ」をデザインに苦手意識のあるエンジニア方にも理解してもらえたらと思い、わかりやすくまとめてみました。 2.アプリの画面デザインを考えてみよう まず、こんなアプリを考えてみてください。 フィットネストレーナーが使うアプリ トレーニングルームでお客様とお話しながら使う 端末はタブレット そして 会員の個人情報確認 前回までのトレーニング状況の確認 次回の予約受付 といったことをします。 使える情報としては、こんな感じです。 あなたならどう画面デザインをするか、もしお時間があったら考えてみてください。
「くそダサいデザインの表紙」がダサくなくなるまでの解説がわかりやすくてタメになる…フォントや配色、文字配置など参考になる情報も
デザインtips @tips_bot ゆるく初心者向けのデザイン解説とか書きます。 絵描きさん向けの役立ち情報も多い。なんか思いついた時に自分用のメモも兼ねて投稿しているので、お気軽に〜！
【ご挨拶】 / 【目次】 / settings / 解釈が変わる写真 / ラインスケッチ / 感覚の変換による観察 / 蓋の分類 / 新しい分け方の基準 / バランスによる新しい価値 / 約束事を共有することで、読みとけるようになる四コマ漫画 / 丸を取り出す / ｷﾘﾄﾘﾑｼ / レイアウトが解釈を生み出す / モノをコントロールするための身体言語 / space / 「解釈が変わる写真」野中大
UIデザインにおいて「〇〇できそうな感」を出すことは、非常に大切です。予測される動作や意味が、自然に理解できれば、ユーザーにとって優しいデザインになるんじゃないかと思います。アイコン、大きさ、色などなど、デザインは細かい要素の積み重ね。すでに多くのユーザーに浸透し、習慣化されていそうな「〇〇できそう感」を28個まとめました。 １、進めそう感 ２、戻れそう感 ３、進めそう＆戻れそう感 ４、開きそう感（ドロップダウン） ５、開きそう感（アコーディオン） ６、開きそう感（モーダル１） ７、開きそう感（モーダル２） ８、カレンダーが開きそう感 ９、メニューが開きそう感（ハンバーガー） １０、検索できそう感 １１、入力できそう感 １２、検索できそう ＋ 入力できそう感 １３、パスワード入力できそう感 １４、パスワード感（強め） １５、間違えた感（エラー） １６、合ってる感（OK） １７、電話かかる感
どうもご無沙汰しておりますせんざきです。 最近、デザインを見る訓練をすごく重視してやっています。 このテーマは、タイトルだけ書いておいて、まだ書く時じゃないなあと思いながら温めていたものです。 正直まだ、書く時じゃないなあという感じもするのですが、どういうことなのか言語化できそうな段階まで来たので、メモがわりに書き起こしていこうと思います。 はじめにまず、「デザインを見る訓練ってなんやねん」っていう話をします。 本当にここ数ヶ月、デザイナーにとっての見る力の大切さを日々感じているんです。 このツイートは、見る力について書いていて、結構反響があったものです。 原研哉さんが運営してる低空飛行っていうサイトがあるんですけど、ここの写真や映像、iPhoneで撮ってるらしい、、 目が良ければiPhoneでもこんなに綺麗に撮れるんだなあhttps://t.co/S7WBO3JSG8 pic.twitt
現在のレスポンシブデザインは、ビューポートにもとづいてレイアウトを最適化しています。しかし、新しいレスポンシブデザインでは、アニメーションが不要なユーザーには動きを少なくしたり（無くしたり）、親コンテナの幅にもとづいてコンポーネントを最適化したり、スコープ付きスタイルやフォームファクターなど、ユーザーの好みや環境に合わせて最適なコンテンツを提供できるようになります。 これらの新しいレスポンシブデザインのコンセプト・実装方法を紹介します。CSSがこれまで以上に進化します。 The new responsive: Web design in a component-driven world by Una Kravets 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 レスポンシブデザインの現状 ユーザーでレスポンシブ コンテナでレス
なぜWebサービスはUIの改悪を繰り返すのか
自分はWebサービスの表側を作るお仕事に就いていますが、日本人ってサービス系の開発に向いてないよなーと強く思います。 特にWebサービスやアプリについては、まじで向いてない種族だと思います。 一番アカンなーと思うのが、リリース後の開発において機能追加は精力的に行う一方、機能削減はぜーんぜんやらないんですよね。 Webサービスって、リリース直後の段階である程度しっかりとしたUIで組まれていて、機能追加のことは基本的には考慮されていないケースが多い印象があります。 そのせいか、機能が追加されればされるほどいびつなUIとなっていって、最初は見やすかったのに、どんどん見づらくなっていくという…。 そうなってくると途中で全面リニューアルを行わざるを得ないことになるんですが、その頃には元のコードはぐっちゃぐちゃになっているわ元いたエンジニアはやめてるわてんやわんやで、もうどーしようもない状態になってい
CSSの中央揃えで、最も万能で信頼できる実装テクニック
CSSは進化が早く、中央揃えのテクニックも一昔前のものよりも確実に使いやすくなっています。天地左右の中央に要素を配置する際に、要素の幅や高さが可変だったり、要素の数が増えても対応する最新の実装テクニックを紹介します。 現在主流の5つのテクニックからそれぞれの特徴と最も万能で信頼できるテクニックを評価します。 Centering in CSS by Adam Argyle 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 1. Content Center 2. Gentle Flex 3. Autobot 4. Fluffy Center 5. Pop & Plop 中央揃えに最適なテクニック はじめに CSSの中央揃えは、ジョークの対象にもなる悪名高い課題でした。しかし今日ではCSSはすべて進化し、素直にこれらのジョー
2021年、最も注目されたUIデザインのテクニックのまとめ
デザインはちょっとした一手間を加えるだけで、ぐっとよくなります。 プロのUIデザイナーによるWebページやスマホアプリのUIとUXを改善するデザインの知識とテクニックを紹介します。 今年公開した中で最も注目されたUIデザインのテクニックをまとめました。 UI & UX Micro-Tips: Best of 2021 by Marc Andrew 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 1. ユーザーの混乱を避けるために、UIで確立されたアイコンを使用する 2. 4ptベースライン＋8ptグリッド＝調和のとれた縦のリズム 3. フォントで階層を示すにはウェイト、サイズ、カラーを使用する 4. ホワイトスペースはたっぷり使用してください 5. アイコンをグリッドシステムで使用する際の注意点 6. アクションを実行
Webサイトでもスマホアプリでも、アイコンのデザインは非常に重要です。優れたアイコンをデザインするために必要な7つの原則を紹介します。 アイコンだけでなく、UI全体のデザインにも通じるプロのデザインテクニックが詳しく解説されています。 7 Principles of Icon Design by Helena Zhang 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 Clarity -アイコンは分かりやすく Readability -アイコンは見やすく Alignment -アイコンにおける揃え Brevity -アイコンは簡潔にデザインする Consistency -アイコンの一貫性 Personality -アイコンの個性 Ease of Use -アイコンの使いやすさ アイコンのリソース Clarity -アイコンは分か
Goodpatch新卒UIデザイン研修の設計—ソフトウェアデザイン概論と基礎理論—｜Goodpatch Blog グッドパッチブログ
Goodpatchでは職種ごとにさまざまな新人研修プログラムを用意しています。2020年の新卒UIデザイナー向けには、4月から6月にかけてUIデザインに関する基礎的な講義や演習、課題制作といった集中的な研修を行い、UIデザイナーとして必要な基礎知識を身につけてもらいました。 UIデザイン研修といってもいくつかにコースが分かれており、今回私が講師として担当した部分では「ソフトウェアデザイン」をテーマに講義を行いました。 以下の講義のうち私が担当した、ソフトウェアデザイン概論、インタラクションデザイン基礎、モードレスデザイン基礎、UIモデリング基礎について簡単にご紹介いたします。 UIデザイン研修—ソフトウェアデザイン編—講義シラバス ソフトウェアデザイン講義の設計 UIデザイン新人研修は全体構成を「ビジュアルデザイン編」「ソフトウェアデザイン編」と二分し、それぞれの専門性を深堀りできる形を採
デザイナーじゃない人がやりがちなデザインにおける間違い | デザイン・広告の知識 | デザイン作成依頼はASOBOAD
デザイナーでない人であっても、プレゼン資料や自身のビジネスを宣伝するための販促物など、様々な局面でデザインを作成する機会が存在するのではないでしょうか。今回はVismeのYouTubeから、デザイナーでない人がデザインを作る場合の注意点について学びたいと思います。※翻訳・記事掲載は許諾を得ています。(Thank you, visme !!) 以下翻訳内容です。 今回は、「デザイナーじゃない人がやりがちなデザインでの間違い」について話していくよ。今日はその中から15個の間違いについて取り上げようと思う。 1.ビジュアルよりも文字を多用している デザイン初心者やデザイナーじゃない人たちが一番やりがちな間違いが、デザインに文字情報を使いすぎるってこと。スライドとかプレゼンとかで使う情報用のビジュアルでよく起きることかな。 どうすればいいかというと、視覚的なキューを軸にそこに主要な要素だけを付け加
【デザイン初心者向け】入社して初めて作成したアイキャッチ、先輩からのフィードバックをすべて公開します！ こんにちは！ そして、初めまして！ 今年の6月より社内制作チームのデザイナーとして入社しました、えびちゃんと申します。LIGのデザインスクール「デジタルハリウッドSTUDIO by LIG」でWebデザインを学び、未経験でLIGに入社いたしました！ 社内制作チームでは、LIGブログの記事の一番上やサムネイルとして表示される画像（アイキャッチと呼んでいます）やバナーなど、社内で使用する制作物を作成しています。 私が入社して初めて作成したのは、「現役デザイナー厳選！デザインを勉強したい人におすすめの本23選」という記事のアイキャッチでした。このアイキャッチ制作には、デザイン初心者が陥る悩み・学びがたくさん詰まっていました。そこで、先輩デザイナーからフィードバックを受け完成するまでの過程を共有
Transcript ྫ͑͜ͷ͓ࡼʹιʔεΛΓ͚ΔͳΒ ʁ ͬͪ͜ΑΓ ͬͪ͜ͷํ͕όϥϯε͍͍ Ͱɺ ͓͠ࡼ͕ͳ͚Ε ͓͔͘͠ײ͡ͳ͍ ٯʹݴ͑ɺ ʮ͓ࡼ͕͋Δʯ ͓͔͛Ͱόϥϯε͕औΕΔ ࢴͷσβΠϯͷ ʮ͓ࡼʯ ʁ pomme ࢴʹͱͱ ֎͕͋Δ pomme ΣϒͷσβΠϯͷ ʮ͓ࡼʯ ʁ ϒϥβͷʁ Θͨ͜͠Ε ςʔϒϧͩͱࢥ͏ pomme ΣϒσβΠϯͰ ʮ͓ࡼʯ ͔Β࡞Δඞཁ͕͋Δ ྫ͑ɺ ͜Ε͕ ʮ͓ࡼʯ άϦ ο υΨΠ υ͓ࡼΛஔ͘ҹ pomme pomme ಛʹ ʮζϥ͠ʯ ͷσβΠϯͰɺ͓ࡼΛҙࣝ͢Δ ͓ࡼ͕ͳ͍ͱϥϯμϜʹฒ͚ͨͩ ͓ࡼ͕͋Δͱ ʮζϥ͠ʯ ͕Θ͔Δ None ର֯ʹ�͋Εʮ͓ࡼʯ࡞ΕΔ ʮܗ͕มΘΒͳ͍ͷʯ Ͱ͓ࡼΛ࡞Δ αΠΤϯε Ϧ ϯΰͷՊֶ ͦͷൿີʹഭΔ 2019.11.05
ここ最近アメリカでは、デモやネット上での熱い議論など、人種や考え方の違いによる様々な軋轢が表面化している。 それに伴い、これまでは「普通」と考えられていた概念が見直され、より多様性を受け入れる動きが進んでいる。 日本と比べても、実に多種多様な人種が集まっているアメリカでも、まだまだ多くの商品やマーケティングメッセージが画一的なデモグラフィーを中心に考えられており、マイノリティーと言われるユーザーを考慮していないケースが少なくない。 その一方で、サンフランシスコを中心とした都心部では、ダイバーシティ(多様性)を受け入れ、それを考慮することで、より多くの人々のためのプロダクト作りやマーケティング手法が進んでいる。 関連記事: 令和に絶対押さえるべきインクルーシブマーケティングとは。事例6選 ダイバーシティーの主な構成要素最近は日本でも知名度が高まってきている「ダイバーシティー」という単語。「多
プレゼン資料作りで「スライドの分割」を意識したことはありますか？ 新聞・雑誌はもちろんポスターやチラシを含め、世の中の文書で紙面をまるまる1枚のキャンバスとして扱うことはまれです。そのほとんどが紙面を分割して使用しています。当記事では、スライドを適度に分割し、紙面を無駄なく・効果的に利用する方法を紹介します。 紙面は分割すると、情報を整理しやすくなる 皆さんは旅行に出かけるとき、スーツケースにそのまま荷物を詰め込むのではなく、小分け用のポーチを使うことがあると思います。また、机の引き出しに文房具をしまいやすいよう、小さなトレーを利用している人もいるのではないでしょうか。収納は大きいにこしたことありませんが、あまりに大きすぎても持て余してしまうものです。適度な大きさに区切った方が、モノを効率よく収めやすくなります。そしてこれはデザインも同じです。 以下のサンプルはハンバーガー店のオープンを知
ある日、隣に座っていたwevoxのデザイナー木下と「僕らがいつも気をつけていることって何だっけ？」と雑談しながらパパっと言葉を書き出していました。 なぜ出したかというと、若手デザイナーが2人いて同じことを別々に伝えていて、まとめたらモレなくダブりなく伝えられるよね。という気づきがキッカケで、会話しながら言語化し多少のブラッシュアップをした後、バージョン1として社内のデザイナー陣に共有しました。 それが全部で10個にまとめ上げた「Atrae Design Mindset」です。 言語化したのはたった数十分でしたが、noteにするのに半年かかりました😅 それでは、1つずつ紹介していきます。 現地現物「机の上や頭の中だけで考えたり判断するのではなく、実際に現場に足を運び、現場の事実に基づいて考える。 問題を解決し、困難を乗り越えるための答えは、必ず現場にある。」というのがトヨタ社の考え方です。
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
新しいデザインの教科書
UIのお作法。28個の「〇〇できそう感」をまとめました。｜maiokamoto
デザインを「見る」訓練をしている話。4つのステップと勉強法｜せんざき｜n2p designer
CSSの進化がすごすぎる！新しいレスポンシブデザインの実装方法を解説
アイコンデザイン 7つの原則、優れたアイコンをデザインするために
【デザイン初心者向け】初めてのアイキャッチ作成、先輩からのフィードバックをすべて公開します！
「お皿」を意識したレイアウトデザイン - Speaker Deck
インクルーシブデザインとは？現代の多様性に寄り添う7つの実例 デザイン会社 ビートラックス: ブログ
プレゼン資料の見やすさが変わる！スライドを分割して情報を整理するノウハウ ｜プレゼンデザイン
あなたは、いくつ”Design Mindset”がありますか？｜たけてつ