Webデザインで意識したい3つの錯視効果｜chot Inc. デザイナーユニット
こんにちは、ちょっと株式会社の久保田です。 「錯視」と言えば、かの有名なエッシャーの立体錯視によるだまし絵や、あるはずの無い色が見えてしまう錯視や直線が曲がって見える錯視などなど、世の中には数多くの錯視効果が存在します。 この錯視ってやつ、見た目を狂わせてくるのでデザイナーとしては非常に厄介なもの。 錯視による小さな違和感がグッドなデザインを台無しにすることも珍しくありません。 乱暴に言ってしまえば“視覚のバグ”なので「だって人間だもの」と割り切ってしまうこともアリです。だって人間だもの。 しかし、そんな視覚のバグすらコントロールしてやろうって考えるのも当然のこと。だってデザイナーだもの。 錯視効果と処理例は色んなところで紹介されていますが、ここではWebデザインで意識したいものだけに絞って3つほどピックアップしてみました。 上方距離過大の錯視最も有名で、最も意識すべき錯視な気がします。
デザインガイドライン | e-Govポータル
デザインガイドライン e-Govでは、「デジタル・ガバメント実行計画」（2019年12月20日 改定（閣議決定））に基づき、国民・企業等の利用者の方に対して質の高い行政サービスを提供するため、サービスデザイン思考を導入し、利用者、ソフトウェアベンダー等との共創によって、e-Govの提供サービス及びデザインについて段階的な見直しに取り組んでいます。 この一貫として、今般、e-Govが提供する情報・サービスに関する見つけやすさの向上を目的として、一部コンテンツについて情報アーキテクチャ及びサイトデザインの見直しを行いました。このガイドラインは、その結果をサイトデザインにおけるベストプラクティスの一つとして、「情報設計」「UIデザイン」「UIデザインパターン」の観点から整理したものです。 今後、e-Govにおける継続的なサービス改善の実施と並行して、このガイドラインについても改訂を図っていくこと
Browse Fonts - Google Fonts
Making the web more beautiful, fast, and open through great typography
Sass: Syntactically Awesome Style Sheets
Sass is the most mature, stable, and powerful professional grade CSS extension language in the world. CSS Compatible Sass is completely compatible with all versions of CSS. We take this compatibility seriously, so that you can seamlessly use any available CSS libraries. Feature Rich Sass boasts more features and abilities than any other CSS extension language out there. The Sass Core Team has work
Node.js の exports と module.exports
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
『オープン・デザイン』は、むしろプログラマが読むべき本だった - Line 1: Error: Invalid Blog('by Esehara' )
今日の十六茶 試してガッテン方式で入れている。 はじめに オライリー社から2013年に発売された『オープン・デザイン』という本は、率直に言ってしまえば、如何にもデザイナー向けの思弁的な議論のアンソロジーとなっている。それらは、直接的には技術的な洞察を与えるものではないだろうし、また同様に、それが直接的に業務に使えるものかといったらそうでもない。 そうではないのにも関わらず、この本は、プログラマにとって重要な本であることは間違いないと、僕は確信している。逆説的なことではあるが、この本が技術書でないからこそ、あまりにも無視され続けた本であると思うのだが、だからこそ、今読むべき本であると思う。 プログラマはデザインが下手であるという現実を直視する もちろん、デザインという言葉は多義的な言葉であることは間違いない。まず指摘できることは、日本語の場合、デザインという言葉は「設計」という言葉ではなく、
マイクロインタラクション事始め以前 - MOL
（アニ GIF あるのでちょっと重いです…） マイクロインタラクション事始め以前 @Yahoo!Japan 2016.07.04 先日、とある社内勉強会にて発表する機会があったので書き残しておく。要は最近のフロントエンド開発の流れに疲れて、もうちょっと違う方向で頑張ろうと思った話。 葛藤 Kaizen Platform, Inc. フロントエンドデベロッパーの t32k です。皆さん、ご存知かもしれませんが、Kaizen Platform は A/B テストツールを提供しています。その A/B テストのデザイン案も国内外約 2 千名のグロースハッカーと呼ばれる方々から、クラウドソーシングで調達することができます。なので、自社内にデザイナー抱えてなくても A/B テストが実行可能です。 グロースハッカーの登録自体は無料ですので、デザイナーの方はぜひ登録してもらうと、コンバージョン率の高いデザ
Web系の自分が想像と障害で学んだバッチ処理・設計の基本 - コンポツさん
バッチ処理というのはそれ単体で勉強しようとするとなかなか何を勉強したらいいのかわからないことが多い。 特に経験がWeb系ばっかりだと、いざバッチ処理を実装しようとした時に基本的なノウハウを知らないままに書いてしまうことが多い。 バッチ処理というのは実態を整理すると「何らかのトリガーを期に起動し、データをロード・加工・変換・集計してから、出力する」という事になる。 まぁ、INがあって処理してOUTがあるという点では関数だと考えてもいいだろう。 システムの利用者(人に限らない)のアクションとは直接関係ない処理であったり、利用者のアクションをトリガーとしていても、即時にレスポンスがいらないor返せない場合に バッチ処理を選択する事が多い。 実現方式はシェルスクリプト、LL言語、実行可能バイナリだったりするし、デーモンとして立ち上げる場合もある。 利用者の操作に対して対話的・同期的な処理はオンライ
オブジェクト指向UX | POSTD
(注：2015/11/18、記事およびタイトルを一部修正いたしました。) CNN.com で働いていた2012年6月に、大統領選挙投票日の夜のユーザエクスペリエンス（以後UX）のデザインを任されました。私はそれからの6カ月間を投票日の夜のための仕事に専念しました。しかし、仕事が成功するかしないかは、選挙結果に関係はありませんでした。私が懸念していたのは、情報の見つけやすさやデータの見やすさ、canvasでのオブジェクトの変形、そして一体どのようにしたら、iPhoneでマウスオーバーのフライアウトが動作するのかでした。CNN.com史上初めてWebデザインをレスポンシブにすることにしたのです。さらに史上初めて私が、その デザイン を担当することになったのです。 大きな賭けでした。CNN.comにとって大統領選挙投票日の夜と言えば、スーパーボウル（プロアメリカンフットボールの優勝決定戦）の日曜
SVGアニメーションの現状 | POSTD
SVG（Scalabe Vector Graphics）の世界は魅力的です。そして、これを使ってできることや、これに用意されているオプションには圧倒されてしまうほどです。 SVGはXMLベースの2次元ベクター画像形式で、インタラクティビティとアニメーションをサポートします。言い換えると、SVGは図形やグラフをレンダリングするXMLタグで、その図形やグラフはHTMLの構成要素がそうであるように、インタラクトしたりアニメーション化したりできるのです。 SVGに関して、私がよく受ける質問の1つは、SVG画像のアニメーション化についてです。そのやり方だけではなく、それが何なのかということも聞かれます。ですから、現在の（そして未来の）SVGアニメーションの状況を見ながら、あなたが苦痛を感じずに行えるようなヒントやツールについてお話ししましょう。 同期マルチメディア統合言語、またの名をSMIL（Syn
できの悪いユーザーインタフェースがあると、ユーザーはその利用を諦めてしまう | スラド IT
ストーリー by hylom 2015年07月11日 7時00分 好みの問題かそれとも本質的にダメなのかをどう見極めるのか 部門より 高齢者のWebサービス利用に関するエピソードを募集した結果についてがSlashdotで話題になっている。それによると、回答者の多くはWebサイト、とくにユーザーインタフェースに不満を持っていたそうだ。特に多かったのは、例えばグレー系の背景とグレー系の文字を組み合わせるなど、フォントと背景のコントラストの差が少ないものに対する不満だったという。 また、隠しメニューや小さな逆さまの矢印といった曖昧なインターフェース要素についても不満があったという。マウスオーバーした場合にのみ表示されるインターフェイスやメニュー要素。クリックするのが困難なほど小さなボタン、デザインが変わったアイコン等々が上げられたようだ。とくに急なUIの変更は、旧バージョンのユーザーに多大な負担
Bootstrap
BootstrapBootstrap v5.3 (switch to other versions) v5 releases Latest (5.3.x) v5.2.3 v5.1.3 v5.0.2 Previous releases v4.6.x v3.4.1 v2.3.2 All versions Get Security Updates for Bootstrap 3 & 4 Build fast, responsive sites with Bootstrap Powerful, extensible, and feature-packed frontend toolkit. Build and customize with Sass, utilize prebuilt grid system and components, and bring projects to life w
jQuery UI
jQuery UI is a curated set of user interface interactions, effects, widgets, and themes built on top of the jQuery JavaScript Library. Whether you're building highly interactive web applications or you just need to add a date picker to a form control, jQuery UI is the perfect choice. What's New in jQuery UI 1.14? Compatibility with recent jQuery versions (up to 3.7): Usage of deprecated jQuery API
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Bootstrap Icons
Storybook: Frontend workshop for UI development
色見本と配色サイト - color-sample.com
ソフトウェア デザイン アーカイブズ：Software Design
デザイン原則の実践｜dely design
「SEO×SNS×ブログ」で作る最効率化収益システム｜うきだいらブログβ
USWDS: The United States Web Design System
