00:01
みなさんこんにちは、TRY-CATCH FMです。このポッドキャストは、新卒で同期入社した中期エンジニア2人が、プログラミング学習、最新の技術、働き方、転職などに関してゆるく話していきます。
週2回のペースで配信しているので、Apple PodcastもしくはSpotifyでお聞きの方は、ぜひフォローお願いします。
はい、じゃあやっていきましょうか。
はい。
あのね、早速ちょっと雑談なんですけど、
はい。
最近マジで暇で、暇っていうとあれだけど、仕事はまあまあ落ち着いてるんですよ。
うん。
落ち着いてるってわけでもないけど、もうなんかチームとして結構、めっちゃ働くっていうか、そんな無理なスケジュール立てないチームにいるから、
うん。
まあ、半暴徒なんだけど、別にそんな遅くまだ働いてるっていうわけでもなく、
ああ、一番やってた。
そうそうそうそう。で、まあちょっとゲームでもしたいなと思って、まあスイッチは持ってるんだけどさ、
うん。
なんか面白いゲームがないなと思って、
うん。
で、あの、メルカリで3DSを買ってですね、ポケモンを今までやったことないやつをひたすらやってるっていうのをしてるんですよ。
なるほど。
で、えっと、ポケモンね、小学校6年生くらいの時にRuby Sapphireをやって以来ずっとやってなくて、で、スイッチのソード&シールドで初めてというか、また戻ってきたみたいな、ポケモンに。
ああ。
だからその15年くらいがすっぽり逃げてて。
僕もそんな感じ。あの、逆にサムウンをちょっとだけやって、テンタテはやってないって感じ?
ああ、そうなんだ。そうそうそうそう。で、今まあやってないやつをやろうと思ってるんだけど、とりあえず金銀が懐かしいなと思ってやりたいなと思って、
3DSのね、バーチャルコンソールがあって、それ1000円くらいで買えるんですよ。
えー、スイッチないの?
スイッチない。
へー。
そうそうそうそう。
そうなんだ。
でね、最初ね、メルカリでゲームボーイカラーを買って、5000円くらいで。
まじで、あれね、ゲームボーイカラーってバックライトついてないからね、まじで暗いよあれ。
ああ、だよね、確かに。
よくやってたなって思う、ほんとに。
ね。
で、それで金銀もさ、だいぶ300円くらいでメルカリ売ってるから買って、よしやろうと思ったら、なんかね、セーブできないの。
あー、そうだね、昔のああいうソフトはね、内蔵電池が切れちゃってて、セーブできなかった。
そうそうそうそう。でね、それ知らんくて、ダメじゃんと思ったらもう一個買って、また300円くらいで。
03:06
そしたらそれも内蔵電池切れてて、セーブできなくて。
で、内蔵電池買えるのをさ、なんか専用のドライバーとか必要なんですよ、確か。
うん。
なんか別の、なんかその専用の刀ね。
ちっちゃいもんね、あれ。
そうそうそうそう。
で、それでなんか、やったことないし壊れてもなんか嫌だなと思って、結局その3DSを追加で買って。
うん。
まあその、オンライン、その、任天堂ストアみたいなオンラインストアで買えるから。
うん。
そしたらまあ電池とかどうでもよくなってくるし、話変わるから。
まあそれでね、今金銀やってて。
で、お値段すごいね。
そうそうそう、もうめっちゃやりたいと思って。
楽しいね、めっちゃ懐かしい、ほんとに。
なんかあれだよね、あの赤青緑には、赤緑青にはなかった日付?曜日の概念が追加されたりとか。
そうそうそうそう。
昼夜が追加されたりして、一気に世界変わったよね。
うん。
いやでもね、ちょっと1点悲しいことはね。
はい。
なんか、やっぱ金銀クリスタルってね、なんか通信交換で進化するポケモンっているんですよ、めっちゃ。
あー、言うて初代からいるけどね。
あ、まあそうか。
いやでもさ、なんか金銀クリスタルは持ち物を持たせて交換すると進化するよみたいなやつあって。
はいはいはい。
結構。
あのハスタムとかそうじゃなかったっけ?
多分そんな感じのやつ。
あとなんか、ニョロトノとか。
ポーラの印を持たせてね。
そうそうそうそう。
懐かしいな。
ポリゴン2とかまああるじゃん。
うん。
それがやっぱね、できないっていうのは悲しいね。
そうだねー。
元からいる多分カイリキーとかゲンガーとかも確かあれ通信進化してる。
そう、フーディンとかさ、そこら辺ゲットできないの辛すぎると思ったけど。
そこは捨てて、まあやってますよ。
今最初あのポケモンリーグまでクリアして、今関東地方のバッジ集めをしてるっていうね。
おー。
あれね、関東地方に戻ってくれるの結構暑い。
そう、暑いんだよね。めっちゃ暑いと思って。
しかも時が進んでるからさ、ジムリーダーとかジムリーダーも世代交代してて。
ね。
うん。
いやーまあ楽しいっすね普通に。
懐かしいな。水曜日だか金曜日だかのラプロスとかも見たいな。
あーあるねあるね。
そうそうそうそう。
月にしか出てこないラプロスとか。
そう、でこの後何ができるんだっけな、XYとか。
うん。
あれ?
ブラックホワイトとか。
ブラックホワイトとかかな、3DSのポケモンってあと何があるんだっけ、結構あるんですよ。
ファイアレッドリーフグリーン。
あーなるほどね。
ちょっと待ってよ今調べてみると。
何があんだっけ。
ゲームリスト。
これ北海道に行くの、北海道って神王だっけ、あれはどこだ、XY?ブラックホワイト?
06:02
いや俺も全然わかんないなそれ。
北海道らしいことしか知らない。
ポケットモンスター、ウルトラサン、ウルトラムーンがあって、3DSでしょ。
あとまあルビーサファイアの、オメガルビーアルファサファイア。
リメイク版ね。
そうそう、あれもやりたいんだよね。だからその6年生以来だから、小学校6年生以来だから。
あとXY。
ブラックホワイトは任天堂DSだからできないのかな多分。
まあそれもなんかバーテルコンソールなりあるんじゃない。
なるほどなるほど。
あとDSのソフトは3DSでできるんじゃない。
できるよ。
そうなんかな、わかんないけど。
あれライトじゃないとできないんだっけ、できた気がする。
あ、その、わかんない、でもその任天堂ストアみたいなの見たらなんかなかった気がする。
あーあのカセットはハマるみたいな。
カセットを買えばって、あーそういうことね、なるほどなるほど。
あとブラックホワイト2もあるんじゃないかな。
へー、なるほどね。
あーあったかもな。
まあちょっとねこれから、でも1シリーズやるのに、
まあそれなりにこうポケモン大体全部、そのシリーズのポケモン全部把握して、
アルテラサラティスやったら、まあ大体1ヶ月くらいかかるよね。
そうだね、だって主天皇、初代ですら主天皇を倒すだけでも、
子供の頃にあってなんか20時間、初回で20時間くらいかかったから、
もう大人になって慣れたとしても、6つ間揃えていったら結構な時間かかるよね。
まあまあ遊べそうですねこれは。
で、代が変わることにポケモン増えるし。
そう、倉庫をやってるうちに11月になって、
あのダイヤモンドパールとかのリメイクも出てくるんだよね。
あ、そっか。
スイッチの方で。
はいはいはい。
やばいな、今年はもうずっとポケモンやってるなんだから。
いいじゃないですか、楽しいことがあったらでは。
いや人生楽しいわ。
いい人生だ。
じゃあ本題の方いきましょうか。
本題の方がですね、
ノンデザイナーズデザインブックっていう本があって、
その紹介の話なんですけど、
エンジニアとかでさ、
SIRとかだと特にそうだと思うし、
ウェブ系でも全然シチュエーションとしてあると思うけど、
デザイナーが入ってない開発案件とかって全然あるじゃないですか。
特に社内ツールとか。
そういう時にエンジニアとかが知っとくと、
便利というか、いい感じの画面作れるようになるみたいなための本で。
09:03
あと普通にコンサルタントが資料作る時とかにも全然役立ったりするのかな。
結構俺はエンジニアなら一度は読んでおいた方がいい本だなと思ってて。
確かにね、画面設計する時、
もう絵心ないから何もわからん。
自分はこれが使いやすいと思うんだけど、
ユーザーとしては普通の人はこっちの方が使いやすいらしいとかってあったりするし。
個人開発にも使えるし。
ノンデザイナーズデザインブックで提唱されているデザイン原則みたいなやつが大きく分けて4つあるんですよ。
そこが本の主題みたいな感じで、
今日はそれを紹介しようかなっていうものですね。
じゃあ一個ずつ話していきますか。
まず一つがデザインするときにこれを意識しろよっていうものなんだけど、その原則っていうのは。
一つ目がまず近接っていうものね。
近いに接する。
関連する項目はまとめてグループ化しましょうねっていう話で、
画面上にフォームがあるとするじゃないですか。
そのフォームとそのラベルがあってその人のフォームがあるでしょ。
そこの距離はもちろん近くするっていうのは大前提なんだけど、
そこの距離なんていうんだろうな。
このラベルってどっちについてるんだみたいな話ってよくあるじゃない。
流れが分かりづらいみたいな。
だからそこをちゃんと意識して同じ情報のものはくっつける。
そうじゃないものはちゃんと話すっていうのがこの一つ目の原則かな。
話すっていうところも重要だろうね。近接っていうよりかは。
関連してないなら話しましょうって書いてあるから。
2つ目、整列っていうやつで、
これは何を言ってるかというと、
要はテキストアラインとか、
大きく言われるテキストアライン、レフト、センター、ライトってあるじゃないですか。
12:04
ライトってあんま使わないと思うけど、
レフトとセンターくらいは全然使うじゃない。
確か、基本はレフトでいいと思うんですよ。
センターにすると意味合いが変わってくるというか、
画面をポップとかにしたい場合はセンターとかを例外的に使ったりはするんだけど、
基本はレフトにして、かつその揃ってる部分、縦のラインとかをちゃんと揃えましょうみたいなところがあったかな。
そこ結構ね、俺が社内システムとか見ても結構ずれてるところがある気がするな。
見比べると結構違うもん。
今さっきの同じようなUIパーツが縦ラインでずれてたりとかっていうものは結構あったりするかな。
でもこれやっぱりデザインだから、画面を見せた方が一番分かりやすいと思うんだけど、
ちょっとポッドキャストなんてそれはできないので非常に残念なんですが。
要は基本はテキストはラインレフトで、かつそのレフトにした時の縦のラインを揃えてると綺麗に見えますよっていうところだね。
それが比較としてこれよりはこれがいいよねみたいな感じで書いてあるって感じかな。
そうそうそう。
ぜひ買ってみてほしいですね。
あと普通にブログ検索とかで、ようやくブログとかあるんで。
あと3番目、反復っていうものがあって、これは何かっていうと、
一つのUIコンポーネントみたいなのを作って、それを何度も使って一貫性を出しましょうっていうものかな。
今日はさっきの近接のところで作った、例えばラベルとフォームみたいな一まとまりがあるとするじゃないですか。
一グループがあったとして、
ラベルが例えばフォントサイズ14ピクセルで、フォントカラーがグレーでボールドになってるんだったら、それをちゃんと反復しましょうねっていう話かな。
15:04
軸ハグにならないように、このサイトはこのパターンで決めるっていうので、見てる側がきっちり見れるようにしようねみたいな。
そうそうそう。
やっぱり前に出てきたやつと同じものなのに、微妙にスタイルが違うみたいなものって結構ありがちなんで。
そこらへん気をつけてねみたいな話かな。
あとは最後4つ目がコントラストっていうやつですね。
これは情報にメリハリを持たせようみたいな話なのかな。
なんかいい例があるかな。
これもねぜひ画像で伝えたいんだけど。
ミヤチが持ってるのって、今ってさ第4版ぐらいまで出てるのかな?
ロングセラーの本じゃん。
これって中身変わってるのかな?第何版を持ってるのかな?
俺はね、第12版ですね。
12版?
違うわ。
第4版だ。
増殺してる?
増殺のやつですね。
話を戻すと、コントラストは要は目立たせたいところはちゃんとボールドにするなり背景色変えるなりっていうところかな。
たぶん全体的に、例えばフォントサイズが変わり映えしないとか、フォントの色が全然変わらないとかってなると、
たぶん全体としてのっぴりするから、目立たせたいところはちゃんとボールドにして背景色変えてみるとか、
そういうちょっとアクセントを入れる。
要は情報に優先度をつけて、どこを見てもらいたいかみたいなところでコントラストを変えるっていう話かな。
なのでまとめると、まず4大原則があって、近接、整列、反復、コントラストの4つです。
近接は関連項目をちゃんとグループ化しましょう。
18:01
離れてないやつはちゃんと離しましょうっていうやつ。
整列は左寄せ、中央寄せ、右寄せみたいな話で、基本は左寄せにするときは無難です。
反復はUIコンポーネントの太地座とかフォントカラーとかをちゃんと一貫性を持たせて使い回していきましょうっていうやつ。
コントラストは情報に優先順位をつけて、ちゃんと目を引くようにスタイルを当てましょうっていう感じかな。
デザインをあまりしたことがない人向けっていうか、僕もそうだけど、何から気をつけていいのかわからないっていう人が読むのにいい感じっていうレビューとかもついてるから。
あとはちょっとやってみたい人にいいかもしれない。
デザインってよくセンスみたいなこと言うけど、デザイナーの人がよく言うのはデザインはロジックみたいなことを言ってるから、
ある程度こういう本とか読めばそれなりに改善はされると思うんだよね。
基本を知って、ある程度1から自分でやって違うなってやるよりはこういうのを読んで、
ここはこうした方が自分的にはいいなって書いていく方が成長スピードも早いだろうと思う。
そうですね。
そういうのを叩き込んでいくのが良さそうですね。
あと、自分で言うのもあるんだけど、今の会社のエンジニアの中でもどっちかっていうとフロントエンドのUIとか改善とかやってる類のエンジニアなんで、
その立場から結構普通のっていうかよくあるエンジニアのUIみたいな感じのところでよく修正するポイントは全然パディングとかマージン取れてないUI多いなっていう気がする。
だからそれが多分近接とかの話なんかな、わかんないけど、
例えば四角いオブジェクトの中に枠線があるとするじゃないですか、
そのギリギリのところにタイトルとかテキストが入れたりだとか、
そういうUI結構多い気がするな。
ボーダーにもくっついてる感じでボタンがついてたりだとか。
やっちゃいそうだな、僕も。仕事でプレゼン資料とか作れって言われた時とかもね。
いやー、考え方があってそれで書けるんだろうけど、僕はこれしかわからんって言いながらひどいお絵かきしてるもん。
21:06
そういう感じになっちゃう。
ノーオフペグっていう意味でもね、やっぱり一回学んでみる。
いろんなところで読まれてるから、もう一個読むっていうのはいいかなと。
その中で何を選ぶかっていうときにこのノンデザイナーズブックが一番無難な本かなと思うんで。
ちなみにさっきも言ってたけど、これロングセラーなわけじゃないですか。
初版の頃ってまともにスマートフォンサイトっていう概念がなかったと思うんですけど、
今見てたら多分第何版って増えるにしたがって結構ページ数が増えてて、
もしかしてこれスマホの内容とかも増えてたりするんですかね。
どうなんだろうな。でもね、これ特にウェブデザインに限った本じゃないんだよね。
あー、なるほど。
うん。デザイン一般的な本になってるんだよね。
だから中のデザインの例とかでもウェブデザインとかじゃなくて、
全然ポスターとか名刺とかそういう系の例とかも全然出てきてて。
なるほど。
だからウェブデザインっていうよりはデザイン一般的な話かな、これは。
でも全然ウェブデザインとかにも適応できるんだけど。
確かにね。
こういう広告とかに使ってそうな技術の話を読むと、
普段目にするものがちょっと見方変わって楽しそうだよね。
そうそうそうそう。
あと、今さっきの4原則以外の話で言うと、どういうことが書いてあるかと言いますと、
カラーリングの話だとか。
あと、タイポグラフィーとかあるけど、
ここはあんまりウェブエンジニアは気にする必要ないというか、
無難なやつ使っとけばそれで十分だと思うから。
でもそんな感じかな。
タイポグラフィー結構量あるな。
よく見てみると。
重きを置かれてるのか。
なので最初のパート1がデザインの原則っていうところで、
さっきの4つとプラスカラーリングの話があって、
パート2がカツジでデザインするっていうタイポグラフィーの話。
パート3、エクストラコラムみたいなやつだけど、
パート1だって読んでおけば十分って感じだね。
24:06
今後デザイナーがいない案件に入りそうな人だとか、
個人でウェブサービス作ってみたい人で作ってみようと思ったけど、
まずウェブページの形どうしたらいいか全くわかんなくて、
ちょっとめんどくさくなっちゃうっていうのを書けるためにもね、
こういうのがあってもいいかもしれないですね。
そういうところでエンジニアの一個人として付加価値とか出せたりしたりもするので、
ぜひ読んでみてはいかがでしょうか。
ということでAmazonのリンクを概要欄に貼っておきます。
今ちょうど僕が注文を完了しましたね。
そうですね、素晴らしい。
じゃあ今日はこんな感じで終わりましょうか。
今日はありがとうございました。
ありがとうございました。またね。
