先日Twitterでアンケートをしたらウェブ制作に関わる方々でスマホの読み上げ機能を使ったことがある方が少ないとのことだったので、はじめてiOS VoiceOverを使うときに困らないように、スクリーンリーダーの超初心者の僕がハマったところや難しいと感じたところをふまえて、チュートリアル的に使い方をまとめてみます。 iOS VoiceOverを初めて使う方のお役に立てれば幸いです。順を追ってiOS VoiceOverに一緒にチャレンジして行きましょう！ 中級編（ローター編）も書きました！ 目次 以下、ページ内のセクションへのリンクです。 VoiceOverをショートカットに入れておく VoiceOverがオンの時にロックスクリーンを解除する方法 iPhoneの画面が突然真っ暗になってしまったら VoiceOverでページを読んでみる ページの最初から続けて要素を読み上げる ページをスクロー

最近パラレルワーカーと言われがちな、旅好きデザイナーNAYOです。 今回は、イラスト図録のポイントについて書きたいと思います。 ＊＊＊ 記事にイラスト図解を入れようnoteに記事を書く人も増えましたよね！ノウハウ系の記事も増えていきました。ただ・・・長文読むの苦手な読者も多いハズ。 Q）どうやったら、記事をもっと読んでもらえるだろう？ A）記事にイラスト図解を入れてみよう！ ＼記事にイラスト図録を入れるメリットたち／ １）記事が読まれやすい → イラストでリズムができ、読んでもらいやすい！ ２）シェアされやすい → 色が入ったイラストがあると、Twitterでも目を惹く！ ３）親しみを感じやすい → 手書き文字ならではのあたたかさ！ イラスト図解とは？ 記事の要点をまとめたイラストのこと ＼イラスト図解を利用し、シェアが広がった成功事例／ カメラマン矢野さんの記事にイラスト図録で協力したの

2018-04-06「サイトの会員登録増加」に効果が出た施策の話こんにちは。開発本部で医療介護の求人サイト「ジョブメドレー」の開発を担当している田村です。 メドレー開発本部で行われている勉強会「TechLunch」で、ジョブメドレーについて「求人サイトでやって良かった会員登録施策」というタイトルでお話させていただきました。インターネットで検索するとこういう内容はたくさん出てきますが、そのうちの一つとして、参考にしていただければ幸いです。 背景医療介護の求人サイト「ジョブメドレー」は、創業当初（2009 年）にリリースし会社と共に進化し続けてきたメドレーで最も歴史のあるサービスです。リリース開始から 9 年ほど経ちますが、個人・事業所にとって使いやすく愛されるサービスとなるよう、日々改善を続けています。その中でも、サービスの成長に重要な要素の 1 つである「ユーザの獲得」に向けた施策は、とて

概要 Ameba Accessibility Guidelinesは、Amebaのサービスを利用するユーザーの「誰もがいつでも迷わずコンテンツを楽しむことができる」ようにするための、制作指針集である。 Amebaのサービスに携わるコンテンツや開発者は、高品質なサービスを提供するため、ガイドラインに沿った制作/開発を強く推奨する。 本ガイドラインで掲載している事例や実装方法はAmebaでの事柄である。失敗例で実装していても、WCAG 2.0（2.1）の各項目に適合できる場合もあり、適合・不適合の判断はWCAG 2.0（2.1）を参照のこと。 対象となるサービス 本ガイドラインに準拠するサービス一覧。 各サービス毎に、アクセシビリティ改善プロジェクトの目的と対象とする範囲を定義する。 アメブロ 各項目の構成 適合レベル 達成基準を対応する目的と意義、対応すると得られるメリットなど 具体例 実装

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community. Pick a username Email Address Password Sign up for GitHub By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails. Already on GitHub? Sign in to your account

プロダクトセキュリティの「共通言語」を作る ― 技術教育と Policy as Code を例に / "Language" for Product Security

Yahoo! JapanがWindows Vista、IE10以前等のサポートを6月1日より順次終了 終了・倒産終了Webサービス Tweet 2018年05月30日 日本最大手のポータルサイト、Yahoo! Japanですが、明後日の2018年6月1日より、同社のサービスにおいて古いOS、ブラウザのサポートが順次終了となります。 具体的にはWindows XP以前、Windows Vista以前、MacOS10.8以前。ブラウザはInternet Explorer10以前、chrome29以前、Firefox26以前のものなど。 これらが使えなくなるのは、インターネット通信暗号化方式「TLS1.0」および「TLS1.1」のサポートを順次終了し、「TLS1.2」に対応する為の処置です。 これらに対応していないものが、Yahoo! Japanのサービスのサポートから外れて、6月1日に以降順次

はじめに こんにちは、広告技術部アルバイトの徐（ @joha__rb ）です。普段の業務では、広告配信の管理画面システムの開発をしております。 さて、皆さん普段お仕事をされる上で「KPI」という単語を使われたことはありますか？　KPIとはKey Performance Indicatorの略語であり、日本語訳すると重要業績評価指標。一般的に、企業や組織での目標の達成度を評価するための指標を意味します。達成度が一目でわかるようにKPIは数値で設定され、組織の誰でもその数値をみれば自分達の進捗がわかるようになっています。 Gunosyでは「数値は神より正しい」をモットーに、日々KPIの数値を追っています。今回は中でも、Gunosy広告技術部でのKPIの利用方法をご紹介しよう思います。 はじめに Gunosy広告技術部のKPI 広告技術部とは 広告技術部のKPI 広告の入札形式ごとにSalesを

マネジメント 新しいチームのあり方を探求 就活 就活生必見！サイボウズの疑問 ティール組織 会社の「あたりまえ」が変わる 多様性 100人100通りの個性 ワークスタイル 働き方、生き方、もっと自由に 青野慶久 サイボウズ社長の想いと覚悟 キャリア 人生の「積み上げ方」を見直す 複業 複数の「本業」をもつ働き方 人事制度 多様な働き方を支える仕組み マンガ サクッと手軽に読める！

皆様、こんばんは。 こんなことが、まさか私にくるとは思ってもみませんでした。 他人事っと思ってはいたものの..... ともかくまだ、ドキドキと興奮状態でパニックっている反面、冷静に判断できた自分に良かったっとホットしています。 今日あった出来事です。 皆様には気をつけて頂きたいので、あったままをお話しします。 また、お名前も出させて頂きますが、同姓同名の方お許しください。 今朝の話になります。 携帯の電話が、見知らぬ番号でしたが、お仕事の可能性もあるので出ました。 いきなり、私のフルネームを言い、 相手　　〇〇さんの携帯ですか？ 私　　はい。 相手　　私警視長捜査一課の者です。 私（心の中）何かあったのか？なぜ警察？？？ 相手　ササキ　ハジメさんっと言う方ご存知ですか？ 私　　知りません。 相手　ササキ　ハジメさんが振込詐欺の容疑で逮捕されました。 彼の所持して入りものを調べたら振込詐欺に

Roppongi.js#3「エンジニアも気にしたい色のアクセシビリティ」 リンク付きの資料はこちら https://ohbarye.github.io/slides/2018/roppongi.js-3/

2016.08.22Webフォントのロードをやめたこのサイトではフォントに Roboto と Roboto Mono を適用している。以前までは Google Fonts で配信されているそれぞれのフォントをロードしていたが、それをやめて font-family の指定のみに変更した。 プログレッシブな適用とOS共通フォントの選択まず前提として、テキストのベースフォントとして明朝（serif）を、 <h1> ~ <h6> の見出しにはゴシック（sans-serif）を、コードには等幅（monospace）を適用する前提方針がある。明朝・ゴシック・等幅の中から自分の好みに近く、尚且つ Mac と Windows にインストールされているものを優先的に選ぶようにした。 body { font-family: YuMincho, serif; font-weight: normal; } h1,

デザイナーに対して「とりあえず作ってください、見ないとわからないから」というのは、建築家に「とりあえず家建ててください、住まないと分からないから」というのと同じことだ。 そんな苦言を呈してしまうくらい、デザイナーは「とりあえず見た目を作って」というオーダーに疲弊している。なんだか簡単にできて、軽いものだと扱われてることに不満を感じるし、「とりあえず作るデザイン」に報酬が支払われないことも多いからだ。 しかし、「住まないと分からない」というのは全くその通りであろう。 紙で印刷されたワイヤーフレームや機能の設計書の前では沈黙していた人も、実際に動くものの前では目を輝かせて言葉を発する。 まず物がないと人は話せないのだ。 そして「とりあえず作る」ためのツールも揃ってきている。完成したデザインを出す必要だってない。 私は、デザインの面白いところは思いついたらすぐ試して、トライ・アンド・エラーを繰り

こんにちは、ハヤカワ五味です。 今回は何についてにしようかなーと考えていたのですが、"頼まれたのでツイッター用画像の添削をしてみた"という記事が好評だったので、弊社通販サイトがどのようにして今の形になったのかをまとめていきたいと思います。 最初にお断りしておくと、ユーザーがどれくらいまでスクロールして…みたいな細かいデータは持っていないので、あくまで自分が利用者だったら…という視点の改善になります。そして現状から更に改善中なのであくまで発展途上！ まず、弊社の通販サイトを一度見てきてくれると嬉しいのですが、多分、通販サイトに飛ぶの面倒な人いるだろうなあ・・・と思うのでビフォーアフターを載っけます。 そして大前提ですが、弊社通販サイトの利用者の85%(びっくり)がモバイル端末からの利用なので、基本はスマホでの見え方について書いていきます。あと、実際に私のリクエストをセンス良く実装してくれてい

はじめに こんにちは、デザイナーの浜田です。 マンガZEROのWebリニューアルを担当することになり、AtomicDesignに則ってSketchでデザイン制作をしました。 そして今回デザイナーがAtomicDesignで言うAtoms/Molecules/OrganismsあたりのHTML/CSSを書いてみようという話になり、Storybookが導入されることになりました。 本記事ではデザイナーがStorybook+AtomicDesignを使って開発に参加してみてどうだったか、どのように活用ができたか、について紹介したいと思います。 デザイナー＆エンジニア間でStorybookが有用に使えそうかどうかの参考になればと思います。 ※本記事では、Storybookの環境構築やコードについての解説などは行いません。 AtomicDesignについては以前に弊社デザイナーが記事にしているので紹

この記事は「Coder's Mind 〜 コーディングするときに大事にしている心がけ 〜」というタイトルで、5月26日（土）に開催されたWordBench三重 第1回勉強会「WordPress15周年を祝う会＆Web制作関連のおはなし」でお話しした内容を改めてブログにまとめます。 この記事では具体的なソースコードの実装方法や例などは出しません。今までの5年間マークアップエンジニアとして働いてきて、納得いくコーディングができるようになった考え方の軸を紹介します。勉強会の参加者は初めてお会いする方が多く、どんな話が適しているか判断が難しかったため、少しコードを書いたことがある方なら理解できる・知って欲しい内容にしています。 ちなみに、私が思う納得のいくソースコードの条件は以下です。 反省しやすい・修正しやすい 人から問われたときにスムースに説明できる設計・仕様になっていること 利用者がスムース