Home
Language
English
Türkçe
Bahasa Indonesia
About
Privacy Policy
Terms of Service
Pricing
Sign In
Download All
Share
Yoshino|Webデザイナー
@y_weblab
デザインからコーディングまで、一貫して丁寧に制作いたします。ご連絡はDMからお願いいたします。
Joined July 2022
247
Following
175
Followers
1.7K
Posts
Pinned Tweet
Yoshino|Webデザイナー
@y_weblab
about 1 year ago
2025.04.11 沢山悩んで沢山時間かけて作成してきたポートフォリオ、ようやく完成です! https://t.co/ODeezSm5Rx ここからまた気合い入れてお仕事頑張ります!
#RaiseTech
#BuildUpDaily
y_weblab
retweeted
Yu Morita (yuu)
@securecat
8 days ago
Claudeがいちいちアクセシビリティ不考慮のコードを吐くので、逐一対応した結果、グローバルCLAUDE.mdからアクセシビリティ基準として参照している A11Y.md 、現状こうなっています。 ーーーーーーーーーーーーーーーーーーー # Accessibility Baseline (WCAG 2.2 AA) サンプルコード・テストコードを含む**すべてのコード出力**において以下を遵守すること。 WCAG 2.2 AA ぎりぎりではなく、**余裕のある水準**を目指すこと。このファイルに明示的な記載がある場合はその値を優先し、記載のない事項は WCAG 2.2 AA に基づいて判断すること。 --- ## アクセシビリティの哲学 アクセシビリティとは、基準のぎりぎりを狙ったり、基準の抜け道をくぐって省略したりするものではない。**できるだけ多くの人に恩恵があるようにすること**が目的である。 ### 「装飾かどうか」を決めるのは制作者ではない ある要素が「装飾的かどうか」を決める権利は制作者にない。閲覧者は誰もが、画面に表示されているものが何であるかを知る権利を等しく持っている。晴眼者も、弱視の人も、全盲の人も。制作者がその権利を「これは装飾だから対象外」という判断で奪うことは許されない。 ### WCAGの免除規定は現代に適合していない WCAGの免除規定のほとんどはWCAG 2.0(2008年)当時のブラウザの表現力・支援技術の機能・通信速度などを根拠に書かれており、現代の技術環境にはマッチしていない。「WCAGではこれは免除される」という理由を、基準を下げる根拠にしないこと。 視認できる要素はすべて、テキストであるか装飾であるかを問わず、コントラスト比の基準を満たすこと。 --- ## フォントサイズ - `lang="ja"` の文書:本文・注釈ともに **最小16px** - `lang="en"` の文書:本文・注釈ともに **最小14px** - 単位は `px` に限らず `rem` / `%` 等を用途に応じて使ってよい。最終レンダリング結果として上記サイズとすること - 見出し(h1・h2・h3 等)は本文より大きくすること。具体的なサイズは都度決める - ただし、ブラウザ拡張の `popup.html` においては、見出しサイズは本文と同じでよい - 本文と注釈の優先度の差は、フォントサイズではなく**コントラスト比**で表現すること(後述) --- ## コントラスト比(全般) コントラスト比は、実装方法によらず**最終レンダリング結果**で判定すること。`opacity` の重ね合わせ・`rgba()` / `hsla()` の透明度指定・`filter: opacity()` 等で色が薄まった場合も、実効コントラスト比がこの基準を満たしていなければならない。 `opacity` はデザイン上の明確な理由がある場合を除いて使用しないこと。テキスト・境界線・UIコンポーネントなど、コントラスト比が求められる要素に適用すると実効コントラスト比が下がるため。 --- ## コントラスト比(テキスト) - **本文**と背景のコントラスト比:**7:1 以上** - **注釈など優先度の低いテキスト**と背景のコントラスト比:**4.5:1 以上**(本文より淡い色にすること) - ライトテーマ・ダークテーマのそれぞれで独立して適合すること - ぎりぎりの確保を狙わず、余裕をもった色選定をすること --- ## コントラスト比(非テキスト) 境界線・区切り線・アイコンなど、**あらゆる視覚的要素**は隣接する背景色に対して **3:1 以上**を確保すること。ボタン・入力欄などの UI コンポーネントはもちろん、カードの枠線・水平線・装飾的なボーダーも同様に適用される。 余裕のある目安: - 白・明るい背景(`#fafafa` 相当)に対して:`#767676` 相当以上の濃さ - 黒・暗い背景(`#18181b` 相当)に対して:`#6e6e76` 相当以上の明るさ ボタン背景が薄くなる場合は、**`#949494` 以上の濃さのボーダー**で囲むことでコントラストを確保してよい。 ライトテーマ・ダークテーマのそれぞれで独立して適合すること。 --- ## CSS 変数の設計 - 「装飾的な区切り線・背景」と「UIコンポーネントの境界・インジケーター」を**同じ変数で兼用しない**こと - 装飾ボーダーが 3:1 を確保できない場合は、削除すること(低コントラストの装飾は弱視ユーザーに見えておらず、存在意義がない) --- ## フォーカス・リンク - フォーカスインジケーターを消さないこと(`outline: none` の安易な使用禁止) - リンクのアンダーラインを消さないこと - hover 時もアンダーラインを維持し、さらに**太くする**こと --- ## インタラクション - **トースト/スナックバー**は自動消去しないこと - 原則:操作結果は地の文章として表示する - トーストを使う場合は**閉じるボタン**を設け、ユーザーが閉じるまで表示を維持すること - **自動再生・自動スクロール・カルーセル等**の自動で動くものを作らないこと - ユーザー操作による動きはOK。ただし**いつでも停止できる**手段を提供すること --- ## キーボード操作 - すべてのインタラクションをキーボードで操作できるようにすること - `<div>` や `<span>` をボタン代わりに使わないこと - 画面内アクション → `<button>` - 画面遷移 → `<a>` - ファイルのドロップエリアを作る場合は、必ず **`<input type="file">`** も併設すること --- ## フォームコントロール - `<input>`・`<textarea>` の代わりに `contenteditable` な `<div>` を使わないこと - フォームコントロールは必ずネイティブ要素(`<input>`・`<textarea>`・`<select>` 等)を使い、見た目は CSS でカスタマイズすること
See More
Yoshino|Webデザイナー
@y_weblab
13 days ago
@yat8823jp
私は2日前に再発です🥲
y_weblab
retweeted
なつ
@Dia_Nexus
17 days ago
どう作ったか記事を書いてみた https://t.co/I6NF3cBvQw
Who to follow
実波
@minachil_
ハンドメイドショップつくったぞー!
アンダーソン@WEB制作とイギリスと私
@AndersonM_web
長崎県の地方に在住。イギリス人と国際結婚。2021年に出産の後会社員に副業。現在フルリモートで出来る職種に転職出来るようにプログラミング言語を毎日勉強中! (RaiseTech 2021.9月WordPress副業コース受講)
なえ @デザイナー
@naework11
デザイナー👨💻 元劇場マネージャー。普段は不動産チラシデザイナー。 RaiseTech/note始めました。https://t.co/YzBYpfpzwW
y_weblab
retweeted
たにぐち まこと/ちゃんとWeb withAI
@seltzer
24 days ago
https://t.co/VNUHmLToCY
y_weblab
retweeted
CeeBeeDee(CSS Nite/DTP Transit)
@ceebeedee_jp
6 months ago
Web制作(コーディング)の現場で、いまでは前提が変わりつつある考え方や手法について、長谷川喜洋さん、相原典佳さんに解説いただきます。 出演: ・長谷川 喜洋
@hiro_ghap1
・相原 典佳
@noir44_aihara
今回、取り上げる内容(予定) ・html { font-size: 62.5%; } は、いま積極的に採用すべき手法ではない(見直し対象) ・target="_blank" に対して「常に rel="noopener" が必須」という理解は誤り(前提と条件を整理) ・address は「住所を書くためのタグ」ではない(役割の誤解を解く) ・ファビコンは .ico 固定でなくてOK(現行の定番に合わせる) ・type="text/javascript" は不要(いまの書き方に統一) ・dvh はスマホ環境でレイアウトシフトの原因になり得る(使いどころに注意) ・outline: none; はしない(アクセシビリティの観点で整理) ・詳細度の「は1000点、. は10点、タグは1点」みたいな覚え方は誤解を招く(正しい理解に更新) ・変数宣言で var は使わない(let / const を前提に整理) 2026年2月27日(金)21:00 - 23:00 オンライン開催 #デジタルお焚き上げ 2026 Web制作(コーディング)の常識をアップデート https://t.co/Az6mPgHQdk
See More
Yoshino|Webデザイナー
@y_weblab
7 months ago
@ABECK_Q
すごいね👍
Yoshino|Webデザイナー
@y_weblab
8 months ago
@matsumatsu04
ロゴ
Yoshino|Webデザイナー
@y_weblab
8 months ago
@emiweb2
あらら、大丈夫?
y_weblab
retweeted
辻勝利
@KatsutoshiTsuji
9 months ago
Alt属性はあなたのお気持ちを表明するための無限に詰め込める魔法の箱ではありません|Katsutoshi Tsuji
@KatsutoshiTsuji
https://t.co/edsWFU2MhK
y_weblab
retweeted
せきゆおう🇯🇵Web制作とAIのことを発信する人
@wurst_design
9 months ago
意外と多いコーディング時の検討事項と、デザイナーにも事前に考えてほしいこと ---------- コーディング作業は、見た目の再現だけでなく、以下のような点も考慮しながら構築しています。 ・適切なマークアップになっているか ・表示速度への影響はどうか ・運用・保守のしやすさ ・可変領域のレイアウト変化の想定 などなど... 一つの要素を作るだけでも、実はかなり多くのことを考えています。 上記の中でも、下の2つはコーダーだけでなくデザイナーにも一緒に考えてほしい部分です。 「お知らせ一覧」の例で考えてみます。 このデザイン自体には特に問題はないのですが、コーダーは以下のような観点で設計を考えます。 [日付] ・文字数によって横幅が変わるな ・どの端末でも改行や崩れが起きないように構築しよう [カテゴリ] ・カテゴリって4文字以上が入る可能性は? ・CMSの場合クライアントが自由に追加できる? ・4文字を超える可能性があるなら固定幅はNG ※5文字以上入った場合の見た目はどうなる? [記事タイトル] ※タイトルの文字数が多い場合は? └[...]で省略する仕様? └2行にするのかな? └その場合は上揃え or 中央揃え? [可変領域] ・要素の横幅が700pxあたりで改行が入るな ◎540pxあたりでタイトルが窮屈になるけどよい? ※SPサイズになる前に、見せ方を変える必要がある? [その他] ※記事が存在しないケースはどう扱う? ・このテキストは音声で読み上げるべき? ・音声の読み上げが自然になってる? ※はクライアントやディレクターに確認が入ると思います。 ◎は確認が入らないケースが多いと思います。 このように、想像以上に多くの検討を重ねながらコーディングは行われています。その中に「見た目」に関する検討も含まれています。 コーダーの経験値から「いい感じ」に作ってくれる人もいますが、経験の浅いコーダーや、見た目作りが苦手なコーダーからは細かく確認が入ることが想定されます。 とくに、今回のようなケースでは、「カテゴリの文字数」や「記事が無い場合の表示」などは、コーダーだけでは判断が難しい項目です。 そのため、デザイナーやディレクターは、 「○○の場合はどうする?」といったパターンの想定をすることも仕事のひとつだと考えています。 これが、「Webデザイナーはコーディングができなくてよいけど、Webの仕様を理解するべき」の一例かなと、僕は考えています。
See More
Yoshino|Webデザイナー
@y_weblab
9 months ago
@okada71138777
それは良かった👍
Yoshino|Webデザイナー
@y_weblab
9 months ago
@okada71138777
あー、やってしまいましたね。 怪我はしていないの?
Yoshino|Webデザイナー
@y_weblab
11 months ago
@emiweb2
思わぬ出費だったねぇ
Yoshino|Webデザイナー
@y_weblab
about 1 year ago
@y_design_works
おおお、今見ました。 マーケと起業⁉︎ 新しい挑戦、応援しています!
Yoshino|Webデザイナー
@y_weblab
about 1 year ago
@y_design_works
早く治りますように! お大事にしてね🙏
Yoshino|Webデザイナー
@y_weblab
about 1 year ago
@Yuito_Kuroyama ほしい
Yoshino|Webデザイナー
@y_weblab
about 1 year ago
@yat8823jp
腰、やっぱりやっちゃいますよね。 お大事になさってください。
Yoshino|Webデザイナー
@y_weblab
about 1 year ago
@yuureto228364
おめでとう‼︎ 努力が実りましたね👍
Last Seen Users on Sotwe
عبير الشايقية بت امدرمان
Safirna Nurlela
Seen from
Singapore
Cmy-S
Seen from
Japan
Yadira Axl
Seen from
Germany
Porno Girl
Seen from
United States
Alpha Male NYC
Seen from
Turkey
om beo
Seen from
Indonesia
AMlM PEMBE
Seen from
Turkey
𝙢𝙞𝙮𝙪
Seen from
Brazil
Mehmet Güney
Seen from
Germany
Trends for you
1
Hornets
Under 10K tweets
2
Kasich
Under 10K tweets
3
All 20
Under 10K tweets
4
Springfield
Under 10K tweets
5
#SeductiveSunday
Under 10K tweets
6
DeWine
Under 10K tweets
7
Serves 10
Under 10K tweets
8
Morbius
Under 10K tweets
9
Geraldo
Under 10K tweets
10
Mel Brooks
Under 10K tweets
Most Popular Users
1
Elon Musk
@elonmusk
240.6M followers
2
Barack Obama
@barackobama
119.2M followers
3
Donald J. Trump
@realdonaldtrump
111.7M followers
4
Cristiano Ronaldo
@cristiano
110.5M followers
5
Narendra Modi
@narendramodi
107M followers
6
Rihanna
@rihanna
97.6M followers
7
NASA
@nasa
92.2M followers
8
Justin Bieber
@justinbieber
90.9M followers
9
KATY PERRY
@katyperry
87.6M followers
10
Taylor Swift
@taylorswift13
81.4M followers
11
Lady Gaga
@ladygaga
73M followers
12
Virat Kohli
@imvkohli
69.8M followers
13
Kim Kardashian
@kimkardashian
69.8M followers
14
YouTube
@youtube
68.7M followers
15
Bill Gates
@billgates
63.9M followers
16
Neymar Jr
@neymarjr
62.5M followers
17
The Ellen Show
@theellenshow
62.4M followers
18
CNN
@cnn
61.9M followers
19
X
@x
60.8M followers
20
Selena Gomez
@selenagomez
60.7M followers
Olivia
Online
✨
⭐
💫