AIデザイナークイズの導入
今回は、AIデザイナークイズ／Part2です。
初級編でもちょっとヒヤッとしたな。
ね、言っちゃう最初で。
こういうのがあるからね。
怖いね。
グラフィックデザイナー、ウェブデザイナーの皆さん、腕試しといきましょう。
中級レベルのクイズです。
全問正解目指してくださいね。
おー、なんか楽しい。
じゃ、いきます。
ウェブサイトのUIデザインにおいて、ユーザーが目的の情報を効率的に見つけられるようにするために重要な情報の階層構造と配置設計の原則を何と呼びますか?
はぁ?
え?
もう一回読もうか。私は全くわかんないんだ、これ。
ウェブサイトのUIデザインにおいて、ユーザーが目的の情報を効率的に見つけられるようにするために重要な情報の階層構造と配置設計の原則を何と呼びますか?
原則?
原則って何?
え?
何これ?なんかちょっと中級者やわない?これ。
なんとかツリーとかそういうことじゃないんだもんね。
サイトマップとかって話でもないもんね。
でもサイトマップのことも言ってるよね。言及してる。
ね。
配置設計の原則とは?
原則?
原則って何?
あるんすか?そんなの。
あるな。
トレーニングの法則みたいなこと。
ねえねえねえ。
あんの?これ。ちょっと、ジェイ・メキさんわかんないよ、私。
さあ、みなさんはわかりますかね、これ。
ねえ。
え、何これ?
マジギブ。
ギブだな。
なんかあるんだろうね。
行ってみます?
行ってみましょう。
はい。じゃあ、行きますよ。
はい。
ちなみに私、本当にズルはしてないんで、ちゃんとじわじわ言ってるんで。
お願いします。ありがとうございます。
じゃあ、行きますよ。
はい。
よよよよよよ。これ、下をスクロールすると表現されるようにしてるんで、うかつに行くと見えちゃうんですね。
そうですね。
何これ?
視覚的階層。
何言ってんの?
でも、なんか、教科書とかに書いてあるんじゃないですか。
書いてあるのかな。
なんか、パッと見て、この次のページに何があるとかが、視覚的にわかるってことが重要だって意味じゃない?
そういうことか。ちゃんと。
次に行ったら、これがあって、みたいなことが、メニューボタンしっかりリンクみたいなことを決めて。
そっかそっかそっか。
視覚的に階層がわかるっていうこと?
それを、ビジュアルヒエラルキーというみたいですね。
ビジュアルヒエラルキーね。なんか、そう言われるほうがっぽいよな。
なんか、教科書とかに書いてありそう。
ビジュアルヒエラルキーね。
はい。ビジュアルヒエラルキーと書いてあります。
ほいほい。分かりました。ありがとうございます。
じゃあ、第2問行きますよ。
印刷物のデザイン原則
はい。
印刷物のデザインにおいて、仕上がりサイズに対して塗り足しが必要となる一般的な理由は何でしょうか?
うーん。
まあ。
そうだよね。段階。
そう。
裁断。
裁断した時に、あのー、変な余白ができないようにとか、なんかその、塗り足しがあることで。
そうだよね。あの、白くなっちゃうところが。
だよね。色面全部引いてあるやつとかね。
そうそうそうそう。
やらないと、白が出ちゃうっていうことだよね。
そう。だから、キャンバーとかで最近、入稿してるやつ、多いよね。
あー、そういうこと?
うっすら白見えてるの。
あー。
これ、キャンバーで出したんだって、すぐ分かるもんね。
あ、そうなんだ。
あ、でも分かんない。最近やと、印刷会社さんによって、なんか伸ばしてくれてるとかって聞いたこともあって。
あ、そう?まあ、そういう工夫がね。
ね、あんのかな?分かんないけど。
でも、結構ね、あって思うよね。
でもこれさ、なに、理由は何でしょうって、これ、センサー番別だよね、すごい。
まあでも、おおむねそういうことだよね、基本的にはね。
まあ、そういうことだよね、きっとね。
じゃあ、見ますよ。
はい、お願いします。
はい、はい、はい。
えー、はい。
裁断時に印刷領域の外側までインクを伸ばしておくことで、仕上がりに白い縁が出ないようにするため。
あー、もう、ドンピシャですね。
ドンピシャでした。
はい、ありがとうございます。
あざっす。
じゃあ、第3問。
はい。
RGBカラーモデルとCMYKカラーモデルの違いについて、それぞれの用途と色の表現方法の観点から簡潔に説明してください。
ちょっと、そんな技術問題みたいなの出るんですか?
ちょっと待って、そうです、そうみたいです。
ほんとですか?
まあ、でもね、RGBはね、ざっくりね、ウェブ用途というかね、画面用途でね。
CMYKは、まあ、印刷用途っていうところで。
そうそう、で、RGBが混ざると白くなって、CMYKが混ざると黒くなるっていう特色だよね。
そうね。
で、えー、まあ、それでいいのか?
そう思うけどね。
そうだよね。
まあ、やっぱ、RGBの方がでも、その、色の表現色が多いからね、表現数がね。
うん、多いね。
最近だとRGB入口できる印刷会社とかもあるよね。
あるある。
RGBの見た目を再現してくれみたいな特殊な。
印刷会社さんの努力だよね。
すごいよね。
ありがたいよね。
どうしても、そのRGBで作ってたものをCMYKに変換すると沈む色が。
特に青とかね。
あー、ね、そう。
青に入るときかね。
そういうのは、その印刷のプロの人たちがすごく日々ね、日進月歩で色んな工夫とかが進化してるみたいなんだけど。
うーん、そうだよね。だからもう本当にそうなってくると、プロとはなんかそうじゃないところの差って結構難しいよね、その辺ね、扱いがさ。
確かにね。
まあ、吉田にやってくれたりもするわけだもんね。
そうそうそうそう。
ね、前だったらCMYKは5%刻みじゃないとダメとかさ。
あー、そっか。
結構これ先輩にすごく怒られたよ。
うーん。
ね。
まあ、それはね、確かに。
ね、あるけど。
まあでも、おおむねそういうことなんではなかろうかっていう。
感じですね。
はい。
じゃあ答え見ますよ。
はい。
えー、ちょっと待てよ、ずずずず。
RGB、光の三原色を混ぜて色を表現する可放混色、主にディスプレイなどのデジタルデバイスで使用。
で、CMYK、色の三原色に黒、キープレートって書いてあるね。
あ、キープレートだ。
ウェブデザインの基本
キープレート。
K半ね。
うんうんうん。
キープレートを加えたもので色を表現する現放混色、主に印刷物で使用。
これが一応正式な答えですね。
ジェミニ的。
はい。
まあ良いんじゃないですか。
まあ良しとしよう。
はい。
合ってる合ってる。
はい。
じゃあ第4問いきますよ。
ウェブデザインにおいて異なる画面サイズやデバイスに対応させるための手法を何と呼びますか?具体的な技術名を一つ挙げてください。
はい。
はい。
これは大丈夫。
そう、私も多分大丈夫。
じゃあ、せーの。
レスポンシブデザイン。
レスポンシブデザインですね。
です。
じゃあこれはスッと行こう、スッと。
はい、レスポンシブウェブデザイン。
具体的な技術名、メディアクエリって書いてあるよ。
そういうことか、それも加えなきゃいけなかったってこと?
メディアクエリって何ですか?
メディアクエリっていうのはですね、メディアサイズの幅を指定する記述方法で、
例えば1000ピクセルを超えたら、もしくは1000ピクセルを切ったら、みたいなことを、
その時にCSSの記述を変えるとかいうことができる。
あるある。
そうそう、それのこと。
それか、500ピクセル超えたらこうしてね、みたいなとか、そんな感じだよね。
それです。
それをメディアクエリって言うんですね。
そうです。
かしこまりました。
はい。
私も覚えました。
はい。
じゃあ、第5問いきますね。
はい。
タイポグラフィにおいて、文字のベースラインから大文字の高さまでの距離を表す用語は何でしょうか?
なんだっけ?ベースラインから大文字の…
高さまでの距離。
あー。
ごめん、私全然わかんない、これ。
なんとか、なんとかハイトみたいな。
なんとかハイト?
分かったかな。
でも、ハイトっぽいよね。
ハイトだよね。
うん、きっとハイトだよ。
ちょっと待って。
なんか、クリフ、なんとかクリフとか、なんとかハイトとか。
クリフ。
いや、ベースハイトじゃないしな。
なんだっけな、トップハイトじゃないしな。
高校生で見た思いがあるんだけどな。
やばい、私全然わかんない、これ。
うん。
なんとかハイトだよね。
なんとかハイト?
わかんない。
タイポハイト?
タイポハイトじゃなかった気がする。
違うな、なんだっけ?
えー。
あー、うん、ちょっと待って、違うね。
ディセンダーラインとか、なんかさ、なんとかラインとかって。
はいはいはい。
なんだろう。
で、大文字の上とかもでしょ。
うんうん、そう。
あー。
わかんねーや。
なんとかハイトであること。
見ます?
はい。
はい、じゃあ見ますよ。
えー、私は全くわかりませんでした。
えーと、キャップハイト。
キャップハイトですか。
あー、あー、ちょっとな、うん、わかりました。
キャップハイトね。
キャップハイトでした。
そうね。
いつものデザインの話。
えー、なにこれ。
なんか今度はCSSコードの適用された要素の背景色はどうなりますかっていうなんかあるんですけど。
まだですか?
あ、じゃあこれは一応エレメントのCSS指定で、
はい。
バックグラウンドカラーがRGB255000.5。
あー。
あ、なんだっけこれ。
これは。
あ、どれ?
わー、ちょっと待って。
これ。
これなんかピンクっぽい感じになるんじゃないの?
だってRがさ、MAXだもんね。
そうそう。
RMAXの、でも0.5で半透明やから、
うっすピンクみたいな。
そうそうそう。赤の半、50%みたいな。
うん、そうだよね。赤50%。
赤が50%って。
赤50%の背景色になります。
はい。
はい、じゃあ見ます。
えー、どどどどーん。
半透明の赤色。
あー。
もう正解ですね。
はい。
よかった。
なんかね、ちょっとヒヤッとするよね、やっぱり。
うっすらね。
はい。
えー、じゃあ、残り3問ですね。
はい。
デザイン原則の1つで、
近くに配置された要素は関連性が高いと認識されるという法則は何と呼ばれるでしょうか。
あー。
ん?
えーっと、なんだっけ。
近くに配置された要素は関連性が高いと認識される法則。
うん、あったあった。なんだっけ。
教科書で習うやつ?
たぶん。
ほんと?
うん。
どうしよう。
もう、なんだっけ。なんだっけ。
ルイチじゃなくて、なんか、ルイ、ルイどもみたいな。
違うな。
いや、私、ほんまにグラフィックデザイナーなんか全然わからんぞ、これ。
なんかあったんだよね。なんだっけ。
呼び方がわかんないぞ、これ。
でも、わかるよ。なんか、そういうニアな感じだよね。
そう、ニアな感じ。
見ます?
見ましょう。
はい、じゃあ、見ます。
やばいね。
いやー、こんなん出してくんねんな。
はい、近接の法則。
あー、近接。
あったあった。
はい、近接の法則です。
ありがとうございます。覚えときます。近接ね。
近接。
ですね。
じゃあ、第8問。
画像の最適化技術
ウェブサイトのパフォーマンスを向上させるために、デザイナーが考慮すべき画像に関する最適化の手法を2つあげてください。
ねえ、なんかさ、ジェミニー、なんなん?
2つ?
2つあげろって言ってるよ。
ちょっと待って。
え?
向上させるためにデザイナーが考慮すべき画像に関する最適化。
えーと、まず、めっちゃ低くするべきだよね、画像は。
そうね、圧縮することはね。
圧縮すべきですよ。
うん。
でも、それは何、なんで、何、なんで?
いや、まあ、そういうツールを使ってね、圧縮するっていうのと。
あと、アニメーション入れすぎないとか?
うーん、でも画像なんだよね。
そうだよね、画像だもんね。
あ、違う、そうだよね、画像に関する。
だよね。
えーと、色数?
あ、でもそれは圧縮と一緒か。
うーん、1個思いつくのはレイジーロードっていう技術があって。
うん、あー。
遅延読み込みっていうのがあるんだけど。
うん、あるね。
画面に表示されるまで読み込みを待機させておいて、到達した時に読み込ませることによって最初のロード時間を縮小するっていう。
そうだ。
それ、でも他にもいっぱいあるけどね、やる、いろんなね。
え、なんだろう、あと。
例えば、イメージソース、なんかソース属性ってかな、imgタグみたいなのを、デバイスごとに画像のサイズを出し分けるとか。
あ、そうか。
そういうのとかもあるし、いっぱいあるにはあるんだけど。
2つって限定すんなよ、みたいな。
なんか自由すぎるね、問題がね。
そうなんだよね、ジェミに。
ちょっと自由すぎるでしょ、回答が。
ちょっと、じゃあ次回もしやるんだったら、ちょっとこんななんか自由な回答はやめてくれ、みたいなね。
あ、そうね、あの、答えが1つだけのものにして。
うん、そうだよね、そうします。
はい。
あれでも、お、気づきね。
監督責任です。
あ、いえいえ、そんなことないです。
大丈夫、大丈夫。
はい、じゃあ第8問の答え。
はい。
画像サイズの最適化、適切な解像度とサイズの調整ですね。
で、あとファイル形式の最適化、JPEGピング、WebPなどの適切な選択と一応ジェミには言っております。
そうですか。
あの、だから、あの、多分先ほどの回答はよりさらに高度な答えでした。
上級編ってことですね。
はい、上級編、はい、プロとしてっていうことでしたね。
レイジーロードですね。
あ、いやでも、間違ってないからね。
まあね。
うん、素晴らしいことですよ。
みなさんもレイジーロードやってくださいね。
やってくださいね、はい。
じゃあ、9問目。
はい。
文字感の調整技術
ケルニングと、
ケルニング。
はい。
ケルニングとトラッキングは、どちらも文字感を調整する技術ですが、
あ、カーニングかな、カーニングのことかな。
まあ、でもそうだよね、きっとね。
え、ケルって書いてある。
ケルニングって書いてある。
ああ、で、それはあれだね、なんか語訳というか。
うん、わかる。
ケルニングと、
ケルニングとトラッキング。
いやいやいや、どちらも文字感を調整する技術ですが、その主な違いは何でしょうか。
カーニングとトラッキング何が違うねって話やね。
あ、そうだよね。
え、え、カーニングとトラッキングの違い?
え、どういうこと?
カーニングはさ、手動で調整するんだよね。
うーん、あ、そういうことか。
うん。
トラッキングは自動ってこと?
数値を指定して、なんか全体に適応させるみたいなイメージだったような。
ほんと?
してたんだけど。
あれ?そういえばなんかカーニングとトラッキングって。
カーニング、か、か、まあでも、どっちだろう。
手動か自動かっていう話?だって2つ挙げられてるってこと?
うん。え、何だっけね。
何?どっちも。
でも確かにカーニングは言うよね、文字調整。
トラッキングってあんま言わんかも、あたし。
あー。
どこで使う?
あのー、レタースペーシング、文字感。
ウェブの話?
いやいや、あの、普通に。
そうか、普通にね。何だろう。見ます?
見ましょうか。
見ましょうか。
え、ちょっと待って、自分の浅い知識が。
諦めない?
いや、大丈夫、いいんだけど。
諦めない。
なんか、露呈されてしまう。
いやいやいや、でもこれあたしもわかんない。
えー、じゃあ、行きますよ。
あ、あ、待って、さっきの画像の遅延読み込み、いたわ。
あ、いた?
うん、なんか入ってた。
あ、あった?
うん、なんか2つまでかと思って、行かなかったら、いた。
あ、いた。よかった。
だからさすが。
じゃあ、ちょっと第9問の答え見ますよ。
キルニング、特定の隣り合う文字ペア間のスペースを個別に調整すること。
トラッキングは、選択された複数の文字に対して、均等にスペースを調整すること。
あ、やっぱ、そういうことだよね。
うん。
あってたかな?
あってるのでは?
そうだよね。
うん。だから、個別か、全体か、っていう話でした。
はい、だよね。だから、テキストボックスに対して全体に適応させるのがトラッキング。
うん。
5%とか10%みたいな、アキューみたいな、付くのがトラッキングとか。
はい、字送りって書いてますね。
うんうん。
はい、でした。
はい。
はい、じゃあ、最後の問題です。
ででんでんでん。
アクセシビリティの配慮
アクセシビリティガイドライン、WCAGにおいて、近くの原則の一つであるコントラストの達成基準は、主にどのようなユーザーに配慮したものですか?
あー。
えー、その、識学的な障害みたいなのを抱えている人ってことでしょう?
ってことだよね。だって、コントラスト言うてるからね。
そうだよね。
そうだよね、色毛の方とか、だからね、あるもんね。
うん。
モノクロンにすんのかとかね。
そうそう。
そういう話だよね。
見えづらい色がある人がね、いるからね。
だから、答えで言うと、色毛の人に向けた配慮の方法ってこと。
そうね、色毛色弱。
色弱、色毛色弱に配慮してます。
そうね。
はい、じゃあ、最後の答えいきますよ。
はっ、なにこれ。
ロービジョン、弱視の方って書いてある。
あ、弱視、でももっと大きい括りなのかな。
そういうことか、ちょっと限定しすぎたんだ。
あ、そうか、だから、色毛だけじゃなくって、シンプルに目悪い人みたいな人も含まれていることをロービジョンと言うんですね。
あ、そうなんだ。じゃあ、老眼とかそういうのも含まれるのかな。
あ、そうかもしれない。ちょっと見えづらいとかね。
そうね。
ロービジョンです。
ロービジョンね。
はい、弱視の方。
勉強になるな。
はい、ジェミニさんもですね、全問正解できましたが、日々のデザインワークおつかれさまです。
ありがとうございます。
また機会があれば、さらに難易度を上げたクイズにも挑戦してみてくださいね、ということでした。
ありがとうございました。
ジェミニ、ありがとう。
いや、なんか振り返りになって面白かったな。
ね、勉強になりましたね。
はい、というところで皆さんもね、勉強になりましたでしょうか。
ね、いや、なったんじゃないかな。
というわけで、2回目あるか知らないですけど、とりあえずAIデザイナークイズでした。
楽しかったです。ありがとうございました。
こちらこそありがとうございました。
またちょっと今度は思考とか変えてね、やってみても面白いですよね。
うん、ちょっと宣言も変えてみよう、今度。
そうね。
そうしましょう。
いや、面白かったな、ほんと。
はい、じゃあまたね、次回お会いいたしましょう。
ありがとうございます。
はい、クイズ。
いつものデザインの話。
今回もエンディングのお時間となりました。
いつものデザインの話では、Xとインスタグラムで最新情報をお届けしています。
皆様からのフォローやメッセージなど、積極的にお待ちしております。
また、ハッシュタグいつデザを付けて投稿すると、いいねやリプでお返しに上がります。
直接DMでもOKです。
各エピソードはSpotify、Apple Podcast、Amazon Music、文字起こしサービス、Listenでもお楽しみいただけます。
それでは本日もご視聴ありがとうございました。
また次回もお会いいたしましょう。
さようなら。
