UIパーツにメイリオを指定しないほうがいい理由
はじめに 前提として本記事は特定のフォントを貶める意図はなく役割として使い分けることを推奨する記事です。 フォントにあるのは役割であり、優劣ではないということを念頭にご一読いただけると幸いです。 注意事項 メイリオという特殊なフォント まず具体的な問題点を挙げる前にメイリオというフォントについて軽く紹介させていただきます。 といってもWeb開発者にとっては馴染み深いフォントでありご存じの方が大半だと思います。 Windows Vistaより搭載されたこのフォントは未だに根強い人気があります。 記事にもあるように、このフォントは和文と英文の調和を重視して作られ英文のベースラインという考え方を取り込んでいます。 そこでメイリオでは和文を縦方向に95％に圧縮した形にして下部にスペースを開けた。こうすることで和文・欧文が混じったときに、それぞれのベースラインを合わせつつ、文字が上下に踊って見えると
じゃあなんすか、Noto Sans JP使うんならボタンにアイコン入れるなって事すか｜chot Inc. デザイナーユニット
こんにちは、ちょっと株式会社デザイナーのモです。 挨拶から間髪入れずで申し訳ないのですが、まずはこちらをご覧ください。 何の変哲もないテキストとアイコンで構成されたボタンです。 今回はこちらのボタンに物申したく筆を執らせていただきました。思うところがあるんだよ今の私には。 ずれている、Noto Sans JPという訳で早速本題に入りますが、単刀直入に言ってこのボタンずれてるんですよね。「暑いね」って言ったら「水飲めば？」って言ってくる人くらいずれてる。私怨はさておき具体的に表すとテキストとアイコンが上下にガクンとずれているって訳です。 論に拍車をかけるためにボタンに分割線を引いてみました。 アイコンは上下真っ二つだがテキストはどうも下に寄っていますぞなぜずれる、Noto Sans JPこれが目の錯覚…なら良かったんですが（良くない）実際にずれていて、ではなぜそんなことになっちゃっているのか
＆（アンドのマーク）は使わない｜しじみ ｜デザインを語るひと
ビジネスに使えるデザインの話ビジネスにデザインの知識はけっこう使えます。苦手な人も多いから１つ知るだけでもその分アドバンテージになることもあります。noteは毎日午前7時に更新しています。 欧文のルール日本人は知らない欧文（主に英語）のルールというものがあります。これは英語の授業でも教えてくれません。それゆえか翻訳者からの原稿にも、このルールに則っていないものがすごく多くあります。 知っておくと何かとアドバンテージになるので少しずつご紹介していきます。ご紹介した欧文のルールはこちらのマガジンにストックしていきます。 「＆」の正体正式にはアンパサンド（ampersand）と言います。日本では「アンドマーク」と呼ばれていることが多いこの記号。正しい名前は“ampersand”（アンパサンド）です。日本でも馴染みのある記号で、企業名などでもよく目にするのではないでしょうか。 情報通信・メディア系
モバイルファーストのウェブデザインがデスクトップに及ぼす悪影響
モバイルファーストのウェブデザインは、デスクトップで閲覧する際に重大なユーザビリティ上の問題を引き起こす。長いスクロールページにコンテンツが過度に分散され、余白が広がり、画像やフォントが拡大されるため、ユーザーが情報を把握し、理解することが難しくなるのである。 The Negative Impact of Mobile-First Web Design on Desktop by Kim Salazar, Tim Neusesser and Nishi Chitale on October 13, 2023 日本語版2024年2月6日公開 最近のウェブサイトの多くは、モバイルファーストなアプローチでデザインされている。こうしたページをデスクトップデバイスで表示すると、コンテンツが過度に大きく引き伸ばされて見えることがある。画面を覆い尽くすような画像、肥大化したテキスト、過剰な余白のせいで、
画像とテキストのジグザグ型レイアウトは、流し読みの効率を下げる
装飾用の画像は、互い違いになったリストのレイアウトで使われていると、ページを流し読みするユーザーがつまずく原因になることが、アイトラッキング調査でわかった。一方、テキストや画像が縦に整列しているページでは、ユーザーは効率的に流し読みをしていた。 Zigzag Image–Text Layouts Make Scanning Less Efficient by Kim Flaherty on November 26, 2017 日本語版2018年6月27日公開 画像は、大きな写真であれサムネイルであれ、現在のWebデザインには欠かせないものだ。特に、トップページや「こういう仕組みです」（How it works）ページのようなストーリーを伝えるページで、企業が複雑なトピックについて書いたり、製品の説明をするときには、関連する画像を付けた説明的なテキストのかたまりがあり、次の列も同じようなテキ
エンジニア直伝！デザイン&実装の両観点で最適な「積むUIレイアウト」の制作方法｜ShikiCheri/C-C-C
こんにちは、@ShikiCheriです。 現在フリーランスのUIUXデザイナーをやっており、単発案件ではなく長期的に組織や事業にコミットするような形で、サービス開発のデザインを中心に担当しています。 デザインシステム構築を担当したことでUIデザインの最適解について目から鱗が落ちた…！？クックパッドは25年のサービスの歴史があり、特にWeb版は今でも現役で活用されているサービスです。私はこの長寿サービスWeb版クックパッドのUIのリニューアルを行いました。 またこのプロジェクトと同時に、webに限らずアプリも含めたサービス全体の体験を統一するためのデザインシステムの構築を担当しました。 Apron - Figma Community これらのプロジェクトを推進する際、デザイン×開発の架け橋的存在であるUXエンジニアのむーさん、実装もできるデザイナーのけんけんさん、TOFUWORKSさんと共に
アクセシビリティに配慮したWebデザイン ギャラリー・サイト AAA11Y（Accessible Website Gallery）
A最低限の基準です。この基準を達成しないとWebサイトを閲覧できない人が存在しうるとされます。 AA望ましい基準です。この基準を達成すればWebサイトの閲覧が困難なケースは多くないとされています。 AAA発展的な基準です。この基準を満たすと最も閲覧しやすいWebサイトと言えます。
医師とデザイン。なぜ医療現場は複雑なUIが好まれるのか？｜Kei Kobayashi｜note
医師は情報が詰めこまれたスライドが好き？こんにちは、株式会社CureAppデザイナーの小林です。精神科の医師ですがデザインが好きすぎてデザイナーとして働いています。 医療の世界から会社員に転身すると、日々さまざまな発見があります。先日社外の人とプレゼンテーションの話題になり 「医師向けのプレゼンでは、シンプルなものより情報が詰め込まれたスライドが好まれるんです」 と言われ驚きました。 たしかに医療系のスライドは医師に限らず文字が詰めこまれた分かりづらいスライドが主流ですが、それはデザインへの関心が低いだけでけっして「好き」なわけではない、そう思っていました。 しかし改めて「もしかして医師は本当に複雑なデザインが好きなんじゃないか？」という疑念がわいてきました。 よく見る医療系スライドの一例 https://www.dinf.ne.jp/doc/japanese/resource/kouse
UIから「白」が消える日｜ritar
これは designing plus nine Advent Calendar 19日目の記事です。 こんにちは。ritarと申します。 今年の10月頃、YouTubeに大きいデザイン変更がありました。 アイコンの変更、角丸やレイアウトなど全体的に一新されているのですが、中でも自分が仰天したのは「アンビエントモード」という新機能です。 アンビエントモードこのモードをオンにすると、動画の下側のUI領域が、まるで動画部分から光が漏れているかのようにじんわりと色づきます。 これを見たとき自分は度肝を抜かれました。なんたってUIの領域にコンテンツの色が侵食しているのです。 これを踏まえて、最近UIと色について考えたことを、UIデザインの歴史を振り返りながら記していきます。先に要点を言うと、UIはどんどん「無色透明」になっていくと考えます。これは「技術が生活に浸透することによってUIは存在感を減らし
デザイナーとしてのアクセシビリティとの向き合い方｜ymrl
freeeで私はアクセシビリティチェック体制を整備したり研修やったり、アクセシビリティまわりのことをいろいろやってきました（詳しくは、去年までのは「2021年、freeeのアクセシビリティを振り返る」やそこから辿れる過去の記事に、今年のは12日にきっと magi さんが書いてくれます→「2022年、freeeのアクセシビリティを振り返る」が公開されました！）。 たまたま先日、新しく入社してアクセシビリティ研修を受けたデザイナーと話したとき、そういえばデザイナーになってからどういう気持ちでやっているのかを表明していなかったなと思ったので、改めて書いてみます。 デザイナーの作るものには、アクセシビリティはもともと存在しているここ1年以上、freeeに入社する人や、業務委託として参加してくださる方向けにアクセシビリティの話をしているので、もう数百人にアクセシビリティというものの説明をしているはず
日本のウェブデザインの特異な事例
sabrinas.spaceより。 8週間もかからなかったはずのプロジェクト 日本のウェブデザインはどう違うのか? 2013年のRandomwireのブログ投稿で、著者(David)は、日本のデザインの興味深い相違点を強調しました。日本人はミニマリストのライフスタイルで海外に知られていますが、ウェブサイトは奇妙なほどマキシマリストです。ページには様々な明るい色(3色デザイン原則を破っている)、小さな画像、そして多くのテキストが使われています。2022年11月に撮影されたこれらのスクリーンショットで、自分の目で確かめて下さい。 ブログ投稿には、文化的専門家、デザイナー仲間、そして不満を抱く市民によって支持されている、考えられる理由がいくつか挙げられていました。 この理論が今でも正しいのか、また、もっと定量的なアプローチが可能なのか気になったのでやってみました。 私が見つけたもの 各国の最も人
多言語組版について | 多言語フォント | モリサワのフォント
○MORISAWA PASSPORT 英中韓組版ルールブック（タイ語含む） 全ページPDF （30MB) 多言語組版に必要なルールと、その言語の組版に活用できるMORISAWA PASSPORT収録書体を紹介したハンドブックです。近年需要が高まるタイ語を新たに収録しました。 ○言語別PDFダウンロード はじめに（3MB) MORISAWA PASSPORTの多言語対応 p2 MORISAWA PASSPORTに収録されている多言語フォントのフォントベンダー p4 欧文（10MB) ラテン文字と欧文組版 p6 欧文組版の考え方 p8 欧文組版の手法 p12 欧文約物（Punctuation）p18 併記組版の考え方 p22 データ受け渡しとアプリケーションの設定 p24 欧文書体の選び方 p32 欧文組版の確認リスト p33 フォント紹介 p34 中国語 - 簡体字（7MB) 中国語（簡体字
【Webデザイン】未経験のデザイナー志望がやって良かったインプット習慣｜yuka
こんにちは、デジLIG生活が8月をもって終わりを迎え、いち学生としての肩書きを失ってしまったゆかです。 口癖は「はやくデザイナーとして働きたい…」です。ポートフォリオがんばってます。 前回、卒業制作の記録noteを書いたところ、想像の何百倍もの反響をいただけて驚いていると共に、たくさんの応援やお褒めの言葉をいただきとても励みになりました。見てくださった全ての方々、本当にありがとうございました🙇🏼♀️ そしてありがたいことに沢山の方からDMで質問をいただき、その中でも特に「デザインの勉強方法ってどうしていますか？」というメッセージを多くいただきました。 ということで今日は、これまで約7ヶ月のデジLIG生活を経て辿り着いたWebデザインの勉強方法について、現時点での記録も兼ねてnoteにしてみました。 私はプロのWebデザイナーではないし、そもそもまだ就職すらしていない、ただのデザイナー
このサイトどんな色使ってるの？を教えてくれるChrome拡張機能作った | cloud.config Tech Blog
「このサイトではどんな色を使ってるんだろう」 「このサイトの色の表示割合どんなもん？」 と、ふと疑問に思った方向けに、一瞬で解決できるChrome拡張機能を作りました。（ごめんなさいガッツリ宣伝です） GET WEB SITE THEME COLOR Chrome拡張機能のページへ移動します。 GET WEB SITE THEME COLOR 冒頭で書いた疑問、私は配色の参考にしたくてサイトを巡回するたびに思ってました。 ウェブサイトで使ってる色はカラーピッカーを使えば取得できますし、 F12を押せばElementのスタイルにあるカラーコードからでも知ることができます。 でも、1つ1つ色を調べるのは面倒な気持ちになります。 時間がないので一気に知りたいです。 そんな方向けにぴったりなChrome拡張機能になります！ GET WEB SITE THEME COLOR使い方 1. GET WE
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
速度表示のデザインにウサギとカメのイラストを添えたら管理職から「海外で理解されないのでは」と質問されたがISOにも設定されているマークである
超高速！ デザインやイラストに最適な色を組み合わたカラーパレット🎨を生成する無料ツール -Colour Palette Generator
ツートンカラーが一色に見える？ポケモンSVの人気キャラ「ナンジャモ」から見る色弱の世界
posters/accessibility/dos-donts/posters_ja/PDF/accessibility-posters-set_ja.pdf at master · UKHomeOffice/posters
The Component Gallery
Evernote Viewer