脳内タグ。
こんばんは、さじです。
AdobeにDreamWeaverという
webサイト構築、webデザインするための
アプリケーションがあるのですが
チュートリアルを見てみることにしました。
サイトの構築の他、htmlの基礎、cssの基礎などの
各10分程度、作業を解説する短い動画です。
動画が流暢な英語。
和訳の字幕が画面下に出るんですが
早口だわ画面と字幕見なきゃいけないわで
内容についていくのがまー大変。
スピード調整できるのを思い出し
2本目からはゆっくりめに再生してみました。
その話はおいといて。
web初心者は気づいたことがあったわけです。
英語で聞いたことによって。タグの真実を。
パソコンでブログを書いている方なら
html編集でのタグはもちろんご存知のはず。
呪文のような文字列、<p>とかのアレです。
学校や動画でコーディングの勉強をした方や
お仕事で日常的に会話している方なら
耳と目で学ぶので間違えないと思いますが
自分のように独学、ましてやつまみ食い程度で
コピペしたりして扱ったりしていると
勝手に脳内で読みがなつけてませんか？
例えば。
あ、そうそう。このあと読むと真面目にタグのお勉強している方には刷り込みで間違えて覚えちゃうという危険が伴います。とっても迷惑な情報なのでご注意くださいね。知らない方がいいやと思われた方はそのまま戻るボタンを押してください。
では。太字が正しい読み方です。
alt →オルト
アルトかと。Macにはaltキーないんです。
a href →アンカー エイチレフ
違うとは思いながらハーフと呼んでた。
a hrefはアハーフって。雰囲気、雰囲気。
br →ブレーク
ブラ。ブランクなのかと。ブラジャーではない。
li →リスト
ライン。DTPではliときたらlineって思うよね。
ul →ユーエル
ウル。ウルトラソウル！なのかと。
src →ソース
自信を持ってエスアールシーって呼んでた。3単語の略かなって。awsみたいな。
th →ティーエイチ（テーブルヘッダー）
前歯に舌を軽く挟み正確に、スッ。昔習ったからね。
なんて感じです。
CSSシリーズもいっときます？
absolute →アブソリュート
アブソート。スペルを雑に見てたみたい。
hidden →ヒドゥン
ハイドン。hiはハイって習ったし、そんな人いたじゃない？
width →ウィドス
違うだろうと思ってたら合っていた。
正確にはウィドゥスなのかな。
ワイズ、ワイドスは違うんですって。
hover →ホバー
フーバー？ホーバー？と悩んでました。
どっちも違うという。
あ、あれか。ホバークラフトのやつか。
none →ナン
え！ノンかノーンじゃないの？って思いません？
nonはノンだけどnoneはナン。な、ナンですって！
と。まあまあ、知らないとこんなもんですよ。
本やネットではふりがななんていちいちふらないもの。
そういえば、これを書く時にタグ一覧を見てたら
目に入ったopacity。
これはオペラシティかと思いましたが
良くみるとオパシティのようですね。
オーストラリアを彷彿とさせますが
それはオペラハウス。
あー、また間違えて言っちゃいそうですね。
道連れ。
タグは英語ありきなので苦労しますよね。
あらっ。自分だけでしょうか。
さじ
注：人やチーム、宗派？によっても違うのもあるみたいです。そういえば、Pythonはパイソンって読むんですか？フィソンって呼んでました。
だって痛いの嫌じゃない。
こんばんは、さじです。
昼に冷凍うどんを煮ながらニュース記事を読んでました。
なぜか目についた人工透析の記事です。
ヨミドクターという病気のコラムですが
読売新聞を契約していた頃、よく目にしました。
地域医療の医師がとある患者さんの思い出を
書き起こしたものですが、概要だけ書きますね。
リンク記事もとても読みやすい短文ですので
よかったらお時間のある時に。
その患者さんは頑固な80代のおじいさんでしたが
医師の指導にはきちんと取り組んでいました。
しかし腎機能の低下とともに人工透析を勧めたところ
彼に拒否されました。
彼の妻も、彼の決意には逆らわず添い遂げるといいます。
この後医師は説得を諦め彼の看取りを選びます。
症状が悪化し苦しむ彼は徐々に弱り、亡くなりました。
この記事は、透析の是非を問うというか、
最期の選択、医療について考える、といった
どちらかといえば精神的な内容のコラムです。
が、自分はどうも、透析自体の方に
思考がうねってしまいました。
彼は症状に苦しむことと人工透析の不自由さを
この時知らなかったのかもしれません。
途中でやっぱり人工透析を受ければよかったと
後悔した時があったかもしれません。
それとも、苦しみが自分の勤めと誇りに感じたかも。
妻が常にそばにいて世話してくれることに
喜びを感じていたのかも。
彼の選択は「拒否」でしたが
自分だったらどうする？
自分が80才の時もっと長生きしたいと思うのか
もう十分生きたからいいやと思うのかは
その時にならないとわかりませんね。
今は、自分の親世代がその年齢なので
まだまだ長生きして欲しいなと思いますが
それは自分じゃないからです。
愛する家族は自分のことよりも大事に思います。
痛い、苦しいといった身体的な辛い思いは
させたくないなと思うのも当然です。
人工透析でそれらが抑えられるならば
決して悪い選択ではないよねと思いました。
それを本人が不自由だ、嫌だというならば
自分もこの医師や妻のように受け入れるのでしょう。
元々この記事、Yahooニュースで読んだので
ヤフコメであらゆる人がコメントを書いていて
いろんな考え、それこそ
自分のことや、自分の家族、知り合い、
仕事がそうなのか人工透析のメリットなど
それぞれの思いを書いています。
そうか、そんな面もあるね、
ああ、それは確かに、と人間観察していました。
自分だったらどうするか、がまだでしたね。
そうだなあ。自分は痛いのや苦しいのが怖いから
多少の不自由は受け入れるんじゃないかなあ。
週に3回、半日をベッドで過ごすことで
残り4日を苦しい思いをせずに生活できるならば。
それって別に、悪いことではないですよね。
なんとなく人工透析は良くないような風潮を
ヤフコメの人々から感じ取ったので
自分の考えをブログで書いてみました。
その年にもなって長生きしたいのか、
だから日本の医療費が云々、などと
やじを飛ばす人も中にはいるかと思いますが。
長生きというより、痛いのは嫌です。
医療費負担のしわ寄せは制度のせいです。
と、言い訳しますね。
まあ、できれば人生に満足できた時に
ポックリ逝けたら最高ですけどね。
そんなことを考えながら、うどんを食べました。
自由に食べられる、考えられる、というのは
それだけで素晴らしいことです。
さじ
追記：人工透析を受けている方にも苦労があると思いますので良く知りもしないことを書いちゃうのもどうかって話ではありますが、当事者の方で不愉快な思いをされたらごめんなさい。
webデザインを練習中です。
こんばんは、さじです。
webデザインができるグラフィックデザイナーを目指して勉強中です。
グラフィックデザインにおける工夫がwebデザインでは通用しないことがあります。
今回は勉強中に仕入れた、グラフィックデザイナーがやりがちなやってはいけないwebデザインの簡単な例を紹介しながら、紙とwebのデザインの違いについて語っています。
ポスター、チラシ、はがきなどのデザインでは平面のレイアウトをデザイナーが工夫します。例えば、こちらは適当に考えたイベントチラシの主な掲載事項です。
①イベントタイトル
②イベント日時
③イベント内容
④ 登壇者情報
これを紙媒体で次のようにデザインレイアウトしたとします。
パターンA
このチラシでは、まずイベント名や日時、内容は二つ、と読み取って行くことができますが、それは頭の中で勝手にグループを捉えることができるからです。見る人によっては、最初に目の行く箇所が、画像だったり日時だったり、はたまた興味の湧く題目だったりの違いはあっても、これが「イベントのチラシ」だと理解するのに時間がかかることはあまりないはずです。
このチラシでは、イベントのタイトルがやや下の方に配置しています。また、2つのイベント内容は時間や組み方が上下左右など入れ替わっています。これらはデザイナーの「デザイン」のひとつです。
では、もうひとつ参考に作ってみました。Bです。
パターンB
これはお固めのイベント（学会など）でよくあるパターンなのですが、
タイトル→日時→内容→登壇者
と非常に捻りのない、乱暴に言えば盛り上がりに欠ける構成になっています。
好みはあれど、パッと二つを見比べたときに、最初のパターンの方が「グラフィカル」な印象を持つことは間違いないと思います。紙媒体ではごく普通に行われていることですね。
ところが、グラフィカルにしたはずのAが「webデザインでやってはいけないこと」なのだと知ったのはSEOを含めwebの勉強を始めて間もない頃のことでした。つまり「SEO的によろしくないデザイン」はwebデザインとしては「正解」ではないということです。
SEOに詳しい方であれば当然のことですが、ざっくりいえば、サーチエンジンがコードの文書構造のなっていないサイトを嫌うということに行き着きます。よって、デザインした感のあるAよりもBの方がwebデザインとしては正しいということです。これはショック。
では、上述2つ目のパターンBをグラフィカルにするにはどういったアイデアがあるかということで、次のパターンCはランディングページになります。この場合、同じ縦長ではありますが、ユーザー側のスクロールに依存することになるため、スクロールしてもらうための魅力的な文言などをファーストビューの中に備える必要があります。今回は例としてイベントの登壇者が世界的ベンチャー企業のCEOだと想定し、コピーをいれることにします。
パターンC
まず、文書構造を正しくするため、次のことに気をつけました。
・順序の入れ替えは行わず、各要素ごとに順番に。
・空間に遊びを持たせるために内容の詳細はモーダルウインドウで別に出現させる。
これにより、すっきりしながらも「デザイン」した感を目指します。
正しい文書構造かつグラフィカルなデザインを施すことで、良いwebデザインにしよう、ということが大事なのですね。紙で行えていた配置の組み換えによる工夫をwebデザインで必要とされないことがやや物悲しくなりますが、致し方ありません。確かに、先日のアクセシビリティの記事でも順序を守ることは大切なことだと学んだばかりです。
webデザインがおおよそ似通った構造になっているのはこの理由が大きいようです。そして、これをいかに乗り越え、上質なwebデザインにするのかというと、アクションや動きによる「変化」を付け足すことが求められます。この「変化」の工夫もまた、webデザインのひとつだということを考えることが最も大きな違いかもしれません。
webにも人にも愛されるデザインの提案を心がけるように自分が変化しないといけないですね。
さじ
注記：サンプルの内容はすべてダミーとなっております。名前、題名などは架空のものです。画像はぱくたそさんよりダウンロードさせていただきました。
加熱する議論に感情が昂ぶるドイツ人ハーフのフリー素材 https://www.pakutaso.com/20171054304post-13863.html
Dell モニター U2520DRレビュー。
こんばんは、さじです。
DellのQHDモニタU2520DRを購入しました。
（画像：アマゾン）
検討材料として、画質ではフルHDor4Kモニタ、またサイズは27インチもありましたが（参照記事Dellモニタ（仮）を買います。 - ゆるっと広告業界）、配置レイアウトや現状での使用用途、将来的な様々な拡張を考慮し、QHD25インチを選択と落ち着きました。
今回購入したモニタの検討段階では既に購入した方のブログ記事などを参考にしました。それが大変ありがたいと思いましたので、自分より後に購入を検討されている方も判断材料の一つとして利用していただけたらと思います。記事の最後に今回参考にしたブログ記事のリンクも貼らせていただいております。
使用者の用途と環境
用途：
業務（DTP・webデザイン、画像加工）
私用（動画、アニメーション）
環境：
MacBook Pro（13-inch, 2019, Four Thunderbolt 3 ports）
内臓ディスプレイ／Retina Display 2560 x 1600
プロセッサ／2.4 GHz クアッドコアIntel Core i5
メモリ／16 GB 2133 MHz LPDDR3
グラフィクボード／Intel Iris Plus Graphics 655 1536 MB
OS／MacOS Catarina
使用アプリケーション：
Illustrator,Photoshop,InDesign,PremierePro,AfterEffects,Office
Dell U2520DR仕様
| 画面サイズ | 25インチ |
|---|---|
| パネルタイプ | IPS,非光沢 |
| 実効解像度 | 2560 x 1440 @ 60Hz |
| アスペクト比 | 16:9 |
| 応答速度 | 8ms（GtoG）; 5ms（GtoG、オーバードライブ付き） |
| コントラスト比 | 1000:1 |
| 輝度 | 350cd/㎡ |
| 最大表示色 | 1680万色 |
| 色域 | sRGB 99%／Rec.709 99%／DCI-P3 95% |
| その他機能 | VESA Display HDR 400対応,ちらつき防止, ブルーライト軽減,反射防止/3Hハードコーティング |
| 寸法・重量 | W56.77cm x D18.5cm x H38.29cm 4.2kg（スタンド除く） |
| インターフェイス | ディスプレイポート (DisplayPort 1.4モード)、 DisplayPort出力 (MST)、HDMI、USB-C、 電源供給 (DisplayPort 1.4モード)、 USB-Cダウンストリーム、 USB 3.0ダウンストリーム + バッテリー充電1.2、 USB 3.0ダウンストリーム x 2、オーディオラインアウト |
| 調節機能 | 傾斜-5°/+21°、スイベル45°、回転90°、昇降130mm |
| 消費電力 | 24W（スタンバイ/スリープ時0.3W） |
注目すべき点はやはりUSB-C接続。MacBookへの接続はHDMI to USB-Cが主流ですが、モニタ側にUSB-Cがあり、直接給電・充電することができます。体感では充電ケーブルによる充電スピードと遜色ありません。
また、QHDの画質は最大解像度がRetinaディスプレイに極めて近い2560x1440。目線の行き来に違和感ない美しい画質です。4Kディスプレイとの差も際立って劣る感覚は受けませんでした。
開封・組み立て・接続
箱からモニタを出す前にまずスタンドを本体に接続します。説明書や本体の包装にも注意書きがありますが、慣れた人ほど見落とすかもしれません。
足を台座にはめ込み、つまみでねじ止めしたのち、本体の窪みに差し込むだけの構造で力は一切不要です。
一体化したら足を持って箱から取り出します。この時点で上下、前後、回転の可動が可能。接続ケーブルは回転させてから取り付けられるのが非常に便利です。回転の場合のみ、台座に当たらない程度に高くしておく必要があります。
ケーブル接続はUSB-C端子のみ注意が必要でした。MacBookへの接続は背面下部のUSB-C（90W）への挿入のみです。下記写真の3つ並んだPort（Pマーク）の中央、プラグ90Wのマークのあるポートに接続します。側面にあるUSB-Cはダウンストリーム専用です。
画質
MacBookなど日頃Retinaディスプレイを使用していると色の再現力にはこだわりが出るかと思います。解像度は下記写真のように拡大して見比べればRetinaにやや劣るのがわかりますが、60cmほど離れて画面を見ることを考えれば差異は感じられませんでした。余程こだわりのある方は4Kディスプレイを検討された方が良いかと思います。
解像度比較。1枚目がDellモニタ、2枚目がMacBook。
（Retinaのモアレは撮影によるものです）
色再現力比較。1枚目がDellモニタ、2枚目がMacBook。
（Dellモニタは撮影位置の影響で照明の反射が入ってしまいましたが中央部分を比較してご覧ください）
陰影と光の飛び具合はほぼ同レベルの印象です。モニタのカラー設定はRetinaに寄せて少し調整しています。
補足
設置風景。MacBookとモニタのみであれば下記写真のように配線1本ですっきりと給電しながら作業できるようになります。MacBookの充電アダプタは場所をとるので省スペース化できました。モニタ左側面にはヘッドセットをUSB接続しています。同じく左側面にはUSB-Cデバイスを接続できるポートもあります。
写真2枚目はモニタ（色：ブラック）とMacBook（色：スペースグレー）のカラー比較です。モニタがやや濃いグレーですが違和感のない自然な仕上がりです。写真ではだいぶ差があるように見えますが肉眼ではあまり差は感じません。
まとめ
金額的に他のメーカーより値が貼るものの、概ね満足の行く製品でした。以下は個人的メリットデメリットも含めた製品と仕様、付属品を含めた開封満足度になります。
- USB-C給電：満足（MacBookユーザーには最適）
- 色の再現力・解像度：満足（業務上問題ない）
- 反応速度：満足（カーソルのカクツキは皆無）
- 回転機能：満足（セッティング時にも有効）
- スイベル・昇降機能：普通（スイベルは平らな面に置く必要あり。木、布だと台座ごと滑る。ロック機能はなし）
- 価格：普通（他社同等品と比べると割高、最安時33,800円*、Amazon現状41,800円）
- 設定：満足（機器認識など問題なし）
- 重量：普通（やや重いが台座の安定感はある）
- 外観：満足（フラットな台座、背面も美しくスタイリッシュ）
- 付属品：満足（一通り揃っているため買い足し不要）
*2020年11月アマゾンブラックフライデー税抜き価格。価格.comによる最安値は税込み42,991円。
以上、検討中の方の参考になれば幸いです。
お読みいただきありがとうございました。
参考
参考リンク：デル公式
U2520DRユーザーズガイド（マニュアル）：デル公式
参考ブログ：U2520DR
参考ブログ：P2421DC
Dellモニタ（仮）を買います。
こんばんは、さじです。
パソコンを選ぶとき、最近はデスクトップよりも
ノートの方が多いんでしょうか。
テレワークが流行ってからというもの
自宅用にディスプレイを追加する方が多いようで
Amazonを物色していると入荷待ちが多いですね。
さて、自分もデュアルディスプレイとして
会社のモニタを貸与して使っていましたが
スペースの問題で狭かったのと
不安定な位置にあったので、貸与物だし
壊したら嫌だなあと（犬が激突とかしそうで）
割と早々に返却してしまいました。
で、意外に慣れてしまいますので、ここしばらくは
ところで、PS5の抽選が当たったという
愚息サジ助の話も以前書きました。
このPS5ですが、将来8Kまで対応可能という
超ハイスペックです。
実のところ、PS4のころからモニタの発色に
不満たらたらだったサジ助でありまして
公式家電ショップのPS5の抽選に軒並み落ちた際
当たらないならモニタだけ新調するかなあ、と
先に4Kモニタを注文してたんですね。
ということで、我が家にモニタが一台余りました。
いる？と聞かれたのでそりゃあ、いる！！
よしよし、場所さえ確保すればいつでもOKだねと
年末は忙殺されて手も足も出なかったので
正月明けに作業場を整えることにしました。
で、場所が出来上がりまして、モニタ設置。
デュアル再び！と相なった訳ですが。
。。画質悪くね？
サジ助曰く、えー、違いがよくわからない。
いやいや、ここ見てみ？ほらほら。
Illustratorやpdfの文字がガタガタ。
よく見ると文字のふちに汚い線も。
サジ助には、まあ言われれば。。という程度らしい。
しかしながらこれはデザイン業にあるまじきです。
流石にせっかく整えた環境なので使ってますが
色やレイアウト作業はMacBookの13インチを使い、
チャットや原稿、フォルダは22モニタで見るという
なんとも無駄、いや、贅沢な使い方をしています。
でもせっかく広いスペースができたのに。。
新しいの買っちゃうか？3モニタ？
せっかくなら4Kでしょ！と探しながら
サジ助の4Kモニタにテスト接続してみましたが
まあ、綺麗っちゃ綺麗なんですが、
こんなもの？程度でした。
ちょっと調べたら、自分のMacBookの
解像度出力が4K対応しきれてないというか
（公式で確認したら2,560×1,600）
4Kを十分に活用できてないっぽい。
4K設定にすると文字が小さくなるそうで。
会社で借りてたのがフルHDで支障なかったので
フルHDでいいんじゃないか？と思い直しました。
でも不安なのでMacBookと外付けモニタで
検索したら、2Kがいいんじゃない？という結論に。
あとは、モニタの角度（前後）と高さ調整、
できたら90度回転が欲しいと昔から思ってたので
（acerは昔使ってたがあまり好きじゃない）
サジ助がBenQなので使用感を聞くと
色の調整がいまいちだと言います。
（プロっぽいセリフですがマイクラとかです）
すごく良い訳でもないけど安心かもしれない。
そして、検討中のがこちらの二つです。
Dell ワイドフレームレスモニター 27インチ QHD（2K）
Dell ワイドフレームレスモニター 27インチ S2721DS(3年間無輝点交換保証/AMD FreeSync™/QHD/IPS非光沢/DP,HDMIx2/縦横回転,高さ調節/スピーカー付)
- 発売日: 2020/09/19
- メディア: Personal Computers
Dell モニター 25インチ U2520DR QHD（2K）
- 発売日: 2020/07/18
- メディア: Personal Computers
27インチの方は、大きすぎだけどとにかく安い。
USB-C* は無く他と同じHDMI接続になるけど
3万弱ならかなりお買い得です。
*補足：MacBookはUSB-C接続のみです。
25インチの方がUSB-C付きで使いやすそう。
モニタに直接つなげばごちゃごちゃ配線も一掃、
USB3はヘッドセットや外付けHDなどの
ハブ代わりになるらしい。4万ちょい。
25インチUSB-C付きのが使いやすいですが
でも1万3000円の差は大きいなあ。なんか買える。
おそらく近日中に決めるかと思いますので
また使用感など報告します。
さじ
追記
MacBookのデュアルディスプレイ用にお古のモニタ貰ったんだけどretinaに慣れすぎた？
— さじ (@conasaji) 2021年1月5日
フルHDだけど画質が気になって仕方ない。
調整が難航して最終的に4Kモニタをamazonで物色。
4万かあ〜とふと目をやればお年玉袋が目の前にありますがこれはもしや天使の贈り物？
まだ目の前にあるんですが？いらんのか？
webデザインで気を付けること。2
こんばんは、さじです。
前回記事、
「webデザインで気を付けること」の結びで書いた
Googleマテリアルデザインについて紹介します。
Appleのアクセシビリティへの配慮にも書きましたが
大企業の社会的弱者への考え方を学び
より良いwebデザインを行うための
個人的勉強のメモになります。
今回もGoogle先生の翻訳を日本語らしくしながら
自分の解釈でまとめた内容となっています。
webブラウザChromeの仕様に照らし合わせた内容と
各種ツールを利用した場合の具体的な事例が
掲載されています。
こちらの「Material Design」より
アクセシビリティの項目を中心にまとめます。
アクセシビリティを理解する
アクセシビリティの改善によって次のことが期待でき、すべてのユーザーの使いやすさが向上します。
低視力、失明、聴覚障がい、認知障がい、運動障がい、または状況障がい（腕の骨折など）。
原則
Clear（くっきり）*
クリアーなデザインレイアウトにより、ユーザーのアクションを促す。
Robust（しっかり）*
さまざまなユーザーに対応できるようにアプリを設計する。
Specific（はっきり）*
ユーザー各々のプラットフォームを最適で明確な支援技術でサポートする。
*直訳ではClear（クリアー）、Robust（壮健）、Specific（明確）
＊主にモバイルUIデザインに適用する内容となります。前回同様、このあとは具体的にデザインに関わる事柄を抜粋します。一部デザイン以外の項目を参考として抜粋しています。
●階層
ボタン、画像、文章は増えれば増えるほど複雑化する。これを防ぐため、以下のことを配慮する。
・はっきり見えること
・コントラストとサイズ
・重要な項目の階層順位
・重要な情報は一目でわかるように
アクションはページの最上部（ヘッダー）または最下部（フッター）に設置する。他のコンテンツ要素と混ぜない。
●フォーカスの順序
画面上の視線の動きは通常、上から下、左から右へ流れることを前提とし、配置に配慮する。
●色とコントラスト
ユーザーにアクションを促すには色とコントラストに注意することが重要。
＊GoogleのColor Toolでは色とコントラストの組み合わせをテストすることができます。ページ内右のパレットの色を選ぶと、左には文字と背景色のサンプルを見ることができ、文字が見えない背景色が選ばれた際には警告のマークが出ます。
●色以外の要素による識別
さまざまなタイプの色覚異常を想定し、色の違いだけでなく以下を組み合わせる。
・ストローク（変化）
・インジケーター（進行具合）
・パターン
・テクスチャ（質感）
・テキスト
これらの要素で、情報やユーザーが必要なアクション（ボタンを押すなど）を識別できるようにする。
●タッチターゲット（ボタンなど）
48×48dp（画面サイズに関係なく約9mm四方）
注：アイコンなどを48dpに目一杯大きくする必要はなく、タッチした場合に反応する仕様のこと。例として、24x24dpのアイコンを中心に配置した48dpのタッチターゲット（周囲に無色の余白がつく）。ボタンも同様。
（参考）
●代替えテキスト
画像を文章で変換する機能を利用した際に使うテキストを入力しておく。（読み上げ機能、画像を表示できないブラウザ向け）
・キーワードを3つ以上含む文章がSEO改善にもなる。
・125字以内で、短く簡潔に。
（良い例：東京都港区芝公園の夕方のスカイラインビュー）
・SEO改善目的の代替えテキストは読み上げ機能を利用するユーザーを混乱させるため行わない。
（悪い例：東京、tokyo、日本、japan、ジャパン、寿司、タワー、夕方、夜、建物、建物、空、スカイライン、ビュー）
・「の写真」や「の画像」という言葉は不要。
●画像、キャプション、本文の関係性
画像に関する重要な情報はアクセシビリティを考慮し、画像の近くに載せる。
・画像の長い説明にはキャプション、代替えテキストには125字以内。
・画像の説明を兼ねた本文がある場合、代替えテキストは不要。その場合はaltタグは空のままでよい。（画像のファイル名が入っている場合は読み上げ機能のユーザーが混乱するため消しておく）
・代替えテキストとキャプションは画像に写り込んだ内容（色、サイズ、場所の説明など）が望ましい。
・ユーザーの読者速度を落とさないよう、明確で短い本文を書く。
＊このほか、制御やアイコンに対する代替えテキストも推奨していますが省略します。
●コントラスト比
本質的な要素（重要、必須）と本質的でない要素（非必須）のコントラスト比を考慮する。必須要素はコントラスト比3:1~4.5:1。*
*コントラスト比についてはhttps://calculator.jp/science/contrast/などで計算することができます。（Google Material内で紹介されているリンクではありません）
●モーション（動き）**
モーションに敏感なユーザーが快適に利用できるよう制御機能をつけたり次のような配慮を行う。
・自動で移動、スクロール、点滅するコンテンツが5秒以上続く場合、制御できるようにする。
・フラッシュは1秒間に3回以下。
・広い中央領域を点滅させない。
**モーションについては以下のガイドラインが用意され、動画コンテンツの豊富な利用アイデアが掲載されています。
https://material.io/design/motion/understanding-motion.html
●タイポグラフィー
文字に関するアクセシビリティについてはMaterial Designも参照。
・4dpグリッド（天地）を利用し、4で割り切れる値にする。
・フォントの太さ、書体の違いを理解する。
＊テキストの読みやすさについての詳細はこちらです。
https://material.io/design/color/text-legibility.html
配色は読みやすさを損なわないよう配慮する。
・アプリに明るい色と暗い色の両方の背景を用意する場合はどちらも強いコントラストの色を用いる。
・色背景にグレー文字を使う場合は、黒の不透明度を用いる。
・色付きのテキストは大きな見出しかつ簡潔な短い文に使う。（長文には用いない）
●表の数字
数値が主な表では等幅の数字を用いる。（数字の字幅により単位がずれ、読みにくいため）
●本文（英語の場合）
・通常40〜60字（デスクトップなど幅にゆとりがあり、1行が長くなる場合は行の高さを20sp~24spに増やす）
・行送りはフォントのサイズに比例する。
例：フォントが14spの場合、行送り20dp
フォントが20spの場合、行送り28dp
・段落の間隔はフォントサイズの75~125%に保つ。
・配置は左揃えを基本とし、右揃え、中央揃えは本文以外の印象的なシーンのみに用いる。
・システムフォントは14sp未満のテキストに用いる。
（Android：Roboto、iOS：San Franciscoなど）
・GoogleフォントではRobotoでカバーされない言語はデフォルトとしてNotoファミリーが用いられる。
＊こちらでNoto Sansのファミリー書体をダウンロードできます。（日本語Noto Sans JPのサンプルも表示できます。表示例を作成しました。）
（参考）
●音
音はユーザーの満足度を向上しながら情報を伝えるのに役立ちます。
以下が音に関するガイドラインになります。
https://material.io/design/sound/about-sound.html
音には効果音、音楽、音声（ボイス）の3つの種類がある。効果音は、特定の要素に特定の音を関連づけることで視覚情報を補足する役割を持つ。音楽はブランド（価値）を向上し、ストーリー性を持たせ、ユーザーの共感を引き出す。ボイスを用い、複雑な内容を簡潔に表現したり、会話や対話を提供する。
以上、参考とした「代替えテキスト」と
「音」に関する項目以外が
デザインに関するものとなります。
内容が幅広いため原文とリンク先の内容が
ひとまとめになってしまいました。
現在世界ブラウザシェアトップのChromeですので
多くのアイデアと幅広い対応力は目を見張りました。
Appleを先に学習したことが大きいですが、
こちらのガイドラインは理解しやすく感じます。
また、気づいたこととしては
アクセシビリティ本来の目的を邪魔する可能性のある
SEO対策があるということです。
マーケティング視点とアクセシビリティ視点との
用途のギャップがあることが残念に感じました。
いちからデザインを起こす際にはこれらを根底に置き
ターゲットユーザーのUXの向上とともに
アクセシビリティの配慮を行いたいと思います。
今回はアクセシビリティ配慮の目線からの
デザインの注意点を中心にまとめましたが
本来、Googleのマテリアルデザインは
UI、UXの向上を目的とした膨大かつ
高クオリティの無償公開情報です。
興味のある方は、ぜひ一度ご覧になっては
いかがでしょうか。
新しいアイデアのきっかけになるかもしれません。
英語ですが、自動翻訳でも把握できます。
セクションごとのリンクをまとめたこちらが
とても見やすく構成されていますね。
自分はこの方のまとめも素晴らしいと思います。
計二回に渡り、長文のメモとなりました。
前回同様わかりにくい文が多かったですね。
また、解釈違いの面があるかもしれないことを
ご了承くださいませ。
お読みいただきありがとうございました。
さじ
webデザインで気を付けること。
こんばんは、さじです。
年末からwebデザインの勉強をしています。
技術的なキーポイントは本で学んでますが
webデザイナーが気を付けるべきことを学ぶと
よりユーザーの満足度の高い仕事ができると
新人webデザイナーは考えました。
デザインというと視覚的なテクニックや
見た目新しさに気を持っていかれがちです。
これらが健常者目線が中心なのに気づき
一旦立ち止まってしまいました。
障がいを含む社会的弱者に対してはどうなのか？
大企業はどう考えているのかを知ることで
何が必要なのかを学びます。
Appleが提唱しているガイドライン
「Human Interface Guidelines」では
アプリ開発ではこんなことに気をつけてねと
システム設計はもちろんデザインまで
Appleが通達を出しています。
こちらで出てくるアクセシビリティ* に
関する項目にヒントがありました。
*Accessibility（アクセシビリティ）＝直訳は近づきやすさ、アクセスのしやすさ。あらゆるユーザーが機器やサービスを利用できるようにする工夫のこと。
デザインが関わってくるアクセシビリティ。
英語の原文を日本語翻訳で読むので
きっちり正解なのかわからないものの
自分なりに読み解いたことをメモしたのですが
せっかくなので共有したくなりました。
Google先生の和訳を日本語らしくしてます。
前書き
機能（各人が行う自分好みにする設定）やデバイスに左右されることなく全てのユーザーが満足できるサービスを提供します。
世界の7人に1人は様々なやりとりやデバイスの利用に環境的な障害または身体的な障がいをすでに持っており、誰もがその立場になる可能性があります。
障害を4つのカテゴリに分けた際、全ての人が満足できるサービスになるよう設計します。
Vision
（ビジョン、視覚）
失明、視力低下、色覚異常などの視力障がい。
Hearing
（ヒアリング、聴覚）
聴覚障がいのほか、TPOにより音を出したくない場面。
Physical and Motor
（フィジカルとモーター、身体と運動）
細かい操作が難しい身体的な障がい。
Literacy and Learning
（リテラシーとラーニング、読み書き能力と学習）
発話や読解、複雑な事柄の理解、集中力の維持が難しい障がい。
これらに配慮したサービスを用意し、提供してください。
この後は細かな説明が続きますが
たくさんあるのでデザイン関連を抜粋します。
●44×44ptのヒットターゲット。
操作ボタンなどの触れる部分には44pt四方をとる。
●フォントサイズに連動するグリフ。
ユーザーの設定により文字の拡大表示をした場合でもグリフは同様に拡大表示する設定にする。
●フォントの太さはレギュラーと太字。
Regular、Medium、Semi-Bold、Boldを使用し、UltraLight、Thin、Lightは使用しない。
●カスタムフォントの注意点。
見やすさを損なうフォントは避ける。（ブランディング、没入型ゲームを除く）
●左揃え（日本語、英語などの左から右に書く言語）。
本文のジャスティフィケーション（両端揃え）は使用しない。
●斜体、太字。
読みにくくならないよう全文への使用、多用は避ける。
●オブジェクトの区別。
情報を伝える場面など、赤と青など色の違いだけで区別させず、テキストやグリフを添える。
●システムカラー優先。
UIカラー、またはNScolorを用いる。（ユーザーの設定にも反映させられる）
●色覚異常への配慮。
色覚異常の方が区別しにくいとされる青とオレンジ、および赤と緑の組み合わせは避ける**。
●強く対照的な色を使用。
読みやすく、また認識しやすくするため色のコントラストは上げる。
●アニメーション。
アニメーションにより目眩、吐き気を引き起こす人に配慮し、「モーションを減らす」を実行した際に動きを制限することができるようにする。具体的には、Z軸の変化をさせない、スライドではなくフェードを用いる、など。
●自動再生。
ユーザーが視覚を制御できるように自動再生は避ける。
●点滅要素の注意。
発作を起こす可能性のある点滅は避け、情報を伝える唯一の方法としない。
●コピーは簡潔に。
**色覚異常についての組み合わせ例は以下のリンクで確認できます。
10.見分けにくい色の組み合わせ例 | 色覚異常といわれたら | 目についての健康情報 | 公益社団法人 日本眼科医会
以上が少し拡大解釈したデザイン関連です。
アクセシビリティについては以下のサイトに
非常にわかりやすいイラストがあったため
補助的な参考にしました。
高齢者や障がい者を含む全てのユーザーに
最高の満足を、という概念を基に
設計されているのが現在のApple製品と
アプリであることに納得できます。
自分は開発ではありませんが
デザインに関しても非常に勉強になりました。
Googleにもマテリアルデザインについて
優れたガイドラインがありますので
こちらも近いうちにご紹介します。
こういったことにも配慮しつつ、
サイトやバナー、動画のwebデザインを
素敵に作成できるデザイナーになりたいですね。
さじ
