UI要素のサイズ、マージン、角丸、フォントサイズに至るまで、すべてが黄金比に基づいて設計されたUIフレームワーク -LiftKit
黄金比をWebサイトやスマホアプリのUIデザインに取り入れようと思ったことがある人は少なくないと思います。古い記事ですが、黄金比をサイトのデザインに取り入れる簡単な３つの方法というのもあります。 さまざまなUI要素のサイズ、マージン、角丸、フォントサイズに至るまで、すべて黄金比に基づいて設計されたUIフレームワークを紹介します。 LiftKit LiftKit -GitHub LiftKitは、黄金比に基づいて設計されたUIフレームワークです。Material 3の視覚調整された設計やダイナミックカラーといった高度なビジュアルデザイン機能を実現する数式と変数のセットです。 ライセンスはApache License 2.0で、個人でも商用プロジェクトでも無料で利用できます。 LiftKit LiftKitにはさまざまな機能がありますが、主な機能は3つ。 Material Style アイコン
UIの色を変えただけで大量のクレームを頂戴してしまった話｜のなと
Webプロダクト開発をしていると様々な諸事情によりUI構成を変えたり機能を増やしたり減らしたりすることが多々あると思います。そんな時に避けられない事態として「UI変更に対するお怒りがユーザーからわんさか届いてしまう」ということがあります。今回はUI上の１要素の色を変えただけで虎の尾を盛大に踏んでしまった事件の話をしようと思います。差し当たりどういうUIをどう変えたのかを明示しておきます。変える前がこちら↓↓ beforeUIほんで変わった後がこちら↓↓ afterUIご覧の通り「作業カード」と呼ばれるコンポーネントの色を「緑＆黄」から「緑塗り＆緑枠線」に変更しました。「え、それだけ？」という声が聞こえてきそうですがそうなんです。それだけなのです。しかしここはレガシードメインのtoB SaaS。toB SaaSではUIの変更がユーザー業務への影響に直結するので軽微な変更を加えるのもハードルが
2022年上半期、注目されたUIデザインのテクニックのまとめ
デザインはちょっとした一手間を加えるだけで、ぐっとよくなります。 プロのUIデザイナーによるWebページやスマホアプリのUIとUXを改善するデザインの知識とテクニックを紹介します。 2022年上半期に公開した中で最も注目されたUIデザインのテクニックをまとめました。 UI & UX Micro-Tips: Best of 2022 by Marc Andrew 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 1. ダークにデザインする時はホワイトも和らげる 2. フォームのエラーは色だけに頼らない 3. ユーザーが選択したアイテムを目立たせる 4. 細いフォントは暗いカラーにする 5. 次のステップの情報を提供する 6. 最も重要な要素をより目立たせる 7. 検索ボックスの幅は広くする 8. 素早いアクセスは、ナビゲー
これでもうアイコンがにじまない！ SVGのデータ作成で気をつけるポイント | 東京のブランディングデザイン会社 BOEL
下の図を見ると、imageAははっきり表示されていますが、imageBはぼやけています。 高解像度のRetinaディスプレイを搭載したデバイスが広く普及し、Webデザインの現場では高解像度ディスプレイにも耐えられる画像の作成が必須となっています。 その対応策として、さまざまなスクリーンサイズへの対応に適したSVGが注目されるようになりました。 高解像度のRetinaディスプレイ※1※1Apple製品に搭載されている高解像度ディスプレイの呼称。「Retina」（レティナ）は英語で「網膜」という意味で、画素が細かく人間の目で識別できる限界を超えている、ということから命名された。を搭載したデバイスが広く普及し、Webデザインの現場では高解像度ディスプレイにも耐えられる画像の作成が必須となっています。 その対応策として、さまざまなスクリーンサイズへの対応に適したSVGが注目されるようになりました。
ページ内リンクの実装から考える、a要素のclickイベントとその振る舞い
この他に macOS の Chrome では、ShiftキーとMetaキーを併用することで、新しいタブで開きつつそのタブをアクティブにすることができました。 CSS によるスムーズスクロール ページ内リンクをクリックしたときのスクロールを、アニメーションによってスムーズにしたいということはよくあります。これは CSS のscroll-behaviorプロパティを使えば非常に簡単に実装できます。 body { scroll-behavior: smooth; } たったこれだけの宣言で、JavaScript を一切用いることなく、ページ内リンクをクリックしたときのスクロールにアニメーションが伴うようになります。また、ページ内リンクのクリックだけでなく、可視領域外にある要素がフォーカスされたときや、ページ内検索に一致したテキストがハイライトされたときなど、スクロールが伴う場面すべてに適用されま
月間1000万PVを支える「UIの言葉選び」のためのチェックリスト - クックパッド開発者ブログ
クックパッド ダイエット事業室の田中です。昨年５月からスタートした「クックパッド ダイエット」にリリース当初から携わり、デザインやダイエットニュースの編集を担当しています。 現在クックパッドダイエットのサイトは月間1000万ページビューを超え、「ダイエットといえば『クックパッド ダイエット』」と言われるような世界を目指して、日々、運用・改善に取り組んでいます。 今回紹介するのは、クックパッドダイエットのUIをデザインする時の「UIの言葉選び」の具体的なチェックリストです。 最高のレイアウトでも言葉がイマイチだと台無しに みなさんは、UIの中の「文言（言葉）」をどのようなプロセスで決定していますか？ UIのレイアウトや遷移の方法について熟考する姿勢を持っている方は多いと思うのですが、文言の検証方法については確固たる視点を持っていない方もいらっしゃるのではないかと思います。 UIで王道のレイア
エンジニアと険悪にならない！ステキなPSD、6つの約束｜株式会社アクトゼロ｜クリエイティブブログ
こんにちは。みなさん5月病になっていませんか？私は新人社員でもないのに半分陥りかけています。友達とぱーっと飲んだりしてストレス解消していますが、いい加減肝臓がやられてしまいそうなので自重気味です。。 さて、デザイン作業が平行すると、ついついPSD(Adobe Photoshop)ファイルの細かいところが疎かになりがちですよね。デザインプレビューのときは見えていない部分でも、コーディング作業をするエンジニアには「このデザインどうなってるの？」「ちゃんと考えて作ってよ！(当たり前ですが)」となんとなくでは作業出来ないことがたくさんです。今回はこれさえおさえておけばきっと大丈夫。エンジニアと険悪にならないPSDファイル作りについて書きます。基本中の基本ですが、忘れたりしてしまうんです…(すみません) その1.マウスオン画像はある？ 「すごく良いボタンを作れた！おしたくなるわこのボタン！」…で、こ
Style Guide活用のススメ
CSS Nite in OSAKA, Vol. 36（2013.09.10）、CSS Nite in Ginza, Vol.71（2013.09.19）にて開催された『次世代のWebデザインへの2つのヒント』のスライド、両セッションのスライドをマージして公開します。 スライドの末尾で紹介していますが、2013.11.07に拙著『マルチデバイス時代のWebデザインガイドブック』が発売となりました。 サポートサイト : https://2843.jp/books/nabebon/ Facebookページ : http://facebook.com/nabebon/ Amazon : http://www.amazon.co.jp/dp/4883378942/
エントリーに無駄な画像を入れるのは止めて欲しい - Hagex-day info
どもどもHagexです。最近ToDo管理ソフトのRemember The Milkを1年ぶりに使い始めたんですが、ToDoがあまりにも多すぎて、見ているとイヤになってきました（涙）。 そしてついつい現実逃避でWebページの閲覧に逃げてしまうのですが、最近、記事やエントリーに意味のない画像がやたら入っているサイトが増えてきたような気がします。アイキャッチ用に1点ぐらいならわかるのですが、3点以上入ってるとアホじゃないか？ と思っちゃいます。 例としてですが、こんな感じのページです（某大手サイトのエントリーを取り上げましたが、似たようなサイトはたくさんあります）。 本文に6つも画像が入ってますが、ぜんぶ内容と関係ありません。すべてイメージ図です。なぜこんなに意味もない画像をいれるのか？ 理由として考えられるのは…… （1）サムネイル表示用のアイキャッチ（正当） （2）少ない文字量を多く見せる（
「PhotoshopによるWebデザインカンプ制作はFireworksに比べて効率が悪い」という都市伝説について
2013/5/7に、Adobe Fireworks の事実上の開発終了が発表されました。 ただし、「バグ修正やセキュリティ関連のアップデートは継続する」とのことですが、いつまでも使い続けられることを保証するものではないので、Fireworks ユーザーの方はそう遠くないうちに別のアプリケーションに乗り換える必要があると思います。 Adobe、Web画像ツール「Fireworks」終了へ – ITmedia ニュース 移行先アプリケーションの候補の1つである Photoshop について、Twitterを見ていると「Photoshop でのWebデザインは制作効率が悪い」という方が多いようですが、私はそんなことはないと思っています。 なぜそう言えるのかについて、簡単にまとめてみました。 目次 FireworksとPhotoshop、それぞれのメリットとデメリット なぜ「Photoshopは効
<!--:JA-->「デザイナーもJavaScript覚えるべきだよ」について<!--:-->
Web やアプリのデザイナーか「技術にしばられないでデザインを考えていく」コミュニティ。 月1回の定例MTGと年に数回のデザイン中心ハッカソンなどをしています。 先日、Facebookでぼやりとつぶやいたのですが、「デザイナーもJavaScript覚えるべきだよ」ということについて、思うことを素直に書いてみます。 2012年12月8日に開催されたCSS Nite in OSAKA, Vol.34でわたしは微力ながら第二会場の進行をしていました。 この日のセッション内容については、これからのWeb系の仕事まわりでは、なんとなく各専門家はいても、WebならWeb系全般の一般教養みたいなのはおさえておかないと、実際仕事につながらないよねーみたいな雰囲気でした。 たしかにそうなんです。 でも思うのは、「デザイナーもJavaScript覚えるべきだよ」と軽々しく言うのはちょっと違うと思うのです
0to255
There are 16,777,216 color hex codes. With so many options, how do you choose the right color? The latest research on color perception tells us that somewhere between 40% to 99% of these colors are indistinguishable to the human eye.* Which begs the question: if we can't see the difference between two colors, why should we waste time deciding between them? What if you could easily narrow down the
NHK杯フィギュアのサイトを見て、サイト制作には大金が必要だと感じた件。 : スポーツ見るもの語る者〜フモフモコラム
NHK杯フィギュアのサイトを見て、サイト制作には大金が必要だと感じた件。 Tweet Share on Tumblr カテゴリ:ウィンタースポーツ 2011年11月09日12:34 1億4000万円かけないからこんなことになる…！ ウェブサイトの制作というのは、結構お金がかかるらしいですね。何でも原子力安全庁のウェブサイト制作予算は1億4000万円も計上されているそうで、僕もそれを聞いてビックリした次第。普段見ているサイトもきっとそのくらいお金をかけて制作されているのでしょう。どうりで楽しくて見やすいわけです。このブログも既存のテンプレートを若干いじってやっているわけですが、そのいじくり代も実際は400万円相当ぐらいの作業量はあったような気がしてきました。「あぁ大変なお金がかかっているんだな」と納得いただけたら、いい加減「フクシ伝説」か「ベルがいっぱい」を買っていただきたいものです。 そん
JIS X 8341-3 って対応する意味あるの？という問いに対して – blog.shiten.info
JIS X 8341-3（高齢者・障害者等配慮設計指針－情報通信における機器、ソフトウェア及びサービス－第三部：ウェブコンテンツ）（規格詳細情報） は、Web コンテンツのアクセシビリティに関する設計指針で、昨年 2010年8月20日に JIS X 8341-3:2010 として改正版が公示された日本工業規格です。初版は、2004年に公示されています。アクセシビリティのセミナーや、ウェブ制作会社が説明に使う場合は「ウェブコンテンツ JIS」と呼ばれていたりします。 現状、この規格には認証機関は存在しません。また、法令のような、強制力や拘束力もありません。第一者監査（内部監査）、第二者監査（利害関係を伴う外部組織≒顧客による監査）による適合性評価に基づいて、自己適合宣言を行うしかありません。この点について、疑問を持つ方がいらっしゃって、「だったら適合しても意味がないじゃないか」という人もいら
2011年1月のこれだけ読めば分かる Web 制作者向け情報まとめ | ウェブル
いろいろなところから2011年1月に集めてきた情報を要点を抑えて紹介していきます。これは何か、どんなシーンで使えるのかということを書くようにして、気持よく読めるようにまとめて行けたら良いです。情報を集めるのが苦手なあなたはこれだけ読めば結構身になるかもしれませんね。 これは Web サービスに使えると思った情報 使い方をその場で再現するスクリプト目の前でアニメーションして説明するスクリプト「Embedded Help System」 – GIGAZINE Web サービスのヘルプなどで使えるかもしれません。導入がそこまで難しくないようなので、ヘルプを作る際は一番最初にこちらを検討すると良いかもしれませんね。 ビジネスモデルについて学べるわかったつもりになっていませんか：「ビジネスモデル」とはなんだろう? 余談や説明が長すぎたので、個人的にためになりそうな要点だけ抑えておきます。 なんか微
スマホサイトの作り方で、あんまり書かれてないことを書いてみた - Kaleidoscope
【スマホ対応サイト制作のより詳しい記事はこちら】 1.メニュー編 2.HTMLとCSSで画像を操る編（前編） 2.HTMLとCSSで画像を操る編（後編） スマホサイトの作り方関連のブログとかを見てて、viewport周りの基本的な設定は書かれているのですが、 個人的に重要だと思うポイントが、なかなかどなたも書いてらっしゃらないような気がするので、まとめてみました。 それは、 とにかく内側のHTML要素をハミ出さないように作る どうしてか？ ふつうは、スマホサイトというのは縦スクロールしかさせたくないですよね。 例えば、iPhoneで言うPortrait（縦）表示のとき、横幅320pxを超えたページ構成になると、 おかしな横スクロールが発生してしまいます。 viewportで拡大とかの禁止をおこなっていても、そうなります。 （まぁ、拡大とは意味が違うので当然なのですが。。。） 具体的にどうい
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
figmaからXDへファイルを変換→移行する - クライマー株式会社
「脳汁ビシャビシャに出た」「無限ループって怖くね？」ポーラの特設サイトがスクロール芸極めてると話題に
マテリアルデザインでやってはいけない68のこと（間違いチェックリスト）
calc()が効かない？: 中の演算子の間にはスペースが必要です - Qiita
