「料金比較表」のUIを集めてみた｜パーツ別デザインまとめ｜nanami
こんにちは！株式会社Rabeeでデザイナーをしています、nanamiです🌿 今回はLPやサービスサイトでよく見かける「料金比較表」のUIパーツに特化してデザインを集めてみました。 LPや特定のサービスサイトは構成要素が比較的パターン化されています。 「この要素・セクションのデザインどうしよう」となった時用に、要素ごとにデザインのパターンのストックを持っておきたい。 そんな皆さまに参考にしていただけると嬉しいです！ はじめに今回は、集めた料金比較表のデザインをこちらのサイトを参考に、テーブル型、カード型、ブロック型の３パターンに分類してリストアップしています。 特記事項以下に掲載している料金表は、記事作成時点（2024.2.27）でデザイン学習を目的として収集したものです。現在の料金とは異なる可能性がありますのでご留意ください。 【テーブル型】行＆列の表形式 横軸に料金パターン、縦軸にその
あなたのWeb制作をサポートしてくれるWebツール13選 | BUILD Journal
あなたのWeb制作をサポートしてくれるWebツール13選Update2023.05.24Release2023.04.28Tools HatenaにシェアするTwitterにツイートするPocketにストックするFeedlyに登録する Web制作をサポートしてくれるツールを10個紹介します。mix-blend-modeやgridレイアウト、transformなどのコードの他にもフォントチェックや背景画像を作成できるツール、VSCodeのテーマ作成ツールもあります。あなたのWeb制作を快適に進めるためにチェックしてみてください。 Fuze – CSS Gradient AnimatorFuzeグラデーションアニメーションのCSSジェネレーター。色を複数指定するだけでCSSアニメーション用のコードを作成してくれます。背景色やテキストカラーなどに使えます。 ちなみに、テキストカラーは当サイトのト
【まとめ】エンジニア向けデザイン参考サイト - Qiita
本記事は、身の回りの困りごとを楽しく解決！ by Works Human Intelligence Advent Calendar 2022の13日目の記事です。 はじめに エンジニアの私「個人開発したアプリのデザインがイマイチで世に出す勇気がなくて困っとる」 デザイナーの知人「どれどれ。あー確かに。いい意味でエンジニアらしさ出てますな♪」 私「『いい意味で』を先頭に付ければ何いっても許される説！！」 知人「デザイン作るときは既存にあるアプリやサービスのUIを参考にするといいですよ」 私「具体的には何を参考にすればエンジニアでもいい感じにデザイン作れそうですか？」 知人「それでは自分が参考にしているデザイン系のサイトをいくつか紹介していきます」 てことで、今回はエンジニア向けの個人開発やアイディア探しで役立つサイトをまとめていきます。 「ポートフォリオのアイディアが思いつかない」「開発した
簡単CSSアニメーション＆デザイン20選（ソースコードと解説付き） | knowledge / baigie
CSSは使いようによっては様々な表現が可能な奥深い言語です。しかし、アニメーションなど凝った動きをするものに関してはコードは見れても実装方法を詳しく解説している記事は多くないように思えます。 この記事では、私（さかっちょ）がTwitterで過去にツイートしたCSSの技術をCodePenで改めて実装し、Twitterでは解説しきれなかった実装方法をより詳しく説明しています。CSS初学者の方にもわかりやすいように解説していますので、ぜひ参考にしてみてください。 その1. 一文字ずつ登場するテキストアニメーション See the Pen [CSS Tips] Text Show-up Motion by Takuro Sakai (@sakaccho) on CodePen. 一文字ずつtransformで移動させています。文字が途切れることなく流れるようにtransition-delayを調整
Uncommon Use Cases For Pseudo Elements
Pseudo-elements are in use for a long time. However, there are some uses cases that I feel they are not entirely known across developers. I wrote down this article to shed light on them so they can be used more. Parent-child Hover Effect Since the pseudo-element belongs to its parent element, there are some unusual use cases for that. For now, let’s explore a straightforward example to demonstrate
マネるデザイン研究所 - Part 6
CATEGORY EC・ショッピング (4) IT・ソフトウェア (7) エンターテイメント (2) スポーツ (3) デザイン・アート (15) フード・食品 (32) ファッション (6) ホテル・旅館 (5) マンガ・雑誌・書籍 (5) メディア・報道 (4) レンタルスペース・ギャラリー (2) 医療・病院 (4) 団体・組織 (4) 学校・教育 (1) 宗教 (3) 工業 (6) 広告・コンサルティング (3) 建築・不動産 (12) 法律 (3) 生活・冠婚葬祭 (2) 美容・コスメ (7) 美容室・理容室 (4) 美術館・博物館・イベント (5) 自動車・バイク (2) 農業・自然 (1) 雑貨・インテリア (12) 電気・通信 (1)
本当は教えたくないUIデザイン学習の参考にしているInstagram（インスタグラム）アカウント｜浦川たろう｜note
良いUI/UXデザイナーになるには、他人が作ったデザインを見るのが大切だと、多くの国内外のデザイナーさんたちは言っています。 僕もそれに倣い、UI/UXデザインを学び始めて約2ヶ月ですけど、ほぼ毎日他人のUIデザインを見ています。 他人のデザインが見れるサイトで代表的なのは、以下の3点でしょうか。 ■ Dribbble ■ Behance ■ Awwwards これらのウェブサイトやアプリを見ていますけど、まだ生活に馴染まないというか「UIデザイン見るか〜！よいしょ。」ってなモチベーションでチェックしてしまいます。 「それでは、本当に夢中になって見てはいないな」と感じたので考えました。 「それじゃあ、いつも見てしまうアプリを使えばいいのでは？」と思い、チェックし始めたのがInstagram（インスタグラム）です。 Instagramは、すでに写真専用アカウントとして使っていました。しかし。
FreeFrontend
In the ever-evolving landscape of web development, the search box remains an integral element of user experience. A well-crafted search box can make navigating a website effortless and enjoyable. To help you stay at the forefront of web design trends, we're thrilled to present the latest edition of our collection. This collection represents the culmination of countless hours spent scouring the web
コピペで絶対使いたくなるCSSボタン 25選 | SONICMOOV LAB
動きがシャープなStylish Social Buttons マウスオーバー時の背景の動きがシャープです。 送信完了が分かりやすいSend button with a transition クリックして送信完了するまでの過程が分かりやすいです。 視覚をさらにプッシュするMaterial Button Hover マウスオーバーでさらに視覚に対してプッシュしてくれます。 広がるメニューAnimated Material Design Button マウスオーバーでメニューが広がります。 tの文字にも注目Twitter Button Concept 遊び心があるボタンです。 隠しボタンHidden door twitter button ツイッターフォローボタンで動きを付けたい時にオススメです。 立体的なボタンSquishy Toggle Buttons CSSだけでの表現でこんなボタンも。
ブックマークしておきたい！WebサイトやスマホアプリのUIデザインのアイデアに困った時に、参考になるサイトのまとめ
WebサイトやスマホアプリなどのUIデザインのアイデアに困った時に、参考になる、そして勉強になるサイトを紹介します。 ランディングページ・プロダクトページのレイアウト、UIのさまざまなコンポーネント、アニメーションが気持ちいいインタラクションなど、ブックマークして定期的にチェックしておきたいサイトばかりです。 Mobbin -Latest Mobile Design Patterns デザイン面に優れた最新のスマホ向けデザインのパターンがコレクションされています。100以上のiOSアプリの主要な画面遷移と5,000以上のパターンが厳選されており、自身のライブラリを作成（要登録、無料）することもできます。
[CSS]素晴らしいテクニックが満載！囲いや区切りなどのラインを実装するスタイルシートのまとめ
divやp、hrなどで実装された囲いや区切りのスタイルに、一手間加えた素敵なデザインにするスタイルシートのテクニックを紹介します。 かわいいデザインからスタイリッシュなものまで、実装のアイデアが素晴らしいものばかりです。
![[CSS]素晴らしいテクニックが満載！囲いや区切りなどのラインを実装するスタイルシートのまとめ](https://cdn-ak-scissors.b.st-hatena.com/image/square/a545d68e72312cfa64f79c7d1932afa3d3078686/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201404%2F2014120205-19.png)
Webデザインが「どこかさみしい」と思ったとき、3分で試せるアイデア7つ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、デザイナーのまきこです。 iPhone6のディスプレイがバキバキに割れてしまってから、心を無にしてずっと使っていましたが、iPhone6sの発売により、最近はちょっとウキウキしています。 ところで、デザイナーのみなさんは、普段作業をしているときに「このままのデザインだと、なんかさみしい�」「もっとにぎやかにしたい」と思ったことはありませんか？ そんなときは、制作物に応じた「にぎやかし」をするのがもちろん良いのですが、いろいろ難しく考えるよりも、手を動かしてみたほうが早い、ということもありますよね。ということで今回は、デザインが「なんかさみしい」と思ったときに、だいたい3分あれば試せるデザインアイデアを7つご紹介します！ ▼ デザインアイデアに詰まったときはこちらもどうぞ。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Free HTML Templates on HTMLrev
The Component Gallery
小林 I Webデザイナー on Twitter: "コンテンツをユニークに区切るCSSコード https://t.co/M7BOE6Prx6"
UI Movement - The best UI design inspiration, every day
Email Love - Curated Email Inspiration & Resources
https://handywebdesign.net/2017/10/beautiful-svg-animation/
hyperpixel.io
http://www.okuni.me/entry/simple-h2-design
