Windows 10で標準採用されるフォント、「Yu Gothic UI」についての感想 | 遅咲きエンジニアのメモ
この記事は、Windows 10 Technical Preview (ビルド 100061) をベースに書いております。 対象となるユーザー – Microsoft Windows ホーム ページ – Windows Insider Program 「Yu Gothic UI」の前に学ぶ、「Yu Gothic」と「游ゴシック」の違い 「Yu Gothic」はひらがな・カタカナ・漢字は同じようですが、英数字はSegoeフォントがベースです。 詳しく考察したものについては下記のページに記載しておりますが、基本は上記一文となります。 Windows 8.1に標準搭載されている游ゴシックの修復インストールについて 遅咲きエンジニアのメモ 游ゴシック (バージョン:1.0) Yu Gothic (バージョン:1.03) Segoe UI (バージョン:5.46) 「Yu Gothic UI」とは
新しいGoogleのロゴは線（ストローク）だけでは表現できません
Illustratorの線幅ツールを除いて（先に書いておく）。 ●新しいGoogleのロゴは線だけで表現ができる…？ すごい！というわけでGIZMODOにこんな記述がありました。 他のユーザーさんの指摘では、新ロゴはフィル（fill、塗り）ではなくストローク（stroke、線）でも作ることができるそうです。これも旧ロゴではありえなかった特徴の1つ。 グーグルの旧ロゴは14,000バイトもあったのに、新ロゴはたった305バイトなのはどうして？（ギズモード・ジャパン）そうなのか？と新しいGoogleのロゴを改めて見てみました。 画像出典：Evolving the Google Identity（Google Design） しかし、どうも線（ストローク）だけでは難しそうに感じました。 上記画像のあるGoogleのページには、こんな説明もあるので、見てみると、確かに線（ストローク）だけでGoog
コーディングに最適な日本語対応の等幅フォントSource Han Code JPとは – ICS MEDIA
コーディング向けの日本語対応の等幅フォント「Sourceソース Hanハン Codeコード JPジェイピー（和名：源ノ角ゴシック Code JP）」が、2015年6月4日に公開されました。「源ノ角ゴシック Code JP」は、プログラミングやHTML/CSSのコーディング、ターミナルでのテキスト表示など、和欧表示用フォントとしての利用を想定されたフォントです。 ダウンロードはこちらから Release Fonts (OTF, OTC) · adobe-fonts/source-han-code-jp · GitHub ※このフォントは無償でダウンロード可能です。OTCとTTFの両方のフォーマットで配布されているので、Windows/macOSともに簡単にインストールできます。 ※上記リンクの「Fonts version ［バージョン番号］ (OTF, OTC)」となってい箇所の［Sourc
CSSでのフォント指定について考える（2014年）｜DTP Transit
結論1：アルファベットでウエイトなしだけでも、すべてのモダンブラウザに対応可能です。ただし、旧バージョンのSafariやFirefoxでは対応がまちまちであったため、それらに対応するには併記します。 游ゴシック体と游明朝体はWinodws 8.1では日本語名、OS X Mavericks（10.9）ではアルファベット名のみの対応であるため、両名の併記が必要となります。 疑問2：「ヒラギノ明朝 Pro」と「ヒラギノ明朝 ProN」のどちらを記述すればいいのでしょうか。 「ヒラギノ明朝 Pro」を改訂し、JIS X 0213:2004の例示字体に対応させたものが「ヒラギノ明朝 ProN」です。 参考： ウィキペディア - ヒラギノ 「ヒラギノ明朝 Pro」と「ヒラギノ明朝 ProN」の違い CSSのfont-family指定はこれで決まり！（2013春） 結論2：新しい字形に対応をしている「ヒ
Googleのアイコンデザイン思想を学ぶ | ビジュアルシンキング
Googleが公開しているデザイン・ガイドラインのアイコンに関するところを読みました。 Icons – Style -Google design guidelines アイコンのデザイン・ガイドラインの対象は、「プロダクト・アイコン」と「システム・アイコン」の2つがあり、デザインする上で注意を払うことや、原則がまとめられています。 プロダクト・アイコン 「プロダクト・アイコン」はGmailやGoogle Mapなどサービスそのものに用いられ、サービスの特性や違いを伝えるものです。 image by Google システム・アイコン 一方「システム・アイコン」は、ユーザインタフェースに用いられるもの。 「プロダクト・アイコン」と比べて、小さいサイズでの使用、単色での使用の想定が必要。 image by Google 作りの違い 「システム・アイコン」がフラットな作りなのに対し、「プロダクト・
速報、Appleの新フォント！…かとおもいきや？ - de-liKeR:+SUB!
Apple新フォント、AppleTPのお知らせです！！ Apple TPという、Text,Thin,Ultralightという3ウェイトでAppleのほーむぺーじで使われております！ が、もしや、どっかで見たことあるフォント…と思って調べてみると、 小塚ゴシックPr6に似てるんすよね… これ名前だけApple TPに変えたんじゃないかな……？？？？ が、「な」を打つことで小塚ではないことが判明。 じゃあ一体何なのか？ まとめると、Apple TPフォントは、 ・日本語部分にAxisを使用、ただし等幅ではなく若干修正してあるっぽい ・英語部分にはMyriadを使用 ぽかったです。 で、日本語フォントでは珍しく、等幅フォントではないのが特徴。
新タイプのフタ｢Viora lid｣で飲むコーヒーの味は？
ちょっと前にギズでも紹介したテイクアウトコーヒー用のプラスチック製フタ、Viora lid。既製品との違いは分かっても、果たして本当に優れているのか？ 米Gizmodoが実際に使って確かめてみました。 これまで私たちは、テイクアウトコーヒーの容器にはそこそこ満足していて、使い捨てのフタについて気にも留めませんでした。でも、Vaporpath社の｢Viora lid｣の登場で、いくつかの問題点が浮き彫りになったのです。 一般的なプラスチック製フタは、勢いよく撥ねる液体を受け止めこぼさないためにヘリから一段下がった部分がフラットなのに対し、Vioraは角張った形状をしています。Vioraの飲み口の幅が広いのは、口に流れるコーヒー液の量をコントロールしやすくするためで、傾斜がかっているのは余分なコーヒー液をコップのなかへと戻せるからという理屈なんだそうです。さらに従来の3倍もの幅があるおかげで、
Source Han Sans（源ノ角ゴシック）／Noto Sansがリリースされました｜DTP Transit
開発 Google、アドビ、および、Changzhou SinoType Technology、イワタ、そして Sandoll Communicationなどのフォントメーカーとの協力によって開発されたそうです。 Robotoとの調和 Noto Sansの欧文部分には、Androidの標準フォントであるRobotoが使われていると書かれていることがありますが、それは誤りで、Source Han Sans、Noto Sansともに、同じ欧文を使っています。 Robotoとの調和を意識して開発されており、組み替えたサンプルが掲載されていると思われます。 昨日出した新しいフォント Noto Sans CJK。7ウェイトもバリエーションがあって既存の欧文フォントである Noto Sans や Open… Robotoフォントについてはこちらの記事をご覧ください。 Typography | Andr
説得力がグンと上がる！UIデザインの心理学
オライリーから出ている「ユーザーインターフェースデザインの心理学」から使えそうなものを実例を踏まえピックアップ！これでUIデザイン説明の説得力をあげよう！ 情報は一度にすべて見せるのではなく、そのとき必要なものを段階的に開示させた方がよい。 デザイナーが犯しがちな失敗は一度に大量の情報をユーザーに与えてしまうことです。 情報は一度に大量に与えるのではなく、その時点で必要としている情報だけを与えるほうが様々なニーズに対応することができます。 ユーザーの中には大まかな説明でよい人もいれば、詳細を知りたがっている人もいます。 つまりどういう事？ 情報は一度に見せるのではなく段階的に見せる 重要なのはクリック回数ではない。クリックのたびに必要な情報が手に入るのであればユーザーは喜んでクリックする 誰がいつ何を必要としているかを理解する。各段階で何を必要としているか的確に把握していないと、この手法は
NYC（ニューヨーク市）と東京都のWebサイトを比べて愕然とした。
トップページの比較 はじめはPCで見るトップページ（ホームページ）の比較から。 NYC 東京都（日本語） 東京都（English） ・・・。 なんというか、マンハッタンを闊歩するイケてるビジネスマンと、東京の下町に住む笑顔じわがかわいいおじいちゃん、を見比べている感じでしょうか。 特に東京都の英語サイトにはちょっとびっくりしました（文字だらけ！）。予算の問題などあるかもしれませんが、ぜひもう少しWebデザインに力を入れてほしいものです。 ちなみに東京都のサイトは日本語、英語、中国語、韓国語の4言語のみ対応ですが、NYCのサイトはGoogle翻訳を活用して80言語に対応しています。グローバル！ モバイルページの比較 続いてモバイル版のページを比較してみます。 NYC 東京都 NYCのモバイルサイトは、PC版と印象が変わりません。というより、レスポンシブデザインのため、PC版でもウィンドウサイ
NINTENDO64のロゴに秘められた「小粋」な設定が凄い！
ロクヨンなどとして親しまれていた任天堂のゲーム機「NINTENDO64」ですが1996年に25,000円（税別）で発売されており、現在も続編がリリースされている人気シリーズ「どうぶつの森」や「大乱闘スマッシュブラザーズ」といった数々の名シリーズを生み出した素晴らしい家庭用ゲーム機です。そんなロクヨンですが実はあのロゴにとんでもない真実が隠されていたのです。 NINTENDO64のネーミングの由来は64ビットRISCのCPUを使っていることから64という名前が付けられたと 一般的な認識がある。 当時プレイステーションや、セガサターンをはじめとする次世代機は32ビットが主流であり、言ってしまえば16ビットのスーパーファミコンもまだまだ現役だった。その時代に64ビットのCPUは、時代を先取りしすぎていたかのように思えた。その点からすると64という突拍子もないキーワードは不可欠だった。 さてその6
世界各国のWebデザインと日本のWebデザインの特徴
2013年10月29日 Webデザイン, 海外情報 私は今まで日本、カナダ、オーストラリア、イギリスと、4カ国での滞在経験があるためか、各国のデザインの違いについて尋ねられる事があります。しかし日本以外のすべての国は英語圏。Webデザインでいえば違いを感じたことはあまりありませんでした。そこで今回は今まで触れる機会のなかった言語圏のWebサイトを比較しました。アメリカ、フランス、サウジアラビア（中東）、中国、そして日本。それぞれのデザイン事情の違いを知って、日本のWebデザインについても考えてみたいと思います。 ↑私が10年以上利用している会計ソフト！ マクドナルド アメリカ 現在は全体的に濃い青をメインに使っていますが、これはキャンペーンによって変更されます。ナビゲーションバーやページしたのバナーエリアは基本的に固定。 例えば別のプロモーションページではこんな感じ。一番見せたいものをひと
45万回のアイコンABテストにみる、ダウンロードされやすいアイコンの特徴とは？ – 佐藤航陽のブログ
決済サービス「spike（スパイク）」のリリースのほうに時間を割いていて、ブログの更新が滞っていました。。。何かの片手間でブログを続けるってなかなか難しい。気分転換にブログを新しくしました。調べるおタカノリさんやサイプロさんスゲーなと思うこの頃です。 先日Google Playがリニューアルされた記事をアップして、アイコンの大きさが２倍になり、今後Google Playでますます重要になるなと感じたわけですが、７月の末に今度はPC版のGoogle Playもリニューアルされてダウンロードページのクリエイティブがアイコンとスプラッシュだけになってしまいました。以前は大きい長方形のバナーが表示されていましが、こちらは使われるのはGoogleのおすすめに入ったときだけで、ほとんどのディベロッパーには無縁のものになってしまっています。 今後アイコンが重要になってくる流れは間違いないので、これを無料
【 | と◯】知ってる？ アプリや電機のスイッチと電源ボタンの記号の意味 | アプリオ
あるiPhoneアプリの解説記事を書くために、アプリ内の設定項目を確認していたところ、以前から気になりつつも放置していた疑問に筆者は直面した。 その疑問とは 「アプリやOSの設定画面などに使われるスイッチは、どちらがオン（ON）でどちらがオフ（OFF）か分かりにくいことがある。なぜ、分かりにくいのか？」 ということだ。 アプリのスイッチの意味が分かりにくい？ 基本的にiPhoneやAndroidの日本向けアプリではオン・オフの表現が用いられていることが多いようだが、中には上の画像のように | と ◯ の表現が用いられるアプリも存在する。また、Android端末でも機種によっては同様の表現が設定画面などで使われている。 はたして | と ◯ の表現でオンとオフの区別を自然に行うことができるのだろうか。以前から、筆者の心の中に、この小さな疑問がくすぶり続けていたのだ。 前提として確認しておくが
LukeW | New Layouts for the Multi-Device Web
New Layouts for the Multi-Device Web by Luke Wroblewski May 13, 2013 Most Web page layouts rely on design patterns created for laptop and desktop computers equipped with a mouse and keyboard. As the variety of devices being used to access the Web has grown, these patterns haven’t been keeping up. Designing for today’s Web means considering single-handed thumb use on smartphones, two handed touch i
ソシオメディア | iPhone の当たり判定を検証した
スマートフォンやタブレットなどのモバイルデバイス向けにUIをデザインする際には、タッチ操作に適したコントロール表現を追求しなければいけません。 タッチ操作に適したコントロール表現とは、前回書いたジェスチャもありますが、それ以前に、ボタンやリンクなどのUI要素を指で押しやすい大きさにすることが大切です。 パソコン画面のマウスポインターと違って、タッチスクリーンにおいて指でボタンをタップする場合、指がそのボタンを覆い隠してしまうので、意図した場所に正しく触れているのか分かりにくく、またボタン自体の視覚的なフィードバックも確認しづらいという課題があります。 またマウスポインターではピクセルレベルで画面上の座標を指し示すことができますが、指先ではそのような細かい操作はできません。 ですからタッチデバイスでは、ボタンやリンクが細かく密集しているようなデザインは大きなストレスになります。 最低限の大き
» 佐藤可士和氏のGU新ロゴ Toshi Omagari
思いっきり仕事中ですが腹が立って仕方がなかったのでブログ更新します（どういう動機だ！） 佐藤可士和氏がGUというファッションブランドのロゴをリデザインしたそうです。まぁ言ってしまえば元のロゴも大して良くはないのですが、その新ロゴというのが笑止千万な出来なので徹底的に図解して非難したいと思います。 まずはその新ロゴ。和文の方もグリッド多用しまくりで個人的には酷いと思うのですが、まぁ欧文書体デザイナーの自分としての本題はGUなので和文はさておきます。またネットでは色がIKEAだとかTSUTAYAだとかEUだとかブックオフだとか色に関してのツッコミが多いようですが、やはり自分としては文字の形そのものに注目したいと思います。あ、あとGUの配置も右寄りすぎますが文字の形そのものに以下同文です。なにせブログをなかなか継続して書けないこの自分を書かせる気にさせるほど酷いんですから。 ソースの画像は低解像
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Loading...
さすが、Apple！刷新されたウェブサイトで見つけた3つのこだわりとは？
GunosyのUIを徹底的に分析してリデザインしてみた
