ここ1~2年くらいで 使えるようになった(主要ブラウザーの最新版 がすべて対応した ) ウェブの新機能について ランダムに喋る!
2024.03.15 福岡フロントエンド勉強会 #1
日本語の文章とline-heightに対する考察 - Qiita
行送り（line-height）の世界基準 アクセシビリティのスタンダードであるWCAG「達成基準 1.4.12: テキストの間隔を理解する」では、行送りの最低値を1.5と定めている行送りを1.5にした場合でもデザインが破綻しないように促している（@SaekiTominagaさんのご指摘で解釈を誤っていたことが発覚。修正いたします）。しかし世の中のホームページには、リセットCSSを変更していなかったり（あくまでブラウザ間の差異を無くすためのものであり、スタイルを後付けすることが推奨されているわけだが、そもそもどうしてアクセシビリティ基準を守らないんだろうか？1 ただ、sanitize.cssなど、line-heightがちゃんと1.5と設定されているリセットCSSもちゃんと存在する）、古いBootstrapをそのまま使っていたりして、line-heightが狭いのが割とある。そんな場合でも
デザインで余白を活用 するヒント - Shutterstock Blog 日本語
こちらの記事では デザインで余白を活用 するヒントをお届けしております。 デザインにおいて余白は「何もない」ことで逆に「あるもの」を引き立てます。 こちらの記事を参考にデザインで余白を活用し、魅力的な作品で顧客を惹きつけましょう。
LINE社員1,361名の"色覚に関するアンケート"
LINE株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。 LINEヤフー Tech Blog はじめに こんにちは。フロントエンド開発センター UIT Accessibilityタスクフォース 岡﨑です。私たちは、Webサイトのアクセシビリティに関するガイドラインの策定・推進、社内に向けたアクセシビリティの勉強会やe-ラーニングを通じて、LINEとそのファミリーサービスのアクセシビリティ向上を目指しています。 色に対する配慮 アクセシビリティの国際規格となっているWCAGでは、テキストにおける色の取り扱いで以下のことが求められています。 色に依存した表現にしないこと コントラスト比を確保すること なぜ、色に対する配慮が必要なのでしょうか？ 困っているのはロービジョンユーザーだけではない LINE STYLEの"Alwa
建築・風景 | Ukiyoe Stock
素材検索はこちら ↓複数条件検索できます。（検索文字列よりもプルダウンから選択するほうがヒットしやすいです。）
イラストレーション・アイコン素材｜デジタル庁
素材集の活用で、行政手続きをもっとわかりやすく専門的でわかりにくい行政手続きの改善へマイナンバーに関連するデジタル手続は専門用語が多く、イラストレーションやアイコンなどを活用して、ひと目でわかりやすく伝える必要があります。しかし、これまでは政府として公式に配布する専用の素材がありませんでした。 そのため、地方自治体や民間サービスの方々が独自に作成する必要があり、表現が伝え手によってバラバラになる課題を抱えていました。 コストを抑えて、わかりやすい表現が可能にイラストレーションやアイコン素材の作成には、専門的な知識と多くの時間が必要です。視認性が高く保たれているか？ 日本に暮らす人、訪れる人が理解しやすい表現になっているか？ など、さまざまな検討事項があります。どなたでもご利用できる素材を配布することで、別々の機関が同じものを制作したり、検討する時間を省くことができます。 また同時に、素材制
独立行政法人 中小企業基盤整備機構
“デザイン活用支援 ”をテーマに、支援者に必要なデザインの基礎知識や支援ノウハウ、支援の流れなどをテーマ別に掲載しています。 テキスト・資料 支援担当者に必要なデザインの基礎知識と、支援ノウハウ、支援の流れについて解説しています。役立つツールも提供しています。 ご案内／デザイン支援の基礎 （932KB） 商品開発とデザイン （1.4MB） デザイン活用支援の流れ「支援ツールの活用」 （722KB） デザイン活用支援のポイント （1.3MB） デザイン活用支援の事例研究 （1.4MB） デザイン活用支援ツール （1）企業概要・デザイン相談シート （182KB） （2-1）デザイン活用度チェックシート （100KB） （2-2）デザイン課題・整理シート （156KB） （3）デザイン活用支援計画シート （74KB） （4）デザイン開発・進捗チェックシート （183KB） （5）フォローアップ計
都合の良いUIデザイン〜わがままで怠惰で理不尽なユーザーのニーズに応える10のポイント〜｜SOMPO Digital Lab デザインチーム
こんにちは、SOMPO Digital Labデザインチームのデザイナーの金（https://twitter.com/seikei_kin）です。普段はUIデザイナー・ウェブデザイナーとしてサービスやプロダクトの開発・設計に携わっています。 突然ですが、みなさんは真面目で、協力的で、積極性があって、物覚えがよい方でしょうか？あるいは最新のアプリの動向に詳しく、それらを使いこなせるリテラシーを十分にお持ちでしょうか？ 果たして自分はどうかと振り返ってみると、少なくとも自信をもってそうであるとは言えないのが正直なところです。なまけものかつわがままで、物覚えや察しも良くなく、実際、馴染みのないウェブのサービスやアプリを利用する場合には、些細なことでつまづいたり悩んだりした結果、途中で嫌になり諦めてしまうこともしょっちゅうです。 そして、実は私のようなユーザーは決して少なくないのではないでしょうか
Stable Diffusion 2-1 - a Hugging Face Space by stabilityai
Discover amazing ML apps made by the community
ゲシュタルト原則（ゲシュタルトの法則） | UX TIMES
人間がゲシュタルト（形態）を見る際に、全体像から見て近くに並んでいるものを無意識にグループとして理解したり、閉じているものをセットで認識する傾向を言う。「ゲシュタルト」はドイツ語で「形態」を意味する。 1910年にチェコ出身の心理学者 Max Wertheimer マックス・ヴェルトハイマー らを中心に仮現運動というアニメーションの研究が始まる。それを基に1923年「ゲシュタルト原則」の基礎となる6原則（近接・類同・連続・閉合・共通運命・良い形）が発表された。 2つの思考モードとの関係 人間の脳には「直感的で速い思考（システム1）」と「論理的で遅い思考（システム2）」がある。（参照：2つの思考モード） 「ゲシュタルト原則」は形を全体像から直感的に捉えるということで、システム1に関連している。 グループと認識する要因は10以上ある ゲシュタルト原則は、無意識に見てしまう「見方」に関するさまざ
【noteに直接確認しました】noteの正社員イラストレーター募集について、私が問題だと考えたこと・感じたこと｜オオスキトモコ｜note
私はまず、この記事を読んで、上記記事の内容には、特に問題はないと思っていました。 【具体的な業務内容】 noteのサービス内外で使用するグラフィックの作成 具体的には・・・ ･noteのサービスを説明するイラストや、サービスのイメージを担うビジュアルなど幅広いグラフィックの作成 ･記事に必要なチャートなどの図版作成 ･ビジネスモデルを説明するインフォグラフィック制作等これ自体は、普通のグラフィックデザイナーの募集であり、昔からある、エディトリアルデザイン事務所でのダイアグラム、インフォグラフィックの仕事や、インフォグラフィックス系のデザイン事務所（チューブグラフィックスのような）、通信社（共同通信の「グラフィック記者」）・新聞社でのデザイナー（毎日新聞、朝日新聞、中日新聞等、各社に存在する）の職務内容に近いのではないかという印象を持っていました。noteとしては、NewsPicksの櫻田潤
Hugoで作ったサイトにシェアボタンを足した - AAbrain
今使っているThemeにシェアボタンが付いていなかったので自分で作ってみました。 Hugoがサイトをbuildすると、rootディレクトリとTheme内のディレクトリは統合されます。 そのためrootディレクトリに、Theme内と同じディレクトリ名でファイルを追加するとThemeのファイルに影響を与えずに読み込めるようになります。 例) ├── README.md ├── archetypes ├── config.toml ├── content ├── ... │ ├── layouts ├── static └── themes └── HugoTheme ├── layouts └── static 今回最終的に作るShare iconの完成形はこのようになります。 各SNSで用意されているhtml, jsのコードを並べる方法もありますが、今回はブログの雰囲気を壊したくなかったので
50 Projects for React & the Static Web
50 ProjectsFor React & The Static WebLearn by doing with this FREE ebook! Get the FREE EBOOK straight to your inbox. Email AddressGet It Freev1.0 Not sure what to build?Dive in with 50 projects complete with project briefs and wireframes! Learn by DoingOne of the best ways to learn is by doing the work. Choose from 8 project categories and get started right away.
Feed your Image via Atom or RSS | Perishable Press
This quick tutorial explains how to add images to both Atom and RSS feeds. Although both formats allow for image-inclusion, feed-reader support for image-display is currently quite limited in most browsers and applications. Hopefully, that will change in the near future.. Images for Atom Feeds Images included within Atom feeds must have a ratio of either 1:1 or 2:1. There are no other restrictions
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
デジタル庁デザインシステムβ版
Webサービス ロゴの15年
ドット絵ダウンロードサイト DOTOWN|無料の素材サイト
terminal
CSS: figures & captions
カンソクインダストリーズ - Kansock.Industries