https://www.ifly50.com/en_jp/50
君たちはそんなにハンバーガーメニューが好きなのかね？
はじめに 本稿は UI Design Advent Calendar 2015 – 8日目のモバイル UI に関する記事です。 まず私はハンバーガーメニューという UI が嫌いです。その理由についてこの記事で説明していきたいと思います。 あの三本線を人はハンバーガーと呼ぶ 最近よく見かけるあの“三本線”のことを海の向こうでは ハンバーガーアイコン とか ハンバーガーメニュー とか言うらしいです。上のがパンで、真ん中のがハンバーグで、下のがパンに見えるからだそうです。にしてもこのただの三本線をハンバーガーと表現するのは少し無理があるような気がします。まあ違和感あれどそこに抗っても仕方がないので、とりあえずこれはハンバーガーと呼称することにします。 ハンバーガーメニューを避けたい理由 真面目にハンバーガーメニューを考察してみます。 1. 何をするのかがわからないアイコン https://dri
闇雲にディズニー映画みたいなアニメーションを GUI に実装するのはもうやめよう - Qiita
はじめに 本稿は UI Design Advent Calendar 2015 – 9日目の GUI アニメーションに関する記事です。 アニメーションの12の基本原則と GUI ディズニーの アニメーションの12の基本原則/12 basic principles of animation というのがありまして、要はこの原則に沿ってアニメーションを制作すればまるでそれが生きているかのような動きをする、平たく言えばディズニーっぽい動きになる、というものです。http://the12principles.tumblr.com がとてもわかりやすいので、うちいくつかを転載しておきます。 SQUASH & STRETCH ANTICIPATION FOLLOW THROUGH & OVERLAPPING ARCS ビデオ解説：The illusion of life これらを見ただけでも、『あー、デ
『「AWA」のデザインはどのようにして作られたのか。』
こんにちは。 AWAでアートディレクション／デザイン／ブランディングを担当しているムロハシと申します。 今回はAWAのUIデザイン、インタラクションがどのようにしてつくられたのか、 先日行った「 メディアプロデューサー養成講座」の講義内容をベースに、 簡単ではありますが書いていきたいと思います。 「AWA」とは？ AWAとは、ひとことで言うと 「登録なしですぐに音楽が聴ける定額制の音楽配信アプリ」です。 サービスの特徴として第一にあげられるのは、 ・好きなアーティストを聴くだけでなく「プレイリスト」を軸に、自分の好みにあった音楽が「リコメンド」されること リコメンドを通じて「昔好きだったあの曲」や「まだ知らなかったけど好きな曲」を一人ひとりにパーソナライズしてお届けしています。 そのほかの詳しい説明は プレスリリースをご覧いただければと思います。 インタラクションモックの重要性 AWAの初
Monthly Bookmarks 2015/04 - 2015/06 - NxWorld
2015年4月〜2015年6月の個人的ブックマークです。 2015/04 Development Motion Blur Effect with SVG | Codrops 画像をCSSで斜めにマスクした時の知見｜Web Design KOJIKA17 A Visual Guide to CSS3 Flexbox Properties | Scotch 2015年版JavaScriptユーザエージェント判別・判定｜Web制作 W3G Animating CSS Gradients, using only CSS — Medium jQuery Hero Slider | CodyHouse lory レスポンシブ対応のWebページを制作する時に役立つスクリプトのまとめ | コリス sanitize.css Design / Inspiration 「春っぽいデザインにして！」と言われた時に
簡単にオリジナルのフォントが作成できて驚いた！英語や日本語や絵文字など紙に書いた文字からフォントがつくれるオンラインサービス -PaintFont
紙に書いた文字でも、IllustratorやPhotoshopで作成した文字でも、その文字からオリジナルのフォントを簡単に作成できる無料のオンラインサービスを紹介します。 作成できるフォントはTrueType、OpenTypeの2種類です。 ひらがな、カタカナ、漢字、絵文字などの日本語、英語、フランス語をはじめ、ギリシャ文字、キリル文字、数式記号などにも対応しています。 ※漢字は数が少なめ。 PaintFont 使い方は簡単。 フォントに使用する文字を決めて用紙を作成し、その用紙に文字を書き、それをアップロードしてフォントを作成します。 Step 1: 最初の準備 Step 2: 文字を手書きする Step 3: 手書きした文字からフォントを作成 Step 1: 最初の準備 フォントに使用する文字を決め、手書きする用のファイルを作成します。 まずは、作成するフォントに含まれる文字を設定。
いま俺たちに必要なのはz-indexの明確な指標だ - Qiita
こんにちは、@armorik83です。こういう煽ったタイトルを書きたいってずっと思っていたので今回やってみます。 z-indexの値付けどうしてる? z-indexの説明は省略しますが、この値は取りうる範囲が膨大1でそれに対する指標が無いことから、複数のWeb設計者が入り混じる場合にバッティングする恐れがあります。 1から10までの範囲で収めていた設計者のサイトに100刻みの値付けをするプラグインが導入されると、一気に関係が崩れてしまうことが想像できます。 W3Cではこの値についての明確な指標を載せていないようにみえます。（調査不足だったらすいません） 広告業界では Web広告業界の展開は日本国内外問わず盛んで、さまざまな手法でうっとうしい広告を載せてきます。この時、元のコンテンツにオーバーレイする形で表示される広告や、マウスオーバーで拡大する広告などが普及してきたことで、2012年にこの
京都・北白川の手づくりパン ヤマダベーカリー | 京都・北白川の手づくりパン
京都、北白川。かつては志賀越道の街道集落として栄え、比叡山などの山々や、歴史的な寺社に囲まれたこの地に、ヤマダベーカリーはあります。はじまりは昭和二十二年。当時まだめずらしかったフランスパンをメインに、食べる人の顔を思い浮かべながらいくつものパンをつくりつづけてきました。 残さずに、最後までおいしく食べてもらう。パンづくりにかけるこの思いは、創業から今も変わらず大切にしていることです。たとえば、食パン。水分を飛ばしすぎずに高温で一気に焼き上げると、ぷっくりふんわり食感の、あっさりとした味わいに。そして、なめらかな口どけ。飲みものなんてなくても、するりと食べれてしまいます。 パンの味、仕上がりに合わせていろんな製法、配合、焼き加減を組み合わせ、職人たちの手から生まれてくる一日約百種ものパン。そのひとつひとつに、最後までおいしいストーリーを用意しました。時には主役、時には名脇役として、パンのあ
Mr Marcel School | Escuela de Diseño
Nuestra forma de hacer está basada en tres ejes: la calidad de contenidos y profesorado, el cuidado de la experiencia y el firme convencimiento de que para una escuela “el futuro es hoy”. Welcome to Mr.Marcel School ¡Bienvenidos! Mr.Marcel School es una escuela de diseño innovadora, abierta y contemporánea dirigida a profesionales de las industrias creativas con paladar fino y afición por el detal
WebフォントのCSS指定2014年度版とこれまでの歩み
比べる。 WEBCRE8.jpとその仲間達で、web制作における「選択」に おいて最良だと思われるものを考察していくカテゴリです。 最近Webフォントについて色々調べたので、これまでの経緯やメジャーどころの記法を踏まえつつ良い書き方を探った結果を共有しておきます！私自身はまだ実務で積極的に使っているわけじゃないんですが…(でもぼちぼち使ってます)。足りない部分もあると思うんで何か指摘があったらがんがんツッコんでくださいw @font-faceルール @font-faceルールは、Webフォントの名称と読み込むフォントファイルを関連づける@ルールの一つです。その他、どのウェイトやスタイルに対応するかも指定できます。 しかしWebフォントの扱いはブラウザ側のフォントファイルの対応状況、フォントファイル自体の進化によって変遷してきました。 Bulletproof Syntax これまでWebフォ
画像の作り方・使い方でファイルサイズを減らす方法
画像のサイズを軽くするためにCSSやWebフォントを使う方法はよく聞かれますが、今回は画像ファイルを使う前提でその容量を減らす方法を別の切り口からまとめてみました。 高速化のための画像最適化の方法はいろいろなところで紹介されております。 当ブログでも過去にレスポンシブWebデザインの画像問題の解決法5種という記事を書きました。 こちらの記事でも紹介したように画像のサイズを軽くするためにCSSやWebフォントを使う方法はよく聞かれますが、今回は画像ファイルを使う前提でその容量を減らす方法を別の切り口からまとめてみました。 デザインに左右される方法が多いので使えるケースは限られてますが、知っておくとどこかで役に立つかもしれません。 画像をぼかす jpegはそのアルゴリズムの特徴から通常の画像よりぼかした画像のほうがファイルサイズをおさえることができます。また、これは全体でなくて一部をぼかす場合
デザインの裏側を理解できるエンジニアになろう - Qiita
「画面」のデザインは、エンドユーザーから見た「プロダクト」との唯一の接点。超大事。 そんな画面のデザインにまつわる、エンジニアが「いじる」ときに気をつけると、もしかしたら面倒が減って争いが減ってみんなが幸せになれるんじゃないかなあ、とか、そもそもの設計上で考慮できると、もしかしたら使う人たちが幸せになれるんじゃないかなあ、というポイントを、思い付きで書いていくので、あとは誰か整理してほしい的な投げやり感あふれるアレコレ。デザインとコーディングの話を混ぜて書いてます。 空白の理由を考える編 その1. 空白にまつわる認識の相違 例えば、Tumblrのダッシュボード。右肩のメニューの隅までちゃんとレイアウトされてるなーって感じがします。 でも、もしあなたが「空白を理解しないエンジニア」だった場合、こんな感じにコーディングしてしまうかもしれません。 （※画像はイメージです） 「なーんか、素人感があ
SpinKit
.spinner { width: 40px; height: 40px; background-color: #333; margin: 100px auto; -webkit-animation: sk-rotateplane 1.2s infinite ease-in-out; animation: sk-rotateplane 1.2s infinite ease-in-out; } @-webkit-keyframes sk-rotateplane { 0% { -webkit-transform: perspective(120px) } 50% { -webkit-transform: perspective(120px) rotateY(180deg) } 100% { -webkit-transform: perspective(120px) rotateY(180deg
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
UX MILK
Honoka - 日本語も美しく表示できるBootstrapテーマ
http://ss14.soniaby.com/fr/home
Ａ４折形
http://saeki.me/%E3%81%8A%E5%8B%89%E5%BC%B7/299/
片想い
Mighty Matcha Matcha Tea | Super Healthy Green Tea
