Windowsで游ゴシックが汚いのは、どう考えてもWebデザイナーが悪い？ | Cherry Pie Web
（2016年7月26日：フォロー記事を書きました。「Windowsで游ゴシックが汚いのは、結局誰が悪いのか？」） （2016年7月11日追記：Windows8.1においても細字ではなく標準が使用されているのではないかというご指摘を受けて、若干表記を修正しました） （2016年6月29日追記：Twitterでご指摘を受けて、Windows8.1と10での違いを追記しました） （2017年3月27日追記：当サイトでの使用CSSについて追記しました） （2020年9月13日追記：当サイトでの使用フォントについて追記しました） タイトルが旬を外していて、しかもちょっと釣り気味で申し訳ありません・・・ OS X MavericksとWindows 8.1に共通のフォント「游ゴシック」・「游明朝」が搭載され、CSSのfont-familyに「游ゴシック」を指定すれば、Webデザイナーの長年の悲願であっ
SLN:log* » DeSs第〇.七回「運動」中村勇吾 メインタグ〈プログラム〉に行ってきた話
以前から気になっていた、松本弦人さんによるグラフィックデザイン勉強会「DeSs（デス）」（Design Study Session）、第1期の最終回である第7回は、yugopこと中村勇吾さんがテーマということで、秒速で申し込みをしたところ、運良く参加できることになったので行ってきました。 DeSsのサイトではDeSsの趣旨として以下のようなテキストが掲出されています。 「エンブレム事件」は、グラフィックデザインにまつわるさまざまな問題を露呈しました。しかし、問題の多くは「我々（デザイナー）がサボってきたこと」に起因しているように見えます。我々は、人との関わりをサボり、生活との関わりをサボり、社会との関わりをサボってきた。自分と依頼主とデザインという三角関係だけを注視し、デザインは「解決方法」であり「表現」であると都合よく使いわけ、災害／安保／難民問題さらには先人の歴史をもデザイン的に看過し
あの「HG創英角ポップ体」の元となった直筆生原稿を見た
まちを歩くと、なにかとめにつく「HG創英角ポップ体」。ポスターや看板などあらゆる場所でみかける。 たまに、シリアスな注意書きの看板に、にぎやかでたのしげな雰囲気のポップ体がつかわれたりして、おもしろ写真としてネットで話題になったりする。 そんな「HG創英角ポップ体」をつくったひとはどんなひとなんだろう？
Flags of the World
The official FOTW flag was designed by Mark Sensen. Click on the flag to view its history and meaning. This waving flag was drawn by Pascal Gross. FOTW pages in Focus (Vexillology Highlights) In May 2024 Minnesota became the most recent state to change its flag. The 2024 NAVA Meeting will be held in St. Paul, Minnesota, on 20-22 September. ICV 30 - The next International Congress of Vexillology wi
角丸長方形はどこにでもある！ - 仮想と現実
Folklore.org: Round Rects Are Everywhere! アンディ・ハーツフェルドの記事の翻訳。Macintosh開発当時の興味深い話です。 角丸長方形はどこにでもある！ 著者：アンディ・ハーツフェルド 時期：1981年 登場人物：スティーブ・ジョブズ、ビル・アトキンソン ビル・アトキンソンは多くの仕事を自宅でこなしていたが、何か重要なことがあれば即座にAppleに駆けつけ、それを理解できる人間に見せていた。今回彼は、ほんとにすごいアルゴリズムを思いつき、それを使った円弧の描画ルーチンを実装したので、テキサコタワーのマッキントッシュオフィスにやってきたのだった。 ビルは、当時まだLisaGrafと呼ばれていたMacintoshの描画ライブラリ、QuickDrawに円と円弧を描く新しいコードを追加した。円の数学が平方根を必要とするが、LisaとMacが使用していた6
Web制作者がチェックしておきたい！デザイン要素の定義や見せ方が勉強になる最近のスタイルガイドのまとめ
Webサイトを制作している時、そして納品する時、サイトのデザインで定義されているカラー・タイポグラフィ・エレメントなどのスタイルを一覧できるようにまとめたスタイルガイドを紹介します。 Photoshop, Illustrator, Sketchなどのアプリを使ったり、オンラインツールを使ったものなどいろいろあり、中身だけでなくその見せ方の参考にもなると思います。
デザインシンキング導入時にバッドエンドになるケースまとめ | tsublog
最近、デザインシンキングが語られるようになってきました。 ただ、必ずしも全てのケースで有効ではないため、今回は、自分のためにも有効でない場合の整理をしてみました。 先日、この記事が話題でしたが、デザインシンキングについては、記事で言及されている通り『 デザイン思考は、技術的に実現可能なものやビジネス戦略を顧客価値や市場機会へと転換可能なものと、人々の要求とを一致させるために、デザイナの感覚と手法を利用する方法 』と定義されています。 同僚に差をつけよう！今流行っている「デザイン思考」の全体像まとめ http://www.kokoro-no-compass7.com/entry/2016/05/06/213258 これをみてみると、日本人のイメージする色や形の付与という「デザイン」の概念を超えて、デザイン思考における「デザイン」は問題解決やそのためのサービス開発を指すということです。
ウェブサイトでシステムフォント
GoogleのRobotoや、AppleのSan Franciscoなど、OSベンダーが独自のフォントを開発し、自社製品のUIにシステムフォントとして採用する、という事例が相次いでいます。これらのフォントは、プラットフォームの特性を考慮して最適化されたもの（あるいは最適なものとして選ばれたもの）と言え、かつ今後のOSのアップデートにともなってさらに改善されることも期待できます。また、ユーザーがそのシステムを操作するときにもっとも頻繁に触れる、つまりもっとも見慣れているフォントでもあります。というわけで、これらシステムフォントをウェブサイトのUIに採用するというのはかなり良いアイデアに思えます。 一方で、システムフォントはあくまでUIのためのもので、長い文章などには向かない場合もあるので、コンテンツ部分は別のフォントを指定すると良いかもしれません。たとえばMediumなどではそのようなアプロ
【UXの迷信】ホワイトスペースは無駄？
Zoltánはウェブアプリケーションやインターネットを愛してやまない、Mito（ブダペストの広告代理店）のUXデザイナーです。 ホワイトスペースまたはネガティブスペース、つまりデザインやページのレイアウトの隙間や周りにある何もない空間は軽視、あるいは無視されたりすることがよくあります。 多くの人はこれが貴重なスクリーンの場所を無駄にしていると考えるでしょう。しかし、ウェブデザインにおいてホワイトスペースは必要不可欠な要素であり、「受容的ではなく積極的な要素であると考えるべき」なのです―1930年, Jan Tschicholdより ホワイトスペースは読みやすさやコンテンツの優先順位づけのためだけにあるのではありません。視覚的なレイアウトと市場での商品のブランドポジショニングに非常に役立っているのです。 ウェブデザインにおけるホワイトスペースの重要性 より読みやすく、理解しやすくなる ホワイ
オリジナルフォントを30秒で作成「Drop＆Type」 商用利用、無料配布もOK
タイププロジェクトは4月4日、フォント試作ソフトウェア「Drop＆Type」（Mac版のみ）を公開した。作りたいフォントのデータを専用のテンプレートに配置し、ドロップすると最大280文字のOpenType形式のフォントを約30秒で生成する。価格は2500円（税込）。 手書き文字のスキャンデータやデジタルで作成した文字デザインをAdobe Illustratorに取り込み、アウトライン化した上で、指定のドロップシートに1文字ずつ配置。保存したファイルをソフト上にドロップすると、試作フォントを自動的に生成する。 出力時に8種類のウェイト（太さ）を選択できる。完成したフォントは商用利用や無料配布が可能だ。
シリコンバレーのオフィスが、どこもこじゃれている理由
シリコンバレーのスタートアップには、ある共通点がある。それはどの会社のオフィスも、似た感じで「こじゃれている」こと。記者は当初「何かの流行りだろう」ぐらいにしか思っていなかったのだが、実はそこには、シリコンバレーの大きな秘密が隠されていた。 まずは最近のスタートアップのオフィスがどうこじゃれているのか、写真を交えて説明しよう。 オフィスに足を踏み入れてまず気付くのは、フロアがオープンであることだ（写真1）。フロアは全体が見渡せる広々とした空間になっていて、開発者は立ったり座ったり、思い思いの姿勢でプログラミングに励んでいる。 米国のソフトウエア会社というと、「開発者が作業に集中できるよう、デスクの周りはパーティションで囲まれていて、プライバシーが保たれている」という印象があった。米Microsoftなどは、個室を開発者に与えていたことで有名だったほどだ。しかしスタートアップのオフィスはそれ
なぜタイポグラフィにおいてVertical Rhythm（バーティカルリズム）は重要な手法なのか？ | POSTD
Webのタイポグラフィについて少しでも調べたことがあるなら、 Vertical Rhythm という言葉を耳にしたことがあるのではないでしょうか。タイポグラフィを用いて仕事をする場合、最も重要な手法の1つです。このことについて知って以来、私は自分のサイト全てにVertical Rhythmを使っています。 ある日、Vertical Rhythmの重要性について自分が全く理解していないことに突然気付き、愕然としました。そしてその後すぐに2つの疑問が湧き上がってきました。「なぜVertical Rhythmを使うとサイトのデザインが向上するのか？ 」「自分のデザインを良くするために、Vertical Rhythmから何を学べばいいのだろうか？ 」。 私はこの疑問を解明しようと決めました。その考察を綴ります。 記事の最初にあたって認識を共通にするため、まずはコンテキストについて説明します。 Ve
2016年版 フロントエンド開発フォーマット
実務でよく使うhtml,css,jsの小技をつらつらと紹介します。 ※2/11のスクーの授業中で使った資料です。 https://schoo.jp/class/1776 【オシャレCSS編】 1. transformを使って要素を変形させるワザ 2. transitionを使い、CSSだけで簡単なアニメーションを行うワザ 3. keyframesを使ってCSSだけで複雑なアニメーションを行うワザ 4. 矢印アイコンをcssだけで表現するワザ 5. アイコンをアニメーションさせるワザ 6. CSSプロパティ”filter”で画像を加工するワザ 【地味だけど使えるワザ編】 7. 今どきの、要素を上下中央寄せにするワザ 8.「flexbox」で要素を自由自在に整列させるワザ 9. Windowsでwebfontをちょっとマシに見せるワザ 10. ア
Webサイトをリニューアルするときに気をつけるべき10のこと
UXは、その存在を気づかせないときに成功したと言えます。Webサイトのデザインが流れるように直観的になされていて、訪問者が不満を感じることなく情報を見つけることができれば、成功です。UXこそがWebサイトのリデザイン、リフレッシュのすべてです。Webサイトがださくてうまくナビゲーションできていなければ、せっかくのコンテンツの品質、グラフィックデザインの美しさや企業の評判も意味をなしません。 UXは、よくでてきるときには気づかないものの一つです。UXが貧弱だと、その存在に気づかれてしまいます。ちょうど都市計画のようなものです。例えば、シカゴの都市計画が良く出来ていることは、アトランタのような都市に出かけたときに気づきます。シカゴの街のデザインは論理的で整然としていますが、アトランタは同じ名前を持った全く異なる道や奇妙な交差点、非論理的な配置でいっぱいだと多くの人が主張しています。アトランタへ
【UXの迷信】ユーザーニーズは本人たちに聞くのがベスト？
ZoltánはCentralway（チューリッヒのソフトウェア企業）のUXデザイナー長。元UstreamのUXディレクター。美しく、且つ使えるプロダクトを作ることに情熱を燃やしています。 New Cokeやアーロンチェアなどが歴史的なリサーチに失敗してきたにも関わらず、いまだに多くの企業がWebサイトやサービスにどんな変化を望むのかクライアントにアンケートを取り、それに頼りきっています。 未来の行動に関して人に訊くと、人は自信ありげに間違った予測を語りがちです。新しくて慣れないデザインの場合にはなおさらでしょう。「何かを使用することを想像してみること」と「実際に使うこと」は全く異なる次元の話なのです。さらに言うと、人の嗜好はとても不安定なものです。 クライアントの意見を訊くのをやめろと言っているわけではありません。何を尋ねるか、回答をどう解釈するかを明確にすることが大切なのです。 Malc
素晴らしいアプリデザインの秘訣は、「マイクロインタラクション」にこそある - BRIDGE（ブリッジ）テクノロジー＆スタートアップ情報
Nick Babichさんによる寄稿記事です。ソフトウェアエンジニア、テクノロジーの熱狂的な支持者。UI/UXに夢中。ソフトウェア開発、マネージメント、生産性などなどについて執筆している。Twitter アカウントは、@101babich。本記事は、Mediumへの投稿記事を許可を得て翻訳したものです。元の英語記事もどうぞ。 私たちが日々の生活の中で体験するマイクロインタラクションの例 最高のプロダクトは、2つのことで秀でている：機能とディティール（細部）だ。機能によって人はプロダクトに魅力を感じ、ディティールによって、それを使い続ける。このディティールこそ、特定のアプリが競合から抜きん出る理由だと言える。 マイクロインタラクションは、ユーザーに対して快適なフィードバックを返すために有効なテクニックのひとつだ。 あらゆる道は、人間中心設計のデザインアプローチへと続いている。そこで最優先され
今どきの入力フォームはこう書く！ HTMLコーダーがおさえるべきinputタグの書き方まとめ - ICS MEDIA
みなさん、入力フォームを制作する際、どのような施策をおこなっていますか？ 入力項目を見直したり、入力ステップを明確にしたりなど、入力フォーム最適化をおこなっていると思います。そのことで、コンバージョン率があがったり、ユーザーがストレスを感じないようになるでしょう。入力フォーム最適化はEFO対策 = Entry Form Optimizationとも呼ばれます。 サイトの設計段階で検討すべきことが多いですが、コーディングでも考慮すべき事が多々あります。今回はHTMLコーダーがエントリーフォームを制作する際に考慮すべき点について紹介します。 ※本記事では最近のブラウザに適したHTMLコーディング方法の紹介を目的としています。そのため、デザインとアクシビリティーでのベストプラクティスを紹介したものではありませんのでご了承ください。 自動入力機能に対応しよう Google Chrome（デスクトッ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
サービス終了のお知らせ
詠み人知らず：UXに関する30の格言
https://jp.techcrunch.com/2016/03/15/20160314adobe-launches-experience-design-cc-a-new-tool-for-ux-designers/
