すべての記事
-
車の免許を持ってない
車の免許を持ってない40歳男性の話。
-
アクセシビリティカンファレンスCHIBA2025
かつてのアドバイスを超えてカンファレンスを実現したやまりさんを見てアクセシビリティカンファレンスCHIBA2025にボランティア参加。やっぱりここに戻ってくるんだろうなー、と感じた。
-
退職して無職になりました
2025年6月に退職、現在無職です。適応障害で休職し、そのまま退職してましたが、今は回復傾向です。多分燃え尽きたんだと思います。2025年中はゆっくり休んで今後を考えようかなと。
-
overflow社でアクセシビリティとかUIをいい感じにするお仕事
overflow社でアクセシビリティとかUIをいい感じにするお仕事をはじめました。ポッドキャストにも出たので聞いてね。
-
BudouXを使ってフレーズ単位で改行する
BudouXのJavaScript moduleを使って、記事タイトルをフレーズ単位で改行した。少し違和感を覚える場合もあるけれど、簡単に試せるので良い感じ。
-
2021 ~ 2022
2021年の振り返りです。仕事、生活について振り返っています。転職が一番大きなできごとでしたかね。
-
Web24のアクセシビリティセッションでお話します #web24_a11y
Web24というイベントでアクセシビリティの議論をします。アクセシビリティセッションは5月7日の18:30から。UDトークのライブキャプションも提供します。
-
サイバーエージェントを退職してSmartHRに入社します
2020年2月末で約4年勤めたサイバーエージェントを退職してSmartHRのプロダクトデザイングループでデザイナーをします。
-
オンスクリーン タイポグラフィの執筆に参加
BNN社から出版されるオンスクリーン タイポグラフィ – 事例と論説から考えるウェブの文字表現の執筆に参加しました。ウェブのメディア特性を尊重しよう、とWCAGをタイポグラフィの道具として使うための２つの論説を書きました。
-
2020 ~ 2021
2020年を振り返って2021年に思いを馳せます
-
2020年に買ってよかったもの
2020年に買ってよかったものを紹介します。
-
Web アクセシビリティの検証ツール「acot」
同僚の @wadackel とウェブアクセシビリティの検証ツール acot （アコット）を作っていて、まだまだ途中なのですが、Webアクセシビリティ Advent Calendar 2020の18日目になってしまったので紹介してみます。
-
SmartHR社でアクセシビリティの技術顧問
2020年4月からSmartHR社でアクセシビリティの技術顧問をしています。これまでの振り返りを兼ねて何をしているかを書きました。
-
2020アメリカ大統領選選挙速報の地図の色
2020年アメリカ大統領選挙の選挙速報の地図表示を白黒でエミュレーションした結果をまとめました
-
ダークモード
ダークモードに対応した。ダークモードのときはコントラスト比低めが好き。
-
GAAD Japan 2020 #GAADjp
GAAD Japan 2020 #GAADjpでにて「アクセシビリティ向上を組織でどのように進め、何をもたらすか」という話をしました。
-
GitHub Pages, Cloudflare, 11tyに移行
さくらのレンタルサーバー上に構築していたMovableTypeからGitHub PagesとCloudflareと11tyに移行しました。
-
見た目の美しさとアクセシビリティを戦わせないで
見た目の美しさとアクセシビリティのパラドックスという記事を読んで考えたことです。見た目の美しさとアクセシビリティがコンフリクトするケースはたしかにあるが、見た目が美しくアクセシブル、というのはパラドックスではないし、それぞれの専門家を対立構造に置くような表現はやめたい。
-
accname オンラインもくもく会を開催しました
Accessible Name and Description Computation 1.1をもくもくと読むオンラインもくもく会を開催して、学びを得ましたが最終的には accname 何もわからないになります。平日日中の開催も良かったです。
-
WCAGもくもく会第六回を開催しました #a11ymoku2
WCAGもくもく会第六回を開催しました。こじんまりと密にやれてよかったです。続けていきたいな。次回は、WCAGではなく accname の仕様を読む会を2020-02-06T12:00+09:00から開催します。
-
2020-01 四日市、浜松
2020年1月の四日市、浜松への旅行記。とんてき、競輪、餃子、さわやかなど。
-
2019 ~ 2020
仕事、登壇、イベント、#deisui_html_radio やその他のことについて2019年を振り返り2020年に思いを馳せます。
-
チームにタイプデザイナーがいるつよさ
#ostd2019 の特設ウェブページ制作で利用した Koga Sans と、その作者と一緒に作業をした感想です。作者最強。
-
OnScreen Typography Day 2019 登壇と ost.today の実装 #ostd2019
オンスクリーン上のタイポグラフィを扱うイベント「On-Screen Typography Day 2019」で登壇し、特設ウェブページの実装も担当しました。登壇はライブを意識して準備しました。特設ウェブページの実装の時に考えていたことや、準備の時に聴いていた曲も紹介しています。
-
#accTalk in 福岡、岡山、京都
3/29（金）19:00 - 福岡、3/30（土）17:00 - 岡山、4/1（月）19:00 - 京都でアクセシビリティに関わりたい人が集まって話をする AccTalk を開催します。お近くで興味ある方はぜひおこしください。
-
トライデントコンピュータ専門学校 Webデザイン学科 業界研究授業で発表
1月23日にトライデントコンピューター専門学校の業界研究授業で発表してきました。ウェブアクセシビリティについての紹介や、スクリーンリーダー（VoiceOver）の操作体験をしてもらいました。
-
腕力
お気持ちです
-
私的東京お世話になった店ベスト25アドベントカレンダー
下書き供養 Advent Calendar 2018の1日目の記事です。Gmailに残っていた3年前の下書きを供養します。
-
Accessibility Object Modelの日本語訳とHTML5 Conference 2018登壇
Accessibility Object Model の日本語訳を始めました。またAOMについての紹介をHTML5 Conference 2018でお話します。
-
aria-expandedのよくある間違い
WAI-ARIAで制御するコンテンツが展開されているかどうかのステートを表すaria-expanded の使用にあたり、よくありそうな間違いである「展開されうるコンテンツ側にaria-expandedを指定してしまう」「制御するコンテンツを明示していない」の2つと正しい使用方法をまとめました。
-
#deisui_html_radio の作り方
#deisui_html_radio というライブストリーミング番組をどうやって作り放送しているかを、振り返ってみました。使ってる機材、放送の内容の変化なども振り返っています。
-
アクセシビリティの祭典 2018 に参加、登壇、配信 #accfes
今年も開催されることとなったアクセシビリティの祭典2018に3年連続3回目の参加、そして今年はセッションにも登壇し、ライブ配信のお手伝いまでやってきたので、セッションやイベント全体の感想、自分のセッションの振り返りをしました。
-
WCAGもくもく会第四回を開催しました #a11ymoku2
第四回WCAGもくもく会の開催レポートです。WCAG2.0のガイドライン2.1 キーボード操作可能を読むをもくもくしました。当日のつぶやきまとめも掲載しています。
-
2017年 ~ 2018年
昨年、2017年を振り返りつつ、2018年に思いを馳せています。
-
渋谷でよく行くビールの店 / Beer Advent Calendar 2017
渋谷に越してきて1年が経って、何軒かのビールがうまい店に出会ったのでその一部を紹介する。
-
富士そば
富士そば Advent Calendar 2017の1日目の記事です。なぜ富士そばに入ってしまうのかを少し考えてみました。
-
AccSell Podcast Vol.126に出演しました
アクセルというアクセシビリティの情報サイトが月に2回配信しているポッドキャストにゲストとして参加しました。勤務先でのアクセシビリティに関する取り組みや、今後のイベントについてお話しました。また話をし忘れたことについても記載しています。
-
WCAGもくもく会第三回を開催しました #a11ymoku2
第三回WCAGもくもく会の開催レポートです。WCAG2.1のワーキングドラフトに掲載されている新規達成基準の候補をもくもくしました。また当日のつぶやきまとめも掲載しています。
-
ふだんの代替テキスト
最近はTwitterにアップする画像とかにもできるだけ代替テキストをいれるようにしています。自分のコンテンツですし、できるところからやっていきたいからです。
-
WCAGもくもく会第二回を開催しました #a11ymoku2
第二回WCAGもくもく会の開催レポートです。デザイナーさんの参加が増えたこととガイドラインに関連する当事者の方のお話が聞けたことが良かったです。次回はもう少しWCAGの読み方について詳しく解説しようかと考えています。また当日のつぶやきまとめも掲載しています。
-
WCAGもくもく会を開催しました #a11ymoku2
2017年7月11日に開催したWCAGもくもく会の開催報告です。リモート参加の準備不足や開始時間が早かったなど反省点はありますが、概ね良かったです。次回は8月30日（水）を予定しています。ご参加お待ちしています。
-
高さが低い要素に高さを揃える
2017年になっても高さ揃えの話です。高さが低い要素に合わせるには高さを合わせる要素にインナー要素を設置し、そのインナー要素の高さを計算外にしてから各要素の高さを揃る方法で実装しました。その実装方法の詳細と、少しの問題点について解説しています。
-
フレックスコンテナ内で絶対位置指定された要素の静的位置
フレックスコンテナの中に配置したposition:absoluteな要素の初期位置（静的位置）がブラウザごとに違ったので調べてみたら仕様の変遷にブラウザが追従しているかどうかという話で、SafariとIEが追従できてなくてツラみというお話。
-
電子書籍版コーディングWebアクセシビリティ
電子書籍版コーディングWebアクセシビリティを献本頂いたので、改めて紙の方をレビューしました。自分のコーディングの楽しみを一段引き上げてくれた本でした。
-
FRONTEND CONFERENCE 2017 で登壇します #frontkansai
2017年3月18日(土)に関西フロントエンドUGさん主催の FRONTEND CONFERENCE 2017 にて「ウェブを構成するUIの品質とHTML」という題で登壇します。ウェブ上のUIの品質についてのポエムと、UIの品質の基礎的な部分を担うHTMLについて主に実装面からお話する予定ですので、お時間のあるかたはぜひご来場ください。
-
ReactとWAI-ARIAでアクセシブルなアコーディオンUIを実装してみた
React の手習いに開閉式のいわゆるアコーディオンUIを実装してみましたので備忘録。ステートの管理は楽ですがフォーカス管理が難しかったです。
-
「効果的なアプリ/Web開発のためのコラボレーションツール活用入門」の執筆に参加しました
マイナビ出版さんから発売される「効果的なアプリ/Web開発のための コラボレーションツール活用入門」の執筆に参加しました。
-
text-decoration の子要素への適用のされかた
第11回 W3C CSS Module 仕様書もくもく会@東京に参加して、text-decoration プロパティを中心にCSSの仕様書を読みました。継承はしないけど、子要素のテキストも自分の要素の色で装飾する。インラインブロックには装飾は適用されないなどを学びました。
-
display-wai-aria.css v0.3.0
display-wai-aria.css に aria-keyshortcuts の追加と aria-describedat の削除を反映し、v0.3.0 として公開しました。プロパティの削除について悩んでいます。
-
WP-D week 土曜日の「HTMLについてLevel Up!」でお話しました #wpdweek
WP-D が主催する1週間通しの勉強会イベント WP-D の最終日の「HTMLについてLebel Up! 〜 div? article? section？ ココがわからない！ HTMLのマークアップ。どうしたらいいの？」でお話してきました。
-
MacBook Pro RetinaのスクリーンショットをAutomatorで自動最適化する
MacBook Pro のRetinaモデルで画面のスクリーンショットを取ると、ちょっと画面共有したいという場合に、ファイルサイズが重くて不便なので自動化しました。Automatorもっと使いこなしたいですね。
-
AccHop!! vol.4 に参加してきました
2015年11月のAccHop!! vol.4 に参加してきた感想です。制作者としての姿勢を見なおしたり、ワークショップに素で参加できたことにびっくりしたりしました。
-
WAI-ARIAの実装をデバッグ・検証する
この記事はWeb Accessibility Advent Calendar 2015の5日目の記事です。WAI-ARIA の検証方法についてご紹介します。決して厳密な検証ができる方法ではありませんが、特別なツールなどを用意しなくとも簡単に検証することができる方法で簡単に検証できる方法が増えれば、WAI-ARIAに取り組みやすくなるかと考えています。
-
schema.org - 営業時間 openingHoursプロパティのマークアップ
schema.org の openingHours のマークアップを試行錯誤し、time、data、metaの中からmetaを選びました。その経緯や考え方について紹介します。
-
Github Pagesからリダイレクト
プロジェクトのGithub Pages のURLが変わってしまったので、リダイレクトの設定を行いました。Jekyll Redirect From pluginの設定をするだけですが、簡単に解説します。
-
display-wai-aria.css v0.1.0
勢いで作ったわりに、たまに使っていたdisplay-wai-aria.cssをWAI-ARIA 1.1 Working Draftに対応させて v0.1.0 としました。CSSだと複雑な実装をしなくても値の変化に追従できるので、案外使えるかもなって思ってます。
-
AMP(Accelerated Mobile Pages) HTMLしてみたという話
Google などが発表したAMP HTMLにさっそく対応してみたお話です。コンポーネントの使い方などをご紹介していますが、ちゃんと運用するとなると大変そうです。
-
線を上手く使ったデザイン
良いデザイナーの方は単純な図形、特に線（ボーダー）の使い方が上手いなあと思っていたので、ボーダーをデザインに取り入れてみました。グラーデーションにするとコントラストをそこまで落とさずに柔らかい感じにできて良いですし、アニメーションも映えるので気に入っています。
-
シンプルなニュースティッカーにrole=marqueeを添えて
シンプルなニュースティッカーの実装の過程をご紹介します。HTMLは普通にマークアップして、javascriptで状態を変更し、CSSで状態に応じたスタイルとアニメーションを付与する、という何も変わったところのない感じです。状態を表すのにはWAI-ARIAを使用しました。これぐらいのものをサッと実装できる実装力を高めていきたいですね。
-
記事のマークアップをGoogleのRich Snippets for Articlesに対応させた話
記事のマークアップをGoogleのRich Snippets for Articlesに対応させました。元より構造化データとしてマークアップしていたので少しのプロパティの変更だけで対応できました。加えてJSON-LDで対応する場合の注意点や、Movable Typeによる出力テンプレート、JSON-LDの再利用についても述べています。
-
WAI-ARIAを可視化する display-wai-aria.css というツールを作りました
ページ内で使用されているWAI-ARIAを可視化するCSSのツールを作成しました。CSSならではの問題が多く素直にjavascriptで作ったほうが良かったかなと思っていますが、勢いで作って公開します。
-
#AccSell Meetup 009 『デザイニングWebアクセシビリティ』ディレクターズカット版の感想
AccSell Meetup 009 『デザイニング Webアクセシビリティ』ディレクターズカット版に参加しての感想です。特定のユーザーにとっての利便性と広いアクセシビリティのトレードオフについて考えさせれました。今後も何のために、アクセシビリティをやるのか？を常に自分に問いながら精進していきたいと思いました。
-
sourceTreeの作業ツリーのファイルをsublime textで開くカスタムアクション
SourceTreeの作業ツリーにあるファイルをSublime Textで開くカスタムアクションを作りました。$FILEパラメータを Sublime Text の実行ファイルに渡すだけの簡単なものです。
-
JSON-LDをWebComponentsで表示する
WebComponentsの練習にサイトに静的に設置されたJSON-LDを読み取るWeb Componentsを作ってみました。ライブラリ使わずにやってみましたので、備忘録がてら順を追って解説します。
-
シンタックスハイライトをgoogle code prettifyからhighlight.jsに変えた
これまでシンタックスハイライトには Google code prettify を使ってたのですが、テーマもイイ感じのものがなく、言語の判別の精度もいまひとつだったので highlight.js に変更してみました。
-
ABCテレビキャストで「コーンポタージュのコーンを上手く食べる方法を流体解析してみた」が使用されました
関西のニュース番組キャストで「コーンポタージュのコーンを上手く食べる方法を流体解析してみた」が使用されました。季節ものは強いですね。しっかり紹介されていて良かったです。
-
Mobile SafariのselectがイケてないのでほぼCSSで擬似select作ってみた
iPhoneのMobile Safariだとoptionの中に長い選択肢がある場合、途中から省略されてしまって選択肢が見えずに困るということがあり、CSSで擬似的なselectを作ってみました。
-
#AccSell Meetup 008 『集まれ！アクセシビリティー・ビギナーズ！2015』参加
アクセシビリティー・ビギナーズ向けのセミナー「AccSell Meetup 008」に参加して際のメモと感想。セミナーに参加した目的（JIS規格日本語訳）は達成できたし、ブログのアクセシビリティも改めてチェックして改善できたし、とても得るものは大きかったです。
-
選択範囲の背景がはみ出す問題を調べてみた
テキストを選択した時に選択範囲の色が変わって選択範囲が明示されますが、その選択範囲の背景が該当する要素をはみ出して表示されることが気になっていましたので調べてみました。
-
illustratorで日本地図の各都道府県のイメージマップを出力する
Adobe illustrator を使用して、各都道府県に対応したイメージマップを出力する方法です。
-
Sublime Text 3 + Emmetでid,class名コメントをHTML閉じタグの前に入れる
Sublime Text 3 + Emmet で、id,class属性を持つ要素を展開した時にid, class属性の名前のコメントを自動的に挿入されるようにしてみました。閉じタグの前に入れるのに苦労しました。
-
アイコンフォントの代替テキスト
装飾以外の意味を持つアイコンフォント(Font Awesome)への代替テキストを考えてみました。少し無理矢理なやり方のように思えます。
-
NPO法人ICT救助隊のウェブサイトがサービスグラントの実績で紹介されました
おおよそ1年前に携わったNPO法人ICT救助隊さんのウェブサイトが、サービスグラントさんの実績として紹介されました。リニューアルの成果として、問い合わせの質・量共に増加し、講習会や講演の依頼も増えているようです。
-
Android標準ブラウザがbackground短縮プロパティでbackground-sizeを初期化してくれない
Android標準ブラウザは、backgroundを短縮形(ショートハンド)で記載してもbackground-sizeを初期化してくれなかったという話。
-
順序リスト[ol]の数字の色だけを変更する
-
Web制作者のためのCSS設計の教科書を読んだ
-
Movabletypeでテンプレート毎にOGPの設定
MovabletypeでOGPをテンプレート毎に設定するコードを紹介します。
-
国内主要ブログサービスのOGPタイプ(og:type)
国内の主要ブログサービスでOGPのタイプ(og:type)がどのように設定されているかをまとめてみました。
-
ブログのデザイン
-
WEB+DB PRESS vol.81 イマドキHTML/CSS開発を読んだ
-
extendでSassから出力されるCSSをスッキリさせる
-
勉強会資料 Webサイトの中の色について
-
noscript使わずにスタイル無効の時のスタイル
-
空要素の閉じタグ忘れを一括置換
-
ブラウザの小数点以下のピクセル(サブピクセル)レンダリングまとめ
-
Sass/Compassコンパイル時の色名変換でハマった
-
サンプルエントリー