これは何かGoogleの Material Design Guideline - Data Visualization がとても良くまとまっていたので、自分なりに和訳・編集してまとめたものです。 ※ 注意事項 こちらはあくまで、もとのドキュメントを参考に筆者が和訳・編集したものになります。原文の完全な和訳ではなく、抜粋の範囲や、英=>和の際の意訳を筆者が恣意的に行っています。 筆者の意訳・編集による曲解や元のドキュメントでのオリジナルの文意が気になる方は原文を読むことを強くおすすめします。 和訳の公開の可否についてはGoogle社に直接問い合わせています。1 / 原理原則（Principles） データの可視化は、複雑で内容の多い情報をグラフィカルな形式で表現するコミュニケーション手段である。 可視化の結果、データを比較しストーリーを伝えることが容易になり、データの利用者の意思決定の助け
フォントワークスは、手書き風の楷書系硬筆体「クレー」やディスプレイ書体の「ロックンロール」「レゲエ」「ドットゴシック」など全8書体を、Google社の「GoogleFonts」にて提供を開始しました。 私たちは、「もじと もっと じゆうに」というタグラインを掲げ、文字の力を最大化し、すべての人の日常に新たな価値を生み出していきたい、と考えています。GoogleFontsが掲げる "Making the web more beautiful, fast, and open through great typography" にも共感し、一部書体ではありますが、GoogleFontsへ提供いたしました。制作環境に依存することなく、より多くの新しい作品が生み出されることへの貢献と、今後の更なるフォント市場の活性に繋がることを期待しています。 GoogleFontsは「SILオープンフォントライセ
ウェブデザインにおけるline-heightについて
ウェブデザインにおけるline-heightってけっこう曲者で、CSSを理解してデザインしないと「空き」の設計が破綻したりコーディングで苦労することになります。FigmaやAdobe XD、Affinity Designerなどのグラフィックアプリでline heightの扱いが異なるので、使うツールの挙動を理解するのも大切です。 ということで、今回はCSSのline-heightについてまとめてみます。 実は調べれば調べるほど奥が深いCSSのline-heightの世界ですが、まずは基礎からまとめていこうと思います。 目次 以下はページ内のセクションへのリンクです。 CSSのline-heightでは文字の上下にスペースができる ウェブで使われるハーフ・レディングとは 印刷とウェブにおけるレディングの違い デザインツールでのline heightの扱いの違い 上下のハーフ・レディングを帳
頭の良し悪しにかかわらず脳がだまされてしまう“錯視”（関連記事）の独創的な表現を決定する「ベスト・イリュージョン・オブ・ザ・イヤー・コンテスト」にて、「シュレーダーの階段」の動画が選ばれました。 錯視オブザイヤーとなった「立体版シュレーダー階段図形」 （画像はYouTubeより） 優勝したのは、明治大学で「錯覚／錯視」を研究する杉原厚吉さんが手掛けた「立体版シュレーダー階段図形」。杉原さんは過去にも優勝経験があり、上位入賞の常連。今回優勝した作品では、図を上下反転すると階段の最上段が一番下に逆転して見えるという、150年以上前から知られている「シュレーダーの階段図形」を立体で表現しました。 （画像はYouTubeより） 180度回転しても見た目はそのまま（画像はYouTubeより） 動画では錯視を分かりやすく体験できるように、目印となるコーンを「最上段」に設置。2次元の図を見るだけでも不思
こんにちは、よしこです。 株式会社ナレッジワーク というスタートアップで、2020年4月の創業時から一人目のフロントエンドエンジニアをしています。 初期に考えて組み上げたスタックで1年半ほど開発・運用してみて、なかなか快適に日々開発ができているので 新規開発のプロダクト立ち上げ時にどのようにフロントエンドを構築したのか？ 立ち上げから1年以上開発・運用を続けてきた今、それらの選択はどうだったのか？ を記事にして振り返り、公開したいなと思いました。 （プロダクトの内容はステルスで進めていてあまり対外的な発信ができないので、かわりに技術的なところはどんどんオープンにしていきたいなという気持ちがあります） いろいろな項目ごとに振り返りたいので、この記事は各項目を横断するindexとして項目ごとの概要を簡単に説明し、深堀りは項目ごとに追って詳細な記事を書いていく予定です！ 前提 プロダクトとしての
& how to analyze design choices without jumping to conclusions Over the years, I have had many encounters with Japanese websites — be it researching visa requirements, planning trips, or simply ordering something online. And it took me a loooong while to get used to the walls of text, lavish use of bright colors & 10+ different fonts that sites like this one throw in your face: Hankoya — a website
この記事では、2021年に公開された便利なWebオンラインツール・ベスト100個+をまとめてご紹介します。 定期的にリストアップしている最新オンラインツールまとめ記事では、2021年にかけて合計338個の新しいツールやサービスを紹介してきました。 その中でも、特にWebデザイン制作に便利なツールを選りすぐったコレクションで、「無料で利用できるツール」を揃えています。 これらのツールやサービスを活用すれば、Webデザイン制作をより快適に進めることができるでしょう。 カテゴリごとに整理しているので、目的にあったお気に入りツールを探してみましょう。 コンテンツ目次 1. CSSツール（11個） 2. パターンツール（3個） 3. イラスト系ツール（9個） 4. デザインツール（17個） 5. 配色ツール（7個） 6. グラデーションツール（12個） 7. SVGツール（9個） 8. スクリーンシ
CSSの便利ツールが登場！ レスポンシブ対応のフォントサイズを超簡単に定義できる -Modern Fluid Typography Editor
Webサイトをレスポンシブ対応にする時、フォントサイズをさまざまなスクリーンに最適なサイズにします。スマホ用のfont-size、デスクトップ用のfont-sizeを定義するのも一つの方法ですが、font-sizeの最小値と最大値とその間の値を流動的にするclamp()を使用すると簡単に定義できます。 CSSでレスポンシブ対応のフォントサイズを超簡単に定義できるオンラインツールを紹介します。 最近のやり方としてはvw, calc()を使用したフォントサイズの定義などがありますが、clamp()を使用するとかなり簡単です。最小値と最大値を決め、その間の変化の度合いも変更でき、もちろん日本語フォントのfont-sizeでも大丈夫です。 Modern Fluid Typography Editor Modern Fluid Typography Editor -GitHub Modern Flu
フロントエンド初心者が無事に Hugo のブログを Gatsby で一から作り直すことができた。その振り返り。 歴史 インターネットを小中学生(もはや 25 年以上前)に触り初めた頃に、HTML で文章の構造を作り CSS でデザインする、ということができるのを知って感動したけど、結局自分には何かが合わなくてそれを突き詰めることができなかった。というか、それを知ったが故にテーブルレイアウトとかがどうしても気に入らず、かといって CSS は float が難しすぎて、結局ウェブサイトを作る、という根本的な営みをずっと避けてきてしまった。 時は過ぎ、Wordpress の様なブログエンジンや Hugo の様な仕組みがあったおかげでブログを初めて続けることはできた。13 年前にレンタルサーバに Wordpress を置いて始めたこのブログも 9 年前には VPS での Wordpress 運用に
「エンジニアリングに興味があるデザイナー、デザインに興味があるエンジニア Advent Calendar」20日目の記事です。 今年の５月から、社内でクライアントワークのチームから自社事業のチームに異動し、映画・ドラマ・アニメのレビューサービスのFilmarksで有料会員機能のPMを担当しています。 以前はUIデザインやアプリ開発、あるいはその中間的な仕事としてプロトタイプ開発やディレクションなどを経験してきました。 PM業の傍ら、社内のデザイナーとエンジニアの受け渡し部分の改善に取り組みました。その検討過程について紹介します。 要件定義・UIデザイン・開発間のワークフロー改善もともとFilmarks内ではディレクターがGoogleスライドなどで要件資料とGithub Issueをつくり、 デザイナーがSketchでUIをつくりZeplinで書き出したURLをエンジニアに受け渡し、エンジニ
VS CodeのAdobe XD用拡張機能が登場！ デザインシステムにもとづきコード出力と補完が可能に Microsoftが開発を行っている無償のエディター「VS Code」にAdobe XD用の拡張機能「Adobe XD extension」が登場しました。 この拡張機能を使うことで、Adobe XD上で作成したデザインアセットをVS Code上で参照・編集できるようになります。デザイナーとエンジニア間の溝を埋めることができ、デザインシステム構築のハードルが下がるでしょう。 今回の記事では、「Adobe XD extension」の活用方法を紹介します。コーディングの際に活躍する拡張機能ではありますが、Adobe XDを使ったデザイン段階でのひと工夫も必要になりますので、デザイナーの方も理解しておくとプロジェクトの進行がスムーズになるでしょう。 「Adobe XD extension」と
CSSでfont-sizeをレスポンシブ対応にする最新テクニック！ clamp()関数で定義する便利ツール -Min-Max Calculator
Webサイトをレスポンシブ対応にする時、メディアクエリを使用するのも一つの方法ですが、CSSのclamp()関数を使用すると、最小値と最大値を定義してその間の値は流動的にすることができます。 たとえば、小さいスクリーンでは最小値の16px、スクリーンが大きくなるにつれ、最大値の24pxになるまで少しずつ大きくなる、という感じです。 このclamp()関数を使用して、CSSでレスポンシブ対応のフォントサイズやレイアウトを簡単に定義できるツールを紹介します。ツールはオンラインでも、ローカルでも利用できます。 Min-Max Calculator Min-Max Calculator -GitHub Min-Max Calculatorの特徴 Min-Max Calculatorの使い方 Min-Max Calculatorの特徴 Min-Max Calculatorは、レスポンシブ対応にする時
Figma for VS Codeを使ってCSS実装する時のおすすめポイント - Goodpatch Tech Blog
Goodpatchエンジニアの池澤です。デザインツール「Figma」のスタイルや値を、テキストエディタ「VS Code」上で閲覧できる「Figma for VS Code」機能拡張が2023年6月よりFigma公式から提供されています。 この記事ではその「Figma for VS Code」について、実際に試して感じたことをまとめてみました。 ※ Figma Dev ModeやFigma for VS Codeはまだベータ版で動作保証されておりません。また本記事の内容は個人が趣味で検証したことをご理解の上、自己責任にてご利用ください。 Figma for VS Codeとは 主な使い方 使用時のワンポイント Point1： Figmaのトークンの名前と値が確認できる Point2： FigmaのSectionやReady for devマークの有無はあまり気にしなくて良い Point3：
UIのフォントサイズ、マージン、コンポーネントで黄金比や白銀比によるバリエーションを簡単に作成できるツール -Proportio
UIデザイン用にフォントやアイコンのサイズ、スペース、角丸、シャドウ、パディング、コンポーネントなどで比例スケールを使用したバリエーションを簡単に作成できるオンラインツール（ローカルも可）を紹介します。 たとえば、黄金比でフォントサイズを設計したり、白銀比でコンポーネントを設計したり、ということができます。また、作成した比例スケールは、CSSで書き出されるのですぐに使用できます。 Proportio Proportio -GitHub Proportioの特徴 Proportioの使い方 Proportioの特徴 Proportioはデザインシステムに必要となるタイポグラフィ、スペースや角丸やシャドウなどのシェイプ、コンポーネントに使用する比例スケールを簡単に作成するためのツールです。 パラメトリックデザイン（変数を基準としてサイズを決める形状作成方法）を採用しているので、体系的なデザイン
この記事では、普段のホームページ制作で直面しがちな課題を解決するCSSテクニックをまとめて紹介しています。 クライアントからの要望も多いCSSの小技テクから、「これがCSSだけでできるの？」と疑いたくなるような最新の使い方まで、実例やサンプル用ソースコードと一緒に確認できます。 ここで紹介されているCSSテクニックを利用すれば、これまで頭を抱えていた問題や課題も、一発で解決できるかもしれません。 コンテンツ目次 1. 入力フォームをカスタマイズしたい 2. ナビゲーションメニューを使いやすくしたい 3. ボタンを目立たせたい 4. リンク用エフェクトにこだわりたい 5. スクロールバーをサイトの色で統一したい 6. ドロップシャドウの影にもこだわりを 7. グラデーションをビンテージ風にしたい 8. CSSで要素を中央寄せする5つの方法 9. ブラウザごとのデザインのずれを防ぎたい 10.
UXライティングとは | UXライティングガイド
UXライティングとは何か UXライティングとは、ユーザーがデジタルサービスを操作する際に必要となるテキストを書く技術です。例えば、登録時のスタートガイド、利用の流れコンテンツ、タイトル、ボタン、画面上の説明文、エラーメッセージ、通知などの言葉がUXライティングの手法に則って書かれます。サービスの中にある言葉に対して「意味が通じればいい」という思想で書くのではなく、「ユーザーがサービスを通じて体験する一連の経験を設計する」という思想で書くのがUXライティングです。 UXライティングに求められる技術とは UXライティングには、分かりやすく書く技術と、人間らしく書く技術が必要です。この二つの技術が同居することによって、ユーザーの体験を支援することができます。 分かりやすく書く技術 UXライティングの手法に則ってテキストを書く際に求められるのは、「ユーザーの気持ちに沿った文章を書く」という抽象的な
UX/UI Design: Growing List of Top Resources (last update 02/2023)
A list of my favourite design resources. Everything that makes your life easier, from UX research to the perfect mockup. Instead of hiding it in the usual Google Doc, from now on it will live here on Medium and will be updated every time I find another little gem. So make sure to subscribe! By the way, this is not about quantity but quality. This list is from my personal point of view and everyday
Browser compatibility A primary reason so many CSS features are set to cooperatively release is due to the efforts of Interop 2022. Before studying the Interop efforts, it's important to look at Compat 2021’s efforts. Compat 2021 The goals for 2021, driven by developer feedback via surveys, were to stabilize current features, improve the test suite and increase passing scores of browsers for five
音楽、数学、タイポグラフィ
先日開催された「フロントエンドカンファレンス福岡2019」で、「音楽、数学、タイポグラフィ」というプレゼンテーションをする機会をいただきました。ここにその内容を再構成して掲載します。 みなさんこんにちは。今日の僕の話のテーマは「タイポグラフィ」です。まず最初に、そもそもタイポグラフィとは何なのかということからお話ししたいと思います。タイポグラフィというのはよく耳にするキーワードではありますが、じつはかなり誤解も多いのではないかと僕は考えています。 PxHere Typography from Hermann Esser’s (1845–1908) Draughtsman’s Alphabet, from rawpixel’s own antique edition 00030.jpg たとえば、GoogleやTwitterやなんかで「タイポグラフィ」というキーワードで検索すると、手描きによ
最近よく使用されているCSSの実装テクニック！ レスポンシブ対応のフォントサイズをclamp()で超簡単に定義できるツール -clamp() Calculator
フォントのサイズをレスポンシブ対応にする際、最近よく使用されている実装方法がclamp()関数を使用した流体タイポグラフィです。CSSのclamp()関数を使用すると、ビューポートをベースにしてフォントサイズの最小値と最大値を定義してその間の値を流動的にすることができ、デバイスのスクリーンサイズが増えた現在に欠かせないテクニックです。 たとえば、小さいスクリーンでは最小値の16px、スクリーンが大きくなるにつれ、最大値の24pxになるまで少しずつ大きくなる、という感じです。メディアクエリは一切不要なので、たった一行で全サイズを設定できます。 CSSのclamp()関数を使用して、レスポンシブ対応のフォントサイズを超簡単に定義できるツールを紹介します。 clamp() Calculator clamp() Calculatorの特徴 clamp() Calculatorの使い方 clamp(
Reactアプリを作成 Material-UIで管理画面を作るためのベースとなるReactアプリを作成します。 Create React App Create React Appで新しいReactアプリを作成します。 npx create-react-app react-material-ui-sample --typescript プロジェクトのディレクトリへ移動して実行します。 cd react-material-ui-sample npm start ブラウザにReactアプリが表示されます。 ディレクトリ構成 ディレクトリはあまりネストさせすぎずシンプルな構造にしました。コンポーネントの分け方はAtomic Designを参考にしています。 src/ ├ components/ │ └ atoms/ # 原子（個々のパーツ） │ └ molecules/ # 分子（原子の集合体）
ブックマークしておくと便利！ Tailwind CSSで実装された最新のUIコンポーネントライブラリ -Sailboat UI
// tailwind.config.js const defaultTheme = require("tailwindcss/defaultTheme"); const colors = require("tailwindcss/colors"); module.exports = { content: ["./src/**/*.{html,js}"], theme: { extend: { // Set font family fontFamily: { sans: ["Inter", ...defaultTheme.fontFamily.sans], }, // Set theme colors (Required config!) colors: { primary: colors.blue, secondary: colors.slate, }, }, }, // Add plu
Chatworkテックリードが“今”の自分に集中してきた理由。Scala×DDDに出会い、サービス改善に生かすまで - Findy Engineer Lab
自分が気づいてなかった資質を、探して、磨く 劣等感に消耗するより、目的志向で考える オープンソースコミュニティへの参画 ドメイン駆動設計とScalaが「点」となる ドメイン駆動設計との出会いと成果 遅延評価的学習法でScalaを習得 Scalaを使ってDDDを実践するスタイルを確立した 実験的に導入して結果が出れば業務での普及も進む 積み上げてきたScalaとDDDの開発スタイル Scalaコミュニティとともに 新しい挑戦で新しい「点」ができ、そして「線」につながる 「いずれどこかで点がつながって実を結ぶだろう」 過去も未来も思い切って手放し、今の自分に集中する こんにちは、Chatworkでテックリードをしている、かとじゅん（@j5ik2o）です。 今年（2020年）で48歳になりましたが、技術に前向きになったというか、本気を出したのは37歳ごろでした。遅いな……（笑）。まぁ、遅い早いが
この記事では、Webデザイン制作に便利なコピー＆ペーストで実装できる最新HTML/CSSスニペットをまとめてご紹介します。 一般的に「切れ端、断片」といった意味をもつスニペット（英: Snippet）は、ウェブサイトなどのプログラミングで簡単に切り貼り、再利用できる部品、コンポーネントを指します。 これらのスニペットを利用すれば、最新のウェブデザインテクニックを手軽に実現、楽しむことができます。今後のウェブ制作に活用してみてはいかがでしょう。 ここでは、カテゴリー別に分けて新しいオンラインツールをまとめています。 コンテンツ目次 1. テキストエフェクト系 2. イメージスライダー系 3. ナビゲーションメニュー系ト 4. ローディングアニメーション系 5. ページレイアウト系 6. ボタンエフェクト系 7. 便利、面白系スニペット 「Run Pen」をクリックすることで読み込みが開始され
海外サイト Speckyboy.com で公開された Our 50 Favorite CSS Libraries, Frameworks and Tools from 2019 より許可をもらい、翻訳転載し、さらにオススメCSSツール15個を追加しています。 2020年がスタートし、ここ数年で急速な進歩を続けているCSSは、さまざまなオープンソースのツールがリリースされています。 CSSライブラリやフレームワーク、オンラインツールを利用することで、サイト制作の時間を節約、短縮できるだけでなく、新しいテクニックやプロパティなどに関しては、学習用ガイドラインも多数公開されています。 今回は、2020年に注目したい最新CSSツール、リソースガイド65個をまとめてご紹介します。これからCSSを本格的に学ぶひとも、普段からバリバリでCSSを使いこなしているひとも、一度は確認しておきたい内容となってい
CSS カスタムプロパティによる流動的フォントサイズ
はじめに 画面幅に対して流動的にフォントサイズを変化させたい場合、vw などの単位を用いると実現できます。たとえば font-size: 5vw; を指定すると、幅 960px ではフォントサイズは 48px、幅 320px では 16px になります。しかし、320px で 16px は小さすぎるので 32px にしたいとなると、計算が必要になってきます。 この計算方法や流動的フォントサイズのさらなる詳細については、以前登壇したときの資料をご覧いただきたい 👇 資料にもございますが、計算して CSS を出力してくれるアプリも作っています 👇 Sass の mixin もあります 👇 今回は、calc() clamp() min() max() と CSS カスタムプロパティを駆使して、自分で計算する必要がなく、Sass なども不要で CSS のみでの実装を紹介いたします。 使い方と
デザインを何もしらないエンジニアがDailyCocoda！を3ヶ月かけて完走したので、1日目の自分にアドバイスする その１ 概要編 - Qiita
デザインを何もしらないエンジニアがDailyCocoda！を3ヶ月かけて完走したので、1日目の自分にアドバイスする その１ 概要編 ３ヶ月やるとどうなるか Daily Cocoda 1日目 初心者丸出しのデザインですね。丸アイコンの画像が大きすぎたり、ピンクの背景色と白の文字色があってなかったり､パディングとマージンがおかしかったりしています。 ちなみにネットでよく見かけるこのアイドル（茜さやさん）は、フリー素材で、ぱくだそさんから取得してきました。 Daily Cocoda 50日目(最終日) 50日目は初日からの成長を感じさせるいい感じのデザインですね。 諸注意 このページはデザイン一日目の自分を対象にしています。 デザインシステムはマテリアルデザインを採用しています。 オレオレ流です。間違いも多々あると思いますので、指摘お願いします。 ここでいう３ヶ月とは、6H/日 * 90日です。
みんなで使えるデザインガイドライン「SmartHR Design」ができました｜SmartHRオープン社内報｜株式会社SmartHR
※ 2020年 9月 3日 追記 デザインシステム「SmartHR Design」がお引越し&アップデートしたため、最新情報はこちらからご覧ください。 おつかれさまです。コミュニケーションデザイングループのさめまる（@samemaru_saxo）です。 このたび、だれでも！効率よく！SmartHRらしく！表現できるのを目標とした、デザインガイドラインができました！ ▶️ SmartHR Design https://smarthr.design （2020年9月3日更新） 社外の方でもどなたでも読めるように一般公開しています。 SmartHR Design とは SmartHRでは、資料やスライド、オウンドメディア、このオープン社内報など、日々どのメンバーもばしばしアウトプットしています。中には見た目のデザインが必要なものもありますが、どれもデザイナーに依頼して作る余裕があるとは限りません
ノンデザイナーズ・Wantedly デザインシステム完全理解ペーパー | Wantedly Engineer Blog
Wantedly では新卒含む新入社員向けに研修を毎年実施しています。これは「新入社員向け」といいつつ既存の社員も自由に参加できるものです。今年はこの研修のフォーマットを借りて、Wantedly のプロダクト開発を支える重要な概念のひとつである「Wantedly の UI デザインシステム」についての研修を、ソフトウェアエンジニアの @izumin5210 (筆者) とプロダクトデザイナーの @NishaMe で実施しました。 デザインの構造を正しく捉えることは、UI の実装を専門にしているかどうかを問わず、正しい実装 - 開発生産性が高く、ユーザにとっても使いやすい実装 - のための重要なポイントです。よってこの研修は「広義のフロントエンドエンジニア」、業務中に UI を実装することがある全てのエンジニアを対象としました。 Web フロントエンドエンジニアモバイルエンジニア専門ではないが
「オーバーシュート overshoot」なる用語について（この用語で「爆発的な感染拡大」を言う英語の実例がほとんど確認できない件）
中途半端な英語使いが英国からのニュースを東京で読み、あちこちふらふらうろうろ。時々嘘。 はてブ = http://b.hatena.ne.jp/nofrills Twitter = http://twitter.com/nofrills Twitterのログ = http://twilog.org/nofrills ◆「なぜ、イスラム教徒は、イスラム過激派のテロを非難しないのか」という問いは、なぜ「差別」なのか。（2014年12月） ◆「陰謀論」と、「陰謀」について。そして人が死傷させられていることへのシニシズムについて。（2014年11月） ◆知らない人に気軽に話しかけることのできる場で、知らない人から話しかけられたときに応答することをやめました。また、知らない人から話しかけられているかもしれない場所をチェックすることもやめました。あなたの主張は、私を巻き込まずに、あなたがやってください
Next.js + Tailwind UI を使うとたった6時間で技術ブログのプロトタイプを作れる - パンダのプログラミングブログ
Gatsby から Next.js に載せ替えた動機 本ブログを Next.js でリニューアルしました。 元々このブログは Gatsby で作っており、2019年3月にリリースしましたが（最初の投稿）、ついに Next.js に移行しました。移行のモチベーションはバージョン追従を避けたこと、デザインを一新したいこと、また記事が表示されないというバグが発生する事象があったことです。 まず Gatsby のバージョンアップについて。現在、Gatsby の最新バージョンが4系です。しかし、自分が使っていたテンプレートは3年前に1系から使い始めて、2年前に2系にバージョンアップしました。その後、自分は業務と個人開発で Next.js を使い始めたため、このブログでしか使っていなかった Gatsby の情報を追うのを止めて、記事だけ追加する運用をしていました。 その頃にはバージョンアップをするより
ContentsHTMLCSSWeb APIsJavaScriptWeb AppsMediaPrivacySecurityWKWebViewSafari Web ExtensionsWeb InspectorFeedbackAnd More With over 70 additions to WebKit, Safari 15.4 is packed with new web technologies, updates, and fixes. We’ve assembled a huge release as part of our commitment to web developers, and the people who use the web. This is the first big WebKit release of 2022, and we’re just getting
Hello Web Design
Read it now on the O’Reilly learning platform with a 10-day free trial. O’Reilly members get unlimited access to books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers. Hello Web Design teaches design principles, handy shortcuts, and quick solutions to common problems, so you can learn the fundamentals of design and get ahead in your career. Using rea
2019年も残すところわずかとなり、今年もWeb制作を快適にするオンラインツールがたくさん公開されました。 この記事では、今年紹介したツールのなかでも特に話題になった2019年の便利オンラインツールベスト85個をまとめてご紹介します。 実際に制作フローに取り入れて便利だったツールを選りすぐったこのコレクションには、「無料で利用できることを基本としたツール」を揃えています。これらのツールやサービスを活用して、より快適なWeb制作ライフを過ごしましょう。 2019年に登場した最新オンラインツール一覧 以下は、2019年にかけて当サイトで紹介した、ウェブ制作が捗る便利ツール一覧となります。今回未紹介のツールが中心となっているので、こちらも一度目を通しておくことをオススメします。 ウェブデザイン制作が爆速に！便利な最新オンラインツール47個まとめ ウェブデザイン制作が加速中！便利な最新オンラインツ
こんにちは、たかとーです。 今日はTailwind CSS Resources you wish you had. - DEV Community 👩💻👨💻の日本語訳記事です！ 当記事は、Janeさんの許可を得て翻訳しています。Tweet Tailwind CSS Resources you wish you had. Tailwind CSS リソース 私が学んでいたときに役に立ったいくつかのリソースをリストアップしていきます。それらをあなたのリストに追加したり、すでにある場合は、それらを使い続けてください。 1) TailwindInk ブランドカラーを選ぶと、補色のリストを生成してくれるカラージェネレーターサイトです。カラーコードはTailwindのconfigファイルに簡単にコピーすることができます。 2) Tailblocks この素晴らしいプロジェクトはMert C
こんにちは、たかとーです。 今日はTailwind CSS Resources you wish you had. - DEV Community 👩💻👨💻の日本語訳記事です！ 当記事は、Janeさんの許可を得て翻訳しています。Tweet Tailwind CSS Resources you wish you had. Tailwind CSS リソース 私が学んでいたときに役に立ったいくつかのリソースをリストアップしていきます。それらをあなたのリストに追加したり、すでにある場合は、それらを使い続けてください。 1) TailwindInk ブランドカラーを選ぶと、補色のリストを生成してくれるカラージェネレーターサイトです。カラーコードはTailwindのconfigファイルに簡単にコピーすることができます。 2) Tailblocks この素晴らしいプロジェクトはMert C
こんにちは、GaudiyデザイナーのTORAJIRO（@jirosh1998）です。 『英単語アプリ mikan』の副業デザイナーとして、Figmaリファクタリング&デザインシステムの一歩目を構築した話を書こうと思います。 このnoteの最後に、今回作成した『mikan DesignSystem』のデータを公開していますので、ぜひご覧ください👋（mizoさんをはじめmikanのみなさん、具体的なアウトプットの公開まで許可いただき感謝です！心広すぎ！） 読んで欲しい人 - これからチームでデザインシステムを作っていきたい - コンポーネントライブラリをFigmaで構築したい - Figmaをリファクタリングして、デザイナーの作業効率を上げたい デザインシステム本題に入る前に、このnoteで書いている「デザインシステム」の定義について触れておきます。デザインシステムとは「良いデザインを『効率
Modern CSS For Dynamic Component-Based Architecture | Modern CSS Solutions
Modern CSS For Dynamic Component-Based Architecture Updated on: Jan 19, 2024 Written by Stephanie Eckles The language of CSS has had an explosion of new features and improvements in the last few years. As a result, feature parity between browsers is at an all-time high, and efforts are being made to continue releasing features consistently and synchronously among evergreen browsers. Today, we will
こんにちは、THECOO株式会社のpoteboyと申します。普段は現職１人目のWEBフロントエンド開発者としてFaniconというファンコミュニティサービスの開発を行っております。 弊社では私が入社する以前までフロントエンド専任の開発者がおらず、サーバーサイドの開発者やAndroidの開発者がフロントエンドの開発業務を兼務していました。 専任がいなかったのは、Faniconが元々ネイティブベースのアプリで、WEBアプリの開発優先度を下げていたためです。 そのため、フロントエンドの開発環境に関しても万全とは言えず、2022年6月に私が入社し、9月には2人目のフロントエンド開発者となるTomoya氏が入社したタイミングで、2人で協力してFaniconフロントエンドの大改修を行なうこととなりました。 フロントエンド改修業務にはTypeScriptの導入、既存コンポーネントのVue３化、単体テスト
Almost exactly 18 months ago we released Tailwind CSS v1.0, which signalled a commitment to stability while continuing to push the boundaries with exciting new features in every minor release. Over the course of those 18 months we released nine minor versions that added features like placeholder styling, screenreader visibility, CSS grid, transitions, transforms, animations, layout utilities, inte
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
この記事の元の本編は削除しました。｜樫田光 | Hikaru Kashida｜note
「GoogleFonts」へディスプレイ書体など全8書体を提供しました | Fontworks
階段を上ったはずが降りていた 錯視オブザイヤー2020は日本人制作の「シュレーダーの階段」が優勝
2020年に立ち上げたWebフロントエンド構成の振り返り
Why Japanese Websites Look So Different
Web制作を変える！2021年の便利オンラインツール・ベスト100選
フロントエンド初心者がGatsbyでブログを作り直した話 - As a Futurist...
デザイナーとエンジニアを巻き込んだワークフローの改善｜鈴木慎吾 / TSUMIKI INC.
VS CodeのAdobe XD用拡張機能が登場！デザインシステムにもとづきコード出力と補完が可能に - ICS MEDIA
よくあるWeb制作の悩みをCSSで解決！最新テクニック40選まとめ
State of CSS 2022 | Blog | web.dev
React + Material-UIで管理画面を作成してみた | DevelopersIO
最先端Webテクはこれ！コピペできるHTML/CSSスニペット77個まとめ
超便利！確認しておきたい最新CSSツール、リソースガイド厳選65個 2020年度
New WebKit Features in Safari 15.4
2019年間ベスト！Web制作を変える便利オンラインツール厳選85個
全米が待ち望んでいた超便利なTailwind CSSツール10選 - Qiita
全米が待ち望んでいた超便利なTailwind CSSツールリスト
Figmaのリファクタリングからはじめるデザインシステムの構築｜TORAJIRO
デザインシステムに準拠したコンポーネント駆動UI開発への取り組み
Tailwind CSS v2.0 - Tailwind CSS