UIから「白」が消える日｜ritar
これは designing plus nine Advent Calendar 19日目の記事です。 こんにちは。ritarと申します。 今年の10月頃、YouTubeに大きいデザイン変更がありました。 アイコンの変更、角丸やレイアウトなど全体的に一新されているのですが、中でも自分が仰天したのは「アンビエントモード」という新機能です。 アンビエントモードこのモードをオンにすると、動画の下側のUI領域が、まるで動画部分から光が漏れているかのようにじんわりと色づきます。 これを見たとき自分は度肝を抜かれました。なんたってUIの領域にコンテンツの色が侵食しているのです。 これを踏まえて、最近UIと色について考えたことを、UIデザインの歴史を振り返りながら記していきます。先に要点を言うと、UIはどんどん「無色透明」になっていくと考えます。これは「技術が生活に浸透することによってUIは存在感を減らし
早期プロトタイプの功罪 ここ2年で考えたメンバーとの協業とOOUIについて｜まつき
「手が早いデザイナー」って良いこと？仕事で「手が早いねー」と言われるデザイナーがいます。 例えば私がそうです。小さなWEB制作会社や急成長のベンチャー企業で膨大なタスクを泣きながら回した経験がこの力を強化してきたと思います。 経験上デザイナーに対する「手が早い」とは、以下の3つを指します。 依頼時： タスクの必要要件を掴む（汲み取る）のが早い 制作時： ワイヤーやデザインに落とすスピードが早く、精度が高い 修正時： 修正対応が早い 特に私はアブダクションライン（逆推論）が強いタイプで、ざっくりした要件を伺ったあと「多分こういうものが作りたいんだろうな」という予測を立て、過去の凡例や脳内ストックを頼りに早い段階で構成を引くのが得意です。 デザイナーの逆推論＝アブダクションラインのイメージ。デザイナーは抽象から段階的に選択をして最終的な具象に到達するのではない。一気に尤もらしい具象を掴み、そこ
Getting to the bottom of line height in Figma | Figma Blog
We’re altering the way we handle text in Figma. Join me on the journey we took to get there — through type history and into the modern times. At Figma, we try to strike a balance between historic design principles, forged through the centuries, and new practices. Today marks another step on that journey: we’re altering the way we handle text. Figma will now distribute extra line height above and b
ほとんどの人にはどうでもいい行間の話
行間といっても、文章ではなくてタイポグラフィの話。デジタル時代の。 Line height の扱いが各UIツールでどうなっているのか、改めて確認しました。 少し前に Figma が Line height 仕様変更の記事を公開し、その内容の濃さに感動しました。とても良くまとまっていて、定期的に読み返したいくらい。 https://www.figma.com/blog/line-height-changes/ 現代のタイポグラフィは、グーテンベルクの活版印刷のルールを色々と踏襲しているのですが、Line height も当然そのルールの中のひとつ。ただ、デジタルそしてWebの登場で、もはや唯一のルールがなくなってしまいました。 歴史的経緯は下記のような感じです。Line height を構成する leading をどこに付けるのか、あるフォントにおける line-height: 100% を
乃木坂46の公式サイトのリデザインで学んだこと｜Miyu Otsuki
先日、ふとしたきっかけで乃木坂46の公式サイトをリデザインを思い立ち、スキルアップの一環も兼ねてトップページをリデザインをしていました。 そのリデザインから学んだことなどをブログに書きたいと思っていたのですが、公式サイトに掲載されているコンテンツの著作権上、なかなか難しいかなと思い、念のため乃木坂46の運営委員会に問い合わせてみたところ、営利目的でなければ使用しても大丈夫（ブログの掲載も可）との許可をいただいたため、こちらに書くことにしました（2/9 16:43：問い合わせの内容は、公式サイトのお問い合わせフォームから送信したため、画像の添付などはしていません。コンテンツの掲載許可は頂きましたが、運営委員会に直接デザインデータを送ったわけではありません）。 なぜリデザインをしたいと思ったのかもともとアイドルが好きで、アイドルグループの公式サイトをチェックする機会が多いのですが、乃木坂46の
話題のCASHというアプリのUIデザインがめちゃよくできてる
最近メルカリとDMMのファイトがスタートして盛り上がっている即時キャッシュ化サービスですが、元祖のCASHというアプリのUIデザインがめちゃくちゃ良くできてる。ちなみにiOSアプリしか見てないけど、iOSアプリを作ってる人はとりあえずダウンロードしてみる価値あると思う。 世の中にはいろんなiOSアプリがあるんだけど、UIデザインがこれすごいわと思うものってやっぱり英語のものが多かったんだけど、日本人としては日本語メインのアプリでよく考えられているものが一番参考になるんですよね。なんといってもテキストはUIで一番多く使われている部分だし。 アプリって基本的に何度も考えて考えないとゴッチャゴッチャとボタンが増えていって、結果的になんだかスッキリしない使いづらいアプリが出来上がるんだけど、CASHのアプリはすごく良くできてる。なんというか、無駄を削ぎ落としている。 まず、デザインの色の使い分けが
真四角書体 | IDEASKETCH, INC.
ID : 17013 使用規約 仕様 名称：真四角書体 フォントの仕様 : Open Type Font 収容字種 : 収録：3155文字（教育漢字、常用漢字、JIS一次水準をカバー） ※かな・アルファベット・記号は収録されていません クレジット 著作権・フォント管理及び製品取扱元 : アイデアスケッチ ※フォントデータ及びライセンス使用価格は、予告なく変更する場合があります。 著作権発効日: 2017年8月1日 製品完成: 2017年8月1日 真四角書体 ダウンロード版 ¥16,000（税込） 真四角書体４ウェイトセット ダウンロード版 ¥48,000（税込） フォントフォーマットについて アイデアスケッチで販売するフォントはOpen Typeです。リリースされてから時間がたっているOSでは、Open Typeが 使えない場合があります。サポートの対象となる環境は以下の通りです。 Win
モノを売る単一施設の時代はもう終わり。たぶんコレが世界最先端の文化＆商業施設。あらゆるDIYにチャレンジできる雑貨屋も最高でした！｜大西正紀
モノを売る単一施設の時代はもう終わり。たぶんコレが世界最先端の文化＆商業施設。あらゆるDIYにチャレンジできる雑貨屋も最高でした！ 台北滞在１週間のうち、良すぎて３回訪ねたのが、「松山文創園区」と「誠品生活」の一帯。またしても台北にヤバいエリアが！ 観光本には、デザインミュージアムがある文化施設、蔦屋書店が参考にしたオシャレ本屋、巨大なリノベーション、伊東豊雄設計の建物、などと書かれてるけど、はっきり言ってそんな視点で見るのは間違い。ここは、来場者たちさまざまなカルチャーの情報に刺激を受けつつも、自らの能動性をもたきつけられてしまう、かつてない文化エリアだったのです。 ワンシーンごとに感じたことがあったわけですが、細かい部分は省いて、今回はこのエリアを一気にご紹介！ それでは行きましょう！ まずまず。何がスゴイかというと、都会の超ど真ん中、東京で言うと丸の内のような場所に、 その昔、台北を
綺麗にデザインされたピクトグラムアイコン100個セット:phpspot開発日誌
Dribbble - Free 16px Broccolidryiconsaniconsetitisfullof…icons by Visual Idiot 綺麗にデザインされたピクトグラムアイコン100個セット。 次のようなシンプルだけど綺麗なPSD形式のアイコンセットがダウンロードできます。 PSDファイルですが、ベクター形式なので拡大しても劣化がありません。Retinaディスプレイ対応も可能。 種類も汎用に使えそうなものが多いです 関連エントリ フリーでシンプルなピクトグラムアイコン６０個セット「Jigsoar icons」 いい感じのOpenType形式ピクトグラムアイコン集100個「Entypo」 ピクトグラム等、ミニマムなアイコンが２４個まとまったアイコンまとめ ピクトグラムが７００種類以上集まったアイコンセット「Pictodeck Icon Set」
無料で使えるレスポンシブのWordPressブログテンプレート１０選 | バズ部
WordPressブログのテンプレートは、とても高性能なものが多く、色々なところで様々なものが紹介されている。しかし余りにも多過ぎて、どれを選べば良いのか分からなくなってしまう方もいるのではないだろうか？ そこで本日は、ソーシャルメディアマーケティングを実践する上で最適なブログデザインという部分に焦点を当てて、オススメのWordPressブログテンプレートを１０個ご紹介する。 これらのテンプレートの選択基準は、以下の３つだ。 シンプルな２コラムであること メインコンテンツが左、サイドバーが右にあること レスポンシブデザインであること なぜ、この３つの点が重要なのかという理由は、「月１５万PVを生むブログをデザインした時に徹底した７つの要素」で確認して欲しい。 １．Respo デモを確認 ｜ ダウンロードページ シンプルで落ち着いたデザインでありながら、ヘッダー直下のスライダー画像が目を惹く
コーヒーをタダで飲んだ後、あなたならどうする？モバイルアプリを使った”シェア”の社会実験の結果は驚くべきものだった！
コーヒーをタダで飲んだ後、あなたならどうする？モバイルアプリを使った”シェア”の社会実験の結果は驚くべきものだった！ 2011.11.23 Junya Mori この画像を携帯にダウンロードして、スターバックスにもっていきレジでスキャンすると無料でコーヒーを飲むことができます。実はこれ、ユニークな社会実験のプロセスの一部。 Jonathan Stark（以下、ジョナサン）という人が、オンライン上で彼の個人的なスターバックスカードのバーコード画像を公開し、それを誰でも使用できるようにしました。驚くべきことに、一ヶ月間経過した後も、カードにはお金が残っていたというのです。 ジョナサンはモバイル通貨、どのようにお金を転送したり、所持している携帯電話で商品の支払いを行うのかということを研究していました。彼はバーコードの画像のみアップロードして、スターバックスのアカウントをシェアしたら、一体どうなる
実例で学ぶjQuery MobileのCSSカスタマイズ (1/3)
jQuery Mobileを利用するとスマートフォンサイトを手軽に制作できますが、基本テンプレートをベースに制作すると「いかにもjQuery Mobileらしい」デザインになってしまい、他のサイトと似通ってしまいます。 そこで今回はjQuery Mobileのテンプレートをフルカスタマイズし、オリジナルデザインのスマートフォンサイトを作成する方法を解説します。サンプルとして、次のようなカタログサイトを制作します。 トップページには新着商品のサムネイル画像が3つ並び、その下にはアコーディオンパネルでニュースを掲載しています。新着商品のサムネイル画像を選択すると詳細ページに遷移し、詳細ページで画像をタップすると画像を拡大して表示します。 HTMLの作成 デザインカンプを元にHTMLを作成します。head要素内は次のように記述します。 ■サンプル1[HTML] <!DOCTYPE html> <
「誰のためのデザイン？」は開発者よりむしろユーザが読むべき良書な件 - もとまか日記Ｚ
最近この本の存在を知り購入してみました。実はかなり有名な本らしく、今更感ありまくりですが・・・ 誰のためのデザイン?―認知科学者のデザイン原論 (新曜社認知科学選書)作者: ドナルド・A.ノーマン,D.A.ノーマン,野島久雄出版社/メーカー: 新曜社発売日: 1990/02メディア: 単行本購入: 19人 クリック: 502回この商品を含むブログ (248件) を見る 以前書いた以下の記事のブコメで知りました。 スマホアプリの「使いやすさ」とは何か、を考えてみた 最近のはてブコメントは残念なのが多々見受けられ、非常にガッカリしてますが、たまには役に立つこともありますね。 さて、この本が発売されたのは1990年、実に20年以上前のため、内容的には古臭く感じる部分も多々あります。何しろ、1990年と言えばWindows3.0の時代。当然ですが、インターネットはまだ普及していません。私もその頃は
デザイン力をつけるデザインルールの入門書
デザインのルール、レイアウトのセオリー。 デザインルールのカタログ本。あらゆる法則、イディオムが網羅的にまとめてある。 ４８のルールそれぞれに理論、オリジナル作例、実際のデザイン作例、実務上の注意点がまとまっている。 デザインルール本に多いパターンが、すべて実際のデザインの作例だけをみせるか、もしくはオリジナルの作例だけを見せてルールや理論を語るタイプが多かった。本書は両方の作例をのせている。オリジナル作例は11人のデザイナーがつくったもの。 デザインルールの総まとめともいえる内容である。この一冊でデザインルールは十分の内容になっている。 増補改訂版 レイアウト、基本の「き」 エディトリアルデザイナーであり、近年は巨大壁画の画家活動もされている佐藤直樹さんの異例のデザインの入門書。一般の人向けにデザインの基本を伝えている。レイアウトだけでなく、文字、色、写真、地図などレイアウトに含む要素を
手軽にデザインを変更できるCSS3ボタンを作る為のフレームワーク・CSS3 Buttonize Framework
軽量なフレームワークだよ！とのことです。デザインもシンプルで個人的に好みでした。何と比べて軽量なのかな？ サンプル適当ですみませんけどサンプルです .button { font: 14px/36px "Droid Sans", sans-serif; height: 36px; border: 2px solid #333; padding: 5px 14px; margin: 0 6px; text-shadow: 1px 1px 1px #FFF; -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; -moz-box-shadow: 1px 1px 6px rgba(255, 255, 255, 0.3); -webkit-box-shadow: 1px 1px 6px rgba(255, 2
[CSS]画像を使用しないで、紙がひらっとめくれたエフェクトを与えるスタイルシート
あらゆるサイズのエレメントに利用が可能な、紙がひらっとめくれたようなページカールのエフェクトを与えるスタイルシートを紹介します。 デモページの拡大 このエフェクトはページのあらゆるサイズの要素に簡単に適用できます。 紙がひらっとめくれたエフェクトの実装方法 HTML HTMLはシンプルです。div要素にclassを付与しているだけです。 <div class="box">My box</div> CSS：シャドウの適用 box-shadowを使用して、内側と外側にシャドウを適用します。 .box { position: relative; width: 500px; padding: 50px; margin: 0 auto; background-color: #fff; -webkit-box-shadow: 0 0 4px rgba(0, 0, 0, 0.2), inset 0 0
selectボックスをシンプルなプルダウンに拡張するjQselectable(jQuery.selectable.js) :: 5509
セレクトボックスのユーザビリティを劇的に向上できるかもしれないjQueryプラグインです。バージョンアップでjQuery.selectable.jsからjQselectableに名前が変わりました。 サンプルを見てみる トピックス 特徴 ダウンロード 導入方法 スタイル 拡張 表示形式 selectable simpleBox エフェクト 透明度 プルダウン位置の調整(少し高度な設定) プルダウンの高さ カスタマイズ 独自のselectボックスに適用させる id、classの引継ぎ 日付で使う Callback関数を使う 動的にselect要素のDOMを書き換える場合（rebuildメソッド） サンプル 更新履歴・追記 動作環境 特徴 selectボックスの選択ってイライラしないですか？jQselectabeを使えば解決できるかもしれません。以下が主な特徴になります。 セレクトボックスの鬱
UIButton の隠し API - 24/7 twenty-four seven
UIButton も buttonWithType: メソッドの引数に 100 以上の値を直接指定すると、非公開のボタンタイプを使用することができます。 100 〜 102: ナビゲーションバーのボタン (UINavigationButton) 100, 101, 102 を指定すると、ナビゲーションバーで使われているボタンスタイルになります。 Back ボタンの形を自分で作るのは大変なので、素材として活用すると便利かもしれません。 UIButton *button; button = [UIButton buttonWithType:100]; button.frame = CGRectMake(10.0f, 10.0f, button.frame.size.width, button.frame.size.height); [button setTitle:[NSString stri
女子のための情報サイトデザイン21+4 – Commit Lab
現在業務で女性向けの情報サイトのような物を作ってるのですが、デザインで少々詰まってましまいました。情報サイトとなると自然と文字数も多くなってゴチャゴチャしがちなうえに、元々女性的なデザインを意識して行った事があまりないので中々アイデアが出てこなくて困っていました。 いつも通りGoogle先生に訪ねてみたものの、案外見つからないんですよね。どうしようかなと悶々と悩んだ末に、ググれカスと言われるのを覚悟してwdscratchのフォロワーさん達に参考になりそうなサイトを教えて頂きました。 という事で今日はGoogle先生とwdscratchのフォロワーさん達が教えてくれた女子向け情報サイトをご紹介したいと思います。 今回協力して頂いた皆さん、本当にありがとうございました。助かりました。 追記1：ひとつ掲載漏れがありましたので修正しました。 追記2：コメント欄でご紹介いただいたサイトを追加いたしま
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
転職・退職代行マガジン -