WebページやスマホアプリのUIをデザインした時に、数値上は均整がとれているのに、人の目の錯覚で違和感を感じることがあります。ちゃんと揃えて配置したのに、同じサイズなのに、同じ色なのに、なんだか違和感があることはありませんか？ この目の錯覚による違和感を取り除くUIデザインのテクニックを紹介します。 Visually distorted - when symmetrical UI looks all wrong by Gil Bouhnick 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 01. ボタンと同じ色だとテキストは明るく見える 02. 同じフォントでも小さいサイズだと細く見える 03. 背景画像の上のテキストは読みにくい 04. 行間が間違っているテキスト 形の扱い方 05. 整列されたのに揃っているように見えない

UX Movementの創立者、ライター。ユーザーに優しいUXデザインのスキルを読者の方が上達できるよう、UX Movementのブログを始める。 デザインにピュアブラックを使うと可読性が低くなると知っていましたか？ 統計によると、「アメリカの成人の58％」がコンピュータ作業で眼精疲労を経験したことがあるそうです。デザイナーは使用する黒の色に注意を払うことで、目が疲れる可能性をある程度減らすことができます。 ピュアブラックの文字や背景 ピュアブラックの文字や背景と白の組み合わせは、ユーザーが文章を長時間読むとき目に不快感を与えることがあり、眼精疲労を招いてしまいます。 白は100％の明度であり、黒は0％の明度です。このように明度のコントラストが強いと光量に不均衡が生じ、ユーザーが明るさに順応しようとするために目が酷使されることになるのです。 この現象を実証するために、暗い部屋で明るい電灯を

はづき @loser_88 さくらんぼ届いたんだけど、人食い鬼の感想にしか見えない。が、古印体は一般的に「モコモコして可愛い」という印象だというものな…マジでか……。 pic.twitter.com/zCj5t1v0hC 2018-06-20 16:42:08

企画展「日本のグラフィックデザイン2018」が、2018年6月20日(水)から7月31日(火)まで東京ミッドタウン・デザインハブにて開催。入場は無料だ。 個展「中村至男展」の告知・展示ポスター(org：クリエイションギャラリーG8) 「日本のグラフィックデザイン2018」は、会員約3,000名が所属するアジア最大級のデザイン団体・日本グラフィックデザイナー協会による年鑑『Graphic Design in Japan』の2018年版発行を記念して開催される企画展。身近な雑貨、書籍、商品パッケージ、シンボル・ロゴ、ウェブサイト、映像、展覧会やショップの空間デザインに至るまで、様々な日本のグラフィックデザインを実物と映像によって紹介する。 カテゴリー【複合】デザイン施設の企画展のグラフィック・空間構成 「デザインの解剖展：身近なものから世界を見る方法」 (ad＋cd ：佐藤卓 cl：明治＋21

2017年10月マルマン株式会社さんより、「図案スケッチブックの60周年ロゴ」のご依頼いただきました。私はこれまでマルマンさんのスケッチブックやノートをたくさん使ってデザインしてきましたので、大変うれしいお声がけでした。 ■ご依頼内容と完成したデザインメールを頂いてから数日後、中野坂上にあるマルマンさんの本社に打ち合わせに伺いました。そして、周年ロゴを作る目的として、 ・60周年を迎えたことを往年のファンに伝える。 ・新しいユーザー層に図案スケッチブックを知ってもらう。 ・スケッチブック表紙に60周年ロゴを表示し、記念商品として発売する。という点をご共有頂きました。 ワクワクしながらデザインをスタートし、さまざまな検討経て完成したのがこちらです。 この写真を見ると、今までと変わらない図案スケッチブックのデザインに、「Sketch Book」と似た文字で「60th」と載せただけに見えるかもし

まとめ 誰だか知らないが、この展望台のデザインした奴は天才だなと思った。これが『デザインの勝利』なんだよ。 東京ミッドタウン日比谷の「極力シンプルで美しいデザインにしよう」というデザイナーの欲求がトイレのアイコンを小さくしすぎて「トイレはどこ？」という質問が多発して看板が設置されるの、まさに『デザインの敗北』というほかなくてとてもすき 130844 pv 526 106 users 1394 ニカイドウレンジ @R_Nikaido 「デザインの勝利」が可視化されないのは、優れたデザインは空気のように透明な存在だから知覚されなくなってしまうからだと思う。個人的に凄いデザインだと思うのは ・鍵を閉めないときは自動的に開放状態になるトイレのドア ・鍵を閉めないと扉から鍵が取れないロッカー この2つは凄いなと。 2018-04-04 10:21:45 ニカイドウレンジ @R_Nikaido 「鍵を

海外のデザイナーのポートフォリオを見るのに便利なサイトの紹介です。 Bestfolios - UI/UX Design Portfolio Inspiration and Showcase ポートフォリオだけでなく、次の４カテゴリで情報がまとめられています。 Portfolios（ポートフォリオ） Resumes（履歴書） Resources（デザイン素材） Articles（投稿記事） オススメなページ順に、簡単に内容を紹介します。 Articles（投稿記事） ポートフォリオに関連した記事が読めます。 今のところ４記事しかありませんが、いずれもタイトルの魔力がすごい。 Google Designer Portfolio Collection 1 Facebook Product Designer Portfolio Collection 1 10 great fonts you may

【画像】 逆からも読めるポスターが大絶賛　極めて難しい漢字のアンビグラムが凄いと話題に 1 名前：名無しさん＠涙目です。(やわらか銀行) [US]：2018/01/15(月) 15:25:26.76 ID:YdQ/kBeW0 逆からも読めるポスターが大きな話題となっている。このポスターには大きく「挑戦」と書かれているのだが、これを逆さまにすると「勝利」という文字に読めるのである。本来ならば「挑戦」を逆にしても「勝利」という文字にならないが、それこそがプロフェッショナルな職人がなせる業なのである。 ・ひとつのワードを違う視点で見る このポスターを作ったのは誰なのか？ アナグラムに精通した人物、野村一晟さんが文字部分を制作したポスターで、彼によると、このような逆からも読める文字を「アンビグラム」というのだそうだ。ひとつのワードを違う視点で見ると、新たに他の意味が浮かんでくるものをアンビグラムと

初めまして。UIデザイン勉強中のマサキ(@Masaki_4_5)です。 UIデザイン、とりわけiOS appのデザインスキルを得る一番の近道を探した結果、良いデザインから吸収するのがまず大事という事を聞きました。 このように、sketchで優れたアプリのUIトレースをし、その工程でページの遷移やそのUIになった訳を考察して行くことがスキル獲得にはもってこいらしいです。sketchさえあればお手軽ですしね。 早速Twitterのプロフィール画面とタイムラインの２画面を、Sketchを用いてトレースしてみました。Sketchを用いたトレースについてはネットで既に多く説明されていたのでつまずく事はありませんでした。 Twitterをトレースして気がついた事 左：元画像　右：トレース 1.フォントについてTwitterにはinstagramなどと同様に、和文には"Hiragino sans"、英文

※ここでのデザイナーとは、主に、グラフィックデザインやUIデザインを扱うデザイナーのことである。 そして、Design with AIの時代へ近年、高性能のパソコンとデザインアプリケーションが安価で手に入ることで、誰でもデザイナーを始めることが可能となった。また、AppleやGoogleが提供するデザインのコンポーネントとデザインのガイドラインは、成果物の品質保証を底上げし、美的センス（審美眼）の必要性を下げた。さらに、人工知能の発達は、熟練デザイナーのブラックボックスだった職人的技術を解放しはじめている。 コンピューターが投入される前に必要だったデザイナーの技術は、例えば、1mmの間に何本のまっすぐの線を引けるかといった技術である。しかし、コンピューターが現場に導入されるとその技術の希少性は消え、いまや、0.25mmのまっすぐな線を引くことに、特別な訓練は必要ない。これと似たような現象が

忙しい年の瀬ですが、皆さま如何お過ごしでしょうか。 さて、皆さんは「グッドデザイン賞はあるのにバッドデザイン賞が無いのはおかしい」という風に思ったことはありませんか？ 私は職業柄、日常生活で見かけた良いデザイン事例と悪いデザイン事例を写真に撮ってストックしているのですが、その中には「本当にこれギャグじゃないの？」というレベルのバッドデザインがあったりするんですよね。 良いものを良いと評価することも大切ですが、良くないものを無視するのは人類の進歩に大きな影を落としているような気さえします。ということで、勝手にアワード化してしまいました。2017と付いてますが、私が見つけたのが2017年だったというだけで製造年度などとの相関性はなく、特に意味はないです。あくまでジョークコンテンツとしてお楽しみください。 【追記】Twitterの方で一部画像が自分で撮影したものではないのでは？とご指摘頂きました

polcaのLPをトレースして気づいた事を備忘録的にまとめました。 トレース結果 文字についてトレースした目的の一つに有名サービスのLPはどのようにタイポグラフィを定義しているのかを知りたいというのがありました。 今回のケースでは、14pxをhtml全体のフォントサイズの基準として、emでその他のフォントサイズを決定しているようでした。Sketchでトレースしていてなんかテキストがうまく重ならないな、というときはフォントサイズが小数点になっていないかブラウザの開発者ツールで調べてみるといいと思います。 色についてメインのテキストカラーは#333ですが、情報の優先度を落としたい場合に、#666を使用していました。例えば、注釈のテキストよーく観察してみると、米印と数字の部分は#333なのですが、そのあとに続く文章は#666になっています。また、例外的にフッター部分だけは#000が使用されていま

243 Screens, Last modified on Nov 27, 2017 12:42 GMT

深津 貴之 / THE GUILD / note @fladdict Googleのロゴに補助線を引くとズレてる件。 これは「視覚補正」というやつで、人間の錯視や認知を加味した調整なので、間違ってるわけではないと思う。 twitter.com/GiveMeInternet… 2017-09-26 23:25:25

iPhone Xが発表されたわけですが、なにこのデザイナー泣かせの変態端末。 iPhoneのUI設計者グレッグ・クリスティが追い出されて、ジョナサン・アイヴがソフトウェア統括となったのが2014年。 iOS7のフラット化あたりから、どんどんとUI設計が置いてけぼりになった感がありましたが・・・ここにきてまたデザイナー泣かせの豪速球が。 ざっくりデザインガイドラインを読んでの、気になったところメモ。 画面サイズ サイズは従来のベースであった4.7インチの375pt x 667ptから、375 x 812ptに。縦方向に145pt追加された。 想定されるインパクト 表示可能な情報量が増える 縦スクロール系コンテンツのコンバージョンが増加 スクロールで隠れるナビゲーションの必要性が低下 画面上部のボタンのコンバージョンが低下 ゲームなどの全画面イラストに、黒枠が出たり、見切れたりする グラフィッ

🙌 Awesome, you're subscribed! Thanks for subscribing! Look out for your first newsletter in your inbox soon! Get us in your inbox Sign up to our newsletter for the latest and greatest from your city and beyond

最近のクルマ、顔つきが“反抗期”っぽいのはなぜ？　カーデザインのプロに理由を聞いた：新連載・クルマの未来はIoT（1/3 ページ） 乗り物とIoTの関係性をITmedia NEWSの車好き記者・ヤマグチが追う新連載がスタート。第1回目はSNSで話題になった“カーデザインの反抗期”について専門家に聞いてみた。カーデザインは「女性の化粧」と関係があるらしい。それってどういうこと？ IoT、人工知能（AI）──盛り上がる先端テクノロジーを語る上で、「自動車」は欠かせないものとなった。人々が夢見た「自動運転」が現実のものになりつつあるからだ。今年5月には、トヨタ自動車が開発中の自動運転車に、半導体メーカー・米NVIDIAのAIプラットフォームを採用すると発表して話題を呼んだ。 NVIDIA（エヌヴィディア）は、少しでもPCをかじったことがある人なら知らぬ者はいないであろう有名企業。一部では“謎のA

学生たちを見ていると、きちんと議論して、きちんと設計して、きちんと何かを作ろうとするみたいです。ときには副作用を考慮して、やっぱり作るのやめようかという話になり、再び議論に戻ることもあります。 ああ、もったいない、もったいない。私は適当な人間なので「なんてマジメなんだ、とりあえず何か作ればいいのに」と思います。デザイン思考ではそのことを「クイック＆ダーティプロトタイプ」と呼んだりしますが、それだとなんだかカッコよすぎるので、私は「雑に作れ」と言ってます。 でも、言葉だけでうまく伝わるはずもなく、「どうすれば雑に作れるのか？」と再び議論を始めたりするので、なかなか難しいところです。 それでも「締め切り」というのは効果的なもので、次回までに何かを発表しなければいけないとなると、「議論してばかりじゃ話が進まない！」となり、ある種の覚悟を決めて雑に作ってくれるようになります。 私が印象的だったのは

なんかすごい思い付きで www.adventar.org に参加してみたんですけども。 気づいたらいつの間にか自分の日になっていて面倒くさくなってきて激しく後悔したびっくりしたという。 ぼくはWebディレクターでありデザイナーさんではないし、すてきデザインができるようなビジュアルセンスのようなものは、誠に残念ながら母上から授けられずにこの世に生を受けているものですから、"いわゆる"デザインはやらないんですが、その前の画面設計についてはワイヤーフレームなるものでいっつもやっておりますので、その観点からなんか書きましょうとそういうことですお母様（謎） そんなわけで、うぇぶぎょうかいのむめいでぃれくたーのお時間です。 Webディレクターとしてはえーと、もうすぐ丸１２年になります。そうするとまあ、たぶん数千ページは「ワイヤーフレーム」をつくってきたんじゃないかと思います。正確な数字はわかんないです