00:00
僕は普段あのウェブページのデザインを
仕事にしてるんですけど
ウェブページのデザインって
もうちょっと詳しく言うと
そもそもそれを何で作るのかっていうのを決めるところもそうなんですけど
作るものが決まった後に
そのウェブアプリケーションだったり
そのコンテンツをレイアウトして
写真をここに置いて
ボタンはその下に置いてみたいな
のを決めるのをまずやって
それを実際に作っていくわけなんですけど
作るっていうのはウェブページをプログラミングしてですね
普通に何気なくウェブページ見てる
そのページもボタンとボタンの間が
8ピクセルなり16ピクセルなり離れてたり
ページの端とその写真の間がですね
24ピクセルなり32ピクセルなり離れてると思うんですけど
その幅をそれがどんだけ離れてるかを決めて
プログラミングによって
ページの端から間隔を24ピクセル
スマートフォンの時は16ピクセル
タブレットの時は24ピクセル
もっと大きなデスクトップパソコンで見てる時は
32ピクセル空けますみたいなのを
ページの中に出てくる要素一つずつに
指定していくわけですね
何気なく見ているページなんですけど
実は人間が一つずつそれらを
どんなふうに表示するかを
丁寧に作っているっていう現状があって
03:04
いわゆるフロントエンドと呼ばれる
ユーザーが触れているインターフェースの部分を
どんなふうに作るのかを考えて
それを実際に作るっていうのが仕事にして
おまんま食わしていただいてるわけなんですけれども
ウェブページのデザインをする時
とりわけ実装する時に
いろいろ考慮しないといけないのが
ウェブページってその印刷物とかと違って
情報を受け取る人が同じ機械で見てない
いろんな形の画面で
スマートフォンだったりタブレットだったり
パソコンだったりっていう画面のサイズの違いもあるし
WindowsだったりMacだったり
iPhoneだったりAndroidだったり
ChromeだったりMicrosoft Edgeだったり
FirefoxだったりSafariだったりみたいな
ウェブブラウザの違いもあるし
ウェブブラウザのバージョンごとの違いもあるし
っていう違いもあるんですけど
それは画面の話で
インターネット ウェブに接続してるのは
別に人間だけじゃなくて
ロボットも接続していて
例えばGoogleの検索が何でできるのかっていうと
事前にGoogleのプログラミングしたロボットが
あらかじめめちゃくちゃウェブページを収集して
そこに載ってるキーワードを解析したり
リンクの関係を
ネットワークをGoogleが知ることで
このページは重要なんだなみたいなのを知ってるから
06:02
あんなにすぐ早く検索結果が出てくるわけで
つまり人間の前にロボットが一回アクセスしに来てる
画面のレイアウトとか
この情報がどういうふうに見えるのかっていうのは
人間に向けたものなんですけど
ロボットはそんなことを構いなしに
上から下まで見に来るから
そういうロボットのことも考慮して
このページのタイトルはこういうタイトルで
ここに大事な情報が自分たちはあると思っていて
この先はリンクなんだけど
リンク先のページはトップページなんです
ここからここはメニューなんですみたいなことを伝えたくて
それをウェブページの中に情報を埋め込んでおいて
ロボットが来た時にロボットにも優しく
優しくというかきちんとこのページの情報を解釈して
帰って気持ちよく帰ってもらえるように配慮して
実装というか形にするんですね
人間も見に来るしロボットも見に来る
もっと言うと人間も画面を見て
ブラウジングしてくる人だけじゃなくて
視覚に障害があったりする方は
スクリーンリーダーっていう画面に映るものを
音声で読み上げるソフトを使って
ブラウジングしてる方ももちろんいて
さっきはロボットのために情報を
埋め込んでたりしたんですけど
今度はテキストだけを頼りに
アクセスしてくる人間の方に分かりやすいように
今画像が見えてないかもしれないんだけど
この画像にはこういうことが書いてあります
書いてあるというか
こういう画像がここに貼ってあるんですっていうのを
伝える画像と同時にその画像が示すものを
説明するテキストを一緒に書いておく
09:12
そのことで画像が見えなくても
きちんとこのページに書いてある情報を理解して
読み取ってもらえるかもしれないみたいな
あらゆる人を考えて
そのあらゆる人っていうのは
別に障害ってだけの話じゃなくて
例えば酔っ払った人
お酒を飲んでインターネットしてる人ももちろんいて
そういう人はもしかしたら認知機能が
一時的に低下してるかもしれないし
普段メガネかけてる人が
メガネ忘れてきたけど
仕事しなきゃいけない時とかももちろんあって
視力が悪い状態でブラウジングしてることもあるし
Bluetoothイヤホンの電池が切れて音が聞けない
でもYouTubeの動画を資料として見なきゃいけないとか
別に障害だけじゃなくて
その人間が知覚できる感覚器を使う機械っていうのは
シーンによってはどれかが使えないってことは
もちろん起こり得て
それでもちゃんと情報が分かるように実装する
プログラミングするっていうのが
ウェブページを作る仕事なんですけど
その上でちょっと思うのが画像の扱いですね
画像を載せた時にさっきここには
こういう画像があるっていうことを
画像を見てない人にも分かるように伝えるための
テキストを書いておくっていうのが
具体的にはウェブページはHTMLっていう
プログラミング言語とは言えない
なんかXMLの公文みたいなものを使って
そこに画像がありますってことを表現してるんですけど
12:04
画像を書くとき 画像をウェブページに載せるときに
img要素っていうイメージの要素をテキストとして書くと
イメージ要素のソース属性に画像ファイルのパスを書く
この画像ファイルはサーバーのどこにあるのかっていう
アドレスというかパスを指定しておいて
ウェブブラウザはそのHTMLのイメージ要素のソース属性を見て
はいはい ここには画像があるんですね
その画像ファイルはここにあるんですねってことを分かって
ブラウザは画像を表示してくれるんですけど
ソース属性とは画像のパスを指定する役割っていうのと
同じようにalt属性っていうのがあって
altって書くその属性は大体テキストと呼ばれていて
ここに書いたテキストは画像が見えている場合は
ブラウザのどこにも表示がされないんだけど
画像ファイルを読み込めない環境だったり
あとネットワークの不備とかで
何らかの理由により画像ファイルが取得できなかった場合に
そのテキストが代わりに表示されるっていう仕組みになっていて
この挙動はブラウザによって違うんですけど
その大体テキストに何を書くのかっていう問題があって
例えばかっこいいフォントとかで文字を表現する時とかは
文字を画像にしてるんで
イメージ要素のalt属性には画像に書いてある文字を書けばいいですよね
そうすると画像がもし読み込めなくても
テキストとしてその文字が出てくるから
意味が伝わるかなっていうのは分かりやすい
画像の中に文字が含まれてる場合はそれでいけると思うんですね
というのもそれは画像が
そこに貼ってある画像が言語情報として載ってるからで
15:07
問題なのは非言語情報の場合で
例えばそのページの見た目を装飾するための
幾何学的な模様だったりとか
飾り付けみたいな意味での画像だったりしたら
alt属性に飾り付けの画像とか
装飾用のパーツみたいなことを書かれてもですね
それを言われても困るっていう感じで
このalt属性をうまく指定するっていうので
分かりやすい説明としてよく挙げられるのが
このページを電話で説明するときに
あなたはその画像を何て言いますかみたいな話があって
電話で 電話先の人にこのページの情報を説明するときに
その画像が必要だと思うなら
電話で伝わるように説明してください
もう必要ないと思うんだったら
別にもうそれは書かなくて
空欄にしてしまって
スクリーンリーダーでアクセスしてる人は
そこをスキップしてもいいっていう判断
スクリーンリーダーだけじゃないですね
Googleのロボットとかが飛ばしてもいいっていう判断を
こっちがして それでOKとするっていう
ここに飾り付けの画像がありますとか
装飾用の画像があります
猫の写真があります
みたいなことを言うか言わないか
制作者側に委ねられている
言語情報の場合は伝えるべき
そこに言語があるんで伝えるべきなんですけど
非言語情報の場合は
それを言語情報に置き換えるかどうかっていうところで
まず一つ目のジャッジがあって
置き換えるべき 伝えないと
このページは伝わらないっていう判断をした時に
次に画像に写ってるものをどう
18:00
非言語情報をどうやって言語情報へ
変換するかっていうことが問われる
ツーステップのジャッジが求められるわけなんですね
まあでも正直ですね
オルト属性は
いろんな人のすごくためになる考え方がシェアされていて
知見が溜まっているので
そういうガイドラインとかをきちんと読めばですね
割といい具合に誰でも決められるかなっていう感じに
ありがたくなってるんですけど
Twitterに画像をアップロードする時に
HTMLと同様に大体テキストを指定できる機能があって
これは別にTwitterだけじゃなくて
Facebookとか他のSNSも同様に提供されてるんですけど
画像アップロードする時にちょっとタブを切り替えると
そこにイメージをオルト属性に何て入れるかっていうのを
指定できるようになってるんですね
Twitterに画像を上げるっていうのが
好きで写真を撮って上げてるんですけど
そういう写真って別にここに行ってきたよとか
これが美味しかったよみたいな情報を伝えたい
言語情報を伝えたい写真というよりは
最近買ったレンズで花を撮ってみたら
なんか草の部分に水滴がついてて
その艶が綺麗だったのですっていうような写真
非言語情報はこうやって無理やり言ってしまえば
説明できるかもしれないけど
非言語情報を写真にして上げているわけなので
それも別に誰から言われてというよりは
自分が好きでやっているディテール
21:02
細かい描写のところをアップロードしている場合に
だいたいテキストに何て書くかっていうところで悩むんですよね
というのも非言語情報をアップロードしているところで
それを言語情報に自分で変換するっていうのが
非言語情報の時にはたくさん可能性があったものを
言語情報にすることですごく絞られてしまう気がして
それって言語情報だけ受け取った人は
非言語情報にあったレンジ
そこの写真に写ってる情報のレンジを受け取れる可能性から
言語情報しか抜き出せないって思うと
なんか貧しくなっちゃうんじゃないかなっていうのがあって
かといって空欄にするのかっていうと
情報が一つも受け取れないってことになるんで
なんかそれも違いますよね
画像を見える人だけ見てくれればいいやっていう
そういう消極的な気持ちではないし
かといってこの写真に写ってることを
ツイッターの制限のある文字数
だいたいテキストにも制限があるんですけど
制限のある文字数で表現したとして
本当にこの自分が好きで上げてる写真のディテールみたいなところが
伝えることによってすごいチープになるようにも思えて
悩みどころだったんですけど
それで最近は写真を撮った時間を
ツイートのその写真 写真をアップロードするときに
写真を撮った時間を一緒にテキストとして書くっていうのを
はどうなんだろうと思ってやってるんですね
その写真を撮った時間と写真を一緒に添付するってことで
その写真の撮った時刻は写真のキャプションとしても機能するし
24:06
画像が何らかの場合で表示見ることができない場合も
日時だけのツイートとして扱われるなと思って
すごい日時だけのツイートで
じゃあ画像としての大体の意味は果たせるのかっていうと
果たせないかもしれないんですけど
ただ自分がやってることっていうのは
この写真を撮った撮影した日時で成立するんじゃないか
この写真の大体テキストが成立するんじゃないか
すごく広い意味での画像の説明として
撮影した日時っていうものだけでいけるんじゃないかみたいな気持ちがあって
それで試してるんですよね
というのも写真って
写真って撮影した日時と今SNSだったり
投稿した公開した日時ってあると思っていて
写真の中には2つの時間のメタデータが存在するんじゃないかなと思っていて
普通はその撮影した時刻って明かされない情報メタデータなんですよね
だからそれは何でかっていうと
スマートフォンが普及したことによって
写真を撮影したら即公開することができるようになったっていう背景があって
例えば朝に撮った写真かもしれないけど
夜にアップロードしたら見る人にとっては
もしかしたら夜に撮影された写真のようにも感じられるっていうのが
このSNSの即時性と写真を撮る共有の
なんかこう本当はずれてるはずのタイミングが
実は撮影と公開が同期してるように思えるっていうところにあるんじゃないかなと思っていて
そこで撮影した写真時間も公開するってことで
27:03
なんかその写真の見え方が変わってくるんじゃないかと思ったりもしていて
自分が撮った撮影した時刻を公開することが
その写真の見え方も変わると同時に
その写真を説明してることにもなるんじゃないかとも思えてきていて
だから写真を撮った日時って大体テキストとして
その写真を説明するテキストとして
最も広く可能性を持った
でもあまりにも情報が少ないテキストとして
日時っていうのがあるんじゃないかなって思ったんですよね
でもこれもちょっと悩みどころで
さっきはその本当は無限の受け取り方ができる写真から
大体テキストとして一個の見方だけを説明することが
その受け取り方のすごい多様さを一つだけに絞る
まぜしくなっちゃうんじゃないかっていう懸念が
こっちが考えたらすべて妄想で
受け取り手が情報っていうのは精査するべきで
その情報をどう受け取るかっていうのは
受け取り手に委ねられて委ねるべきで
だから情報を発信する側がですね
別にこれは必要な情報をいらない情報っていうのを決めていいのかっていう
もちろんなんか持ってる情報を全部伝えるのが
分かりやすいというわけではないと思うんだけど
ヒルターかけるのは受け取り手がやればよくて
なるべく多くの情報を提供するっていうのも
一つの答えだとは思うんですよね
そう思うとたとえ一つの見方しか提供しないとしても
きちんと言葉で自然文で言語情報として
だいたいテキストを提供した上で
それ以外の見方もあるかどうかは
受け取り手に委ねるみたいな考え方もあるかなと思うんですけど
みたいなことを思う
30:01
写真を公開する時に特にwebで公開する時に
どこまで非言語情報として
非言語情報が伝わらない環境に対して伝えられるか
伝えることを諦めるわけじゃないんだけど
絞ることを発信者側がやっていいのか
絞ってしまうぐらいだったら
最も薄い情報として日時っていうメタデータだけを渡すことが
非言語情報を言語情報にしていると言えるのではないか
みたいなことを葛藤している
思っているというのがあるんですよね
