3月17日　水曜日　18時 | ブラウザのインスペクタ

午前中はカウチトークでWEBの話をした。
以前ブラウザがHTMLやCSSを読み込んで、解釈して、ページを表示するまでの仕組みを解説させてもらった内容の続きで、今日は実際のWEBページの解析方法などをZOOMの画面共有を活用して解説した。WEBページの解析のデモではChromeブラウザのインスペクタ機能を使用した。

デスクトップやラップトップのブラウザで、スマホの見え方を再現したり、特定の要素(ページ上のボタンとか画像とか)のソースが実際にどう読み込まれているかを確認したり、一時的にJavaScriptをいじって実験してみたり。こういった開発者向けの支援ツールがモダンブラウザと呼ばれる部類のアプリには標準で付属している。これをインスペクタと言ったり、開発者向けツール(Dev Tools)と言ったりする。

WEBのデザインに興味があったりして本を読んでみたりしても、この辺の便利ツールの話はさっと流されていたり、あんまり詳しく書いていなかったりする。それにはそれなりの理由がある。この手のツールをスクリーンショットを交えて解説しようとすると冗長になる上に逆にわからなくなってしまうのが落ちだ。それにこのようなツールは変遷が激しく、できること・デザイン・使い方が日進月歩で変わっていく。とても書籍では取り上げにくい題材なのだ。

しかし、WEBデザインの世界で行われていることを知りたかったら、実際に世に出回っているものの裏側を覗いてみること。これが最も効果的な勉強法のひとつとなることは間違いない。百聞は一見に如かず、である。特にWEBデザインに興味が湧くという人は、ビジュアル面とユーザの体験がリンクしている場面に興味があると思う。そのような興味関心を活かして知見を深めていくならば、どんどん他人のやっていることを覗き見て、盗もう。そのためにブラウザのインスペクタはいろいろ便利な道具を提供してくれる。

SN