エンジニアによる画面作りのTips Part1
みなさんこんにちは、ダイキャッチFMです。このポッドキャストは、IPMに同期入社し、現在は別々の企業で働くソフトウェアエンジニアの二人が、最新のテクノロジー、ライフハック、キャリアなどをテーマに、雑談形式でお送りする番組です。
最近ちょっとツイッターでちょいちょい見るようになった。私として、フープストック東京が、小連れを取り込むような施策を打っているみたいな話があって。
あー、離乳食出してるみたいなやつだ。
そうそう。離乳食を無料でサービスしますよ。子供用の食べ物も有料だけでありますよ、みたいな感じにしてて、子育て世代も来てね、みたいな感じにしてる。
なるほど。
それに対しての良いだ悪いだみたいな議論は結構活発なんだけど、それは置いといて。
なんかそれの理由みたいなところって、皆様の、顧客の皆様のライフステージの変化に対応して、みたいなことが書かれてたんだよね。
はぁ。
なんか珍しくね、と思って。飲食業じゃないものならば分かるよ。
僕らが昔好きだった漫画のさ、ソシャゲが今出て、お前らどうせもう30代だろって言って、なんか課金盛り盛りのソシャゲが出ますみたいなのは、ライフステージについてきたなって思うんだけど、別に普通の飲食店ってそんなことしないじゃん。
20代を対象にしてたらさ、ずっと次の20代を対象にし続けるじゃない。
まあそうですね。
でも、こうやって、
なるほどね、確かにあんま聞かないね。
そう、子育て顧客に追従するのって珍しいなと思って。
まあ、
一応、はい。
あれなんじゃないかな、分かんないけど、子供の分も買ってもらえたらそっちの方がなんか、儲かるかな、追従したのかなって今聞いてて思ったけど。
なんかね、単純に幅を広げたみたいな、別に独占の方を最初にしませんってわけじゃないだろうから、
うんうんうん。
なんか、広げたかったって感じなのか、
なんか、どっかの他の人のツイートかなんかで、
えーとその、スープストック東京のグループ?
うん。
同じグループの他のブランドかなんかが、同じようなことをやって、いい感じだったらしいみたいな。
なるほどね、なるほどね。
それと同じことをやってるんじゃないかみたいな話があったね。
はいはいはい。
まあでもちょっと、
なんて言うんだろう、ブランディングっぽいのもあるというか、
うん。
でもその、私たちは小連れのお客さんにも優しいですよーみたいな、
うんうんうん。
なんかそういうのもなんか一種、一種というかまあ一つありそうな気がするよね。
そうねー、なんかもともと都心部にあるイメージがあるからかもしんないけど、
スープストックって割と、なんかOLが行くようなイメージがなんとなかったんだよな。
うん、まああるな。
俺たちはあんま行かないと思うな。
うん、ちょっと気になってはいたけどね。
ただまあ、そういうのって結構健康志向だったりするだろうから、
OLが行くようなスープ屋さんみたいなのって、
そういう意味では別にね、あの子供に食べさせても安心って感じがするだろうから、
確かに。
広めるのは割といいかもしれないなとは思う。
うんうん、確かに。
というような、ちょっと珍しいような気がするなと思った感じですか。
はい。
はーい、じゃあ本題行きましょう。
ちょっと今日はどういう本題かと言いますと、
はい。
えーっと、まあ我々エンジニアじゃないですか。
今のところ。
今のところね。
はい、はい。
で、まあ基本なんだろうな、
まあ何かしらのウェブ開発をするときに、
うん。
エンジニアによる画面作りのTips Part2
SIRとかだとね、ちょっとあれだけど、
まあ会社で働いたデザイナーさんがいて、
デザイナーさんがデザインしたものに従ってそのマークアップとかして、
うん。
アプリを作り込んでいくわけじゃないですか。
そうだね。
まあそうじゃない。
そうそうそうそう。
で、でもそうじゃないケースもまあ往々にしてあって、
まあさっき言ったSIRとかだとデザイナーとかほぼいないよねとか。
そうだね。
まああと、まあ俺らみたいに事業会社とかにいても、
まあなんか社内の管理画面とかって結構、
なんかデザイナーがデザインせずにもうエンジニアがそのまま画面作っちゃうとか、
まああるあるかなと思うんだけど。
そうだね。
うん。
でまあそういった時に、
まあでもそうは言っても少しはなんかちょっといい感じの画面作りたいじゃないですか。
うん。
まあそういう時にちょっとなんだろうな、
使えるTipsというか、
まあこういうやり方やっておくとなんかいい感じになるよみたいなのを、
まあ僕今まで結構管理画面作ってきた方かなと思うんで、
自分でもデザインして自分で実装みたいに結構したことあるかな、
ある方かなと思うんで、
ちょっと今日はそういったTipsの紹介をしていきたいなと思います。
いいですね。
僕もちょっとね、今度やる可能性がだいぶ見えてきたので、
助かるかな。
あ、なるほど、それはよかった。
まあまあいろいろありはするんだけど、
まあ今日はちょっと大きく、
そうだなあ、
何個にしようかな。
2個くらいにしようかな。
2個、2個。
まあちょっといろいろ話しておきます。
はい。
エンジニアによる画面作りのTips Part3
はい。
まあよくあるあるなのが、
あれですね、
画面デザインにおけるキーバリューと不要情報の削減
エンジニアデザインの画面って結構、
キーバリューで、
画面を作りがちなんですよね。
っていうのは、
要はテーブル形式とかで、
IDこれこれ、
ネームこれこれ、
更新日何月何日何曜日、
作成日何月何日何曜日みたいな、
こういうUIよくあるよねっていう。
わかるっしょ。
わかる。
画面にあるものをビューにするんじゃなくて、
テーブルをイメージでテーブルを画面にしてる。
そうそうそうそう。
逆にテーブルから始まってる感じがある。
これはこれでもいいんだけど、
まあでもさ、
バリューだけでそれが何なのか分かるものって、
まあまああるじゃん。
確かにね。
名前書いてあったら、
プロフィール、
自分のプロフィール画面に名前書いてあったら、
自分の名前だよね。
それも名前やろみたいなことだと思うんだよね。
だからそのUIにおいて、
名前っていうキーはめっちゃ無駄なんだよね。
そういうものを削り落としていくと、
まあまあそれなりにシンプルでいい感じのUIになります。
あと普通にプロフィール画像とかもさ、
別にプロフィール画像ってラベルがなくても、
それはもうプロフィール画像のわけじゃないですか。
他に別の画像が2,3個あるわけではない場合は。
だからまずはそういうキーバリューになっちゃってるっていうことを一旦意識して、
不要なキーをどんどん削除していくっていう感じだね。
ユーザー向けの画面ってそういうさ、
なんかスッキリして見やすいみたいなのが結構埋められるイメージがあって、
管理画面もなんか結構誤解とかも全くないように、
わざわざキーを付けるとかせずに、
結構スッキリさせた方がいい感じ?
俺基本的に別に管理画面だろうが、
いわゆるユーザーに出す画面だろうが、
使うのは人間だから、
そこに変化をつけなくてはいいかなと思ってる派なんだよね。
なるほど。
管理画面は少し説明があってもいいかもしれないけど、
使ってるのは同じ人間だからね。
だから本当に不要な説明は、
極力その非表示にするようにしてるって感じかな。
一覧テーブルにおけるカラム数の削減
やっぱり認知負荷が高まるかなって思ってて。
そうだね。全部文字より大変だもんね。
画面を見た時に、
目にする文字量で打ってなるじゃないですか。
やっぱりめちゃめちゃ文字文字してたら。
だからそうやって必要な情報をどんどん、
不必要な情報をどんどん削除していくっていうのは、
やっぱり使う人にとっては優しいというか、
認知負荷を少しでも下げてあげれるし、
必要な情報に目を行きやすくできるっていうのは、
あるのかなと思いますね。
やろう。
っていうのが一つ目かな。
あと二つ目は、
これもテーブルの話になっちゃうかもしれないんだけど、
今説明したキーバリューのテーブルって、
どっちかっていうと縦に並んでるみたいな感じじゃないですか。
そうだね。
キーバリューってどんどん縦に並んでる感じじゃないですか。
それの一方で、
普通の一覧が並んでるテーブル、
カラムがどんどん横に長くなっていくようなテーブルもあるじゃないですか。
あれもできる限り列数消していくっていうね。
これがね、やっぱり難しいんですよ。
どう削ったらいいんだろう。
基本やっぱ一覧だから、
そこで見たい情報って限られてるはずなんだよね。
詳細って詳細画面で見ればいいから。
なるほど。
でもまぁ中には、
この情報は一覧で絶対見たいみたいなものあると思うんだけど、
でもそれって本当にそうなのっていうのは結構多いんだよね。
なんとなく必要そうだから置いてるものって結構あって。
そういうものをどんどんユーザーとかに聞くなり、
何だにして削り落としていくとか。
あとこれ、
結構ね、管理画面でね、
画面からはみ出てるテーブルとかあるんだよね。
スクロールしないといけないやつ?
横スクロールしないといけないやつみたいな。
それでも結局Excelみたいになってるみたいなね。
あるあるじゃないですか。
そんなに一覧で見たいはずないんだよマジで、そんなカラム数を。
そうね、これはそう。
だからいつもカラム数との格闘をしてるんだけど、これは。
カラム数を削減する一つのTipsとしては、
カラム数削減に対する具体的なTips
一つのセルの中に二つ情報を入れちゃうとか、
たまにやる。
強行突破する作戦として。
例えば年齢、性別をいっぺんにとか。
そうそう、それとか縦に並べちゃう。
例えば会社名と会社の中の社員名みたいなやつがあるとするじゃないですか。
そしたら、社員名っていうカラムで、
名前を書いた会場詞その下に、
会社名っていう感じで、
会社名をユーザー名のカラムにぶち込むっていう。
なるほどね。
そうやったりして、別数を減らしたりしてるかな。
これよくやる。
やっぱりコンパクトにコンパクトにやったほうがいいかもしれないな。
そう。
ちょうどね、最近もやってたんだけど、
リニューアルプロジェクトというか、
画面のカラム数と列の削除
もともと十何カラムくらいあってね、
それこそ画面からはみ出たテーブルがあったんですけど、
それを5列くらいにしましたね。
半分以下にしたっていう。
そうそうそうそう。
これくらいじゃないと見ないからね、マジで。
そうそう、見ないんだよ本当に。
考えてみれば、僕もさっき言った、
もうすぐ作るか持ってきたのとは違う管理画面が平時にあるんだけど、
フロント側の人に相談されて一緒に雑談的にやってたんだよね。
これどうやったらこのページ表示速くなりますかね、みたいなやつ。
本案のやつ。
そしたら、この列集計入ったよね、きっと。
この列いる?この一覧に聞いたらさ。
で、アンケート取ってもらったら、
その管理画面のユーザー、一人しかその列見てないっていうことが明示して。
そう、そういうことあるからね。
集計しなくてよくて早くなったから。
そうそうそうそう。
あるからさ、いらない列はどんどんチェしていくっていうことですね。
そうだね、ちょいちょい見直しもしたいよね。
余白の重要性
これ本当にみんな使ってる?
管理画面だとあんまりユーザーログ取るみたいなことしないから。
逆にインチューしやすいからね。
確かにね、それはそうだと思う。
ちなみにさ、これはもう引き算の話をしてたけどさ、
逆にエンジニア、あんまりデザインとかやってこなかったエンジニアが、
入れないけど入れた方がいい要素とかないの?
それはもう完璧にあれっすね、余白。
余白。
エンジニアのUIはマジで余白がないなって感じる。
余白か。
やっぱ少しでも画面に情報を出したいっていう人が多いから、
余白を切り詰めて切り詰めて他の情報を入れるみたいなことするんだけど、
しがちなんだけど。
それはだいぶ窮屈になりますよね。ユーザーとしては結構見るのが辛いよね。
そうだね。ちなみにその余白はさ、周りにやってほしい?
それとも物と物の間にやってほしい?
どっちっぽじゃないですか。
どっちもか。
そうだね。
ちょっとこのポッドキャストでは口に入れてるんですけど、難しい部分はあるけど。
なかなかね、よしシンプルにするぞは意識したらできるかもしれないけど、
これをやらなきゃっていう達成感はマジで。
そこはまず考えなくていいんじゃないかな。
まず引いていくっていうのが大事だと思うんだよね。
引けるとこまで引くわ。
今回は画面をガジェに作るというTips2つでした。
結構エンジニアの人ならね、必ずか分かんないけど一度ぶち当たるあるあるかなと思うんで。
分かんなくなるからね。マジで画面に。
よかったです。もしよかったらちょっと試してみてください。
じゃあ終わりましょうか。
こんな感じで週2回のペースで配信しているので、
Apple PodcastsもしくはSpotifyのお気に入りの方はぜひフォローお願いします。
では今回も聞いていただきありがとうございました。
ありがとうございました。
