こんにちは、ちょっと株式会社の久保田です。 「錯視」と言えば、かの有名なエッシャーの立体錯視によるだまし絵や、あるはずの無い色が見えてしまう錯視や直線が曲がって見える錯視などなど、世の中には数多くの錯視効果が存在します。 この錯視ってやつ、見た目を狂わせてくるのでデザイナーとしては非常に厄介なもの。 錯視による小さな違和感がグッドなデザインを台無しにすることも珍しくありません。 乱暴に言ってしまえば“視覚のバグ”なので「だって人間だもの」と割り切ってしまうこともアリです。だって人間だもの。 しかし、そんな視覚のバグすらコントロールしてやろうって考えるのも当然のこと。だってデザイナーだもの。 錯視効果と処理例は色んなところで紹介されていますが、ここではWebデザインで意識したいものだけに絞って3つほどピックアップしてみました。 上方距離過大の錯視最も有名で、最も意識すべき錯視な気がします。

デザインガイドライン e-Govでは、「デジタル・ガバメント実行計画」(2019年12月20日 改定(閣議決定))に基づき、国民・企業等の利用者の方に対して質の高い行政サービスを提供するため、サービスデザイン思考を導入し、利用者、ソフトウェアベンダー等との共創によって、e-Govの提供サービス及びデザインについて段階的な見直しに取り組んでいます。 この一貫として、今般、e-Govが提供する情報・サービスに関する見つけやすさの向上を目的として、一部コンテンツについて情報アーキテクチャ及びサイトデザインの見直しを行いました。このガイドラインは、その結果をサイトデザインにおけるベストプラクティスの一つとして、「情報設計」「UIデザイン」「UIデザインパターン」の観点から整理したものです。 今後、e-Govにおける継続的なサービス改善の実施と並行して、このガイドラインについても改訂を図っていくこと
Sass is the most mature, stable, and powerful professional gradeCSS extension language in the world.CSS Compatible Sass is completely compatible with all versions ofCSS. We take this compatibility seriously, so that you can seamlessly use any availableCSS libraries. Feature Rich Sass boasts more features and abilities than any otherCSS extension language out there. The Sass Core Team has work
Node.js の exports と module.exports Node.js を使ったモジュールのエクスポートとインポート、require、exports、module.exports についての覚書です。以下は Node.js がインストールされていることを前提にしています。 Node.js では CommonJS (CJS) フォーマットが使われ、モジュールとその依存ファイルの定義には require と exports や module.exports を使います。 参考サイト:Understanding module.exports and exports in Node.js また、 CommonJS モジュールとは、Node.js 環境でのJavaScript のモジュール化の仕組みです。 参考サイト:JavaScript Primer/CommonJSモジュール r
今日の十六茶 試してガッテン方式で入れている。 はじめに オライリー社から2013年に発売された『オープン・デザイン』という本は、率直に言ってしまえば、如何にもデザイナー向けの思弁的な議論のアンソロジーとなっている。それらは、直接的には技術的な洞察を与えるものではないだろうし、また同様に、それが直接的に業務に使えるものかといったらそうでもない。 そうではないのにも関わらず、この本は、プログラマにとって重要な本であることは間違いないと、僕は確信している。逆説的なことではあるが、この本が技術書でないからこそ、あまりにも無視され続けた本であると思うのだが、だからこそ、今読むべき本であると思う。 プログラマはデザインが下手であるという現実を直視する もちろん、デザインという言葉は多義的な言葉であることは間違いない。まず指摘できることは、日本語の場合、デザインという言葉は「設計」という言葉ではなく、

(アニ GIF あるのでちょっと重いです…) マイクロインタラクション事始め以前 @Yahoo!Japan 2016.07.04 先日、とある社内勉強会にて発表する機会があったので書き残しておく。要は最近のフロントエンド開発の流れに疲れて、もうちょっと違う方向で頑張ろうと思った話。 葛藤 Kaizen Platform, Inc.フロントエンドデベロッパーの t32k です。皆さん、ご存知かもしれませんが、Kaizen Platform は A/B テストツールを提供しています。その A/B テストのデザイン案も国内外約 2 千名のグロースハッカーと呼ばれる方々から、クラウドソーシングで調達することができます。なので、自社内にデザイナー抱えてなくても A/B テストが実行可能です。 グロースハッカーの登録自体は無料ですので、デザイナーの方はぜひ登録してもらうと、コンバージョン率の高いデザ

バッチ処理というのはそれ単体で勉強しようとするとなかなか何を勉強したらいいのかわからないことが多い。 特に経験がWeb系ばっかりだと、いざバッチ処理を実装しようとした時に基本的なノウハウを知らないままに書いてしまうことが多い。 バッチ処理というのは実態を整理すると「何らかのトリガーを期に起動し、データをロード・加工・変換・集計してから、出力する」という事になる。 まぁ、INがあって処理してOUTがあるという点では関数だと考えてもいいだろう。 システムの利用者(人に限らない)のアクションとは直接関係ない処理であったり、利用者のアクションをトリガーとしていても、即時にレスポンスがいらないor返せない場合に バッチ処理を選択する事が多い。 実現方式はシェルスクリプト、LL言語、実行可能バイナリだったりするし、デーモンとして立ち上げる場合もある。 利用者の操作に対して対話的・同期的な処理はオンライ
(注:2015/11/18、記事およびタイトルを一部修正いたしました。)CNN.com で働いていた2012年6月に、大統領選挙投票日の夜のユーザエクスペリエンス(以後UX)のデザインを任されました。私はそれからの6カ月間を投票日の夜のための仕事に専念しました。しかし、仕事が成功するかしないかは、選挙結果に関係はありませんでした。私が懸念していたのは、情報の見つけやすさやデータの見やすさ、canvasでのオブジェクトの変形、そして一体どのようにしたら、iPhoneでマウスオーバーのフライアウトが動作するのかでした。CNN.com史上初めてWebデザインをレスポンシブにすることにしたのです。さらに史上初めて私が、その デザイン を担当することになったのです。 大きな賭けでした。CNN.comにとって大統領選挙投票日の夜と言えば、スーパーボウル(プロアメリカンフットボールの優勝決定戦)の日曜

SVG(Scalabe Vector Graphics)の世界は魅力的です。そして、これを使ってできることや、これに用意されているオプションには圧倒されてしまうほどです。SVGはXMLベースの2次元ベクター画像形式で、インタラクティビティとアニメーションをサポートします。言い換えると、SVGは図形やグラフをレンダリングするXMLタグで、その図形やグラフはHTMLの構成要素がそうであるように、インタラクトしたりアニメーション化したりできるのです。SVGに関して、私がよく受ける質問の1つは、SVG画像のアニメーション化についてです。そのやり方だけではなく、それが何なのかということも聞かれます。ですから、現在の(そして未来の)SVGアニメーションの状況を見ながら、あなたが苦痛を感じずに行えるようなヒントやツールについてお話ししましょう。 同期マルチメディア統合言語、またの名をSMIL(Syn

Get started any way you want Jump right intobuilding withBootstrap—use the CDN, installit via package manager, or download the source code. Read installation docs Install via package manager InstallBootstrap’s source Sass andJavaScript files via npm,RubyGems, Composer, or Meteor. Package-managed installs don’t include documentation or our fullbuild scripts. You can also use any demo from ou

jQueryUI is a curated set of user interface interactions, effects, widgets, and themes built ontop of the jQueryJavaScript Library. Whether you'rebuilding highly interactive web applications or youjust need to add a date picker to a form control, jQueryUI is the perfect choice. What's New in jQueryUI 1.14? Compatibility with recent jQuery versions (up to 3.7):Usage of deprecated jQueryAPI
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く