ゲームづくりに役立つ無料&商用利用可能な素材サイトまとめ。3Dモデルやサウンド、フォントなどを一気に揃えよう
オランダのゲーム開発会社で、2D、3D、サウンド、UIなどゲーム制作に使える170種類以上のフリー素材を提供しています。 各素材は商用・非商用に関わらず自由に使えます。詳しくは、各素材の利用規約をご確認ください。 Kenney『Kenney』利用規約CraftPix
オランダのゲーム開発会社で、2D、3D、サウンド、UIなどゲーム制作に使える170種類以上のフリー素材を提供しています。 各素材は商用・非商用に関わらず自由に使えます。詳しくは、各素材の利用規約をご確認ください。 Kenney『Kenney』利用規約CraftPix
ウェブページ上には「クレジットカード番号」「郵便番号」「電話番号」といった数値の入力欄が存在することがありますが、実装方法によってはブラウザの挙動によって入力内容が変化してしまったり、テンキーでの入力を受けつけなくなってしまったりします。そこで、数値入力欄の実装時に気を付けるべき点をまとめてみました。 KeyboardEvent - Web API | MDN https://developer.mozilla.org/ja/docs/Web/API/KeyboardEvent Why the GOV.UK Design System team changed the input type for numbers – Technology in government https://technology.blog.gov.uk/2020/02/24/why-the-gov-uk-desig
これはすごい便利！ HTMLはdiv一つ、あとはCSSをコピペするだけで500種類以上のローダーが簡単に実装できる -CSS Loaders
HTMLはdivたった一つ、あとはCSSをコピペするだけで約580種類のローダーを実装できるCSS Loadersを紹介します。 ローダーは、バーやドットのシンプルなアニメーションから他ではあまり見ない面白いものまであり、ローダーを探すときはここをチェックすることをお勧めします。ローダーが不要な人でもCSSアニメーションを楽しめると思います。
ピクセルフォントが好きな人に！ JIS第1・第2水準漢字まで揃った、かわいさ全開の丸文字ピクセルフォント -マルミーニャＭ
ピクセルフォント「マルモニカ」などをリリースされているx0y0pxFreeFontから、新しいピクセルフォントがリリースされました。 ※「マルモニカ」（紹介記事）も第1・第2水準漢字対応です。 「マルミーニャＭ」はかわいさ全開の丸ゴシック体のピクセルフォントで、かわいいドット絵やゲーム演出にぴったりな丸文字フォントです。 マルミーニャＭ マルミーニャＭ -BOOTH マルミーニャＭのダウンロード マルミーニャＭの特徴 x0y0pxFreeFontの他のフォント マルミーニャＭのダウンロード さっそくフォントのダウンロード方法を紹介します。 まずは、本サイトから。x0y0pxFreeFontの本サイトはGitHubに移転され、そこからフォントをダウンロードできます。
CSSでスムーズなアニメーションを実現する4つの新しい機能
今年もCSSの進化が止まりません！ 先日紹介した表示・非表示をdisplayプロパティでアニメーションできるようになったり、スクロールをトリガーにしたアニメーションなど、新機能が登場しました。 今まではJavaScriptや複雑なCSSを使用しないと実装できなかった、スムーズなアニメーションを実現するCSSの4つの新しい機能を紹介します。 Four new CSS features for smooth entry and exit animations by Una Kravets, Joey Arhar 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づいて翻訳しています。基づいてというのは、貢献部分に関して同ライセンスも含みます。 はじめに displayをキーフレームでアニメーションさせる 個別プロパティのトランジションを可能にする 最上位レイヤーとの間で要素をア
テキストが複数行のときに、行ごとの文字数を同じにしてバランスを自動調整するCSSの新機能「text-wrap: balance;」が、Chromeでサポートされました。 日本語だと複数行の文字数を同じにしたいということは少ないと思いますが、見出しやコピーなどで文字数を揃えたいときに使えます。まぁ使ってもかなりピンポイントになるでしょう。 text-wrap: balance;の基礎知識と使い方、注意点を紹介します。 CSS text-wrap: balance by Adam Argyle 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づいて翻訳しています。基づいてというのは、貢献部分に関して同ライセンスも含みます。 text-wrap: balance;とは テキストのバランスを見つける 制限事項 ブラウザが使用している技術の簡単な説明 text-wrap: bala
パッケージ、MV、スタイリング、ビジュアルデザインなど全方位に高品質なK-POPクリエイティブにおいても軽視されがちなのがウェブ分野だが、その中でも数少ない事例を紹介。 （コミュニティアプリ・ライブ配信・ビハインドなども広義の意味ではウェブコンテンツだが、ここではいわゆる特設サイトについてのみ触れる） ＊ ＊ ＊ NewJeans.krNewJeansの公式サイトはニュースの役割を持たず、カムバックごとに特化した内容にリニューアルされる。特徴的なのは毎回実装される独自のデザインを生成できるジェネレーターで、しかしそのアプローチは常に異なる。 ウェブサイトに限らず、バッグ形態のパッケージデザインやデコ前提のシンプルなペンライトのように、各々のカスタム性を追求することによって逆に連帯感を演出する新しい大衆性がある（学校指定の鞄にキーホルダーで個性を出すやつを、メンバーとファンの間でやってるみた
ついにChromeで使えるようになったCSSの便利機能！ light-dark()関数、field-sizingプロパティ、句読点括弧のカーニングができるtext-spacing-trimプロパティ
今回のアップデートでは、かなり便利なCSSのプロパティが追加されました。 ライトモードとダークモードのスタイルを簡単に定義できるlight-dark()カラー関数、垂直方向の中央に配置するalign-contentプロパティ、フォームのサイズを入力された文字量に合わせて自動変更するfield-sizingプロパティ、CSSで句読点括弧のカーニングができるtext-spacing-trimプロパティ、これらがブラウザにサポートされるのを待っていた人も多いと思います。 Chrome 123 beta New in Chrome 123 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づいて翻訳しています。基づいてというのは、貢献部分に関して同ライセンスも含みます。 はじめに CSSのlight-dark()カラー関数 CSSのdisplay-modeでpicture-in-p
想定外の新機能！ HTMLの<input type="checkbox" switch>だけで、スイッチUIが実装できるようになるぞ
WebサイトやアプリのUIで、スイッチを実装するのはなかなか面倒です。CSSで書くと、なかなかのボリュームになってしまいます。 そんなスイッチがHTMLだけで実装できるようになります。 Release Notes for Safari TP 185によると、HTMLの新機能としてswitch属性がサポートされました。これにより、スイッチUIがHTMLで簡単に実装できるようになります。 switchについては、かなり前から実装についてGitHubで議論されていました。スイッチは人気のあるUIコントロールだけど、CSSで実装するのは簡単じゃないよね、簡単に実装できるようにしよう。という感じです。 スイッチUIを実装するHTMLは、下記の通りです。
Vercel、自然言語からUIを生成するサービス「v0」を実験的に公開。Tailwind CSSとShadcn UIをベースに
Next.jsの開発元として知られるVerelは、生成AIに対して自然言語のプロンプトを与えることでWebのユーザーインターフェイスを自動生成してくれるサービス「v0」をプライベートアルファ版として公開しました。 v0 by Vercel Labs Generate UI with simple text prompts. Copy, paste, ship. Explore the prompt library and join the waitlist today.https://t.co/yaDdOfnOaJ — Vercel (@vercel) September 14, 2023 v0の作例として公開されている、プロンプトから生成されたUIをいくつか見てみましょう。 下記は「A dashboard for saas app」（SaaSのダッシュボードを作って）というプロンプトで生
margin: auto;は非常に便利なCSSで、使用することも多いと思います。 そのmargin: auto;の仕組みをおさらいし、最近の実装で使用される中央配置のテクニックを紹介します。また、ナビゲーションでタイトル以外のリンクを右寄せに配置させるなど、便利なテクニックが満載です。 All About 'margin: auto' in CSS: Centering and More by Ritika Agrawal 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 「auto」とはどういう意味ですか？ 「利用可能なスペースを占める」とはどういう意味ですか？ ブロックレベル要素でautoを使用する 絶対要素でautoを使用して中央配置 CSS GridとFlexboxでautoを使用して中央配置 Flexboxとa
CSSでfont-sizeをレスポンシブ対応にする最新テクニック！ clamp()関数の定義が簡単にできる便利ツール -Fluid Type Scale Calculator
レスポンブ対応のフォントサイズをCSSで設定するには、CSSのclamp()関数が便利です。clamp()関数は最大値と最小値の2つの値の間をクランプし、レスポンシブ対応の流体フォントサイズを設定できます。 CSSのclamp()関数を使用し、スクリーンサイズに合わせて最適化される流体フォントサイズのCSSを簡単に生成できるツールを紹介します。 Fluid Type Scale Calculator Fluid Type Scale Calculator -GitHub Fluid Type Scale Calculatorの特徴 Fluid Type Scale Calculatorの使い方 Fluid Type Scale Calculatorの特徴 Fluid Type Scale Calculatorはclamp()関数を使用した流体フォントサイズのCSSを生成できるツールです。
TVアニメ「mono」公式サイト
芳文社『まんがタイムきららキャラット」にて連載中の、あfろによる人気4コマ漫画『mono』 アニメ・実写化も果たした代表作『ゆるキャン△』でキャンプブームを盛り上げたあfろが、写真部と映像研究部が合体した「シネフォト部」に所属する女子高生たちを中心に描く《今週末の楽しみ方漫画》。 360°パノラマカメラでの撮影や、凧にカメラを括り付けた疑似ドローンなど様々な技法を用いて、山梨県甲府市を中心とした景色や彼女たちの日常を切り取っていく。 『ひだまりスケッチ』や『ぼっち・ざ・ろっく！』など、様々な作品をアニメーションとして送り出したアニプレックス×芳文社のタッグに、新進気鋭のスタジオソワネが加わり映像化が実現。 スタッフ陣は、監督に愛敬亮太（「呪術廻戦 懐玉・玉折／渋谷事変」）を迎え、キャラクターデザインを宮原拓也（「恋する小惑星」）、シリーズ構成を米内山陽子（「ゆびさきと恋々」）が担当。 今注
CSSのセレクタで深い階層の要素を記述するとき、たとえば.card > .content > img.heroのように長いセレクタになってしまうことがあります。 Chrome 118からサポートされたCSSの@scopeを使用すると、セレクタの適用範囲を設定できるので、簡単になります。上記のセレクタは、.card内のimgと記述できます。CSSの@scopeの基礎知識と使い方を紹介します。 Limit the reach of your selectors with the CSS @scope at-rule by Bramus! 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づいて翻訳しています。基づいてというのは、貢献部分に関して同ライセンスも含みます。 CSSのセレクタを記述するきめ細やかな技術 CSSの@scopeとは :scope疑似クラスとは @scope
CSSはどんどん進化している！ マグネットのようにくっつくエフェクトを実装するテクニック -CSS Anchor Positioning
ナビゲーションのアイテムをホバーした時にマグネットのようにくっついてスライドさせるエフェクトをCSSで実装するテクニックを紹介します。 これまでは、JavaScriptがないと実装できないエフェクトでした。レスポンシブにも完全対応、アイテムが二段・三段と複数になっても、水平・垂直になってもエフェクトは追従します。 Anchor Magnet Slide Menu 実際の動作は、デモページでお楽しみください。 右上の矢印アイコンをクリックすると、アイテムの並びが垂直・水平になります。また、右下のアイコンをクリックすると、ダーク・ライトモードになります。 ※CSSのみで動作するのは、Chrome 125+です。それ以外のブラウザはポリフィルが使用されています。 See the Pen Anchor Magnet Slide Menu by coliss (@coliss) on CodePen
ブーム来る？ 「和文バリアブルフォント」の世界
そんな事もあり、4月10日は新しいフォントがいくつか発表された。今年の目玉はなんといっても「和文バリアブルフォント」であろう。 われわれが普段使用するフォントは、同じデザインでも細いもの、太いもの、横が詰まったものなどがそれぞれ個別のフォントとして提供され、1つのファミリーを形成している。 一方バリアブルフォントは、そうした文字の変形を1つのフォントで提供していこうという比較的最近のフォントフォーマットで、米Adobe／米Apple／米Google／米Microsoftが共同開発した。フォントパラメータとして、太さや字幅がバリアブルで変更できるため、従来はファミリーで提供しなければならなかったフォントデータが、1つのフォントで小さく提供できるというメリットがある。 もちろんデザインする側も、細いか太いかの2択ではなく「中間」も選べるし、縦長、横長も選べるので、表現の幅が広がるわけである。た
くりもと眼科｜大阪市阿倍野区 天王寺駅
JR天王寺駅から徒歩3分のくりもと眼科です。特に緑内障と神経眼科疾患に高い専門性を持ち、緑内障の手術や白内障の日帰り手術も可能です。
ユニクロアプリが動画メインになっていて、なかなか見たい商品まで辿り着けない！と話題に「素直に静止画で見せてお願い」→対処法もあるらしい
在宅管理職WM @Um6UX5LpQkTd9Ut こちらがユニクロアプリを開く時はもうキッズパジャマ買うぞ、ヒートテック買い足すぞ、みたいなテンションでのびのび動画を出されてもイラつくだけなの。 2023-12-25 10:20:22
海外で有名なデザインおしゃれなトグルボタンをコーディングしてみた
FigmaのXアカウントがおしゃれなトグルボタンを公開していて、「コーディング泣かせだ」との声を見かけたので、改めて自分でコーディングしてみようと思い書いてみました。 デザイナに作れよ！って言われれば作るよ。だってぷろだもん。https://t.co/HF6afHhfzm https://t.co/IXl7iufv7v pic.twitter.com/T4x4uV7tKX — ゆひゃ (@zaty_Akiyama) October 14, 2023 元ネタ 参考にしたのはFigmaのこのポストですが、結構有名なデザインで、最初に見たのはこのポストだと思います。 still laughing at this pic.twitter.com/Ny525aAuYH — Joie Chung (@hellojoie) April 28, 2023 このポストの一連の引用や返信を見ると、海外でもっと
Abletonのシンセ入門サイト、音も出せるしわかりやすすぎる2024.06.02 21:0014,269 ヤマダユウス型 ｢シンセサイザー、名前も見た目もかっこいいけど複雑そう｣ そう感じたことがある人にぜひ知ってもらいたい、シンセ知見の塊みたいなサイトを見つけました。コチラです。 このサイト、音楽制作ソフトやハードウェアを手掛けるAbletonが作ってるみたいで、なんと実際に演奏ができるんです。しかもスマホでアクセスすると、タッチで演奏もできてしまう！ シンセサイザーの仕組みをサウンドと一緒に解説実際にサイトを訪れてみると、テキストと共に操作できるスペースが用意されています。たとえば上の画像だとドラッグできる下画面をクリックすると、ビヨンビヨンとシンセらしい音が出ます。 こういったシンセらしい音はどんな仕組みで動くのか、どんな要素で構成されているのか。音と一緒に理屈でも解説していきます
アドビが生成AI「Firefly」を一般公開 「Creative Cloud」に統合 コンテンツは商用利用可能
アドビは9月13日、コンテンツ生成AI「Adobe Firefly」のWeb版と、同社の一部デスクトップアプリに統合されたFireflyの機能を一般公開した。これにより、Fireflyによって生成されたコンテンツの商用利用が解禁される。 一般公開版の概要 Fireflyは2023年3月からβテストが行われてきた。当初はプロンプト（文章）によるコンテンツ生成は英語にのみ対応していたが、日本語を含む多言語対応を進めるなど、機能の拡充を進めてきた。「Adobe Photoshop」「Adobe Illustrator」などのデスクトップ向けβアプリにも、Fireflyの技術が順次搭載されている。 →初登場時の記事 →Photoshopアプリへの実装時の記事 →Illustratorアプリへの実装時の記事 Adobe（アドビの親会社）によると、これまでにFireflyを使って生成されたコンテンツは
Bento UIとはパネルが伸び縮みしながら配置が入れ替わるお弁当箱みたいなUI、View Transitions APIでCSSアニメーションが進化する
Bento UIとはパネルがお弁当箱のように配置されており、各パネルをクリックすると伸び縮みしながら配置が入れ替わるUIです。最近のWebサイトやスマホアプリでもよく見かけるようになりました。そんなBento UIをView Transitions APIを使用して実装されたデモを紹介します。 一昔前なら実装は面倒でしたが、Chrome 111から利用できるView Transitions APIにより簡単に実装できるようになりました。 Rediento -Bento Radio Group Carousel thing 実装にはChrome 111で実装されたView Transitions APIが使用されており、2つの状態間のアニメーションを作成しながら、1ステップでDOMを簡単に変更できます。 各パネルは、CSS Gridでレイアウト。 positionはなし。 ビジュアルのトラン
今年も残すところあと少しとなり、振り返ってみると数えきれないほどのツールや素材がリリースされました。 「本当に役立つツールや素材を集める」をモットーに、2016年からおよそ8年間、定期的に最新ツールをまとめ続けています。 数で言えば、３０００個以上。 知っているか知らないかの違いで、作業時間を大幅に短縮し、売り上げが2倍にワープしたことも何度もあります。 このような経験があるからこそ、ハッキリ言えることがあります。 それは、無料で使える素材を知らずに損している人が、あまりにも多いということ。 残念ですが、あなたの素晴らしい商品やサービスの魅力が、ユーザーに全く伝わっていません。 でも、ご安心ください。 この記事では、そんなあなたの役に立つ2023年公開の無料デザインツールや素材をまとめてご紹介します。 整理したカテゴリは以下の通り。
知っておくと便利なCSSの単位: フォントに基づく相対単位（em, rem, cap, ch, ex, ic, lhなど）の便利な使い方を解説
CSSでよく使用する単位といえば、px, r(em)あたりでしょうか。 CSSはそれら以外にもたくさんの単位が使用できます。フォントに基づく相対単位（em, rem, cap, ch, ex, ic, lhなど）の便利な使い方を紹介します。 Relative length units based on font -Going beyond pixels and (r)ems in CSS by Brecht De Ruyte 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに CSSの単位: capとは CSSの単位: chとは CSSの単位: emとは CSSの単位: exとは CSSの単位: icとは CSSの単位: lhとは CSSの単位: remとrlhとは CSSの単位: rex, rch, ricとは はじめに
Yahoo! 知恵袋のフロントエンドには26000行を超えるユニットテスト(1つのcontrollerのユニットテスト)や、多くのロジックを含むcontrollerがあります。これらによって追加実装・保守が難しい状況です。この問題を解決するために、リアーキテクトを行いました。以下について主に話そうと思っています。 ・リアーキテクトで取り組んだこと ・リアーキテクトの結果・学び・反省点
先日リリースされたChrome 119に地味だけど嬉しい新機能が実装されていたので、紹介します。 フォームのセレクトボックスで区切り線にhrを使用できるようになりました。すでにSafariでもサポートされており、これでChorme, Edgeでも使用できます。 Select element: now with horizontal rules by Una Kravets 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づいて翻訳しています。基づいてというのは、貢献部分に関して同ライセンスも含みます。 select要素内で区切り線（hr）を使用できるようになりました select要素内の区切り線（hr）の実装方法 select要素内の区切り線（hr）のデモ select要素内で区切り線（hr）を使用できるようになりました 11/1にリリースされたChrome 119では、
WebアプリケーションのUIの表現はどんどんリッチになってきています。しかしその一方でブラウザ上での描画の負荷は増大し、時としてスムーズに動かず体験を損ねることもあります。ユーザーにとって使い心地の良いUI体験はフロントエンドのパフォーマンスチューニングに大きく委ねられていると言えるでしょう。 スタートアップ開発を支援する株式会社Gaji-Laboでは、サービスの価値に直結するエンドユーザーの体験向上のため、快適なUIを提供する事をとても大切にしています。 この記事では、快適に動くUIを作るため、フロントエンドフレームワークのマジョリティであるReactとどう付き合っていくべきかを考えていきましょう。 Reactの仕事を理解するまず、Reactがどんな仕事をしているのかを理解するところからはじめましょう。Reactの主な仕事はUIを描画すること、そして必要に応じてそれを再描画することです。
オウンドメディアサイトの評価に役立つGoogle Analytics 4のカスタムレポート作成ガイド（寄稿：小川卓） - はてなビジネスブログ
株式会社HAPPY ANALYTICSの小川卓（id:ryuka01）です。 Google Analytics 4には多様なレポートや機能が備わっており、どれを利用すれば良いか迷うことが少なくありません。複数のレポートを行き来しながら見るのも手間ですし、改善に直接役立ちにくいレポートや指標もあります。 そこで今回は、オウンドメディア向けのGA4カスタムレポートの作成方法と見方について紹介いたします。まずはこのカスタムレポートを見ておけば、各記事の評価が適切に行えるようになります。 カスタムレポートとは？ 作成するカスタムレポート カスタムレポートを見る上でのポイント カスタムレポートの作成方法 最後に カスタムレポートとは？ GA4のレポート内にある機能で、任意のディメンションと指標を選んで表を作成することができます。必要な項目だけを表示することができるため、必要なデータに絞り込むことが可
【公式】攻殻機動隊グローバルサイト
© 士郎正宗・Production I.G/講談社・攻殻機動隊2045製作委員会 © Shirow Masamune, Production I.G/KODANSHA/GITS2045
無料で使えるプログラミング不要でウェブサイトをデザインできるオープンソースなビジュアル開発ツール「Webstudio」を使ってみた
ウェブサイトを作成しようとするとき、一番ネックになるのがコーディングです。「このパーツをあと3ミリくらい右に動かしたいな～」という簡単そうな操作でも、まったく知識がないとどの部分をどのように編集すればいいのかさっぱり分からないことも多いはず。そんな需要に応えて、世の中にはコードを一切書かずにウェブサイトを作成できるさまざまな「ノーコード」ツールが存在しています。今回はオープンソースで開発されているノーコードツールの「Webstudio」がベータ版をリリースしたとのことなので、早速使い勝手を試してみました。 Open visual development for the open web https://webstudio.is/ Webstudioの特徴がまとまっているムービーが公開されています。 ムービーで触れられているWebstudioの長所は大きく3つあり、まず一つ目はロックインされ
「このWebサイト、素敵。」と感じさせるモノとは、一体何でしょう。 それはデザインなのか、それとも機能性なのか、または「このフォント、配色が好き」といった特定のデザイン要素かもしれません。 ずばり、この問題の答えはポンと出せるほど単純ではなく、これらの要素を組みあわせることで、素晴らしいWebサイトは生まれます。 この1年間で、デザイン制作の参考にしたいWebサイトを２００以上紹介してきました。 製品やサービスを販売、紹介するサイトや、実験的なサイト、情報を提供する教育的なサイト、政治的なサイト、そして夢中になる体験型サイトまで、業種もさまざまです。 この記事では、デザインアイデアにしたり、トレンドを分析したり、２０２３年の振り返りに最適な５０のWebデザインを厳選してご紹介します。
ウェブアクセシビリティ対応、どうすれば？ 法改正のポイントと5つのステップを解説｜Goodpatch Blog グッドパッチブログ
アクセシビリティ？ ウチの会社のウェブサイトは大丈夫なの──。 法改正によって、障害のある方への「合理的配慮の義務化」が、2024年4月1日をもって民間企業にも適用されることを受け、ウェブデザイン分野ではアクセシビリティ対応の機運が高まっています。 とはいえ、「法改正で何が変わったのかよく分からない」「ウェブアクセシビリティってどうすれば対応できるの？」といった疑問を持つ方も少なくないはず。そこで、この記事ではいわゆる「法的義務化」の潮流を解説しつつ、アクセシビリティの基本を押さえていきます。 アクセシビリティの考え方は、ウェブに限るものではありません。他のプラットフォームでのソフトウェアデザインや物理的なモノや空間のデザインにおいても、普遍的に重要な視点です。ぜひ、この機会に一緒に学んでいきましょう！ なぜ「ウェブアクセシビリティ」に注目が集まっているのか？ まず前提として触れておきたい
エンジニア直伝！デザイン&実装の両観点で最適な「積むUIレイアウト」の制作方法｜ShikiCheri/C-C-C
こんにちは、@ShikiCheriです。 現在フリーランスのUIUXデザイナーをやっており、単発案件ではなく長期的に組織や事業にコミットするような形で、サービス開発のデザインを中心に担当しています。 デザインシステム構築を担当したことでUIデザインの最適解について目から鱗が落ちた…！？クックパッドは25年のサービスの歴史があり、特にWeb版は今でも現役で活用されているサービスです。私はこの長寿サービスWeb版クックパッドのUIのリニューアルを行いました。 またこのプロジェクトと同時に、webに限らずアプリも含めたサービス全体の体験を統一するためのデザインシステムの構築を担当しました。 Apron - Figma Community これらのプロジェクトを推進する際、デザイン×開発の架け橋的存在であるUXエンジニアのむーさん、実装もできるデザイナーのけんけんさん、TOFUWORKSさんと共に
仕事が早い人は使っている最新Web便利ツール34選
「Webサイト制作がもっと楽になる方法ってないの？」 「Web制作の最新ツールを試してみたい」 そんな方へオススしたい、Webデザイン制作に役立つツールや素材をまとめてご紹介します。 「これ、もっと早く知りたかった」と思うような便利ツールを中心にセレクトしています。 2024年のデザイントレンドにもぴったりな新Webテクニックを、次のプロジェクトに活用してみてはいかがでしょう。 一緒に最新デザイン素材やツールも目を通しておくと良いでしょう、特に今回は豊作でした。 コピペ系CSSツール 60 CSS 3D Buttons Free Collection CSSとHTMLのみで作られた3Dボタンと、本物そっくりな見た目の「スキューモーフィック」ボタンのコレクション。クリックするとコピーできます。 275 CSS Gradients Collection 美しいCSSグラデーション250カラーが
フォームの入力欄のラベルが入力時にふわりとフロートして移動するのをCSSのみで実装するテクニックを紹介します。 HTMLはinputとlabelで非常にシンプル、余計なspanなどはありません。ラベルのフロートはCSSで実装されており、コピペで簡単に使用できます。
HTML HTMLの仕様策定には複雑な歴史があります。詳細は他の解説記事に譲りますが、簡単に述べるとW3CとWHATWGのダブルスタンダード状態が長い間続いていました。2022年現在はWHATWGによってLiving Standardとしてまとめられた仕様が実質的な標準となっています。Living Standardという名前が示す通り、バージョンはなくエディターによって随時更新されています。 CSS CSSの仕様はW3Cが策定しています。現在は、CSSとして1つの標準仕様があるわけではなく、数多くのモジュールに分かれて標準仕様の策定が進められています。草案、勧告候補などを経て勧告に至るプロセスと、Levelという概念で整理されたバージョン管理が特徴です。年に1度、SnapShotとしてその時点での標準化の概況が公開されています。 JavaScript JavaScriptは主にWebブラウ
CSSだけでスクロールアニメーションが作れる！？ 新技術Scroll-driven Animationsとは 2023年7月にリリースされたGoogle Chrome 115では、「Scroll-driven Animations」が搭載されました。 Scroll-driven Animationsを使うと、今まではJavaScriptを使わなければ実装できなかったスクロールと連動するようなアニメーションがCSSだけで実現できるようになります。 以下は、CSSだけを使って作成したスクロールアニメーションのデモです。一切JavaScriptは使用していません。 Scroll-driven AnimationsはJavaScriptでも使うこともできますが、本記事では、実装の手軽さを一番にお伝えしたいため、CSSだけを使ったスクロール駆動アニメーションの作り方をご紹介します。 スクロールアニメ
入力欄のプレースホルダーって結局どうなの - Qiita
入力欄のプレースホルダーの話をします。プレースホルダーというのは、フォームの入力欄で、ユーザーが入力するまでの間に表示されているテキストのことです。 書籍「Webアプリケーションアクセシビリティ1」では、「3.1 ラベルと説明」のところで、紙版にして約1.5ページの分量を割いて、フォーム入力欄のプレースホルダー（<input> 要素や<textarea> 要素の <placeholder> 属性）の問題点を指摘しています。 この本で指摘されているプレースホルダーの問題点は以下の3つです。 プレースホルダーの色が薄く視認しづらい プレースホルダーとフォームコントロールの値との区別がつかない フォームコントロールに値を入力したときにプレースホルダーの値が見えなくなってしまう Webアプリケーションアクセシビリティ さらに、Nielsen Norman Groupによる「Placeholders
Shibuya.apk #43 https://shibuya-apk.connpass.com/event/288211/
【はじめに】この記事はBaaaaと何の関係もないただの学生（25卒）が執筆しています。 【Baaaaとは】カメラで現実世界を写すことで絵文字が生成され、それをコレクションしたり、レコードに載せて音楽を奏でられるアプリ。他の人のレコードを回したりスクラッチしたりとSNS的な側面も持つ。 日本企業のwedが制作しており、同社はONEというレシート買取サービスも開発している。 【感動した5ポイント】1.UIのサイズが激しく変化する下部にあるフッターナビゲーションの大きくサイズが変化するボタンを見て欲しい。選択されている場所を色、サイズ、テキストで強調できており、分かりやすい。また、指からはみ出すアニメーションはダイナミックでワクワクする。 フッターナビゲーションそして、一体感がすごい。フッターナビゲーションを左右にスワイプすることによって、指、ボタン、中央画面が全て同じ方向に動く。まるで指で引っ
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ウェブページに「数値の入力欄」を実装する際はテンキーの存在を考慮する必要あり
CSSの新機能！ テキストの行のバランスを自動調整する「text-wrap: balance;」の基礎知識と使い方
K-POPのデザイン16: ウェブにナラティブを取り戻す｜Simon says
CSSのmargin: auto;の仕組みをおさらい、最近の実装で使用される中央配置やナビゲーションのテクニック
CSS @scopeの基礎知識と使い方を解説、セレクタの適用範囲を設定できる
Abletonのシンセ入門サイト、音も出せるしわかりやすすぎる
便利すぎて反則級、ずるい無料デザインツール・素材80選【2023年ベスト】
Yahoo! 知恵袋フロントエンドをリアーキテクトしている話
地味だけど嬉しい新機能！ フォームのセレクトボックスで区切り線にhrを使用できるようになりました
Reactの気持ちになって理解するWebパフォーマンスチューニング
【総まとめ】2023年世界で話題になったWebデザイン・ベスト50選
コピペで簡単！ CSSのみで、フォームの入力時にフロートする入力欄のラベルを実装するテクニック
HTML, CSS, JavaScriptの標準の仕様書はどこにあるのか
CSSだけでスクロールアニメーションが作れる！？ 新技術Scroll-driven Animationsとは - ICS MEDIA
文字拡大されても怖くない レイアウト作りのコツ
おもちゃ箱のようなアプリBaaaaのUI/UXが凄すぎた件｜Yusui Hoshino