なぜエンジニアが作る画面はダサいのか…?「理由」と「対策」を徹底解説【エンジニア向け画面デザイン講座】 - Qiita
なぜエンジニアが作る画面はダサいのか…?「理由」と「対策」を徹底解説【エンジニア向け画面デザイン講座】UXUIDesignUIデザイン画面設計 1.はじめに エンジニアの私がデザインを本気で勉強した結果、デザイナーとエンジニアはそもそも思考が大きく違っているということがわかりました。 今回は「それ」をデザインに苦手意識のあるエンジニア方にも理解してもらえたらと思い、わかりやすくまとめてみました。 2.アプリの画面デザインを考えてみよう まず、こんなアプリを考えてみてください。 フィットネストレーナーが使うアプリ トレーニングルームでお客様とお話しながら使う 端末はタブレット そして 会員の個人情報確認 前回までのトレーニング状況の確認 次回の予約受付 といったことをします。 使える情報としては、こんな感じです。 あなたならどう画面デザインをするか、もしお時間があったら考えてみてください。
「くそダサいデザインの表紙」がダサくなくなるまでの解説がわかりやすくてタメになる…フォントや配色、文字配置など参考になる情報も
デザインtips @tips_bot ゆるく初心者向けのデザイン解説とか書きます。 絵描きさん向けの役立ち情報も多い。なんか思いついた時に自分用のメモも兼ねて投稿しているので、お気軽に〜！
【ご挨拶】 / 【目次】 / settings / 解釈が変わる写真 / ラインスケッチ / 感覚の変換による観察 / 蓋の分類 / 新しい分け方の基準 / バランスによる新しい価値 / 約束事を共有することで、読みとけるようになる四コマ漫画 / 丸を取り出す / ｷﾘﾄﾘﾑｼ / レイアウトが解釈を生み出す / モノをコントロールするための身体言語 / space / 「解釈が変わる写真」野中大
どうもご無沙汰しておりますせんざきです。 最近、デザインを見る訓練をすごく重視してやっています。 このテーマは、タイトルだけ書いておいて、まだ書く時じゃないなあと思いながら温めていたものです。 正直まだ、書く時じゃないなあという感じもするのですが、どういうことなのか言語化できそうな段階まで来たので、メモがわりに書き起こしていこうと思います。 はじめにまず、「デザインを見る訓練ってなんやねん」っていう話をします。 本当にここ数ヶ月、デザイナーにとっての見る力の大切さを日々感じているんです。 このツイートは、見る力について書いていて、結構反響があったものです。 原研哉さんが運営してる低空飛行っていうサイトがあるんですけど、ここの写真や映像、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となっていって、最初は見やすかったのに、どんどん見づらくなっていくという…。 そうなってくると途中で全面リニューアルを行わざるを得ないことになるんですが、その頃には元のコードはぐっちゃぐちゃになっているわ元いたエンジニアはやめてるわてんやわんやで、もうどーしようもない状態になってい
はじめにこの記事は、放送大学の（主に情報コースを中心とする）学生さん向けに、私の履修済み科目の感想と主観的評価を共有して、履修計画の参考にしていただくことを目的に作成しました。下記の記事の通り、2019年-2020年の2年間で情報コースの科目を8割方履修したのでそれなりの網羅性があるかと思います。 （2023年2月追記）その後、選科履修生として履修した他コースの科目や大学院科目などを追加して112科目掲載しています。試験難易度については履修時期によって会場試験・在宅ペーパー試験・在宅Web試験が混在しているので参考程度でお願いします。 タイトルは私が現役生の時に通っていた大学の似たような評価システムから拝借しました。 以下の科目は基本的にナンバリングが低い順に並べています。閉講済みの科目も混じっていますが、記録と後継科目の参考のために残しておきます。あくまで全て（上記の記事にある通り、文系
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. アクションを実行
「“回復”はプレイヤーの時間を奪う要素だから要らない」──『サガ』生みの親・河津秋敏氏が語る、超鋭角な「攻める」ゲームデザイン論。最新作『サガ エメラルド ビヨンド』では短くかつヒリつくバトルを追求、「プレイヤーに同じような体験を何度もさせない」ことを目指した
RPGでは当たり前に存在する「回復」と「ショップ」をなくした理由──「回復」というのはこれまでのRPGにおいて当たり前に存在している要素だと思うのですが、『サガ エメラルド ビヨンド』では回復がないとお聞きしています。なぜRPGのバトルから回復という存在を排除したのでしょうか？ 河津秋敏氏（以下、河津氏）： 自分としては、回復はバトルを引き延ばしてプレイヤーの時間を奪っている要素だと思っているんです。ゲームに縛り付ける時間を長くするだけの要素で、必要性を感じないんですね。 ──回復はユーザーの時間を奪っている……ですか。これまでRPGには当たり前に存在していた要素なだけにその視点は驚きです。 河津氏： それに回復があると、回復役に盾役に攻撃役にと、パーティ編成が固定化されてしまうじゃないですか。そうすると自由度がなくなる。 自分自身、HPが削られるのが嫌いなのでどうしても守りを固めて回復で
コクッパ「悲しい」物語 ～神に翻弄された7兄弟～
◆魔王クッパと愉快な息子たち◆ コクッパたちが初めてマリオの前に現れたのは今から30年以上前。ファミコン版『スーパーマリオブラザーズ3』(1988年10月23日)がデビュー作だった。このとき魔王クッパは片足を上げながらノリノリで「俺様の息子たちだぜ！」(要約)と彼らを紹介している。 説明書には7人まとめて「コクッパ7兄弟」と記載されていた。 そう、彼らは血のつながった兄弟らしい。 出典：ファミコン版スーマリ３説明書より 兄弟たちはクッパのことを「オヤジ」と呼び、畏れながらも慕っているようである。 なお、母親についてはシリーズを通していっさい登場せず、誰なのか。なぜ出てこないのか。もうこの世にいないのか。など何ひとつ明かされていないため謎の存在となっている。(※少なくともピーチ姫が卵を産む姿を想像するのはやめたほうがいい) ◆NESキッズたちの心を鷲掴み!?◆ マリオ3で華々しくデビューした
Webサイトでもスマホアプリでも、アイコンのデザインは非常に重要です。優れたアイコンをデザインするために必要な7つの原則を紹介します。 アイコンだけでなく、UI全体のデザインにも通じるプロのデザインテクニックが詳しく解説されています。 7 Principles of Icon Design by Helena Zhang 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 Clarity -アイコンは分かりやすく Readability -アイコンは見やすく Alignment -アイコンにおける揃え Brevity -アイコンは簡潔にデザインする Consistency -アイコンの一貫性 Personality -アイコンの個性 Ease of Use -アイコンの使いやすさ アイコンのリソース Clarity -アイコンは分か
訳文；「そこにはなんの報酬もありません。このゲームが何を為していてどう機能しているのか、ただただ見ていたかったのです」ジェンキンズ、カーソン、ホッキング、『Outer Wilds』へつづく２，３の論考 - すやすや眠るみたくすらすら書けたら
翻訳の秋が今年もきました。また去年みたく面白い記事をいくつか見つけて勝手に紹介したいところです！ 去年アップした『訳文；「"好奇心駆動型の冒険"とでも言うべき特殊なタイプの冒険に報酬を与えるゲームをつくりたい、それが『Outer Wilds』の主目的です」Ａ・ビーチャム氏の論文より』で翻訳紹介した論考のなかで、参照文献として挙げられていた文献のうち２つ、ヘンリー・ジェンキンズ著『GAME DESIGN AS NARRATIVE ARCHITECTURE（物語による建築物としてのゲームデザイン）』とボニー・ルバーク取材『Clint Hocking Speaks Out On The Virtues Of Exploration(クリント・ホッキングが語る冒険の美徳)』。別記事１つ、ドン・カーソン著『Environmental Storytelling: Creating Immersive
遺伝も性別もタブー… 進化生物学者が危惧する「左派からの科学への攻撃」 | ダーウィンもメンデルも“キャンセル”されてしまうのか
──ダーウィン主義の生物学者のあなたは、宗教右派と論争してきました。しかし、左派に対して警鐘を鳴らすようになったのはなぜでしょうか？ もともとの私の論敵は、創造論者、反ワクチン主義者、気候変動懐疑論者です。細かく言うと、アメリカ人の半数以上が創造論者であり、そのうちの40%が聖書の字義通りの創造を信じ続けています。33%は、人間は何百万年もかけて進化したと考えていますが、その進化も神の導きだと思っています。「インテリジェント・デザイン」論（註：何らかの知性ある存在が宇宙や生物の発生に介在したとする理論）に通ずる考え方です。 進化論を信じるアメリカ人、つまり、進化は神と何も関係がないと考える人々は22%しかいません。ただ、創造論はすでに大学からは駆逐され、公教育で創造論を教えてはならないとする判決が最高裁で出ています。最高裁の保守化でどう変化するかはわかりませんが……。 いまのところ、この戦
Goodpatch新卒UIデザイン研修の設計—ソフトウェアデザイン概論と基礎理論—｜Goodpatch Blog グッドパッチブログ
Goodpatchでは職種ごとにさまざまな新人研修プログラムを用意しています。2020年の新卒UIデザイナー向けには、4月から6月にかけてUIデザインに関する基礎的な講義や演習、課題制作といった集中的な研修を行い、UIデザイナーとして必要な基礎知識を身につけてもらいました。 UIデザイン研修といってもいくつかにコースが分かれており、今回私が講師として担当した部分では「ソフトウェアデザイン」をテーマに講義を行いました。 以下の講義のうち私が担当した、ソフトウェアデザイン概論、インタラクションデザイン基礎、モードレスデザイン基礎、UIモデリング基礎について簡単にご紹介いたします。 UIデザイン研修—ソフトウェアデザイン編—講義シラバス ソフトウェアデザイン講義の設計 UIデザイン新人研修は全体構成を「ビジュアルデザイン編」「ソフトウェアデザイン編」と二分し、それぞれの専門性を深堀りできる形を採
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
新しいデザインの教科書
デザインを「見る」訓練をしている話。4つのステップと勉強法｜せんざき｜n2p designer
CSSの進化がすごすぎる！新しいレスポンシブデザインの実装方法を解説
放送大学マイルストーン('23)｜lumpsucker
アイコンデザイン 7つの原則、優れたアイコンをデザインするために