DarkModeのデザインを中心とした色彩設計の考え方 - くらげだらけ
こんにちは、くだくらげです。最近ははじめてのUIデザインという本を共著で書きました。 おかげさまでたくさんの人に読んでいただいて、コメントをもらえたりして嬉しいです。ありがとうございます！ PEAKSさんから出版しており購入できますので、よろしければ手にとってみていただけると嬉しいです。 peaks.cc 概要 WWDC 2019で新しく発表されたiOS13でOSレベルでのDarkMode設定が搭載されることになりました。MacOSの方は以前より追加されていましたが、iOSではなかったので個別のアプリが各々対応していました。 今回、iOSにもDarkMode設定が標準搭載されたことによって、iOSアプリのダークモード対応が必然的に迫られることになって来るのではないかと思っています。 ダークモードを好んで使う人は一定数存在していて、かく言う私もダークモードを好んで使っています。目に優しいだっ
スマートホーム×DIY 実践と展望 〜 1. 賃貸DIYでつくる住みよい部屋 - くらげだらけ
東京に引越してきた最初に借りた部屋は、仕事から帰って寝るだけの部屋で決して住みよいと思えるようなところではありませんでした。それからと言うもの、少しでも住みやすい部屋というのを引越しの度に考えています。 以前住んでいた部屋でも一応テーマを持って住みやすい部屋というのを考えていましたが、そこでの反省点や生活環境の変化なども合わせて、最近引っ越した今の自宅でも新たなテーマを持って少しでも住みよい部屋というのを考えカスタマイズしていっています。 前回は基本的に椅子は置かず、和室もあり、布団で寝るというカタチでモノをあまり置かないようにして部屋を広く使えるようにし、くつろぎやすい部屋というのを目指していました。 その時の反省点としては、ゴロゴロとくつろぎやすくしすぎたところだなと思っています。自宅で仕事や作業をすることも増えて、もう少し規律をもってだらけないように過ごせるようにしたほうが良いなぁと
「マイクロインタラクション」から考えるマクロなデザイン - くらげだらけ
photo by Neal. Lean Startupが出版された頃からでしょうか。起業ブームみたいなものと相まっていろいろとUXだとかLeanだとかの類の本が多く出版されていますね。私もそんな本を案外欠かさず買ってみては読んでみてもいるのですが、あまりピンとこないような内容であったり、手法の紹介についてばかり熱心に書いてあったりとどうしても眠い感じになってしまうようなものばかりだったように思うことが多くありました。 今回読んだ マイクロインタラクション ―UI/UXデザインの神が宿る細部 も「ドナルド・ノーマン推薦！」との煽り文句が帯に大きく書かれていて、これもそんな感じかなと思ったりもしていましたが、今までのものとはちょっと違った目線の内容だったので紹介してみようと思ったわけです。 デザイナー向けにも思われがちかもしれませんが、職人的なデザイン技術について解説しているわけではなく、プロ
CSS Filtersで写真加工するWebApp - CSS PhotoEditor - くらげだらけ（くだくらげのBLOG）
iOS6も発表されて、あとはNew iPhoneのリリースが待たれる季節ですね。私は3Gの発売時に買い替えて、2年後iPhone4にし、また2年が経とうとしているので今年は新しいのに買い換えようという気持ちです。 世間ではAppleのマップでいろいろと騒いでいたりしますが、OSがアップデートされるたびに私がチェックすることといえばブラウザの仕様や機能の変更です。 去年はWebAppやスマホサイトを作るには嬉しい変更がありました。position:fixedやiframeの慣性スクロール、他にもSVGや縦書き、明朝フォントのサポートもありました。 その辺りはiOS5のMobile Safariから使えるようになったHTML5・CSSを試してみました【前編】と【後編】というエントリーでまとめて書いています。このときもデモ用にフルスクリーンで使えるWebAppを作成しました。 今回はCSS Fi
Ligature Icon フォントセットの自作方法とWebFont - くらげだらけ
去年の10月に「iOS5のMobile Safariから使えるようになったHTML5・CSSを試してみました【前編】」というタイトルのエントリーで、Web Symbols TypefaceというWebFontを使って、タイプフェイスでアイコンを表示する方法について紹介しました。それ以来、似たようなFontが作成され公開されていますが、つい最近知ったsymbolsetというサイトで紹介しているsymbol fontには感心しました。 それまでのSymbol Icon Webfontには、それを使用する際の表現としてあまり適切でない部分がありました。アルファベットの「t」などに直接アイコンを割り当てていたため、code上では意味を成さない（コンピュータに理解できない）文字が並ぶことになってしまいました。そのため私が使用するときは、HTMLでは意味のあるの文字列（Twitterなど）を記し、CS
CSSのみでテキストにグラデーションやリフレクトをかけるテクニック（ちょっと更新） - くらげだらけ
前回はiOS5のMobile Safariから使えるようになったHTML5・CSSについて前編と後編に分けてご紹介しましたが、そのなかで説明していない小さなテクニックについて少し紹介したいと思います。 今回はCSSでテキストにグラデーションをかけるテクニックについてです。 前回のWeb App Demoではフッタータブに特殊なWebFontを使ってアイコンを表示させるようにしていましたが、タブがActiveのときに色が変わってエフェクトがかかるようになっています。 このエフェクト効果はCSSでテキストにグラデーションをかけるテクニックをつかってやっています。 通常、CSSでテキストカラー（colorプロパティ）にグラデーションを指定することはできませんが「:after」擬似クラスや「mask-image」プロパティを組み合わせて使うことでグラデーションのような表現をすることができます。具体
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
