Webデザインの配色に悩んだときの参考になる！ UI要素のさまざまなカラースキームをまとめた配色サイト -Spectrum.Art

2023/09/27 7 users 配色 カラースキーム ヘッダ カラム コピ

WebサイトのUIに使用するヘッダ、ボタン、イラスト、カード、カラム、ラインなど、UI要素のさまざまなカラースキームをまとめた配色サイトを紹介します。 カラースキームはページ全体、コンポーネントごとにまとめられており、それぞれのカラーは16進のHEX値が記載されています。各カラーをクリックするだけで簡単にコピ... 続きを読む

iOSアプリに実装されたUI要素のフレームやマージンを手軽に確認できるツールを作る - クックパッド開発者ブログ

2023/09/14 10 users マージン iOSアプリ フレーム ツール

続きを読む

Webサイトのワイヤーフレームやモックアップに使用するSVGで制作されたUI要素のスケルトン素材 -UI Skeleton Gallery

2023/06/21 8 users モックアップ SVG ワイヤーフレーム figma セクション

Webサイトやスマホアプリで使用される、カード、セクション、ボタン、フォーム、見出し、テキスト、リスト、画像、動画など、UI要素のスケルトン素材を紹介します。 商用利用も無料で、ダークモード・ライトモードに対応しており、素材はSVGのファイルとコードでダウンロードできます。もちろん、Figmaでも利用できます... 続きを読む

CSSのこの新機能、すごく楽しみ！ UI要素にさまざまなアニメーションを簡単に実装できるようになります

2023/04/27 16 users CSS アニメーション Ｔｒａｎｓｉｔｉｏｎ display

朗報です！！！ 今までJavaScriptや複雑なCSSを使用しないと実装できなかったアニメーションが、簡単なCSSだけで実装できるようなります！ たとえば現在のCSSではtransitionでdisplayは機能しませんが、CSSの新機能を使用すると、下記のようなCSSで表示・非表示のアニメーションを実装できるようになります。 このCSSの... 続きを読む

AIでコードを生成！ テキストを入力すると、UI要素やコンポーネントを実装するHTMLとCSSを生成してくれる -AI CODE

2023/04/04 144 users ナビゲーション コンポーネント CSS AIツール 生成

AIは、Web制作にもすごい速さで浸透しそうですね。今までも似たツールがいくつかあったのですが、かなり出来がよいので紹介したいと思います。 テキストを入力、たとえば「シンプルでモダンなナビゲーション　アイテムは日本語」と入力すると、そのUI要素を実装するHTMLとCSSを生成してくれるAIツールを紹介します。 AI ... 続きを読む

Power Automateをフルで活用した、業務プロセス改善フローの作成 ～受注業務プロセスの自動化 | gihyo.jp

2023/02/20 5 users gihyo.jp Power Automate ローコード

デジタル人材への第一歩！「Power Automate」ではじめるローコードでの業務自動化 Power Automateをフルで活用した、業務プロセス改善フローの作成 ～受注業務プロセスの自動化 第3回では、Power Automate for desktopの特徴でもある、UI要素のセレクター編集を使った最適なフロー作成について解説しました。 最終回の第... 続きを読む

知っておくと便利！ CSS Flexboxでナビゲーションのアイテムを左と右の両端揃えにする実装テクニック

2023/02/02 20 users 両端 ナビゲーション 横軸 CSS flexbox アイテム

ナビゲーションの各アイテムをCSS Flexboxで横軸に配置し、アイテムを左と右の両端揃えにするときの実装テクニックを紹介します。 ナビゲーションに限らず、さまざまなUI要素に使用できるテクニックです。デスクトップで表示したときの上のバーみたいなのとか。 Justify Space Between Individual Items in Flexbox by J... 続きを読む

Windows 11のあちこちに過去のWindowsのUI要素が残っている

2023/01/04 9 users Windows Fluent Design 過去 進化 要素

by okubax Windows 11ではデザインの一貫性がWindows 10から大きく改善され、「Fluent Design」という新しいデザイン言語に合わせてUIが大幅に再設計されました。また、WinUI 3の導入によって開発者はこれらの要素を自分のアプリに簡単に統合することもできます。デザインの面で大きく進化を遂げているWindows 11ですが... 続きを読む

フリーのRPAツール「Power Automate for desktop」2022年12月更新、ブラウザー拡張機能が「Manifest V3」に／UI要素を指定するセレクターにはシンタックスハイライトを追加

2022/12/12 13 users シンタックスハイライト セレクター Manifest V

続きを読む

知っておくと役立つ！ CSS fit-contentプロパティの便利な使い方

2022/02/22 8 users 見出し タブ テクニック 配置 テキスト

要素のサイズを要素内のコンテンツのサイズに依存して決めるfit-contentプロパティの便利な使い方を紹介します。 見出しのテキスト、画像の配置、コンテンツのブロック、タブなど、Webサイトやスマホアプリでよく使用されるUI要素を実装するテクニックです。 Use Cases For CSS fit-content by Ahmad Shadeed fit-conten... 続きを読む

プロのUIデザイナーに学ぶ！UIとUXの印象がよくなるデザインの知識とテクニックのまとめ vol.11

2022/01/18 12 users UIデザイナー Volum テクニック 印象 知識

デザインはちょっとした一手間を加えるだけで、ぐっとよくなります。 プロのUIデザイナーによるWebページやスマホアプリのUIとUXを改善するデザインの知識とテクニックを紹介します。 第11弾は角丸やアイコンなどのUI要素、ダークテーマにおける読みやすさに関するデザインのテクニックです。 UI & UX Micro-Tips: Volum... 続きを読む

CSSによる微調整、フォントのベースサイズ、レスポンシブ用の増減、スペースの基本単位などを確認しながら変更できる無料ツール -shaper | コリス

2021/09/06 18 users ボーダー Shaper コリス 角丸 オンラインツール

WebページのUI要素に適用したフォントのベースサイズ、レスポンシブ用の増減、スペースの基本単位、マージン・パディングの量、カラー、ボタンの形、ボーダーのサイズ、ボーダーの角丸など、表示を確認しながらスタイルの値を調整できるオンラインツールを紹介します。 shaper shaper -GitHub shaperの特徴 shaperの使い... 続きを読む

Windows 10が｢Chromebookみたいに｣使えるようになるアプリ | ライフハッカー［日本版］

2021/04/28 18 users Chromebook ライフハッカー 要素 アプリ 設定

Windows 10が悪いというわけではありません。 もしあなたがWindows 10をもう少しシンプルにしたくて、Chromebook的な要素を施したとしても、誰もあなたを責めたりはしません。 例えば、いろんな設定やUI要素をいじって少し扱いやすくしたり、Chromebookの便利な機能をWindows 10に直接組み込んだりしても、あなたのPCは... 続きを読む

アコーディオンのアイコン：どのシグニファイアが最適か – U-Site

2021/04/08 13 users アコーディオン U-Site シグニファイア アイコン リンク

キャレットアイコンは、アコーディオンがその場で開くのであって、新しいページへの直接のリンクではない、ということを最も明確にユーザーに示すことができていた。 Accordion Icons: Which Signifiers Work Best? by Page Laubheimer and Raluca Budiu on August 23, 2020 アコーディオンが、現在、人気のあるUI要素で... 続きを読む

UIデザイナーはダウンロードしておこう！iOS 14のデザインテンプレート・UI要素が揃ったAdobe XD用の素材がApple公式からリリース | コリス

2020/10/26 14 users コリス iPhone UIデザイナー Sketch用 iPad

先週リリースされたばかり、iPhoneやiPadに採用されているiOS 14のデザイン用のテンプレートやUI要素が揃ったAdobe XD用の素材を紹介します。 素材はAdobe XD用だけでなく、Photoshop用やSketch用も揃っており、9月に新しくなったSF Symbols 2もダウンロードできます。 Apple Design Resources UIデザイン素材は、ページ... 続きを読む

よく使用されるWebページのレイアウトやUI要素91種類をシンプルなCSSで実装するコードのまとめ -CSS Layout | コリス

2020/05/27 23 users フレームワーク ナビゲーション コリス CSS Layout

最近のWebサイトで見かける、ページのレイアウトをはじめ、ナビゲーション、フォームのさまざまな入力要素、インタラクション要素、UI要素などのCSSでの実装コードをまとめたCSS Layoutを紹介します。 すべてシンプルなコードで実装されており、外部ファイルやフレームワークは一切必要ないので、簡単に利用できます。 ... 続きを読む

知っておくと役立つ！CSSの疑似要素:beforeと:afterを使用したUI要素を実装するテクニックのまとめ | コリス

2019/12/03 28 users before コリス After 領域 CSS

CSSの疑似要素は非常に便利です。疑似要素:beforeと:afterを使用したUI要素を実装する便利なテクニックを紹介します。 Webページやスマホアプリで使えるUI要素をはじめ、クリック・タップ可能領域を広げたり、:afterと:beforeのどちらを使うべきかなど、知っておくと役立つ疑似要素のテクニックです。 Uncommon Use Case... 続きを読む

HTMLとCSSも進化している！JavaScriptを使用せずに、HTMLとCSSだけで実装できるUI要素のまとめ | コリス

2019/11/21 434 users コリス 古いブラウザ CSS サポート 新しい機能

以前まではJavaScriptでないと実装できないと思われていたものも、最近ではHTMLとCSSのみで実装できるものが増えてきました。HTMLとCSSには新しい機能が追加され、そして古いブラウザのサポートも必要なくなり、より簡単に実装できます。 実はJavaScriptを使用せずに、HTMLとCSSで実装できるUI要素を紹介します。 You ca... 続きを読む

ボタンやアイコンやナビゲーションなど、クリック・タップ可能な領域のサイズを広くする実装方法のまとめ | コリス

2019/10/15 27 users ライセンス サイドバー コリス 翻訳記事 下記

ボタンやアイコン、ナビゲーション、サイドバーなど、さまざまなUI要素に適したクリック・タップ可能な領域のサイズを拡張する実装方法を紹介します。 Enhancing The Clickable Area Size by Ahmad Shadeed 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています... 続きを読む

div要素の見た目は矩形だけじゃない！UI要素をさまざまな形状のデザインに拡張するスタイルシート -augmented-ui | コリス

2019/09/18 149 users コリス 矩形 ユーザーインターフェイス class div要素

Webページやアプリに、サイバーパンクにインスパイアされたユーザーインターフェイスを簡単に実装できるCSSを紹介します。 下記の要素はdiv要素が一つだけ。角を斜めにカットしたり、辺に窪みを加えたり、ボーダーを美しくしたり、augmented-uiのCSSで用意されているclassを与えると、サイバーパンクにインスパイアされ... 続きを読む

最近のWebサイトでよく見かけるUI要素をデザインするCSSの実装テクニックのまとめ -Design Tips in TailwindCSS | コリス

2019/05/08 448 users アイデア The テクニック コリス 素晴らしいデザイン

デザインは奥が深いですね。 Webサイトでよく見かけるUI要素のデザインに一手間加えるだけでぐっとよくなる、ディテールにこだわった素晴らしいデザインのアイデアをCSSで実装するテクニックを紹介します。 The “ ...記事の続きを読む 続きを読む

CSS Subclassing

2019/05/06 116 users CSS アプリケーション 実装 上野 コンポーネント化

上野 学（@manabuueno）- 2014年1月17日 CSS Subclassing は、主にアプリケーションよりのウェブの実装に役立つ CSS の書き方である。 アプリケーションよりのウェブとは、企業広報サイトのように各画面でデザインの個別性が高いものではなく、コンポーネント化されたUI要素の組み合わせのみで各画面が構成されるような... 続きを読む

WebサイトやスマホアプリのUIデザインに必要な要素・あると便利な要素がまとめられたリスト -Checklist Design | コリス

2019/04/02 52 users UIコンポーネント クライアント コリス デザイナー 成果物

Webサイトやスマホアプリのデザイナー・制作者、そしてクライアントにも役立つUI要素のデザインのチェック項目を紹介します。 ページに必要な要素、UIコンポーネントに必要な要素、あると便利な要素がまとめられています。デザインを始める時、そして最終的な成果物をチェックする時に、デザインに必要な要素が欠けてい... 続きを読む

iOS 12に使用されている全てのUI要素・スクリーンが収録されたAdobe XD, Sketch, Figma用の無料デザイン素材 | コリス

2018/11/28 70 users コリス Sketch 商用 クライアント Figma用

iOS 12のパブリックリリース版で使用されている全てのUI要素・スクリーンが収録された、Adobe XD, Sketch, Figma用の無料デザイン素材を紹介します。 iOS 12 GUI ダウンロードできる素材は、3種類です。 Adobe XD用 Sketch用 Figma用 利用にあたっては個人でも商用でも、クライアントのプロジェクトでもOKです。 詳しく... 続きを読む

Atomic Designってデザイナーには難しくない！？という話

2018/07/30 108 users Atomic Design DeNA デザイナー 最小単位

Atomic Designってむずくないすか？ なんか、良さそうなのは分かるんですよ。 UI要素を最小単位まで分解して、それを共通化して再利用性を高めて工数減らしていこうぜ！ということなのは分かるんです。 Atomic Design を分かったつもりになる こちらはDeNAの記事で、単純に「Atomic Design」でググると最初に出てくる記... 続きを読む