オープニングと花粉症の話
デザインの味付け
はい、始まりました。デザインの味付け。
この番組は株式会社ajike代表の梅本と、その仲間たちがデザインについて、雑談を交えながら話す番組です。
今日のお相手は、先週に引き続きまして、神田さんです。神田さん、よろしくお願いします。
はい、よろしくお願いします。
だいぶ、春めいてきました。
ああ、もう卒業式やら入学式の季節が近づいてきましたね。
そうですね。梅本さん、そういえば花粉症は大丈夫なんですか?
あの、さっき薬飲んでます。
ああ、やっぱり。
やっぱり。そうです。
まあ、鼻詰まりはないですね。ちょっと2年ぐらい前に鼻の中を焼いたんですけど、それも1,2年で終わるって言われてたんですけど、こうか。
まだなんか続いてるのかなっていう感じはしますね。
まだ結構、花粉症がきついシーズンですよね、この3月半ばとかって。
そうですね。ちょうど今外行ったらもう花粉がみたいなんで、家の中を折ってもやっぱりむずむずしてるので、薬飲んでやってますね。
ああ、なるほど。
まあでも、ちょっと温かくなってきて過ごしやすくなっては来てますね、最近。
そうね。外行くとやっぱり気持ちはいいから、薬で抑えられるんだったらちょっと行って散歩したりとか増えてるんで、気持ちいいなあっていう感じですよ。
なるほど。
そんな気持ちいい環境というところも踏まえて、今日のテーマは何でしょうか。
環境に優しいUIデザインのテーマ紹介
今日のテーマは、アクセシビリティの次に来る環境に優しいUIデザインというテーマで話したいと思います。
環境に優しいUIデザイン、アクセシビリティのさらに次っていう話ですか。
そうですね。めもさん、例えばエディターツールとかでいろいろ使われてると思うんですけども、ダークモードとかって使ったりされますか。
ダークモードしてますよ。
環境に優しいですね。
ありがとうございます。エコモードなんで。
エコモード。
ダークモードって環境に優しいんですよ。
電力消費量が抑えられるからっていうことですか。
確かにな。
最近AI関連のニュースとかで、めもさんも見てると思うんですけども、AIに対してありがとうとかお願いしますとか、そういうのって不要だみたいなニュースがあって。
なぜ不要かというと、ありがとうお願いしますとかいうのだけでも、一人一人がそれを言うだけでは全然ですけども、みんながそれを言うと、電力消費量が半端ないと。
そういうニュースがあったんですよ。
それに関連してなんですけども、自分が見てた記事で、デザインも環境を考えてデザインしないといけないみたいな。
デジタルのデザインっていう意味でってこと?
そこら辺を見たんですけれども、環境問題ってみんな敏感ですし、やっぱりテーマとしては大きいじゃないですか。
もしかするとデザイナーに対して、デザイナーで今、アクセシビリティに配慮したデザインは求められることが多いと思うんですけども、
同じように環境に配慮したデザインみたいなのが、もしかしたら来るんじゃないかなと思って、今回はそういうテーマで話したいと思います。
面白い。いいですね。
環境に優しいデザインの具体例1：ダークモード
ちなみに今日のテーマの環境に優しいデザインというのはどういうものなんですか?
先ほども言ったんですけども、電力消費を抑えるっていうのが結構環境。
デジタルデザインに関連するところで言うと、密接につながっているところです。
環境に優しいデザインって具体的に何なの?っていうところなんですけども、3つほどありまして、
まず1つ目が先ほども言ったダークモードですね。
ダークモードっていうのが何なのかっていうと、エディタツールとかでよくあると思うんですけども、
エンジニアさんとかがカチャカチャコードを書いている画面とかで、真っ黒の画面の中にコードを打ち込んでいるみたいなのはイメージつきやすいかなと思うんですけども、
ツールによって背景色を白にできたり、黒にできたり、またそれ以外の色にできたりみたいなのがあると思うんですけども、
あれのバックグラウンドの画面を黒色にできるっていうのがダークモードです。
あれはですね、最近この液晶が進化していて、昔はそうではなかったみたいなんですけども、画面のピクセルの色が真っ黒、つまりカラーコードで言うと00000だと、その部分の消費電力っていうのはゼロになるらしいんですよ。
え?
無ってこと?
電力消費してないみたいなんですね。
え?
なんで、例えば紙絵の印刷とか考えたときに、色がついているところはもちろんインク使って印刷すると思うんですけども、
白い部分っていうのは色を載せない、それが白じゃないですか。
それと同じようにディスプレイで色ついているところはLEDの光で表現してると思うんですけども、黒い部分っていうのは光使ってないらしいんですね。
なるほど。
それが消費電力につながっていて、逆に背景が白い画面っていうのは画面の全体が発光しているということになるんで、それに比べるとダークモードのほうが消費電力が少ない。
なるほど。おもしろいですね。
自分は無知すぎて、エンジニアさんがやってる画面とか、黒いのかっこいいじゃないですか。かっこいいけど文字見づらいなとか、それぐらいの認識しかなかったんですけども。
はい。
今はダークモードでツールを使うっていうのは、その分消費電力の消費っていうのが少なくなって、エコでもあるということです。
なるほど。確かに。はい、どうぞ。
そうですね。サイトとかでも、今ダークモードが用意されているウェブサイトとかはあんまりないと思うんですけども、
ユーザーが、利用者がダークモードなのかライトモードなのかを選択できるっていうのは、アクセシビック面でもメリットがありますし、そういう環境面でもちゃんと考えられているってことになるのかなと思います。
最近自分、アプリ出したんですけど、個人開発で。
はいはいはい。
一応そのサイト、ダークモードも用意してました。
あ、そうでしたそうでした。見ました見ました。
見てくれた?でもそんなことは何にも意識してないです。ごめんなさい。環境意識してないダークモードです。
いや、結果そうなってるんですよ。
そうか。なんとなくちょっとトライしてみようと思って、その透明がテーマのアプリだったんで、白の時と黒の時、透明ってどう見えるのかなっていう意味でやっただけなんですけど、そんな効果があったんですね。
そうなんですよ。ツールとかではよくあると思うんですけども、ダークモード用意しているサイトとかってあんまり思いつかないなと思ってたんですが、すごく梅本さんが作ってましたね。素晴らしい。
読めてました?
いや素晴らしいですね。
このテーマが来ること読んでました?
先端いってますね。
いやいや、すいません。ほんと恥ずかしくなりました、今。
環境に優しいデザインの具体例2：ファイルサイズの配慮
今日は3つあるっていうことですね。環境に優しいデザイン、具体的に何っていうので3つで、今の1個目がダークモードですね。
2つ目は何ですか?
2つ目はファイルサイズへの配慮です。
ファイルサイズっていうと結構昔の話に遡るんですけども、昔はですね、ウェブのページを作るとか1つとっても結構画像サイズ気にしてましたよね。
あの話が出るんちゃうかと思ってますよ、今。
あの話って何ですか?
モバイルサイトを我々が作ってモバイルバナーを作ってたときの話が出るんじゃないかとドキドキしてます。
いやもうまさにそうですね。ほんともうパコすぎてもう話がわかる方がどれくらいいるかわかんないですけども、
自分が昔、柄系のサイト用のバナーとかを作っていたときは、ファイルサイズが指定されていたのが、確かこのGIFの画像のファイルサイズ2Kだったと思うんですね。2KB。
うっちゃおもろいよね。
2Kのバナーってもう無理なんですよね。色数を使うと。
そうそう。カラーにしろっていう指定はあるんだけど、2Kでカラーってめっちゃむずいよね。
もう無理なんですよ。なんでそれをフォトショップでピクセル一つ一つに色を塗っていって、色数を減らしてファイルサイズを抑えてたっていうのがそんな時代がありました。
多分8色とか16色にしないと無理だったよね。
そうですね。そうでしたそうでした。フォトショップで書き出しのときにあるんですよね。
でも16色とかにしたら、何書いてるか全くわからなくなるよね。
あんな職人みたいな、拡大しまくってピクセル一個一個ペンで塗りつぶしていくみたいな。
ドット絵クリエイターみたいに押せなあかんよね。
そうそうそう、そうでしたね。いやそうなんですよ。ちょっと話それちゃいましたけども。
ファイルサイズね。
昔はかなり気にしていた、今のバナーは極端な話ですけども、写真のJPEG画像とかも綺麗に見えるんだけれども容量は落とすみたいな感じで、
ちょっと圧縮して書き出したりとか、そういうことをよくやっていたと思います。
ただ最近はですね、ネット回線とかが高速になってきて、自分もほとんどあんまり気にすることがなくなっていって、
そういえば昔はあんなにやっていたなっていうふうにはちょっと考えているときに、この回を考えているときに思ってたんですけども、
動画も本当にサクサク動きますし、画像1枚のファイルサイズとかっていうのを気にすることっていうのは全然なくなってたんですけども、
環境に配慮するっていうことで考えると、やはりあんまり不要な重さのデータをそのまま載せるっていうのはあんまり良くなくて、
できるだけ1ページあたりのファイルサイズ、データ量っていうのを落としたほうがいいっていうことで、
これからまたそういうところに配慮してサービスとかページ作るっていうところの必要が出てくるのかもしれないなと思ってます。
なるほど。いい話やな、それは。ファイルサイズ。
コードはやっぱり短いほうが軽くなるし、そっちのほうが電力消費量が安いっていうのはそれはその通りやからね。
そうですそうです。デザイナーっていうところで画像とかを例に出しましたけれども、コードとかも不要なCSSとか不要なライブラリとかを読み込んだりとか、そういうのってあんまり良くないらしいんで。
気を付けましょう。
そうですね。っていうのが2つ目です。
環境に優しいデザインの具体例3：過度なアニメーションのカット
じゃあ3つ目は?
3つ目が過度なアニメーションのカットです。
過度なアニメーションっていうのもパッと思いつく方も多いかなと思うんですけども、結構派手な演出をしているサイトとか、
そういうものを環境配慮っていう観点で、そういう点で言うとあんまり好ましくないっていうのがあるらしいです。
全部なくせばいいんかいっていうことでも全然なくて、もちろんそこにはクリエイティブの力があって、それによって人の心を動かすみたいなのがあると思うんで。
そういう部分は全然否定しないんですけども、こういう環境に配慮したデザインっていうところで言うと、過度なアニメーションはカットすべきだっていうところがあるみたいです。
電力みたいな話?ファイル用とか。
同じです。なので、目的達成をフォローするためのアニメーションとかはいいっていう話ですけども、それ以上のことはしないほうがいいと。
最近はやっぱりリッチなサイトも増えてきてるもんね、またね。フラッシュみたいな感じで。
そうですね。いろんな表現ができるんで、ぐるぐるさせたくなっちゃうと思うんですけども。
どういうところでそういう表現を取り入れるかみたいなのも、時と場合をTPOみたいな話なんですかね。そういうところで考えていくのが良いのかなと思います。
なるほど。じゃあこの3つ、ダークモードとファイルサイズの配慮と過度なアニメーションのカット。
今後のデザイナーに求められること
これもあれやね。ダークモードは対応してないと思うけど、安倍博士さんのサイトがやっぱりいいよっていう話やね。
あそこに戻ってきますよね。
帰着する。
逆しますね。帰着しますね。
本質やから、本質。
何を話そうとされていましたか。
まとめみたいな話ですけども、そういうところが今後デザイナーに求められる時代が来るかもしれないなと思ってます。
今の2026年とかでは、アクセシビリティをちゃんと考えてくださいとか、そういうところに配慮したデザインにしてほしいんですってことを言われるっていうのは、結構普通になってきてるような気がするんですね。
あんまり珍しくないというか。
珍しくはないですね。
でも数年前から考えると、アクセシビリティって聞いたことはあるけど、そういうような認識の時もあったと思うんで。
デザイナーに求められることの常識っていうのもどんどん変わってきているなと思うんで。
ここから2年後、3年後とかになっていったら、ちゃんとこのダークモードをサイトで用意してほしいんですとか、ファイルサイズの制限っていうのはここまでで考えているんですとか。
そういうような要求があるプロジェクトみたいなのも、もしかしたら出てくるのかもしれないなと思ってます。
確かに。
日本でもこういうのって当たり前になるかね、やっぱり。
なるかもしれないなと思ってます。
どこら辺からその流れが来るのかなっていうのもちょっと想像してみたんですけども。
もちろんこれは分からないんですが、やはりこういう流れが来るとしたら、1個考えられるのは日本の中の大企業のコーポレートサイトとか、そういう会社が出しているアプリとか、そこら辺から来るのかなと思ってます。
確かに。
アクセシビリティとかも大企業ほど配慮が必要で、もちろん利用者が幅広かったりとか、どんな方でもアクセスできるようにしないといけないとか、そういう部分が求められてきたと思うんですけども。
それを考えると環境配慮っていうところは、企業はサスティナビリティとか取り組んでるところ多いと思うんで、その取り組みの一環としてデザインに関しても環境配慮って結構分かりやすいかもしれないなと思ってます。
確かに。
利用者と企業の間をつなぐインターフェースって考えると、やっぱりこのウェブサイトのデザインとかサービスのUIデザインとか、そこの部分がちゃんと配慮してますよみたいな風に見れると一番伝わりやすいというか。
確かに上場企業とかはGXの流れで、グリーンタランスフォーメーションの流れでCO2排出量を会計に出さなきゃいけないみたいなのがあるから。
なるほど。
あれはもう法律に整備されてるからそうするっていうのもあると思うんですけど。
あとはウィーキャグもそうだと思うんだけど、ウィーキャグも確か法改正で順次る努力義務からマストになりつつあるみたいなのもあるじゃないですか。
なるほど。
もしかしたらこういうダークモード協会みたいなのがあるのか知らないけど、もしあるんだったらそういう協会の人とかはロビー活動すると思いますけど、
そうしたほうが当然電力は安くなりますし、企業の当たり前にしましょうみたいなことで、世の中の流れと合致していったら法律が定められてとかっていうのもあるかもしれないよね。
会社法とかで。
あるかもしれないですね。そこら辺もちゃんと対応できるデザイナーであり会社になっていかないといけないという感じです。
まとめと編集後記
わかりました。何でも対応せなあかん。
何でも対応せなあかん。
AIの流れにも対応せなあかん。
そうですね。
今日の話は、アクセシビリティの次に来る環境に優しいUIデザインとしてこういうふうなことが考えられるんじゃないか。
ダークモード、ファイルサイズ、材料、カードのアニメーションのカットという話をテーマに取り上げました。
今日も聞いていただきましてありがとうございました。
ありがとうございました。
編集後期、お疲れ様でした。
お疲れ様です。
この番組はというのを忘れました。
今お願いします。
お便りお待ちしてます。
環境に優しく省力化しました。
省力化。
この話さっき聞きながら内職で安倍博士さんのホームページ見ちゃいました。
今どうなってるんですか。
一回リニューアルしたとは聞いたんですけど、そんなに変わってないですね。
あのままですか。
ぜひ、神田さんも調べていただいて。
今見ました。
リニューアルしたけどあんま変わってないよね。
リニューアルしたんですか?
なんかそんなことを聞いた気がしますけど。
違うんかな。
あれですね。
今ちょっとニュースが引っかかりましたけれども。
リニューアルじゃなくて、HTTPSに対応したっていうことなんじゃないですか。
そういうこと。
セキュリティの話ね。
なるほど。
これが2025年なんで、今までHTTPSじゃなかったんですね。
それすごいですね。
まあでも、たぶんオーブフォームのお得なんないからとかそういうふうに思ったかもしれない。
確かに。
素晴らしいですね。自分がホームページを学習し始めた頃のような構成ではあるんですけど、
いや、もっと高度な感じかもしれないね。
見た目だけだと当時思い出しますけど、めっちゃちゃんとしてるような気がするな。
そうですね。ちゃんと情報も更新されてるんですね。すごいな。
昔はテーブルでデザインをしましょうっていう感じだったから、
懐かしいな。テーブルで角丸の表現をしていくみたいだったんですよね。
ボタンを作るときにテーブルマスを9個用意するんですよ。
左上のマスに半円を書いて、そのまんま次の右側をビューと伸ばして、
角を半円にしていって9個組み合わせて真ん中のとこだけ、中央の部分だけにテキストを入れてボタンにするみたいな。
デザインやったんですけど、このテーブルを見てちょっと思い出しましたね。
いやー、そうですよね。昔ボタンの作り方、そうでしたよね。角の部分だけ画像にしてとか。
そうそうそうそう。角の部分画像にしてとか、そうそうそうそう。
そうでしたよね。思い出しました。
それで、そういうブロックを組み合わせてページを作るっていうのが大前提みたいな感じだったもんね。
そうですね。いろいろ思い出しますね。
思い出すのはやっぱりバナーか2Kの。
そう。
納品できない日々。
そうですね。あと何バイトをどうやって落とせばいいんじゃみたいなんで格闘してましたね。
きれいなバナー見たらきれいやなって思うようになったもんね。
そうですね。話はちょっと変わるんですけど、YouTubeでベイジーのそぎたにさんとグッドパッチの土屋さんがYouTubeで対談してらっしゃって、
今までのウェブ業界だったかな。ウェブの歴史を振り返るみたいなのを年末ぐらいに配信されてらっしゃったんですよ。
はいはいはい。見た見た見た。詳細覚えてないけど。
見ましたよ。
あの動画がすごい面白くて、自分もそれそれみたいな昔そうだったよなみたいなのがすごいあって楽しく見てたんですけども、
もうそれのウェブ制作界隈バージョンみたいなのを振り返りたいですね。
そうね。もうでもそれ以上の話ない気がするけど俺はね。
そのムーナーの話とか、フラッシュバナーの話とか。
フラッシュバナー。ムーバブルタイプからいつの間にワードプレスが主流を取ったのかとか。
あーそうそうそうそう。
MTのライセンスを買わなくていいとかそういう話。
あーそうそうそうそう。そうでしたそうでした。
ギタニさんの話も、アドビは昔買い切りで何万円しててとか、そんな話も確かしてらっしゃった。
あーはいはいはいはい。
会社にもいっぱいありましたよね。アクロバットのCSとかのソフトが。
CS、クリエイティブスイートね。
そうそうそうそう。そういう話したいですね。
ちゃんと整理しないといけないから、その動画を見て話すほうが早いかもしれない。
確かに。
そうか。我々もウェブ政策あるあるまた時間があったら話してみましょう。
ということで、きょうも聞いていただきましてありがとうございました。
ありがとうございました。
