HTMLには画像に「代替テキスト」と呼ばれる値を設定する機能があります。 ユーザーがもし画像を利用できない状況にあるとき、画像の代わりにこの代替テキストが提供されます。 画像のパスが間違っていたり、ページの読み込みが途中で中断されてしまったりしてデータをうまく読み込めない場面はたまにあります。そういったとき、この代替テキストの値が画像の代わりに表示されます。 通信状況が悪いときや、画像が表示されないまま長い間更新されなくなったサイトを閲覧しているときでも、適切な代替テキストが設定されていれば最低限の情報は得られます。 支援技術を利用してサイトを閲覧しているユーザーにもこの代替テキストが提供されます。 支援技術というのは、主に障害者がパソコン利用の際に、操作の補助を行うために併用されるハードウェアとかソフトウェアです。 支援技術のひとつであるスクリーンリーダーを利用すると、画面上の情報をコン

ウェブやソーシャルメディアなどで、日本語の原稿を英語に翻訳した（と思われる）コンテンツを目にする機会が増えています。しかしそういった英語のコンテンツの中には、欧文タイポグラフィの視点から見ると少しおかしく感じられるものも少なくありません。たとえば句読点や記号の使い方が間違っていたり、語句が不自然に強調されていたりといった具合です。このようなちょっとしたミスは、ひとつひとつは些細なことでも、結果としてコンテンツが正しく伝わらなかったり、書き手の信用を下げてしまったりする原因にもなります。 この記事では英語のコンテンツを作るときに気をつけたいタイポグラフィのディテールについていくつか解説します。タイポグラフィといっても、グラフィックソフトを扱う技術も高度なCSSの知識も必要ありません。ほんの少しテキスト原稿に手を入れたり、マークアップを工夫したりするだけでも、タイポグラフィの質を高められるので

デザインカンプを基に実装する難しさはあらゆる場面で語られます。私の場合は特にレスポンシブデザインに関する仕様の解釈に悩む場面が頻繁にあります。 その問題点はどこにあるのでしょうか。私の制作したツールの紹介を通して、グリッドシステムのあり方やレスポンシブデザインの意味などを考察しました。 デザインカンプとワークフローの関係性 ウェブサイト制作のワークフローでは、クライアントとの上流での合意形成と開発者への指示書との役割をデザインカンプが兼ねるパターンがよくあります。デザイナーはウェブページの実装仕様を決定しながらデザインカンプを制作し、開発者はデザインカンプを通して前工程での決定を読み取りながら実装します。 デザインカンプを基に実装する難しさの一因は、それがシステムが取り得る状態のうちの一場面を切り取った単なるスナップショットでしかない構造です。 仕様を理解するためには、デザイナーが想定する

ウェブページのテキストはいくつかの文字サイズの組み合わせで出来ています。それぞれの文字サイズは情報の階層構造を表現するなどの役割を担いますが、同時にお互いが適切なバランスで調和しているべきです。そのため文字サイズはページやコンポーネントごとに場当たり的に決められるべきではありません。プロジェクトを通じて一貫したシステムを形成している必要があります。 そういった調和と一貫性を持った文字サイズのシステムを作るために、私たちのチームでは「調和数列」に基づいて一連の文字サイズを決めることがあります。調和数列とは等差数列（隣接する項が共通の差を持つ数列）の各項の逆数からなる数列です。 1, 2, 3, 4, 5, 6 ... // 等差数列 1, 1/2, 1/3, 1/4, 1/5, 1/6 ...　// 調和数列 実際に調和数列を用いて文字サイズを算出する例を以下に示します。 $font-siz

あんまりまとまってない…というか書いてはみたものの、致命的な勘違いがあるかもしれないので、鵜呑みにしないでください。 前置きがタイトルからはちょっとずれるのですけれども、筆者が参加したもっとも直近のウェブ関連イベントでは、神戸のアクセシビリティの祭典なんかでの木達さんと持田さんの対談で、アクセシビリティの法律の強化が必要だよね、みたいな話が出ました*1。 まあ、このときは懐疑的なツイートをTwitterでしてた気もするんですけれども*2、最近いろいろあって気が変わりまして、ウェブアクセシビリティの日本におけるステージを強引にでも引き上げるには、法律で強制するしかなかろうという宗旨替えをするようになり。 でまあ、よりウェブなアクセシビリティを強力に推進するような新しい法律を、もし作るという話になるにしても、現状の法律を知らないと…ということであれこれ調べてたところ、よく分からない現象に遭遇し

完全な初心者はこちらから!ウェブ入門ウェブ入門基本的なソフトウェアのインストールウェブサイトをどんな外見にするかファイルの扱いHTML の基本CSS の基本JavaScript の基本ウェブサイトの公開ウェブのしくみHTML — Structuring the webHTML概論HTML 入門HTML を始めようヘッド部には何が入る? HTML のメタデータHTML テキストの基礎ハイパーリンクの作成高度なテキスト整形文書とウェブサイトの構造HTML のデバッグ手紙のマークアップコンテンツのページの構造化Multimedia and embeddingマルチメディアとその埋め込みHTML の画像動画と音声のコンテンツobject から iframe まで — その他の埋め込み技術ウェブへのベクターグラフィックの追加レスポンシブ画像Mozilla のスプラッシュページHTML tablesH

特に順位無しで俺が電子書籍や蔵書として購入した、漫画喫茶で読んだ、完結済みのおすすめ漫画を紹介。 リストにない面白い漫画があれば教えて欲しい。 特に順位はつけないので出て来た順序は適当と思ってくれたら。 （追記） すみません。三月のライオン、終わってないんですね。リストから消しときます。 （追記２） ブコメありがとうございます。いろいろ参考にさせてもらいます。そう言えば、手を出してないなぁって漫画もあるんで、Kindleで漁ってみます。 読んだけど、好きでも嫌いでもないので上げてない完結漫画もわりとあったりします。ブコメに上がってるのだと、フルアヘッドココやBASARA、シュトヘル、皆川作品全般は、そんな中に入ってる感じです。 ブコメに上がってないものだと、銃夢、ナルトとかBLEACHとかカイジ、金色のガッシュベル、戦国妖狐、ソウルイーター、るろうに剣心とかの著名どころもそんな感じですかね

これらを鑑みると、 アプリの画面上では乗り入れ箇所で路線色が変わり、誤って降車するリスクがある 行き先が異なる複数の乗客に対して、駅員さんは「直通運転」であることはアナウンスできても「乗換不要」という案内はできない アプリの画面を見ているのは本人のみ、かつ目的地まで目視できるので「乗換不要」と伝える方が有益 このような経緯から、あえて「乗換不要」としています。 手法は大事、ユーザー視点はもっと大事 文言はサービス内で表現のズレが起きないよう、用語辞典を作成しています。「ルート/経路」「電車/列車/鉄道」など。ただし意味が伝わりづらい箇所では、表現のズレを許容しています。注意しなければならないのは、このようなフレームワークや手法などを優先して、ユーザー視点を見失わないようにすることです。 ワイヤとビジュアルを並行して行うことでUX品質を高める 路線情報チームのデザイナーは、ワイヤフレームとビ

自閉症スペクトラムと呼ばれているような障害は、実は障害でない。生物としての人類のバリエーション（変異）のひとつである。 自閉症スペクトラムは、本来は人類の、生息環境に対する適応の一つのあり方だというのが、本稿で紹介するニューロダイバーシテイ（脳多様性）という考え方にほかならない。 なぜ自閉症はこれほど多いのか 自閉症スペクトラムというものの実態は、（1）対人関係とりわけコミュニケーションが不得手で、（2）興味・関心の幅が著しく限られていたり、こだわりが激しいという二点を特徴とする。つまり、いわゆるオタク的傾向が顕著な発達「障害」として、一般にもよく知られるようになってきた。 この「障害」はおおよそ、遺伝的要因によって生ずると考えるのが定説となっている。発症率はどんなに少なく見積もっても1~2％。25人に1人と主張する研究者もいる。この値は、ほかのたいていの遺伝的障害に比べて極端に大きい（通

こんにちは、メディアチームで暮らしニスタの開発を行っている三島です。 春になって山菜が食べたいなと思う今日このごろです。 今回はメディアチームで開発を行っているメディアサイト「暮らしニスタ」のサーバ負荷軽減について書きます。 その他のパフォーマンス改善の記事についてはこちら tech.willgate.co.jp 問題になっていたこと メディアチームでは約３年前に暮らしニスタの大規模なリニューアルを行いました。リニューアル当時はサイトへのアクセスが少なかったため正常に処理することができていました。 最近になり高負荷時に一時的にサイトがダウンする事象が発生していました。 下図は高負荷時のサーバの負荷の様子です。ロードアベレージが増加しているため正常に処理が完了しなくなっています。 以上のことから高負荷時でも正常に処理が完了するようにプログラムを変更する必要がありました。 サーバー構成について

年度末であまりチェックしていなかった隙に、WCAG 2.2の策定開始作業のコンセンサスが取られていた模様。 WikiのページWCAG 2.2 working processからは、Potential WCAG 2.2 SCsという名前のGoogleスプレッドシートへのリンクが張られている。どうやら他のタスクフォース等の要求事項一覧らしく、新しく達成基準が増えるとすれば、ここからということになるのだろうか。GitHubのissueではWCAG 2.2のラベルが既に作成されており、議論を俯瞰することもできる。 WCAGの新たな達成基準策定となると、これでまたUnderstanding/Techniquesへのリソースが削がれてしまうのかもしれない。それ以上に、WCAG 2.1の勧告から半年以上経ってもUnderstanding/Techniquesは依然としてTRの配下になく、もうTRの配下に

こんにちは! 在宅ライターむけメディア「こぶたの鉛筆」編集部です。 桜も徐々に咲き始め、春の訪れを感じますね。 春といえば、新しいことが始まる季節です。 そこで! 編集部はライターさんたちに 「新年度から始めたい新しい趣味」 を聞いてみました! これを参考に、あなたも何か始めてみませんか? ライターが新年度から始めたい趣味21選 ガーデニング 紹介ライター：あゆたん さん ハーブという言葉は優雅で、聞いただけで元気が出てくる魔法のような響きがあると思います。自分で育てた新鮮なハーブを使って毎日の食卓に香りや色どりをプラスするのが私の長年の夢です。でも、小さなアパート暮らしのため、自分のお庭でガーデニングをするのは夢のまた夢。そこで、プランターを使って気軽に育てるベランダガーデニングを始めるのが新たな目標になりました。 きっかけは近くに住む姉がベランダガーデニングを始めたことです。摘み取った

はじめましてAbemaTVデザイナーの小田島です。 昨年末に新たにテレビ向けアプリケーションがリリースされ、パナソニック 4Kテレビ「ビエラ」でもAbemaTVが楽しめるようになりました。 今回はこちらの開発において、テックリード五藤を中心に用いたデザインワークフローについて話していきたいと思います。 ストーリーデザイン？ 「ストーリーデザイン」と聞いて、ピンと来ない方もいるかもしれません。自分も最初は理解できていませんでした。 しかしそんな難しい話ではありません。すでに多くのデザイナーが実践しているであろうユーザーストーリーのことです。 実際のワークフローの流れはこちら STEP.1　ストーリーデザイン STEP.2　デザインの構造化 STEP.3　視覚情報デザイン 3つのデザインを順番に進めていくことが、このワークフローのポイントでもあります。 STEP.1　ストーリーデザイン これま

はじめに こんにちは！ インフラチームの高畑です。 新卒で入社して早くも 2 年目に突入しそうで時間の流れが最近早く感じています。 今回、弊社で運用している標準開発環境（※）について、自動起動・停止するようにしてインフラコストダウンを計ってみたお話しをします！ ※ ウィルゲートの開発室でエンジニアに割り当てられる、個々人が自由に使うことができるAWSのEC2上の開発環境のこと。詳しくは下記の記事をご覧ください tech.willgate.co.jp これまでの運用 これまで標準開発環境は曜日時間問わず基本的にはずっと起動したままで運用を行っていました。 弊社のエンジニアは現在約 40 人ほど在籍しており、標準開発環境も人数分起動しています。 標準開発環境は現在全てのインスタンスが AWS オレゴンリージョンの t3.medium インスタンスなのですが、大体月あたり $1,200 ほど（

はじめまして！在宅ライターむけメディア「こぶたの鉛筆」編集部です。 突然ですがライターの皆さん、仕事……はかどっていますか? 「30分しか経ってないのにもう肩が凝った 」 「ライティングに集中できない……」 「原稿進んでないのに時間ばかりが経過していく」 仕事をスムーズにこなすには「疲れやすい」「集中力が続かない」という、この2つの問題を解決するのが一番! ということで今回は、編集部がかかえているライターさんたちに「ライターとして仕事をする上で、買ってよかったもの」を聞いてみました。 作業効率が上がるガジェットや、 集中力アップ&リラックスに役立つもの、 さらにライティングの時間を捻出するための時短家電などなど。 全部で34個、ご紹介します。 ライターが選ぶ買ってよかったもの34選 Happy Hacking Keyboard Professional JP Type-S 紹介ライター：I

主にユーザー側の視点から語られることが多いアクセシビリティですが、制作という側からはどのように捉えることができるのでしょうか。2つの切り口から考えてみます。 # アクセシビリティという文脈において、何のためにHTMLを書くかという話になると マシンリーダビリティのため スクリーンリーダーのアクセシビリティのため というように、ユーザーが利用するため、というところにフォーカスした語られ方が多いように感じています もちろんユーザーのために作るというのは正しいのですが、今回はあえて視点を変えて、制作者自身の作るというところに視点を合わせて話してみたいと思っています 僕がどういうものなのかというと、 # 参照: 全部入りHTML太郎(@_yuheiy)さん | Twitter ツイッターでは「全部入りHTML太郎」という名前でやっています # 参照: シフトブレイン／スタンダードデザインユニット

プログラミング言語Streemをハックしよう！Matzゼミの全貌をレポート 湊川あい 2018.03.05 367 701556280 プログラミング言語Rubyの生みの親である“Matz”こと まつもとゆきひろさん。2016年より株式会社リクルートマーケティングパートナーズ（以下RMP）の技術フェロー・技術顧問として尽力いただいております。 2018年2月14日には、スペシャル企画第3弾として、RMP社内で「Matzゼミ」が開講！ 前半：プログラミング言語StreemについてMatzさんの講演 Streemはどのようにして出来たのか？今後の展開は？ 後半：ワークショップ Matzが作っているプログラミング言語 Streemをハックしよう MatzさんによるStreemの講演は全世界初公開の内容です。この記事であなたも「Matzゼミ」を体験してみましょう！ （取材・文章： 湊川あい） St

今回は最近取り組んでいる、 JavaScript が読み込まれる前であっても「ちゃんと」 Web Application が動作するように作る話をします。 Server Side Rendering における注意点と対策 BFFを使ってServer Side Rendering をすることに数年前から取り組んでいます。 まずはSSRをやる上での注意点と対策について紹介します。 SSRをすることはSEOのためだと思われがちですが、個人的にはSEOのためにしているわけではなく、 First View を向上するため（特に First Meaningful Paint を向上するため）にやっています。 First View SEOとSSRに関しては Google が最近出したこの記事の SEO Considerations 節が詳しいです。ここでは説明しません。 SSRをしない、Client S