「ステップ・フロー」のUIを集めてみた｜パーツ別デザインまとめ｜nanami
こんにちは！株式会社Rabeeでデザイナーをしています、nanamiです。 今回は、LPや提案資料などでよく使用されるデザインパーツ「ステップ・フロー」のUIを集めてみました。 「パーツ別デザインまとめ」シリーズも第３弾となりました。 今後も地道にUIパーツの収集・調査を続けていく予定です！ （前回までの記事も是非ご覧ください ↓） はじめに「ご利用の流れ」や「お申込の流れ」など、時系列に並んだ項目をわかりやすく可視化する手段として用いられるステップ・フローのセクションは、サービスやプロダクトを訴求するLPや提案資料にかかせない存在です。 今回はそのステップの整列パターン別に、PC・SPでどのようにレスポンシブされるのか？という調査も含めデザインを収集しました。 💡横に整列宅トラカードの中に手順の概要やイラストをまとめている形式です 中身の情報量によりますが、4ステップ程度だと丁度よいサ
もっとも注目されたUIデザインのテクニックの総まとめ
デザインはちょっとした一手間を加えるだけで、ぐっとよくなります。 プロのUIデザイナーによるWebページやスマホアプリのUIとUXを改善するデザインの知識とテクニックを紹介します。 これまでの中で最も注目されたUIデザインのテクニックをまとめました。 UI & UX Micro-Tips: Best of the Best by Marc Andrew 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 1. 細いフォントは暗いカラーにする 2. 長いフォームは常にラベルを上部に配置する 3. ボタンのラベルは一貫性を保つ 4. 不要なテキストでフォームのUIを乱雑にしない 5. フォームはインタラクションの後、すぐにフィードバックを提供 6. 次のステップの情報を提供する 7. CTA用にカラーを1つ確保しておく 8.
Web制作者はブックマークしておくと便利！ 各UIコンポーネントのさまざまな実装方法のまとめ -The Component Gallery
Webサイトやアプリでよく使用される各UIコンポーネントのさまざまな実装方法がまとめられたThe Component Galleryを紹介します。 コンポーネントは再利用可能な単一の部品として利用でき、実装するコードや名前の付け方など、Web制作者には非常に勉強になると思います。 The Component Gallery The Component Galleryの特徴 The Component Galleryの利用方法 各UIコンポーネントのまとめ The Component Galleryの特徴 The Component Galleryには、実際のデザインシステムで使用されているUIコンポーネントがまとめられています。フロントエンドのデベロッパーとして毎日経験する問題を解決するために作成されました。 The Component Gallery コンポーネントや要素に名前を付けるの
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. 素早いアクセスは、ナビゲー
よく見かけるレイアウト・UIコンポーネント、それだけを実装するHTMLとCSSのシンプルなコードのまとめ
Webページやスマホアプリでよく見かけるレイアウト、ナビゲーション、UIコンポーネントなど、それだけを実装するHTMLとCSSのシンプルなコードをまとめたCSS Layoutを紹介します。 それだけを実装するため、HTMLとCSSのコードは非常にシンプル、カスタマイズも簡単だと思います。スニペットに登録しておくと、便利ですね。 CSS Layout CSS Layout -GitHub CSS Layoutの特徴 レイアウトやUIコンポーネントだけを実装するコード CSS Layoutの特徴 CSS Layoutは、よく使用されるレイアウトやUIコンポーネントだけを実装するためのHTMLとCSSのコードがまとめられたコレクションです。 MITライセンスで、商用プロジェクトでも無料で利用できます。 CSS Layout 依存関係は一切無し フレームワークは必要無し ピュアCSSで実装、CSS
ブックマークしておきたい！WebサイトやスマホアプリのUIデザインのアイデアに困った時に、参考になるサイトのまとめ
WebサイトやスマホアプリなどのUIデザインのアイデアに困った時に、参考になる、そして勉強になるサイトを紹介します。 ランディングページ・プロダクトページのレイアウト、UIのさまざまなコンポーネント、アニメーションが気持ちいいインタラクションなど、ブックマークして定期的にチェックしておきたいサイトばかりです。 Mobbin -Latest Mobile Design Patterns デザイン面に優れた最新のスマホ向けデザインのパターンがコレクションされています。100以上のiOSアプリの主要な画面遷移と5,000以上のパターンが厳選されており、自身のライブラリを作成（要登録、無料）することもできます。
アイディアをすぐに形にしよう！エンジニア必見Bootstrapライクなデザインテーマまとめ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
エンジニアからプロレスラーに昇格した勝利です。 (首、太いだろ？) 好きな技は蝶野親分の「ケンカキック」です。 さて、 エンジニアの方なら誰しもが通ると思われる、アイディアを思いついた後に実装する際に避けては通れない道、 そう、デザイン部分の構築。 聞いただけでもう蕁麻疹がおさまらないですね。 そんなとっかかりの部分を簡単に実装できるツール。 そう、Twitter Bootstrap。 Twitter BootStrapとは・・・ BootstrapはWebデザインが得意ではないエンジニア向けにTwitter社が開発／提供するCSSフレームワークです。このTwitter Bootstrapを利用すると、簡単にTwitterっぽいデザインのWebサイトを作成できます。 ただ、Bootstrapだけではもの足りなくなったあなた。やっぱりバリエーションは多数もっといた方がいいですよね。 そんなあ
2012年、ピクトグラムのアイコン素材のまとめ、全部商用無料です！
全部ダウンロードしたら4000種以上！ 商用でも無料で利用できる、小さいサイズからゆる～いデザインのピクトグラムのアイコン素材を紹介します。 ※アイコンをご利用の際は、必ずライセンスを確認してください。
無料でダウンロードできる多種多様なアイコン・ボタン・UIキットいろいろ
400種類以上のミニアイコンのセットから、ちょっと変わった法律っぽいアイコン、世界中の国旗のアイコン、洗練されたUIキットまで、多種多様なアイコン・ボタン・UIキットを集めてリスト化したものがデザインに関係するトピックを配信するDzineBlog.comで公開されています。いずれも無料でダウンロード可能で、ファイル形式は主にPSDファイルです。 33 New Freebie Buttons and Icon Sets Released in Autumn 2012 - DzineBlog.com http://dzineblog.com/2012/11/33-new-freebie-buttons-and-icon-sets-released-in-autumn-2012.html ◆Free beautiful web icons - Vector social media icons
スマートフォンサイトのUIパターンやフレームワーク・ツールなどをまとめたサイト -Mobile Tuxedo
スマートフォン向けサイトやアプリケーションを開発するのに役立つフレームワーク・ツール・プラグインなどのリソース、ナビゲーションをはじめとするUIパターンをまとめたサイトを紹介します。
JavaScriptで作られた、見たことないUIデザインのWebサイト
株式会社サイゾー（Cyzo inc.） / Raffael Stüken / La Moulade - Creative St...他...全11件
レイアウトに関する強力なjQueryプラグイン６つ:phpspot開発日誌
6 Powerful jQuery Plugins to Create and Enhance Website Layout | Queness レイアウトに関する強力なjQueryプラグイン６つが紹介されていました。 一昔前では不可能では？と思われたような複雑なレイアウトもjQueryを使うことで簡単に実現できます。 ちょっと変わったレイアウトにしたいっていう時に参考にさせてもらいましょう UI.Layout リサイズ可能な複雑なレイアウト作成 Masonry ブロックを新聞みたいにしきつめて表示 jLayout divをならべてその親divのclassにルールにしたがって記述することで複雑なレイアウトが簡単に作れます jQuery pageSlide ページ全体をズラしてアニメーションしながらサイドバーを出すエフェクト jQSlickWrap 画像にあわせて文書をまわりこませられる C
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
「ControlNet 1.1」の新機能まとめ！新しいモデルや改善点を紹介【Stable Diffusion】
2018年総まとめ: Pocketにたくさん登録されたWeb制作に役立つ記事のまとめ
jQueryは無し、シンプルに必要な機能だけを実装する軽量スクリプトのまとめ
UIデザインについて改めてしっかりと学ぶために参考になるスライドまとめ
ウェブデザインのセンスを磨く！ 2012年下半期洗練されたディテールのUIデザインのまとめ
UIデザインに行き詰ったときに見るとインスピレーションが得られるサービス
ウェブデザインのセンスを磨こう、素敵なUIデザインのまとめ
http://www.designwalker.com/2009/04/wireframe-2.html
