シンプルなHTMLで、レスポンシブとライト・ダークモード対応のモダンなWebページを簡単に作成できる超軽量CSSライブラリ -matcha.css
シンプルなHTMLを使用して、レスポンシブ対応、ライト・ダークモード対応のモダンなWebページを簡単に作成できる超軽量CSSライブラリを紹介します。 シンプルなWebページやポートフォリオ、プロトタイプなどをすばやく作成したい時に便利で、ベースにしてリセットCSSの拡張版としても利用できます。 matcha.css matcha.css -GitHub matcha.cssの特徴 matcha.cssの使い方 matcha.cssのデモ matcha.cssの特徴 matcha.cssは、classレスでHTMLのあらゆる要素にシンプルで読みやすいスタイルを設定するように設計されたCSSライブラリです。ライト・ダークモード対応で、テキストはユーザー設定が尊重された適切なスペースで配置され、ナビゲーションやフォームなども非常に見栄えがします。 matcha.css HTMLで作成された静的ペ
【CSS】CSS Maskingを使って、フェードアウトするUIを実現する。 - Qiita
はじめに みなさんは、CSS Maskingを使いこなせていますか？ CSS Maskingは、デザイン性の高いLPや特設サイト等ではよく使うかもしれませんが、 Webプロダクトだとちゃんと触る機会が多くないプロパティだと思います。 そのため、この記事ではWebプロダクトでも使えるCSS Maskingを使ったUIを紹介しながら CSS Maskingについて解説します。 CSS Maskingとは？ CSS Maskingとは、任意の形に要素を切り抜けるプロパティになります。 似たような任意の形に要素を切り抜けるclip-path プロパティとの違いは、SVGで任意の形に切り抜けるだけでなく、mask-imageで任意の画像や透明度に応じた切り抜きが行えることにあります。 この記事では、mask-imageにlinear-gradientでグラデーションを使用することで、フェードアウトす
UIデザインに必須の16の論理ルール！ デザインは細部のちょっとした作り込みが使いやすさを決める
UIデザインはシンプルで論理的なルールを理解することで、情報に基づいたデザインの意思決定を効率的におこなうことができます。UIデザインをより使いやすく改善する16の論理ルールを紹介します。 長い記事なので、時間がある時にゆっくりご覧ください。 16 little UI design rules that make a big impact by Adham Dannaway 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 1. スペースを利用して関連要素をグループ化する 2. 一貫性を保つ 3. 見た目が似ている要素は同じように機能するようにする 4. 明確なビジュアルヒエラルキーを作成する 5. 不要なスタイルを削除する 6. カラーは意図的に使用する 7. インターフェイス要素のコントラスト比が3:1であることを確
画像生成AIでウェブサイトやUIデザインを生成するコツ
人工知能（AI）は、ウェブサイト制作を、根本から変えてしまうでしょう。 今のところ、AI画像生成ツールは、呪文（プロンプト）を唱える、ちょっとしたコツを覚えることで、以下のようなWebレイアウトを作成できます。 beautiful landing for spiderman website, design, ux/ui, ux, ui --ar 3:2 --v 4 --q 2 「花屋、フラワーショップ」をテーマにすると、一発でWebサイト向けレイアウトを錬成できます。 「日本」をテーマにすると、こんな美しいUIデザインに。 実際にAI画像生成ツールを使いこむうちに、少しずつわかってきた、AIツールでウェブサイトやUIデザイン画像を生成するコツを、メモ的にご紹介。 アップデート、継続していきます。 コンテンツ目次 ✨ AI画像生成ツールとは？ ✨ 唱える呪文（プロンプト）って何？ ✨ 画像を
もっと早く読んでおけばよかった！ Figmaの一歩踏み込んだ実践的な使い方まで、詳しくていねいに解説された良書 -Figma for UIデザイン
Web制作やUIデザインの必須ツール「Figma」は2022年7月に日本語版がリリースされ、9月にはAdobeの傘下になることが発表され、今後もますます必須ツールとして欠かせないものなるでしょう。 Figmaの基本的な使い方をはじめ、実践的なUIデザインの制作、Figmaならではの生産性を上げ効率的なテクニックなどを詳しく解説した解説書を紹介します。 本書はリファレンスとプラクティス両方の側面があり、Figmaをこれから始める人にも、Figmaをもっと使いこなしたい人にもお勧めの一冊です。 本書は、Figma日本語版に対応した解説書です。インストール・セットアップをはじめ、基本的な使い方、Figmaならではの生産性を上げる機能の解説だけでなく、ワイヤーフレームやプロトタイプや詳細デザインの作成など実践的な作業フローまで学べます。チュートリアルに使用されるファイルは、サポートサイトからダウン
使いたくなる社内ツールを作るためにデザインをしよう - Pepabo Tech Portal
GMOペパボのデザイン部という会社横断組織で（自称）デザインエンジニアをやっているgyugyuです。好きな鮨ネタはスズキです。 この記事は GMOペパボデザイナー Advent Calendar 2022 の13日目の記事です。昨日は たるたるさん の 【2022】minneのアクセシビリティを振り返る でした。 この記事では「短期的には効率が下がるものの、中長期的にはより大きい効用をもたらす社内ツールのデザインをしたこと」と、そこから導き出される「社内ツールでもデザインをすることの重要性」について説明します。 前提 この記事におけるデザインとは この記事において、デザインという言葉で意味しているものは情報設計のことです。リッチなビジュアルの作り方や美しいUIパーツの作り方についてはこの記事では説明していません。それらについてはペパボの他のデザイナーが素晴らしい記事を書いているので、そちら
backgruond-imageを使ったCSSのアニメーションテクニック - ICS MEDIA
CSSのbackground-imageプロパティは背景画像に関するCSSですが、単に背景に画像を表示させるだけでなく、実はアニメーションと組み合わせて多彩な表現ができます。本記事ではbackground-imageの特性を活かしたアニメーション表現について解説します。 サンプルコードもありますので、実際の案件に取り入れてみたりbackground-imageの仕組みについて学んでみたりしてください。※サンプルコードはSass（SCSS）を使用しています。 サンプルを別ウインドウで開く コードを確認する background-imageとアニメーション タイトルと矛盾するようですが、background-imageプロパティ自体はanimationプロパティやtransitionプロパティを用いてアニメーションできません。もしbackground-imageプロパティをアニメーション可能に
FigmaでUIのアイコンを使うならコレ！ 高品質でシンプルにデザインされた1100種類のアイコン素材 -Untitled UI Icons
WebサイトやスマホアプリのUIデザインにぴったり、Figma用の高品質でシンプルにデザインされたアイコン素材を紹介します。 たとえば、アローだけでも90種類以上、ホーム・サーチ・カート・メールなども複数のデザインで用意されており、UIにぴったりなのが見つかると思います。 Figmaなので、カラーやストロークの太さなどは簡単に変更できます。 Untitled UI Icons Untitled UI Iconsは、高品質でFigma用のアイコンが見つからなかったので作成した、とのことです。 UIデザイン用にクリーンで一貫性のあるニュートラルなアイコンライブラリで、Figmaのために、Figmaで作成されています。
プロのUIデザイナーに学ぶ！ UIとUXの印象がよくなるデザインの知識とテクニックのまとめ vol.15
デザインはちょっとした一手間を加えるだけで、ぐっとよくなります。 プロのUIデザイナーによるWebページやスマホアプリのUIとUXを改善するデザインの知識とテクニックを紹介します。 第15弾は、ユーザビリティ・フォーム・ミニマルにデザインする弊害に関するデザインのテクニックです。 UI & UX Micro-Tips: Volume Fifteen. by Marc Andrew 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 1. ページ内リンクを効果的に用意する 2. ボタンのラベルは一貫性を保つ 3. 長いフォームは冗長な作業を最小限に抑える 4. 長いフォームは常にラベルを上部に配置する 5. 不要なテキストでフォームのUIを乱雑にしない 6. 特定のUI要素でミニマムな外観を避ける はじめに 次のプロジェクト
プロのUIデザイナーに学ぶ！ UIとUXの印象がよくなるデザインの知識とテクニックのまとめ vol.14
デザインはちょっとした一手間を加えるだけで、ぐっとよくなります。 プロのUIデザイナーによるWebページやスマホアプリのUIとUXを改善するデザインの知識とテクニックを紹介します。 第14弾は、レイアウトのグリッド・使いやすいフォーム・配色で悩んだ時に関するデザインのテクニックです。 UI & UX Micro-Tips: Volume Fourteen. by Marc Andrew 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 1. グリッドの間隔はハードではなく、ソフトに 2. フォームはインタラクションの後、すぐにフィードバックを提供 3. 配色で悩んだ時は、類似色 4. テキストの見栄えを良くするグリッドの使い方 5. 検索ボックスの幅は広くする 6. 素早いアクセスは、ナビゲーションをスティッキーに はじ
【総まとめ】2021年話題になった世界のベストWebデザイン厳選50個
当サイトでは、定期的に新しく公開された最新Webサイトデザインをまとめています。今回は、2021年のベスト・オブ・Webデザイン50個を厳選、ピックアップしご紹介します。 配色えらびやレイアウトの参考にぴったりで、2022年予想の人気デザイントレンドも意識した素敵なWebサイトを中心にまとめています。 【総まとめ】2021年話題になった世界のベストWebデザイン厳選50個 Rockwool トップ画面に表示されたビルをクリック、スクロールで進んでいくと、壁や床、排水管にいたるまで細部まで細かくアニメーション付きで説明する、新しすぎる制作実績の見せ方。ぜひ一度サイトを開いて体験してみましょう。 Skolkovo Business District マウスの動きに合わせて、照明を当てることで、ビルでできる影を操ったり、マウスを左右に動かし、3Dモデリングを360度回転できます。スクロールに合わ
文字や背景にピュアブラックを使ってはいけない理由
UX Movementの創立者、ライター。ユーザーに優しいUXデザインのスキルを読者の方が上達できるよう、UX Movementのブログを始める。 デザインにピュアブラックを使うと可読性が低くなると知っていましたか？ 統計によると、「アメリカの成人の58％」がコンピュータ作業で眼精疲労を経験したことがあるそうです。デザイナーは使用する黒の色に注意を払うことで、目が疲れる可能性をある程度減らすことができます。 ピュアブラックの文字や背景 ピュアブラックの文字や背景と白の組み合わせは、ユーザーが文章を長時間読むとき目に不快感を与えることがあり、眼精疲労を招いてしまいます。 白は100％の明度であり、黒は0％の明度です。このように明度のコントラストが強いと光量に不均衡が生じ、ユーザーが明るさに順応しようとするために目が酷使されることになるのです。 この現象を実証するために、暗い部屋で明るい電灯を
伝えることを考え抜く「nanapi」のUIデザイン
Webサイトやプロダクトのデザインの中で「よいデザイン」とされるものは、そのデザインへといたるまでに、はっきりとした“スジ”が存在します。その“スジ”を探っていきます。 いいデザインにはスジがある “デザイン”と一口にいうと、多くの人は単純に表面的なものとしてとらえがちですが、実はデザインとはただ見た目を作る作業ではありません。 世の中に山のようにあるWebサイトやプロダクトのデザインの中で、「よいデザイン」とされるものは、そのデザインへと至るまでに、はっきりとした“スジ”が存在します。「よいデザイン」＝「スジのあるデザイン」とも言い換えられるでしょう。 今回から始まるこの連載では、そうした「スジのあるデザイン」がどのようにして生まれてくるのかを、生みの親に根掘り葉掘り聞いて迫ってみちゃおうじゃないか！ という趣旨で、さまざまなWebサービスやプロダクトを、デザイン目線でつづっていきます。
継ぎ目のないシームレスな背景画像の無料素材とジェネレーターのまとめ
タイル状に継ぎ目なく配置できるシームレスな背景用の画像が作成できるジェネレーターと無料素材を配布しているサイトを紹介します。
仏像ガール
2020-09-06 2020-12-02 阿弥陀如来（あみだにょらい）ってどんな仏像？ 「なむあみだぶつ」という言葉は、みなさんよく聞いたことがあるかと思います。なんまんだーなんまんだーというのは、「南無阿弥陀仏」という阿弥陀さまへのご挨拶のことばです。それくらい日本ではとってもポピュラーな阿弥陀如来、一体どんな仏像なのでしょう。ゆかり […]
IDEOが教える「イノベーションを生む秘けつ」
英国のEconomist誌が、「いまやイノベーションは現代のあらゆる経済圏において、もっとも重要な要素とみなされている」と宣言した。 今でこそ「イノベーション」という言葉は日本にも浸透してきたが、ほんの数年前までは、「イノベーションとはなにか？」と質問をすると、「新たな物を生み出すこと」とか、「古い体質から新しい体質に生まれ変わること」という答えが返ってきていた。単に「技術革新」と訳している辞書もあった。 これらの答えは間違いではない。だが不完全だ。 イノベーションという単語は、オーストリアの経済学者ヨーゼフ・シュンペータが、その著書「経済発展の理論」の中で「経済循環の軌道が自発的・飛躍的に変化する現象」という意味で使ったのが最初で、「新しい財貨の生産」「新しい生産方式の導入」「新しい組織の創出」「新しい販売先の開拓」「新しい仕入先の獲得」の5つに分類されている。 あらゆる新たなものを創出
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
無料で使えるデザイン系ソフトいっぱい - DesignWalker
高品質のウェブデザイン用無料素材がダウンロードでき、共有できるサイト -Freebie Pixels
TechCrunch | Startup and Technology News
【LED Next Stage続報】展示に“色分け”が見られたアジア勢と日本勢
