Winでは基本的にフォントレンダリングをCSSで制御することは出来ません。また、スマートフォンのブラウザもほとんど制御できず、基本的にグレースケールで表示されることが多いようでした。 MacではSafariのみがグレースケールですね、これが原因で「Safariで文字が細く見えてしまう」現象が起こっています。 デバイスのdpiによる見え方 このまま各ブラウザでアンチエイリアスを揃える設定しても良いのですが、1x, 2xの解像度による見え方を見ていきましょう。(今回はThunderbolt Display = 109ppi, MBP Retina Display = 220ppiで検証・比較。実際に表示した画面をスマホのカメラで加工が無いようにして撮りました。) 109ppi(Thunderbolt Display) 220ppi(MBP Retina Display) 以下のことがわかります

こんにちは。ほそだです。 以前、このブログでReactについて書いてから早一年あまり。まわりを見渡せば、ReactはもはやかつてのjQueryのように当たり前の存在になっていて、時の流れの早さを感じます。 とはいえ、僕はエンジニアではなくデザイナーなので、従来のようなデザイナーだけで完結する規模感のWeb実装も相変わらず行います。その際、せっかくReactを通して培ったコンポーネント指向な実装をもうちょっとカジュアルにやれないかなと思い、この半年ほどRiotを使ってみました。 ということで、今回は主にデザイナー向けにRiotについて解説します。 Riotとは コンポーネント指向でビューを作っていく、だいぶReactっぽいライブラリです。 Riot.js — Simple and elegant component-based UI library 国内だと2016年春くらいに若干ブレイクの

おひさしぶりです。chiiです。 2017年早くも1ヶ月が経ってしまい、2月になってしまいました。インフルエンザも流行っているようなのでみなさん体調には気をつけてください。 さて、今回のブログでは「見やすさ」とはどんなものかについて、色彩検定の基礎知識と主観からまとめてみようと思います。 あいまいな「見やすさ」というもの サイトやバナーのデザインをしているとき、 「この文字をもう少し見やすくしてほしい」 「新機能の導線だから、このボタンをもっと見やすくしてほしい」 こんな修正依頼をもらうことはよくあると思います。 これらは同じく「見やすさ」の向上を依頼されているものの、 きっと依頼主は 「この文字を見やすく」 → 「この文字を読みやすく」 「このボタンを見やすく」 → 「このボタンをぱっと目を引くように目立たせて」 という別の意図を持って依頼を投げていますよね。 その場合、この２つの依頼に

※今回のデザインの話は主にプロモ−ション系サイト、バナーに関する事例が多めです。 UIの話には当てはまらない場合がありますのでご注意下さい 腹筋です。 最近、「腕の筋肉もすごいんですが何の仕事をされているのですか」と質問されました。ご期待に添えず残念ですが、只の肩こりの酷いWebデザイナーです(^q^) さてさて、タイトルに「ブラッシュアップ」とありますが、イメージカンプを出して、概ねOKをもらった制作物をさらにブラッシュアップするって難しいですよね。 デザインで言うと、「適切な余白を設けているか」「ルール（フォントや余白など）が統一されているか」「アイコンの世界観を統一」等など。もちろん、OKラインを大きく超えないように細かなところを調節していきます。 しかし、そもそも何が足りないのか。 ほぼOKがでた。アタリの部分を作り込む。写真を差し替える。 で、デザインのブラッシュアップって？ あ

ハローエブリワン、(あ、間違った)こんにちは！ 2回目の投稿となりましたデザイナーのiriaです。 最近業務でバナーを作成する機会が多くなり画像を加工する頻度も比例して増えているので、今回はPhotoshopなどで画像加工をする時に大変便利な描画モード(ブレンドモード)の仕組みについて書かせて頂こうと思います。 紹介する描画モード 仕組みの説明には計算式を用いておりますが、いずれも複雑な式ではないので数式に抵抗のある方や、そもそも画像加工ツールを利用する頻度が少ない方でも、ざっくりと概要を把握していただけるのではないかと思います。 はじめに・知っておいてほしいポイント 環境はPhotoshop、RGB値の範囲を0～255(8bit)前提で説明させていただきます。解説させて頂くにあたり、前提知識として以下のポイントを抑えておいて下さい。 1pxの中には「R(赤): 0～255・G(緑): 0

はじめまして、ほそだと申します。昨年秋まで個人事業主の立場でドワンゴでお仕事させていただいておりましたが、いろいろ経緯がありまして中の人になりました。ドワンゴ歴はそこそこ長い新入りです。よろしくお願いいたします。 さて、今回はデザイナー（HTML/CSS/JSは扱えるいわゆる「Webデザイナー」）として1年間ほどReactを使ってみたので、そのメリットを書いてみようかと思います。 Reactとの出会い ReactとはFacebook製のJSライブラリです。 https://facebook.github.io/react/ WebアプリケーションのView部分を実装します。2014年の暮れにエンジニアの方々が魂を震わせているのを見て存在を知りました。2015年はReact元年な感じでしたよね。 僕自身、以前から比較的JSを書くタイプのデザイナーではありましたが、正直なところ自分が関わってき

株式会社ドワンゴ、デザイン戦略室のデザイナーの宮下と申します。 デザイナーのみなさんはアプリのデザインを行う際に、どのようなワークフローで制作を進めていますか？ すべての仕事がそうであるように、アプリデザインのワークフローについても、制作体制やゴールの違いによって無限の選択肢が生まれます。 ここではわたしが関わったプロジェクトを元に、アプリが完成するまでのデザインサイドのワークフローをご紹介いたします。参考になるかわかりませんが、大まかな流れをつかみたいという場合は、ご一読ください。 STEP.0 普段から ここでは、プロジェクトにアサインされる前から、日常的に気にかけておきたい項目をあげます。 あなたがもしもアプリのデザインを行ったことがないのであれば、以下の情報を頭に入れておくことをお勧めします。また、すでに経験があったとしてもアップデートの速度は速いので、制作の前に改めてチェックして

ハローエブリワン、ジェイだ。 最近は増刊号でエブリワンに会える機会が増えて、俺も嬉しい限りだよ。 季節も夏が近づいてきて気持ちもハッピーなピープルが増えてきたんじゃないだろうか。 俺も日が長くなり太陽とコミュニケーションできる時間が増えて、自然との会話力が向上し、ハッピーサンシャインだ。この勢いで太陽の息子にでもなろうかな。 だが、太陽がでている時間が長くなったからといって、1日24時間の壁を突破できるわけじゃない。気を付けたいのはエブリデイ24時間ということだ。今日はこの24時間の中で巻き起こる、ドラマチックな案件に対処する方法をエブリワンに伝えよう。 エブリワンもこんな経験を一度はしているんじゃないだろうか。 企画担当：すいません。特設ページが急遽必要になってしまって、対応可能でしょうか。 デザイナー：えっと、いつまででしょうか。 企画担当：大変申し訳無いんですけど、明日の朝にリリース

どうも、ほそだです。ゴールデンウィークも終わり、暖かい空気を感じる季節になりました。 さてちょっと前に、こんな記事が話題になっていました。 You Don’t Need jQuery – Qiita （旧題：もうjQueryは必要ない） 元々は海外の方が書かれたものを日本語訳してくださったものですが、あらかた網羅されていて感服しました。実は今回、これと全く同じようなことをこのブログのネタにしようと考えていたのですが（jQueryでやってたことをjQueryを使わずにやってみた的な）、締切間近になってさあ書くぞってタイミングでここまで完璧なものを先に出されちゃったので、こりゃ勝てねえと泣く泣く断念したのですよね。。 それで急遽新たにネタを考えなきゃいけなくなったのですが、これに対するネット上での反応がけっこう興味深いなと思って見ていました。 「もうjQueryは必要ない」に関するみんなの反応

はじめまして、KADOKAWAでデザイナーをしているほーりーです。 ドワンゴとKADOKAWAはグループ会社ということもあり、今まで密かに交流を深めていました。 この度、KADOKAWAデザイナーズもdwango creators’ blogに登場させて頂くことになりました！ 今回は初回ということで、私たちデジタル戦略推進室のデザイナーが働いている 通称「デザインラボ」をご紹介したいと思います。 まずは外観から…… 飯田橋・市ヶ谷エリアにはKADOKAWAの事業所が5つあります。 私たちが働くビルは古き善き趣が残る「五番町グランドビル」。 1Fには本屋やカフェがあり、気分転換したいときに立ち寄ります。ちょっと他のビルと印象が違うと思った方……気のせいです！ 飲み屋さんもあるので仕事帰りに一杯！なんてことも。 こちらのヘアーサロン、なんだか見覚えがある方もいるのでは？ ヒントはNHK『連続テ

こんにちは、ぬるぴょです。 早くも花粉が飛び始め、もうすぐ春だなぁと感じはじめる今日この頃。 流れ始める鼻水と目のかゆみに戦々恐々としております。 そんな季節になると毎年恒例、社内ざわざわと浮足立ってくるイベントがあります。そう　ニコニコ超会議です！生放送で色々な企画が発表され、社内でも準備が着々と進んでいます。 デザイナーはというと、今の時期は超会議に関わるロゴデザインをおこなっていたりします。毎年たくさんの企画が立ちあがり、それぞれにロゴが設定されていますが、実は社内のデザイナーで手分けしてロゴを作っているのです！ そこで今回は超会議企画のロゴマークの制作過程をご紹介したいと思います。今年の超会議ではまだ秘密の企画もありますので、昨年の超会議企画「超プロレスリング」のロゴマークを題材とさせていただきます。 去年の「超プロレスリング」の模様はこちら ロゴ制作の流れ まず、超会議ロゴ制作の

こちらも必要に応じて設置しますが、このとき記事に対してアクションを行うボタンとの差別化を図ることが大事です。 オリジナルでボタンを作っても良いでしょう。 もし設置するボタンに迷ったら 設置するボタンに迷ったら、Facebook、Twitter、はてなブックマークを取りあえずおさえておけば大丈夫だと思います。 このブログのように技術系の記事が多い場合、この中で一番重視すべきなのははてなブックマークでしょう。 ボタンが一定数押されはてブのトップページに載れば、そこからの流入や、Gunosyなどのニュースキュレーションサービスからの流入がかなりの数見込めます。 リリースすることがゴールではない これはメディアサイトだけでなく、サービスサイトなどにも言えることですね。 一ヶ月も運営してみれば、いろいろな立場の人からの改善の要望がかなり溜まっているはずです。 例 ※あくまで例なので、実際こんなにうま