group_inou / HAPPENINGInteractive GIF Music Video by AC-bu
商用でも完全に無料ですごい！ デザインやイラストでかなり使える有料レベルの高品質なテクスチャ素材 -ResourceBoy
個人でも商用でも完全に無料で利用できる、高品質でさまざまな種類が揃った高解像度8K, 4Kのテクスチャ素材を紹介します。 ゴールド、大理石、煉瓦塀、スモーク、花火、蜘蛛の巣、シャドウ、クラフトペーパー、ブラックペーパー、チョークボード、段ボール、デニム地、水彩、グラデーションなどがそれぞれカテゴリごとにまとめてダウンロードできるので、非常に便利です。 難点があるとすれば、ファイルサイズが大きいので、ダウンロードに時間がかかるくらいでしょうか。 ResourceBoy ResourceBoyはテクスチャ素材をはじめ、ブラシ素材、グラデーション素材、モックアップ素材など、商用利用無料の数多くのリソースをダウンロードできます。以前にも紹介しましたが、その時からさらにテクスチャ素材の種類が増え、パワーアップしています。 ResourceBoy ライセンスは独自で、個人でも商用でも無料、ロイヤリティ
仕事が早い人は使っている最新Web便利ツール34選
「Webサイト制作がもっと楽になる方法ってないの？」 「Web制作の最新ツールを試してみたい」 そんな方へオススしたい、Webデザイン制作に役立つツールや素材をまとめてご紹介します。 「これ、もっと早く知りたかった」と思うような便利ツールを中心にセレクトしています。 2024年のデザイントレンドにもぴったりな新Webテクニックを、次のプロジェクトに活用してみてはいかがでしょう。 一緒に最新デザイン素材やツールも目を通しておくと良いでしょう、特に今回は豊作でした。 コピペ系CSSツール 60 CSS 3D Buttons Free Collection CSSとHTMLのみで作られた3Dボタンと、本物そっくりな見た目の「スキューモーフィック」ボタンのコレクション。クリックするとコピーできます。 275 CSS Gradients Collection 美しいCSSグラデーション250カラーが
ここまでできる！CSS最新テクニックと書き方30選
ポップオバーAPI 最新版Chrome 114に搭載された新機能で、コンテンツの一番上に重ねて表示するUI「ポップオバー」。補足の情報やユーザーにアクションを促すことができます。 Introducing the popover APIでは、具体的な使い方や実装例が紹介されています。 範囲スライダーをCSSでカスタマイズ How to Create a Custom Range Slider Using CSSでは、モダンなCSSテクニックを使って、ネイティブHTMLの<input>要素だけで人目を引く、カスタム範囲スライダーを作成する方法が紹介されています。 See the Pen CSS only custom range sliders by Temani Afif (@t_afif) on CodePen.
Web アプリケーションエンジニアのためのウェブアクセシビリティの基礎
Web アプリケーションエンジニアのためのウェブアクセシビリティの基礎 2023.02.18 ウェブアプリケーションエンジニアを対象に、アクセシビリティの対応について解説した記事。アクセシビリティを向上させるためには、正しいHTMLの書き方が必要である。HTML要素には、アクセシビリティに関する機能が元々備わっているため、適切なHTMLを選択し使用することが大切だ。複雑なUIの場合はWAI-ARIAを使用し、ARIA Authoring Practices Guideに基づき適切に実装する必要がある。UIライブラリ選びの際には、WAI-ARIAに従った実装を行っているかが基準の1つとなる。 この記事は、ウェブアプリケーションエンジニアとして仕事をされているほうを対象に書かれています。日々のウェブフロントエンドの開発の中で意識しておきたい基礎的な内容をメインに記載しています。 そのため、ここ
2023年はCSSで三角関数「sin(), cos(), tan()」が主要ブラウザのすべてで使用できるようになるぞ！
2023年はついに、CSSで三角関数が主要ブラウザのすべてで使用できるようになります！ CSSで使用できる三角関数は、sin(), cos(), tan(), asin(), acos(), atan(), atan2()です。すでに2022年にリリースされたSafari, Firefoxではサポートされており、3月リリースのChrome 111でもサポートされる予定です。 CSSの三角関数を使用すると、複雑なアニメーションに使用するJavaScriptを減らしたり、要素を曲線に配置するレイアウトなどもCSSで実装できます。 Chrome Platform Status CSS Trigonometric functions（三角関数）はCSS Values and Units Module Level 4ですでに定義されています。 sin() 引数として与えた数のサイン ボックスのサイズ
3大イラッとくる入力フォーム
ペースト出来ないID/パスワード欄 4つに分割されてるクレジットカード番号入力欄 入力した後で記号は使えませんとか言ってくるパスワード欄 あと一つは？
画像で分かる、新しいCSS
この記事では、比較的新しいCSSプロパティやCSSの機能を画像で分かりやすく解説しています。 2021年にTwitterで「1枚の画像で新しいCSSがわかる」という連載をしていて、2023年に新しいブラウザーにあわせて再度連載していたのですが、その投稿内容をまとめて解説文などをブラッシュアップしたものです。 IE11のサポートが終了したことで、ほとんどのCSSプロパティやCSSの機能が利用可能になったので、ぜひ試してみてください。 画像・CODEPEN作成協力: emiさん backdrop-filter:blur() を使ったぼかし表現 backdrop-filter:blur()の中の数値を大きくするほど、強いぼかしをかけることができます。 以下のCODEPEN内の［CSS］をクリックすると、CSSを確認できます。 背景に写真を指定した .box 要素内に .blur を配置し、bac
Animista - On-Demand CSS Animations Library
AboutAnimista is a place where you can play with a collection of pre-made CSS animations, tweak them and get only those you will actually use. Animista started out as a small side-project of mine. As I was increasingly using CSS animations, I thought it would come in handy to have them organised in a meaningful and accessible way so that they can be easily reused on different projects. The idea wa
chot.design - 毎日ちょっとずつデザインを学ぼう
毎日ちょっとずつ、デザインを学ぼう毎日ちょっとずつデザインを学ぼうIT/Web業界のデザイン学習サイト
Sign-in form best practices | Articles | web.dev
Sign-in form best practices Stay organized with collections Save and categorize content based on your preferences. Use cross-platform browser features to build sign-in forms that are secure, accessible and easy to use. If users ever need to log in to your site, then good sign-in form design is critical. This is especially true for people on poor connections, on mobile, in a hurry, or under stress.
Web制作者は1冊持っておくとかなり便利！UIに適したさまざまなアニメーションの実装方法が分かる解説書 -動くWebデザイン アイディア帳 実践編
Webページに動きやアニメーションを加えたい、毎回検索で探している、実装の手順を解説してほしい、そんな時にすぐに役立つコピペで利用でき実装方法もカスタマイズもていねいで分かりやすい解説書を紹介します。 動きやアニメーションのコードはサポートサイトから最新版がダウンロードでき、要素表示、背景の動き、エリアの動き、画像の動き、テキストの動きなど9種類にバリエーションが100個以上あり、「この1冊が丸ごとカバー」の文字通り大全集です。 既視感を覚えた人は、大正解！ 「動くWebデザインアイディア帳（紹介記事）」の第2弾で、第1弾は基本的な動きでしたが、第2弾の本書は実践編として「印象に関わる動き」となっています。 Web制作者は、1冊持っておくとかなり便利だと思います。こういった気持ちいいアニメーションはクライアントからの要望も多く、喜ばれます。
配色に迷ったらこれ！配色イメージを言語化して論理的に伝えられるスケールがめちゃくちゃ役に立つ「語彙力ない私にうってつけ」
リンク www.ncd-ri.co.jp イメージシステム | カラー戦略の専門家 | NCD-WEB | 色彩心理・生活者研究・トレンド分析の日本カラーデザイン研究所 日本カラーデザイン研究所はオリジナルのカラーシステム「HUE&TONEシステム」やイメージ分析システム「イメージスケール」を開発、発展させてきました。 62 users かたおか＠LP専門Webデザイナー / 著者 @kataokadesign 「Webデザインを学び始めたばかりで配色がうまく決められない」という悩みがあるなら、日本カラーデザイン研究所のイメージスケールを活用すると良いでしょう。 各キーワードに関連する配色が体系化されているので、配色で大失敗する可能性はひとまず減らすことができます。 ncd-ri.co.jp/about/image_sy… pic.twitter.com/QTfzBpQ2EL 2020-1
俺流レスポンシブコーディング
俺流レスポンシブコーディングの覚書。「人には人のレスポンシブ」があるのでこれが正解だってわけではないのですが、レスポンシブコーディングで悩んでいる人にとって参考になる記事になってくれたら嬉しいです。 ブレイクポイントは特定のデバイスの画面サイズを基準にしない 以前アンケートを取った時にデバイスのサイズを意識して決める人が半数以上を占めていた。 アンケート結果を抜きにしても「2021 年のブレイクポイント決定版はこれだ！」的な記事がバズっているのを定期的に目撃し、主流のデバイスのサイズを比較するアプローチがほとんどであるが、僕はデバイスの端末のサイズを基準にブレイクポイントを決めることには否定的である。 主流のデバイスのサイズなんてものは時間が経てば変化する。 昨年 iPhone 12 が発表された時に従来の画面サイズとは違うバリエーションになることが分かるやいなやタイムラインが慌てふためい
作って覚えるAdobe XDの便利機能 5つ
2022年4月27日 Webデザイン, XD プロトタイプやデザインの制作時にAdobe XDを使っている人も多いでしょう。Adobe XDは新しい機能がちょこちょこ追加されているので、定期的にチェックするといいですね。今回はひとつのページを作成しながら、覚えておくと便利な機能を紹介します。 ↑私が10年以上利用している会計ソフト！ 1. 「スクロールグループ」で横スクロールを表現 「スクロールグループ」では表示範囲外のコンテンツをスクロール操作によって表示できる機能です。横にスクロールするカルーセルや、多方向に動かせるGoogleマップの埋め込みなどに使えますね。今回は横にスクロールできるイメージギャラリーを設置します。 まずはリピートグリッドで画像を表示させるボックスを用意しましょう。別途用意していた画像たちをボックスにドロップすれば画像が表示されます。 このままだと画面の外にある画像
ついに出た！2021年注目のWebデザイン人気トレンド9個まとめ
この記事では、これから2021年に注目したいWebデザインの人気トレンド9個をピックアップしています。 2021年のウェブデザインの傾向としては、どれも共通のテーマがあるように見えます。ハイテクなファンタジー感を目指すのではなく、よりリアルさを求めた新しいジャンルに世界中のウェブデザイナーが注目し始めています。 2021年のWebデザインは、これまでにないほどデジタルと日常を融合する方向に向かっており、普段の生活においてWebサイトが不可欠になってきていることを、反映しているのかもしれません。 よりクリエイティブなデザインを表現できるテクニックを、たくさんのデザイン事例と一緒にご紹介です。 コンテンツ目次 1. パララックス・アニメーション 2. ニューモーフィズム 3. アブストラクト・アート 4. 目にやさしい配色 5. 原因のためのウェブサイト 6. スクロール遷移 7. プロダクト
Figmaを最強のデザインツールに変えるプラグインを厳選してまとめてみた！ - paiza times
どうも、まさとらん（@0310lan）です！ 今回はブラウザ上でWebデザインやプロトタイプを作成できる「Figma」をパワーアップしてくれる、厳選された拡張機能をまとめてご紹介します。 デザインの構築を便利にしてくれるものから、Web開発の即戦力となるプラグインやツールの枠を超えたユーティリティを提供してくれるものまで、幅広くピックアップしていますのでぜひ参考にしてみてください！ ■Figmaのデザインをコードに変換できるプラグイン 【 Figma to Code 】 Figmaで作成したWebデザインを、そのまま実際の開発に利用できるソースコードに変換してくれるプラグインが「Figma to Code」です。 2020年11月時点では、汎用性の高い「Tailwind CSS」を利用したHTMLへの書き出しに対応しており、他にもFlutterやSwiftUIのソースコードが出力可能です。
pixivのUIを迅速にアップデートする UIUXチームのフロントエンドモダン化の歴史 - pixiv inside
こんにちは。pixiv事業本部のUIUXチームでプロダクトマネージャーを担当しているdo7beです。ピクシブにエンジニアとして入社して5年弱ほどで、1年前からプロダクトマネージャーとして活動しています。 今回は僕が所属しているUIUXチームの歴史とフロントエンド技術のモダン化についてご紹介していきたいと思います。 UIUXチームとは UIUXチームとは、その名の通りUIに関する問題解決・改修・新機能開発を行うチームです。その他にも海外ユーザーに向けたSEO・ローカライズやフロントエンドエンジニアの教育を行っています。 UIUXチームでは意図・目的に合ったUIを目指すためデザイナーとエンジニアが密にやりとりしています。これは学生アルバイトエンジニアも同様で、新規機能をリリースするなどの大きな成果を挙げています。 イラストを魅力的に紹介！ pixivでAMP Storiesを実装しました @s
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
「UXデザインとは」からはじめる「本流」のUXデザインはじめの一歩 | UXデザイン基礎セミナー 第1回
3Dモデリングソフト「Blender」の操作を0から学べる1,400ページの解説書が無償公開／ダウンロード・インストールから基本的な操作、アニメーションの作成までを細かく解説
