UIパーツにメイリオを指定しないほうがいい理由
はじめに 前提として本記事は特定のフォントを貶める意図はなく役割として使い分けることを推奨する記事です。 フォントにあるのは役割であり、優劣ではないということを念頭にご一読いただけると幸いです。 注意事項 メイリオという特殊なフォント まず具体的な問題点を挙げる前にメイリオというフォントについて軽く紹介させていただきます。 といってもWeb開発者にとっては馴染み深いフォントでありご存じの方が大半だと思います。 Windows Vistaより搭載されたこのフォントは未だに根強い人気があります。 記事にもあるように、このフォントは和文と英文の調和を重視して作られ英文のベースラインという考え方を取り込んでいます。 そこでメイリオでは和文を縦方向に95％に圧縮した形にして下部にスペースを開けた。こうすることで和文・欧文が混じったときに、それぞれのベースラインを合わせつつ、文字が上下に踊って見えると
『星のカービィ ディスカバリー』の仕事 UIデザイン編 | ハル研究所
はじめまして、デザイナー（アーティスト）のNです。 『星のカービィ ディスカバリー』では、UIデザインを担当していました。（みなさん、遊んでいただけたでしょうか？） 「ここのUIがよかった！」と思っていただけたらそれはもうとても嬉しいのですが、「UIは全然気にならなかった！」というのも、実は少し嬉しくもあります。 気にならないことの何がいいのか、についてはこのあとお話させていただきますね。 さて、今回はUIデザイン（UIアーティスト）の仕事をご紹介します。 ゲーム開発では、体力ゲージやポーズ画面、ボタンなど、ゲームを遊ぶうえで必要な情報をプレイヤーに伝えるための表示や操作メニューなどをUI（ユーザーインターフェース）と呼んでいます。 この伝えたい情報を、機能を考えてデザインに落とし込むのが、UIアーティストの仕事です。 …なんだか小難しくて、抽象的な話になってしまった気がするので、具体的な
エンジニアのための Figma 知識
本記事の多くは Inspect モードを前提に解説しています。 下記に Dev Mode に対応した解説を書いてみたのであわせてご参照ください。 https://codezine.jp/article/detail/18000 エンジニアにデザインツールの知識・習熟は必要か？ しなくても仕事はできると思うのですが、あるとよりクオリティの高い仕事ができることは間違いありません。 という訳でエンジニアがエンジニアとしての仕事をしていく上で「Figma のこういうことを知っておくと良さそう」という知識をまとめてみました。 ユースケースを考える まず始めにデザインは作らないはずのエンジニアが Figma を使う時にどんなユースケースがありそうかを考えてみます。 デザインを元に実装する時 デザインから何かを生成したい時(コードとか画像とか) 自分でちょこっとデザイン修正しちゃう この辺りがあるかな〜
設計に悩みすぎる前に手を動かしてみる話
私がソフトウェア開発において心がけていることの一つに「設計に悩み始めたらとりあえず手を動かす」というものがあります。今まで深く考えずにそう心がけていましたが、この記事で自分がなぜそうしているのか整理して言語化してみたいと思います。 話のスコープ ここでいう「手を動かす」とは「コードを書く」ことです。設計と聞いて人によって思い浮かべるものが違いますが、ここでは「一人のソフトウェアエンジニアが四半期程度かけて開発する規模の機能の設計」を想定しています。何人ものソフトウェアエンジニアが長期に渡って行うような大規模開発には当てはまらないです。 本題 次のような経験はないでしょうか？ 設計を考えながらデザインドキュメントを書いていたら細部の粗が見えてきて無限に悩み続けてしまった。考えなきゃいけないことがどんどん膨らんでいって、いつまでも実装に手を付けられなかった。 これに対して私は「設計に悩み始めた
root がデザインに関わる人の育成支援にこだわる理由｜西村 和則
デザインファーム root の代表をしている西村です。 root は主にデジタル領域の新規事業やスタートアップの立ち上げからグロースフェーズを伴走しながら成長支援するお仕事をしています。 最近、デザイナーの採用をしたいけれど、なかなかよい人が見つからないという課題をよく耳にするようになりました。業界としては若手のデザイナー数は増えており母数は増加傾向にあると実感していますが、事業サイドが求める戦力になる人材が見つけられないという課題が顕在化しているように感じます。自分もデザイナーを採用する立場でありこの課題感は日々感じていますが、この問題は単に人材不足という以上に根深い課題が含まれており、その課題を解消していきたいという強い思いもありnoteに書いてみました。 このnoteは主に、2つの立場から見た考えをまとめています。 ご興味ある方はぜひ読んでみてください。 1. デザイナーを採用したり
デザインは速度も大事という話｜ottiee / Alu CCO
こんにちは、4億年ぶりの具体性のあるデザインの話です。 日々デザイナーとしてやっていく中で、速度を大事にしなきゃいけないなー、というのは常々思っていることです。 断っておくと、品質＜速度ということを言いたいのでは決して無いです。 ユーザーにプロダクトの価値を早く届けること、それ自体が価値があるというのが往々にしてあると思っていて、その速度を1秒でも早めたい気持ちがあります。 --- 最近では、アルの00:00 Studio内の2つのチームのデザインと、eluというプロダクトのデザインを担当しているのですが、これらチームのエンジニアの開発速度が「鬼かよ...」っていうくらい早いのです。 どちらもクリエイターへ向けたサービスで、00:00 Studioは作業配信、eluはデジタルデータの販売を超簡単にできる、というものです。よかったら使ってみて下さい（宣伝） で、20年近くデザインを仕事にして
デザイン読書補講 7コマ目『「カッコいい」とは何か』｜designing
こんにちはこんばんは、吉竹です。 この『デザイン読書補講』は「デザインを学び始めた人（主に学生）の世界を少しでもひろげられるような書籍をおすすめする」をコンセプトに連載しています。 わたしの自己紹介や、この連載が生まれた経緯は1コマ目『UX・情報設計から学ぶ計画づくりの道しるべ』で書いていますので「どういう人が書いているんだろう？」と気になった方は合わせて読んでみてください。 わたし自身もいち読者として中村先生のテキストを楽しく拝読しています。完全に余談ですが、連載タイトルを決めるときに「吉竹遼の」を枕詞につけたほうがリズムが出ていいな……と一瞬思ったのですが「それだと自分しか書けなくなる……！」とネタ出しに苦労して締め切りに追われる未来が容易に想像できたので取り下げたという裏話があります。よくやった自分。 今日の1冊さて、デザイン読書補講 7コマ目にご紹介するのは、平野啓一郎『「カッコい
能動的なデザインの仕事をする視座の変化
限定的な課題解決になる受身のデザインデザイナーは良くも悪くも、来た依頼に対して最大限の努力をする方が多いと思います。「〇〇の見た目を良くしてほしい」「△△を使いやすくしてほしい」といった課題を解決するには高いスキルと経験が必要ですから、専門家としての価値は出せるはずです。最初は来た依頼に対して解決策を提供する活動でも十分ですが、やることが決まった段階から始めるデザインは制約が多いだけでなく、限定的な解決にしかならない場合があります。 例えば、記事に紐づけるコメントリストをスレッド式に変えたいという要望が来たとします。やるコトが決まった状態からデザイナーが入ると、どうしても「見やすいスレッド」「返信しやすい UI」を考えて作ることが目的になります。 依頼に答えるデザイン活動も重要ですが、これを続けているとデザイナーの仕事が次第に限定的になり、付加価値を提供するという受身の立場になりがちです。
日本のブランドロゴは世界と比較して文字だらけなのか？ - 最終防衛ライン3
まとめ方が恣意的ではありませんかね？ なぜ日本のブランドロゴは文字ベースのデザインが多いのか？ デザイン会社 ビートラックス: ブログ [B! デザイン] なぜ日本のブランドロゴは文字ベースのデザインが多いのか？ デザイン会社 ビートラックス: ブログ アメリカと中国の企業ロゴはシンボルだけが多いのに、日本の企業は文字ベースが多いと主張する記事である。しかし、日本の例として挙げられる企業が恣意的に選ばれているのではないか？との疑義が寄せられた。それを受けて、記事を執筆した Brandon K. Hill 氏は以下の記事を投稿した。 本当に日本のブランドロゴは文字ベースのデザインが多いのか？ デザイン会社 ビートラックス: ブログ なぜか、日本の企業しか調べられていない。”ロジカル”に検証するなら、前の記事で挙げたアメリカや中国とも比較すべきだろう。 というわけで、グローバル、アメリカ、中国
ログアウトのUXを軽視してはならない
Roxanne はライブチャットやビジネスプロセス自動化を専門とする英国に本拠を置くソフトウェアハウスであるParker Softwareのオンラインコンテンツマネージャです。 ログアウトの体験は、ログインする回数が増えている中で見落とされやすいものです。素晴らしいUXほど、ユーザーを送り出すことよりも招き入れることに重点が置かれているのは当然かもしれません。しかし、重視されていないということは、ユーザーのログアウト体験が疎かになっていることを意味します。 最近、アカウントを作成したときのことを考えてください。そのブランドがWebサイトやアプリの入り口から、スムーズかつ素早くユーザーを迎え入れようと苦心しているのは間違いありません。アカウントを作成してアクセスするプロセスは、とても簡単で夢中になります。しかし、ログアウトに関しても同様に言えるということは、滅多にないでしょう。 ログアウトは
Google UX Designプロフェッショナル認定を、受講してみた｜深津 貴之 (fladdict)
どんなコース？Googleのエキスパートが授業をしてくれる、UXデザイナー養成オンラインコースです。UXデザイナーになるためのグーグル認定のトレーニングを受講でき、1日1時間ぐらい受講して、だいたい6ヶ月で満了できる。 トータルで以下の7コースを、半年かけて履修する。 1. UXデザインの基礎 2. UXデザインプロセスをはじめる 3. ワイヤーフレームと低精度プロトタイピング 4. UXリサーチと初期コンセプトのテスト 5. Figmaでの高精度のデザインとプロトタイピング 6. Adobe XDによるレスポンシブWEBデザイン 7. ソーシャルグッドのためのUXデザインと、就職の準備 とると何がおきるの？グーグル認定の証明書がもらえます。いろいろな会社を受けるときに、履歴書にかけるみたい。 印刷された履歴書、CV、またはその他の文書で、LinkedInプロフィールの修了証セクションにあ
Web24でデザインシステムの話をしました｜Hiroki Tani
事前予告していたWeb24というイベントで、デザインシステムをテーマにしたセッションで90分ほど喋りました。 当日の模様はアーカイブされていないので、盛り上がりや内容についてはTogetterのまとめをみて感じてください。 どういう90分だったかメンバーはSmartHRの@versionfiveさん、atama plusの@n_m_taさん、GMOペパボの@shikakunさん、そして僕の4人で打ち合わせもスライドの準備もなしで90分喋り倒しました。 セッションオーナーとして自らこのお三方を招いたのですが、それぞれスタートアップや大きめの事業会社、フェーズや体制も違うメンバーにしたいとおもい声をかけさせてもらいました。 Web24全体としてはWeb技術周辺のテーマが多い中で、あえてデザイナーという職種に近い方々でのデザインシステムをテーマにざっくばらんに、時に議題を投げかけて進行しました。
【UI/UXのコツ#1】デザインを瞬時に改善する34のテクニック - Qiita
本記事は、Marc Andrew氏による「The UI & UX tips collection --- volume one」（2020年11月18日公開）の和訳を、著者の許可を得て掲載しているものです。 続編はこちら「【UI/UXのコツ#2】デザインを瞬時に改善する18のテクニック」 はじめに この記事は、2020年11月19日にmarcandrew.meで公開されたものです。 美しく、しかも実用的なUIのデザインには時間がかかり、その過程でも時間のかかるデザインの修正があります。分かっています。私も経験済みです。 でも、私が長年かかって発見したのは、デザインに簡単なすぐできる微調整をするだけで、最終的な結果を大幅に改善できるということです。 この記事では、過去1年で私がよく使ったUI/UXのコツを集めました。わずかな労力で、デザインと全体的なユーザーエクスペリエンスの向上に役立ちます
UIにおける自己帰属感と余韻について｜Keita Yamada
Webサイトを作っています。山田啓太です。制作したWebサイトはポートフォリオサイトにまとめています。 この記事では具体的なUIを例に上げてそれぞれのUIを実装するときに僕が気をつけていることを書いていますが、その考えは渡邊恵太さんの著書、「融けるデザイン」の第1章〜第3章で語られている内容を非常に参考にしています。渡邉さんが独自の研究を通じて自己帰属感という単語に行き着くまでの過程も面白いのでぜひ読んでください。 自己帰属感とはある道具をまるで自分の身体の一部かのように扱えているとき、その道具は自己帰属感があると言えます。例えば大多数の日本人にとってお箸は自己帰属感のある道具でしょう。私たちがお箸を持って食べ物をつまむとき、まるでお箸が自分の指の延長になったかのように、お箸自体を全く意識することなく動作を行えます。 自己帰属感は自分の身体と扱う道具との高い連動性によって引き起こされると、
エンジニア向け デザイン基礎（社内勉強会の資料） - Qiita
これは何 私が所属している株式会社エイチームでは社内勉強会を自由に開ける制度があります。 エンジニア向けにデザインの基礎をレクチャーする会を開いたのですがせっかくだったらオープンにしようと思い、投稿しました。 今回の勉強会では「Webサービスを作る」レベルまでは踏み込めませんでしたが、ちょっとしたUIを作る際の手助けにはなれる気がしています。 なお、勉強会用に書いた原稿なので書き言葉としてあまり適切でない箇所もあります。 ご了承ください。 また、この研修の次の年に行った研修も記事として投稿しています。 設計の話 はじめに：デザイン業務の内訳とよくある誤解 デザイン業務の内訳 まず最初に設計の考え方をレクチャーするのですが、その前に1つ。 普段デザイナーが行っている業務について簡単に説明します。 後の方で話す内容と繋がってくるので、ちょっと本筋から外れますが聞いてください。 話を分かりやすく
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
UX-mov | アプリのUIが動画で見れるギャラリーサイト
AtomicDesignとデザインシステム、CSS設計について
How to Set Your Figma Up for Easy Collaboration with Nondesigners
Stop asking for UI design feedback, do this instead
Accessibility vs Design trends