CSSのみで表現OK 人気レイアウトやUIパターンを集めた便利ライブラリ CSS Layout
依存性なしで、フレームワークも必要なし。 CSSの特別なテクニックも必要とせず、リアルに使えるCSSレイアウトやUIパターンを集めたサイト CSS Layout が注目を集めています。 フロントエンジニアとして働くひとは、ウェブサイト制作においてどれだけ多くのレイアウトやコンポーネントを扱う必要があるかよく分かるでしょう。 人気のあるレイアウトやUIコンポーネントを提供するCSSフレームワークはたくさんありますが、すべてを自分のプロジェクトに加えたくないときも。 そんな悩みを解決すべく、CSS Layout ではCSSのみで構築できる人気レイアウトやUIコンポーネントを集め、カテゴリ別にまとめています。 FlexboxやCSS Gridといった最新CSS機能によって実現されたレイアウトは、それぞれのニーズに合わせて簡単にカスタマイズでき、スターターキットとしても最適です。 パーツを組み合わ
2021年、最も注目されたUIデザインのテクニックのまとめ
デザインはちょっとした一手間を加えるだけで、ぐっとよくなります。 プロのUIデザイナーによるWebページやスマホアプリのUIとUXを改善するデザインの知識とテクニックを紹介します。 今年公開した中で最も注目されたUIデザインのテクニックをまとめました。 UI & UX Micro-Tips: Best of 2021 by Marc Andrew 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 1. ユーザーの混乱を避けるために、UIで確立されたアイコンを使用する 2. 4ptベースライン＋8ptグリッド＝調和のとれた縦のリズム 3. フォントで階層を示すにはウェイト、サイズ、カラーを使用する 4. ホワイトスペースはたっぷり使用してください 5. アイコンをグリッドシステムで使用する際の注意点 6. アクションを実行
現役デザイナー直伝！これだけでUIとUXデザインが劇的に良くなるテクニックまとめ
効率的で美しいUIデザインを作成するときに、ほんの少し手を加えるだけで、デザインを素早く改善できることがあります。 わずかな調整でクライアントはもちろん、ユーザー、そして自分自身としても満足できるUIデザインをつくることができます。 この記事では、現役UIデザイナーが実践から学んだ、効果的なテクニックやデザインの小技をまとめています。 これらのテクニックを活用すれば、すこしの努力でデザインとユーザーエクスペリエンス全体の両方を改善するのに役立ちますよ。 01.装飾的な要素は、使いやすければ問題なし ウェブサイトのテキストコンテンツの大半は、ユーザビリティの基本ルールを守るのがもちろんです。 しかし、純粋にデザインとして装飾目的でテキストを追加したいときもあるでしょうし、それはそれで良いと思います。すべてのデザインが同じだと、味気なく感じてしまいます。 デザイン目的の要素が、ユーザーエクスペ
デザインに少し手を加え、フォームを改善する実践的なUIのテクニックのまとめ
フォームを改善するUIデザインのテクニックを紹介します。 フォームのデザインに少し手を加えるだけで、ユーザーにとって使いやすい、コンバージョンを高めるための実践的なテクニックが満載です。 15 UI Tips for Better Forms by Jim Raptis 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 01. ラベルを常に記述する 02. Zパターンを避ける 03. ラベルを入力欄の上に配置する 04. 右揃えのラベルを使用する 05. 関連する入力欄をグループ化する 06. ユーザーフローを尊重する 07. スペースを与える 08. ラベルの繰り返しを避ける 09. エラーメッセージは分かりやすく 10. 必要に応じてドロップダウンを使用する 11. プレースホルダーを活用する 12. ボタンは1つに
アニメーションで魅せる！CSSボタンデザインのサンプルコードまとめ | Web Design Trends
ボタンはユーザーがクリックしたりタップしたり、直接アクションを起こすためのWebサイトには欠かせない要素です。 ボタンにはホバーエフェクトとクリックアクションの2つの重要なアニメーションのタイミングがあり、それぞれ適切にデザインすることによって使いやすさの向上にも繋がります。 今回は、アニメーションが美しいCSSによるボタンデザインのサンプルコードをご紹介したいと思います。 ホバーエフェクト ビット調のホバーエフェクトアニメーション ホバーに合わせて楽しいビット調のアニメーションが現れます。 0 6つのボタンデザイン ユニークな6つのボタンのCSSアニメーションのサンプル。 0 矢印が現れるボタン カーソルを合わせると左側から矢印が登場するボタン。 0 テキストが変化するボタン カーソルを合わせると、ボタンのテキストがアニメーションを伴って変化します。 0 ポップで楽しいボタン カーソルを
プロの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
CSSでスクロールバーのデザインをCSSでカスタマイズする方法を徹底解説 -古いCSSと新しいCSSでの実装のポイント
スクロールバーのデザインをCSSでカスタマイズする方法を紹介します。 ページ全体のスクロールバー（ブラウザに表示されるやつ）はデフォルトのままでよいですが、ページ内のスクロールコンテンツなどではUIのデザインと一貫したスクロールバーを実装する必要があるかもしれません。 スクロールバーをカスタマイズする時のCSSの古い構文と新しい構文での違い、スクロールバーのさまざまなデザインの実装方法、アクセシビリティにおける注意点など、徹底解説されています。 Custom Scrollbars In CSS by Ahmad Shadeed 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに スクロールバーの構成要素 スクロールバーのデザインをカスタマイズする カスタムスクロールバーのスコープを指定する スクロールバーのデザインをカスタ
プロのUIデザイナーに学ぶ！UIとUXの印象がよくなるデザインの知識とテクニックのまとめ vol.5
デザインはちょっとした一手間を加えるだけで、ぐっとよくなります。 プロのUIデザイナーによるWebページやスマホアプリのUIとUXを改善するデザインの知識とテクニックを紹介します。 第5弾は、ユーザーエクスペリンスやインタラクションに関するテクニックです。 UI & UX Micro-Tips: Volume Five. by Marc Andrew 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 1. フォントサイズやグリッドは時にはルールを曲げてもよい 2. エラーメッセージは親切で分かりやすいものにする 3. ロード中は何が起きているのか分かるようにする 4. アクションを実行した際に何が起きるのか分かるようにする 5. タブバーには重要なアイテムだけを表示する 6. ドロップダウンに重要なアクションを隠さない
新しいUIデザインスタイル「モダンミニマル」の使い方基本ガイド
機能的で読みやすい、そして洗練された魅力的な見た目が特長の新しいUIスタイル「モダンミニマル（英: Modern Minimal）」の特長や、具体的な使い方を今回はご紹介します。 これまでにも似たようなデザインスタイルは数多くありました。それらのインターフェースは人目を引き、読みやすく、かつ親しみやすく、やりすぎにならないとても優れたものでした。見た目の美しさとバランスが絶妙でした。 なぜなら、デザイントレンドの最大の問題点は、見た目は魅力的でも、それらを使って機能的に完璧なデザインを作ることはできないためです。（ニューモーフィズムやグラスモーフィズムは普段づかいにはあまり適していません。） 新しいUIスタイル「モダンミニマル」は、他のデザインスタイルに比べてよりミニマルでありながら、マテリアルデザインやフラットスタイルのような退屈なデザインではなく、他のスタイルから多くのインスピレーショ
「Android 12」は「Material You」で大幅なデザイン変更
米Googleは5月18日（現地時間）、オンラインで開催の「Google I/O 2021」で、次期モバイルOS「Android 12」などで採用する新たなデザイン思想の設計言語「Material You」を発表した。Androidだけでなく、スマートデバイスやAndroid Autoなど、デバイス横断でユーザーの好みに合わせたデザイン統一が可能になる。まずはAndroid 12搭載のPixelシリーズで採用される。 Material Youという名称は、2014年発表の「Material Design」の流れを汲むことを示す。Material Designのビジョンは、「テクノロジーを人々にとってシンプルで美しく、かつ合理的なものにする」というものだった。生活のより多くの領域にGoogleのサービスが表示されるようになり、また、ユーザーは自分の個人用端末にもっと感情を呼び起こす体験を求め
UIでボタンをクリックするのが楽しくなるエフェクトがたくさん揃ったJavaScriptライブラリ -Party.js
ユーザーがボタンのクリックなど、アクションをした際に紙吹雪やハートをクラッカーで弾けたようなエフェクトで表示する、楽しさを演出するJavaScriptライブラリを紹介します。 クリックするのが楽しくなるエフェクトがたくさん揃っており、「おめでとう！」「ありがとう！」「うれしい！」などを視覚的に伝えることができます。 Party.js Party.js -GitHub Party.jsの特徴 Party.jsのデモ Party.jsの使い方 Party.jsの特徴 Party.jsは「おめでとう！」「ありがとう！」「うれしい！」などを視覚的に表現するエフェクトを実装し、ユーザーのサイトエクスペリエンスを明るく楽しくするJavaScriptライブラリです。 ユーザーのアクションに伴い、紙吹雪やハートやキラキラなどのエフェクトを簡単に実装できます。 実装が簡単 ライブラリをHTMLファイルに含め
魅力的でインタラクティブなウェブサイト制作で意識したい6つのポイントまとめ
この記事では、ユーザーを飽きさせないインタラクティブなウェブサイト制作で意識したい6つのポイントをまとめてご紹介します。 ここでは、インタラクティブなウェブサイトとは、ユーザーと対話するような参加型サイト体験を指しており、その方法やエフェクトもさまざまです。 ここでは、いくつかの実例サンプル例を参考に、それらがうまく機能している理由を詳しく見ていきましょう。 1. ローディング画面の待ち時間を利用しよう ウェブサイトの読み込み時間は、ユーザーのサイト閲覧でもっとも障害となる問題のひとつです。どれだけ費用や労力をかけて素晴らしいウェブサイトを構築しても、ページの読み込みに２秒以上かかると、ユーザーはなにも見ずにページから離脱してしまう可能性が、飛躍的に高くなるというデータもあるくらいです。 このように、ユーザーは読み込みに時間がかかることをネガテイブに感じていると考えられます。 Unlock
プロのデザインを解説、UIとUXの印象がよくなるデザインの知識とテクニックのまとめ vol.2
デザインはちょっとした一手間を加えるだけで、ぐっとよくなります。 UI&UXデザイナーによるWebページやスマホアプリのUIとUXを改善するデザインの知識とテクニックを紹介します。 先日の記事の続編で、プロのデザインを学べます。 UI & UX Micro-Tips: Volume Two. by Marc Andrew 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 1. ユーザーの混乱を避けるために、UIで確立されたアイコンを使用する 2. 近接を使用して、要素間の関係性を伝える 3. 4ptベースライン＋8ptグリッド＝調和のとれた縦のリズム 4. 見出しのline-heightを減らすのは良いこと 5. 配色で困ったら、類似色で探してみる 6. UIデザインから不要なノイズを取り除く はじめに 次のプロジェクト
CSSのスゴ技！シンプルなHTMLで実装されたボタン、グリッチエフェクトが厨二心をくすぐられるかっこよさ
CSSのtext-shadowとbox-shadow、そしてclip-pathを使用してノイズをつけ、ジジッと動かすグリッチエフェクトのボタンを紹介します。 今年もCSSの進化が楽しみですね！ CSSだけで実装されたグリッチエフェクト 実際の動作は、下記ページでご覧ください。 上のボタンだけでなく、下のボタンでもグリッチエフェクトが楽しめます。 See the Pen Pure CSS Cyberpunk 2077 Buttons 😎 by Jhey (@jh3y) on CodePen. 実装方法の解説は、下記ページから。 ボタンの基本的な形を実装するところから、詳しく解説されています。 CSS Cyberpunk 2077 Buttons 最終的な実装コードは、下記の通り。 HTMLは、思っていたよりシンプルです。 <button class="cybr-btn"> Cyber<sp
2021年のWebはアニメーションが重要！参考にしたいUIインタラクション40個まとめ
ウェブテクノロジーが進化するほど、年を追って重要になっているアニメーション。 効果的にユーザーの視線を目的のエリアに誘導できるだけでなく、見た目も魅力的に演出できる注目のデザインです。 この記事では、ウェブデザイン制作で活用したい最新UIインタラクション、アニメーションをまとめてご紹介します。 Webサイトやスマホアプリのアニメーション実装参考アイデアに役立てみてはいかがでしょう。 アニメーションの実装で気をつけたいポイント ウェブサイトでもモバイルアプリでも、デザインに動きを取り入れるときは、まず基本ルールを確認しておきましょう。実装しやすくなるのはもちろん、デザインの統一性も表現しやすくなります。以下の記事も参考にしてみると良いでしょう。 【保存版】ユーザーを魅了する！UXデザインの正しいアニメーション完全ガイド また、知っておくとアニメーション制作に役立現役プロデザイナーのテクニック
画面をデザインするということ - Qiita
この記事は社内の勉強会で話した内容を再編したものです。 私自身はPC/ブラウザ/スマホのアプリ開発をしている１エンジニアにすぎないのですが、対客や要件定義から開発、運用、そしてUIのデザインを担当しており、自分なりに伝えられるものがないかと試みたものです。 デザインとは デザインとは単に見た目だけの話ではなく、「ビジネス」と「ユーザーが得る体験価値」から始まり、それを実データと結びつけながら人の認知を通してどう見せるのかという作業です。 始まりの部分は最近だとUXデザイナー、終わりの部分はUIデザイナーとかグラフィックデザイナーとか呼ばれるような人の仕事です。そしてそれらを形にするのがエンジニアです。 画面を設計するまでの作業 ギャレットのUX5段階モデルに従って、どういったことを考えないといけないのか確認します。 （実際にUX５段階モデルを意識して仕事してるわけではありませんが、何かしら
「Ameba」15年の負債を払拭するカラーパレットのメソッド | CyberAgent Developers Blog
「Ameba」は2020年に16周年を迎える長寿サービスです。 プロダクトチームはPC / SP / iOS / Androidと4種類のデバイスに対応しており、15年という歳月を経た結果、管理の追いつかない画面、レガシーなコード等に苛まれるようになってきました。 「Ameba」開発チームではそのような、過去の遺物に開発リソースを割かれる状態を「負債」と呼び、その解消のために日々戦っています。 さらに、「Ameba」には現在10名ほどのデザイナーが携わっており、それぞれが異なる施策や領域を対応していることも相まって、施策を経る毎に、「Ameba」内でGUIに関する、共通の意識や見解を持つことができなくなっていました。 この状態を打開し、「Ameba」プロダクト再興の礎を構築しようと、今年度からデザインシステムの開発をスタートしました。 今回はそのデザインシステムの中でも真っ先に取り組んだ要
ボタンをデザインするときに気をつけたい11個のポイントまとめ
この記事では、ユーザーインターフェースを作成するときに気をつけたいボタンデザインのポイント11個をまとめてご紹介します。 悪い例と良い例を比較しながら、具体的なボタンデザイン代替案をシンプルなイラストをつかって詳しく見ていきましょう。 1. ボタンの種類ごとに1つのスタイルに制限しよう ウェブサイトやアプリでは、同じアクションタイプに複数のボタンスタイルを使用しているケースがよくあります。使用しているボタンスタイルの数をきちんと把握し、タイプごとに1つのスタイルにまとめてみましょう。 一般的なボタンの種類には、コールトゥーアクション（CTA）、第一プライマリ（Primary）、第二セカンダリー（Secondary）、第三ターシャリ（Tertiary）、成功（Success）、危険（Danger）、リンクなどが挙げられます。 2. イベントの状態を含め、視覚的なフィードバックを提供しよう ボ
商用利用無料、UIデザイン用のSVGアイコンが220種類！改変・再配布も可の太っ腹ライセンス -System UIcons
システムとプロダクトのUI用にデザインされた、オープンソースのSVGアイコンを紹介します。Webサイトやスマホアプリに最適です！ アウトラインのシンプルなデザインで、220種類のアイコンが揃っています。SVGなので、サイズやカラーなども簡単に変更して利用できます。 System UIcons System UIcons -GitHub System UIconsの特徴 System UIconsのダウンロード System UIconsの使い方 System UIconsの特徴 System UIconsは、システムとプロダクトのUIによく使用されるアウトラインのアイコンです。フォーマットはSVGなので、使いやすいと思います。 ライセンスはThe Unlicenseで、商用プロジェクトでも無料で利用できます。改変・再配布もOKです。
たった1行のCSSでこれなら簡単！すでに制作済みのWebサイト・スマホアプリをダークモードに対応させる方法
「たった1行のCSS」とは、prefers-color-scheme: dark;の紹介ではありません。 Webサイトやスマホアプリのさまざまな要素すべてをダークモード用にカラーを変換するたった1行のCSSを紹介します。 すでに制作済みのWebサイトやスマホアプリをダークモード対応にしたい時だけでなく、ユーザースタイルシートとして利用することもできます。 One line - Dark Mode using CSS by Akhil Arjun 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 制作済みのサイト・アプリをダークモードに対応させる方法 CSSの解説 制作済みのサイト・アプリをダークモードに対応させる方法 ここで紹介するのは、すでに制作済みのWebサイト・スマホアプリをダークモードに対応させる超簡単な方法です。 前置き
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
