現役デザイナー直伝！これだけでUIとUXデザインが劇的に良くなるテクニックまとめ
効率的で美しいUIデザインを作成するときに、ほんの少し手を加えるだけで、デザインを素早く改善できることがあります。 わずかな調整でクライアントはもちろん、ユーザー、そして自分自身としても満足できるUIデザインをつくることができます。 この記事では、現役UIデザイナーが実践から学んだ、効果的なテクニックやデザインの小技をまとめています。 これらのテクニックを活用すれば、すこしの努力でデザインとユーザーエクスペリエンス全体の両方を改善するのに役立ちますよ。 01.装飾的な要素は、使いやすければ問題なし ウェブサイトのテキストコンテンツの大半は、ユーザビリティの基本ルールを守るのがもちろんです。 しかし、純粋にデザインとして装飾目的でテキストを追加したいときもあるでしょうし、それはそれで良いと思います。すべてのデザインが同じだと、味気なく感じてしまいます。 デザイン目的の要素が、ユーザーエクスペ
プロのUIデザイナーに学ぶ！UIとUXの印象がよくなるデザインの知識とテクニックのまとめ vol.8
デザインはちょっとした一手間を加えるだけで、ぐっとよくなります。 プロのUIデザイナーによるWebページやスマホアプリのUIとUXを改善するデザインの知識とテクニックを紹介します。 第8弾は、読みやすく・理解しやすくするためのデザインのテクニックです。 UI & UX Micro-Tips: Volume Eight. by Marc Andrew 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 1. メッセージは正しい順序で構成する 2. すべての要素のシャドウは一つの光源を元にする 3. ホワイトスペースでビジュアルヒエラルキーを構築 4. 一行の長さを適切にすることで、読みやすさが向上する 5. 空の状態を工夫することで、ユーザーの初期行動を促す 6. 最適な読みやすさのために、x-heightに基づいてline
新しいUIデザインスタイル「モダンミニマル」の使い方基本ガイド
機能的で読みやすい、そして洗練された魅力的な見た目が特長の新しいUIスタイル「モダンミニマル（英: Modern Minimal）」の特長や、具体的な使い方を今回はご紹介します。 これまでにも似たようなデザインスタイルは数多くありました。それらのインターフェースは人目を引き、読みやすく、かつ親しみやすく、やりすぎにならないとても優れたものでした。見た目の美しさとバランスが絶妙でした。 なぜなら、デザイントレンドの最大の問題点は、見た目は魅力的でも、それらを使って機能的に完璧なデザインを作ることはできないためです。（ニューモーフィズムやグラスモーフィズムは普段づかいにはあまり適していません。） 新しいUIスタイル「モダンミニマル」は、他のデザインスタイルに比べてよりミニマルでありながら、マテリアルデザインやフラットスタイルのような退屈なデザインではなく、他のスタイルから多くのインスピレーショ
ボタンをデザインするときに気をつけたい11個のポイントまとめ
この記事では、ユーザーインターフェースを作成するときに気をつけたいボタンデザインのポイント11個をまとめてご紹介します。 悪い例と良い例を比較しながら、具体的なボタンデザイン代替案をシンプルなイラストをつかって詳しく見ていきましょう。 1. ボタンの種類ごとに1つのスタイルに制限しよう ウェブサイトやアプリでは、同じアクションタイプに複数のボタンスタイルを使用しているケースがよくあります。使用しているボタンスタイルの数をきちんと把握し、タイプごとに1つのスタイルにまとめてみましょう。 一般的なボタンの種類には、コールトゥーアクション（CTA）、第一プライマリ（Primary）、第二セカンダリー（Secondary）、第三ターシャリ（Tertiary）、成功（Success）、危険（Danger）、リンクなどが挙げられます。 2. イベントの状態を含め、視覚的なフィードバックを提供しよう ボ
たった1行のCSSでこれなら簡単！すでに制作済みのWebサイト・スマホアプリをダークモードに対応させる方法
「たった1行のCSS」とは、prefers-color-scheme: dark;の紹介ではありません。 Webサイトやスマホアプリのさまざまな要素すべてをダークモード用にカラーを変換するたった1行のCSSを紹介します。 すでに制作済みのWebサイトやスマホアプリをダークモード対応にしたい時だけでなく、ユーザースタイルシートとして利用することもできます。 One line - Dark Mode using CSS by Akhil Arjun 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 制作済みのサイト・アプリをダークモードに対応させる方法 CSSの解説 制作済みのサイト・アプリをダークモードに対応させる方法 ここで紹介するのは、すでに制作済みのWebサイト・スマホアプリをダークモードに対応させる超簡単な方法です。 前置き
ディズニー直伝！Webデザインでアニメーションの基本原理を応用する方法
この記事では、ディズニーによるアニメーションの基本原則を、どのようにWebサイトやUIデザインに適用できるか、具体的なサンプル例と一緒に紹介しています。 ディズニー社の現場で長年培われた、アニメーションの基本原則12個（英: 12 Principles of Animation）は、「生命を吹き込むイリュージョン: ディズニーアニメーション（英: The Illusion of Life: Disney Animation）」として1981年に出版され、現在でもアニメーションの基本ガイドのひとつとして広く知られています。 これらの基本原則は、もともとディズニーのキャラクターデザインのために設計されたものですが、この記事では、これらのアニメーション基本原則をUIデザインに適用する方法を探っていきましょう。 ここで紹介するアニメーションの基本原則を、どのようにウェブページに適用できるかまとめた
Adobe製品を使わない"デザイナー"？「ビジュアルコーダー」が考える、自己満足で終わらないWebデザインとは
Adobe製品を使わない"デザイナー"？「ビジュアルコーダー」が考える、自己満足で終わらないWebデザインとは
動きが新感覚！Web制作で参考にしたいUIインタラクション、アニメーション36個まとめ
この記事では、ウェブデザイン制作で活用したい最新UIインタラクション、アニメーションをまとめてご紹介します。Webやモバイルアプリの参考アイデアとして取り入れたい、ユニークで素敵なアニメーションを中心に揃えています。 最新ウェブデザインも一緒に確認することで、デザイントレンドや動向をうまく掴むことができます。 Webアイデアの宝庫！注目したい最新ウェブデザイン35個まとめ Web制作の参考アイデアに！いま話題の最新ウェブデザイン50個まとめ いまWebがすごい！参考にしたい話題の最新ウェブデザイン37個まとめ 【総まとめ】2019年印象に残った世界のベストWebデザイン厳選50個 新感覚の動き！Web制作で参考にしたい最新UIインタラクション、アニメーションまとめ #blacklivesmatter 世界中でムーブメントを巻き起こしている、黒人に対する暴力や構造的な人種差別の撤廃を訴える
伝わりやすさが違う、UIデザインのシステムステータス可視性のコツ4個まとめ
Webサイトにおいて状況を伝えるシステムステータスの可視性（英: Visibility）は、ウェブサイトのユーザビリティ研究の第一人者ヤコブ・ニールセン（Jakob Nielsen）氏のユーザビリティ10原則のひとつです。 システムの現在の状態を伝えることで、ユーザーはそのシステムを操作、制御している感覚となり、この感覚こそが信頼を築くのに役立ちます。 この記事では、Webサイトでシステムの状況をうまく伝えることができる、4つのインタラクティブで視覚的なフィードバック方法をご紹介します。 1. ユーザーのロケーションや進行状況を表示する視覚的フィードバック いまどこにいる？ 迷子になりたいというひとはあまりいないでしょうが、現実の世界だけでなくデジタルの世界の両方で起こり得ます。 アプリ内のどこにいるのかユーザーに知らせることが、優れたナビゲーション体験に不可欠と言えます。アプリとWebサ
Image Dragging Effects | Codrops
A set of playful dragging effects for images using various techniques. Today we’d like to share a little set of playful dragging effects with you. The idea is to animate images as they are being dragged, and distort, scale or apply filters to them. For some examples we tie the intensity of the effect to the speed of the dragging motion. The inspiration for these effects come from two Dribbble shot
プロのデザイナーに学ぶ！ひと手間加えて、UIデザインの印象を改善するデザインのテクニックのまとめ
UIデザイナーの仕事は試行錯誤の繰り返しで、ちょっとしたことで印象が大きく改善されます。デザインを改善するために役立つ実践的なテクニックを紹介します。 今手がけているUIデザインを改善するだけでなく、次のプロジェクトを開始する際の指針としても簡単で実践しやすいテクニックです。 9 tips to quickly improve your UI designs by Marc Andrew (mrcndrw.com) 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 1. 要素をより明確に表示する 2. デザインに使用する書体は1つで十分 3. 長いコンテンツは文字のサイズに気をつける 4. ユーザーのオンボーディングエクスペリエンスを改善する 5. シャドウを使う時は光源を意識する 6. テキストと画像のコントラストを改
ニューモーフィズムとは、デザインする時に知っておきたいポイント、CSSでの実装方法
ニューモーフィズムとは、要素が背景と同じ素材で作られており、シャドウを与えて押し出されたような窪んだようなスタイルです。最近注目されているUIデザインのトレンド「ニューモーフィズム」を簡単な手順でデザイン・実装する方法を紹介します。使用するソフトウェアは、FigmaでもIllustratorでもAdobe XDでもSkecthなど、なんでもOKです。 ニューモーフィズムのデザイン方法、使用するカラーの選び方、UIデザインに適用するCSSの実装コードなど、すぐに実践できます。 Neumorphism (Soft UI) in User interface design - Tutorial by Kanhaiya Sharma 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 新しいトレンド「ニューモーフィズム」 ニューモーフィズム
COVID-19 国内症例マップ（ダッシュボード）を作成して考えたこと - Bi-Bo-6
※3/1追記。続編のようなものを書きました。 メディアの外側から COVID-19 国内症例マップ を発信する意味、シビックテック - Bi-Bo-6 私達で作成・更新を続けている、GISを用いた新型コロナウイルスのダッシュボード（公開情報一元化）について、独立行政法人 国際感染症センターさんが、Facebookでシェアをしてくださいました。ありがとうございます。17日に公開したこのレイヤは、22日深夜までで70万viewになりました。 www.facebook.com 都道府県別新型コロナウイルス感染症患者数マップ そこで、このダッシュボード作成で感じたことを書いておこうと思います。（論文か？） ◯ダッシュボード本体 https://jagjapan.maps.arcgis.com/apps/opsdashboard/index.html#/641eba7fef234a47880e1e1
The iOS 16 Design Guidelines: An Illustrated Guide
*display on phone is technically 2.61x Frame size. This is the “point size” or “@1x” size of a given device. I strongly recommend designing on frames of this size for a given device. (Here’s an explanation of points vs. pixels) Export scaling. This is how much bigger to make a raster image (PNG, JPG) when exporting to take maximum advantage of the higher resolution of some devices. What size frame
ビジュアルで勝負！2020年に確認しておきたい重要デザイントレンド7個まとめ
新しい年を迎え、さまざまなデザインブログやサイトで新しいトレンド予想が行われており、当ブログでも昨年末にまとめています。 サンプル例でわかる！注目したい2020年のWebデザイントレンド8個まとめ 2020年に注目されているグラフィックデザインの最新トレンド10個まとめ トレンドは入れ替わりが激しく、すぐに古くなってしまう恐れがあるため、ここではビジュアル面に関連する、2020年に確認しておきたいトレンド7個をまとめてご紹介します。 2D & 3D イラストレーション 2020年に入り、イラストレーションはデジタル製品において新しい節目を迎えています。見栄えの良いストック写真でさえうまく機能せず、フラットなアニメーションも少なくなってきています。だからといって、とても複雑なデザインが必要というわけではありませんが、手描きや2Dまたは３Dイラストが、試してみたいスタイルとなるでしょう。 以下
UIデザインは奥が深い！最近のスマホアプリで見かけるアニメーションの素晴らしいアイデアを解説
普段何気なく使用しているUIのアニメーションもその仕組みや効果を理解すると、なるほどと考えされられます。 スマホアプリのUIに使用するアニメーションをGoodな良いものから、Greatな素晴らしいものに変えるUIアニメーションのさまざまなアイデアを紹介します。 Material Motion, IBM Animation Principles, The UX in Motion Manifestoのガイドラインに基づいた、気持ちのいい操作性に優れたアニメーションを楽しむことができます。 Good to great UI animation tips 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 タブのコンテンツをスライドさせるアニメーション カードをタップして詳細を表示するアニメーション コンテンツを表示するアニメーション コ
Principle - Gallery
Principle Gallery Tutorials Documentation Support Download My Account Coupon By Anna Hofmanova Cosmic Discoveries By Alexander Boychenko Activity Log By Sam Thibault Dropbox Carousel Download By Patrick Wong Date Night By Nimasha Perera Android Tabs By Noodle Webshop By Remco Bakker See more on Dribbble Gallery Tutorials Resources Pricing Documentation Support My Account Discourse Forum Updates
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
UI Design Daily | Open Source UI Resources
GitHub - capptivateco/capptivate: A kinetic pattern library that captured and preserved delightful iOS animations.
UI Movement - The best UI design inspiration, every day
