自作サービスのデザインレビューでよくある指摘

## はじめに 「フィヨルドブートキャンプ Advent Calendar 2024」の16日目の記事です。[Part. 1](https://adventar.org/calendars/10357)、[Part. 2](https://adventar.org/calendars/10807) があります。今年も皆さんにご協力いただきPart. 1、Part. 2 を埋めることができました。ありがとうございます🙏 ### [Part. 1](https://adventar.org/calendars/10357) - 昨日は :@recky: recky さんの「[FBCに今から入会するとしたら](https://reckyy.hatenablog.com/entry/2024/12/15/110039)」でした。 - 明日は :@ham-cap: ham-cap さんです。 ### [Part. 2](https://adventar.org/calendars/10807) - 昨日は :@YukiWatanabe: YukiWatanabe さんの「[PostgreSQL Conference Japan 2024 に参加しました（＋データベースを学ぶモチベーション）](https://yukiwatanabe.hatenablog.com/entry/2024/12/15/120000)」でした。 - 今日は :@jnchito: jnchito さんの「[英語の変数名やメソッド名を考えるときのアプローチについて 〜文脈を意識しながら使える単語を探そう〜](https://blog.jnito.com/entry/2024/12/16/074515)」 - 明日は :@tadaaki: tadaaki さんです。 --- ## 自作サービスのデザインレビュー フィヨルドブートキャンプの卒業前の最後の課題は自作サービスを作ってリリースすることです。自作サービスは自分で見つけた問題を解決するサービスを作るでもOK、フィヨルドブートキャンプで用意した問題を解決するサービスを作るのもOKとしています。作るサービスはみんなそれぞれ別のものになるので、デザインも全く違うものになります。 自作サービスについてフィヨルドブートキャンプのこだわりとして、「作ってみた」ではなく「作った」と胸を張って言えるものをリリースしよう！としています。なので、本当にみんな精一杯頑張って自作サービスを開発しています。 せっかく頑張って作ったサービスでも、見た目があまり良くなかったり、UIパーツの配置やサイズのせいで使い勝手が悪かったり、説明や案内の文章が足らず使い方がわからなくなったりなど、デザイン周りがいまいちで使ってもらえないということにならないように、自作サービスのリリースの前にデザインレビューを行っています。 デザインレビューは結構大変な作業なのですが、毎回新しいサービスの立ち上げに参加するのと同じくらい色々考えさせられるので、自分のスキルアップにもとても役立っています。 とはいえ、デザイナーになるためにフィヨルドブートキャンプを受講しているのではないので、指摘箇所全てを修正してもらいたいと思ってる訳ではないです。せっかく頑張って自作サービスを作ったのだから僕もお祝いに何かをしてあげたい、というのと、デザイナーはこういうことを考えてデザインをしているのを知る機会を提供したい、というのもデザインレビューの目的としています。自分が作ったサービスにデザイナーから指摘をもらうのはなかなか面白い経験になると思います。 今回はデザインレビューでよく指摘しているやつを紹介してみようと思います。ぜひ、受講生の方はデザインレビューを申請する前にチェックしてみてください（なので、この記事はデザイナー向けではなく受講生向けです）。 ## 縦のグリッドを揃える サンプルを用意しました。 <a href="https://bootcamp.fjord.jp/rails/active_storage/blobs/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBeURIQXc9PSIsImV4cCI6bnVsbCwicHVyIjoiYmxvYl9pZCJ9fQ==--b3e9c76d30951a79f377a37dccb9aa4600d4d6a8/%E8%B2%BC%E3%82%8A%E4%BB%98%E3%81%91%E3%81%9F%E7%94%BB%E5%83%8F_2024_12_16_16_06.png" target="_blank" rel="noopener noreferrer"><img src="https://bootcamp.fjord.jp/rails/active_storage/blobs/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBeURIQXc9PSIsImV4cCI6bnVsbCwicHVyIjoiYmxvYl9pZCJ9fQ==--b3e9c76d30951a79f377a37dccb9aa4600d4d6a8/%E8%B2%BC%E3%82%8A%E4%BB%98%E3%81%91%E3%81%9F%E7%94%BB%E5%83%8F_2024_12_16_16_06.png" width="1952" height="1260" alt="貼り付けた画像_2024_12_16_16_06.png"></a> このキャプチャだと以下のように縦のグリッドがバラバラです。 <a href="https://bootcamp.fjord.jp/rails/active_storage/blobs/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBeTdIQXc9PSIsImV4cCI6bnVsbCwicHVyIjoiYmxvYl9pZCJ9fQ==--fa60f795226b523308b6a54ced002059e7ac6f0a/pppp.png" target="_blank" rel="noopener noreferrer"><img src="https://bootcamp.fjord.jp/rails/active_storage/blobs/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBeTdIQXc9PSIsImV4cCI6bnVsbCwicHVyIjoiYmxvYl9pZCJ9fQ==--fa60f795226b523308b6a54ced002059e7ac6f0a/pppp.png" width="1952" height="1260" alt="グリッドを揃える"></a> このようにグリッドを揃えると綺麗です。 <a href="https://bootcamp.fjord.jp/rails/active_storage/blobs/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBekRIQXc9PSIsImV4cCI6bnVsbCwicHVyIjoiYmxvYl9pZCJ9fQ==--70ae17ab2fc56ef8d2ceec8b65aead900742d8f7/image.png" target="_blank" rel="noopener noreferrer"><img src="https://bootcamp.fjord.jp/rails/active_storage/blobs/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBekRIQXc9PSIsImV4cCI6bnVsbCwicHVyIjoiYmxvYl9pZCJ9fQ==--70ae17ab2fc56ef8d2ceec8b65aead900742d8f7/image.png" width="1952" height="1260" alt="image.png"></a> ただ、何でも揃えればいいということでもなく、揃えることでコンテンツの横幅が伸びてしまい使い勝手が悪くなったり、文章が読みにくくなってしまう場合は、そこはそこの横幅を持たせて無理に揃える必要はありません。近いけどちょっとズレてるところは揃える、という感じでいいです。 <a href="https://bootcamp.fjord.jp/rails/active_storage/blobs/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBelBIQXc9PSIsImV4cCI6bnVsbCwicHVyIjoiYmxvYl9pZCJ9fQ==--ab316faf61c87782af63ff4eb7558c77b5c99e29/pppp.png" target="_blank" rel="noopener noreferrer"><img src="https://bootcamp.fjord.jp/rails/active_storage/blobs/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBelBIQXc9PSIsImV4cCI6bnVsbCwicHVyIjoiYmxvYl9pZCJ9fQ==--ab316faf61c87782af63ff4eb7558c77b5c99e29/pppp.png" width="1952" height="1260" alt="pppp.png"></a> ## ボタンをカラフルにしない UIライブラリを使ったりすると色んな色のボタンが用意されているので、つい色んなボタンを使いたくなってしまいますが、そうするとどれが大事なアクションなのかがわからなくなってしまいます。 <a href="https://bootcamp.fjord.jp/rails/active_storage/blobs/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBenZIQXc9PSIsImV4cCI6bnVsbCwicHVyIjoiYmxvYl9pZCJ9fQ==--a576bd2c0a0c79f7ef7ab414fc34728b79dd42e5/image.png" target="_blank" rel="noopener noreferrer"><img src="https://bootcamp.fjord.jp/rails/active_storage/blobs/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBenZIQXc9PSIsImV4cCI6bnVsbCwicHVyIjoiYmxvYl9pZCJ9fQ==--a576bd2c0a0c79f7ef7ab414fc34728b79dd42e5/image.png" width="1967" height="980" alt="image.png"></a> このキャプチャでは削除が赤いボタンになっています。多分、削除 = 危険 ということで赤いボタンにしたんだと思いますが、赤くしたために目立ってしまい、削除してほしいようにも感じてしまいます。 <a href="https://bootcamp.fjord.jp/rails/active_storage/blobs/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBenpIQXc9PSIsImV4cCI6bnVsbCwicHVyIjoiYmxvYl9pZCJ9fQ==--c1cc0b5f6aad3e244cca54a3541810a5e1b5f7b9/%E8%B2%BC%E3%82%8A%E4%BB%98%E3%81%91%E3%81%9F%E7%94%BB%E5%83%8F_2024_12_16_19_12.png" target="_blank" rel="noopener noreferrer"><img src="https://bootcamp.fjord.jp/rails/active_storage/blobs/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBenpIQXc9PSIsImV4cCI6bnVsbCwicHVyIjoiYmxvYl9pZCJ9fQ==--c1cc0b5f6aad3e244cca54a3541810a5e1b5f7b9/%E8%B2%BC%E3%82%8A%E4%BB%98%E3%81%91%E3%81%9F%E7%94%BB%E5%83%8F_2024_12_16_19_12.png" width="1967" height="980" alt="貼り付けた画像_2024_12_16_19_12.png"></a> サービスにもよりますが削除は滅多にしないことが多いので、目立たせる必要がない場合がほとんどです。例えば上記のキャプチャのようにボタンではなくテキストリンクにして、文字もグレイにすると目立たなくなります。 ボタンは基本的には白い地味なボタンを使い、大事なところだけ色が付いたボタンを使うようにすると、大事なアクションだけが目立つようになります。例えば、登録や更新などデータに影響するアクションだけ色の付いたボタンを使い、ただのリンクは地味なボタンにするとか。 ## 登録0件のときの表示を用意しよう 会員登録をして何かしらユーザーが登録をするサービスの場合、会員登録直後は登録が0件です（例えばToDoとか）。 せっかくユーザー登録をしてくれたのに、その直後の画面が真っ白でユーザーは何をしたらいいかわからない、という状況にしてしまうのは良くないです。まだ登録がないときは、そのとき用の画面を用意し、ユーザーが迷わずにサービスが使えるようにしましょう。 <a href="https://bootcamp.fjord.jp/rails/active_storage/blobs/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBejNIQXc9PSIsImV4cCI6bnVsbCwicHVyIjoiYmxvYl9pZCJ9fQ==--1114da3748c7bd72b680f323c7848c50a7e5fb8d/image.png" target="_blank" rel="noopener noreferrer"><img src="https://bootcamp.fjord.jp/rails/active_storage/blobs/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBejNIQXc9PSIsImV4cCI6bnVsbCwicHVyIjoiYmxvYl9pZCJ9fQ==--1114da3748c7bd72b680f323c7848c50a7e5fb8d/image.png" width="2073" height="890" alt="image.png"></a> ## 使い方ページに頼るのをやめよう <a href="https://bootcamp.fjord.jp/rails/active_storage/blobs/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBejdIQXc9PSIsImV4cCI6bnVsbCwicHVyIjoiYmxvYl9pZCJ9fQ==--370e31989af881a0f13ba91d6b06c35042231f1d/%E8%B2%BC%E3%82%8A%E4%BB%98%E3%81%91%E3%81%9F%E7%94%BB%E5%83%8F_2024_12_16_20_09.png" target="_blank" rel="noopener noreferrer"><img src="https://bootcamp.fjord.jp/rails/active_storage/blobs/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBejdIQXc9PSIsImV4cCI6bnVsbCwicHVyIjoiYmxvYl9pZCJ9fQ==--370e31989af881a0f13ba91d6b06c35042231f1d/%E8%B2%BC%E3%82%8A%E4%BB%98%E3%81%91%E3%81%9F%E7%94%BB%E5%83%8F_2024_12_16_20_09.png" width="1897" height="278" alt="貼り付けた画像_2024_12_16_20_09.png"></a> 仕事で使わなくてはいけないツールでない限り、使い方のページを読まないと使えないサービスをわざわざ使ってもらうのは難しいです。使い方のページを用意するのは悪くないですが、それを見られる機会もそうないと思うので、そこに労力を割く必要はない場合が多いです。それよりも、使い方のページを見なくてもユーザーが迷わず使えるようにすることに注力しましょう。 ## プレースホルダーには入力例を <a href="https://bootcamp.fjord.jp/rails/active_storage/blobs/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBMEhIQXc9PSIsImV4cCI6bnVsbCwicHVyIjoiYmxvYl9pZCJ9fQ==--0b048880f7df1f048cea2fa37a2974195941cace/image.png" target="_blank" rel="noopener noreferrer"><img src="https://bootcamp.fjord.jp/rails/active_storage/blobs/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBMEhIQXc9PSIsImV4cCI6bnVsbCwicHVyIjoiYmxvYl9pZCJ9fQ==--0b048880f7df1f048cea2fa37a2974195941cace/image.png" width="1736" height="524" alt="image.png"></a> 上のキャプチャのように入力に関する大事なことがプレースホルダーを使って表示されていても、入力中はその文字が見えません。大事なことはプレースホルダーではなく、入力中も見える場所に表示し、プレースホルダーには入力例を表示するようにしましょう。 <a href="https://bootcamp.fjord.jp/rails/active_storage/blobs/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBMFRIQXc9PSIsImV4cCI6bnVsbCwicHVyIjoiYmxvYl9pZCJ9fQ==--c0c112c280b3e2ff2f1a8f41de3c26682bc69fc5/image.png" target="_blank" rel="noopener noreferrer"><img src="https://bootcamp.fjord.jp/rails/active_storage/blobs/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBMFRIQXc9PSIsImV4cCI6bnVsbCwicHVyIjoiYmxvYl9pZCJ9fQ==--c0c112c280b3e2ff2f1a8f41de3c26682bc69fc5/image.png" width="1736" height="524" alt="image.png"></a> ## 名前や口調もブランディングの一つ 可愛いサービスにしたい！クールなサービスにしたい！など、自分の思い描いた方向性に合わせてサービスのブランディングを決め、ロゴや色を選んでいくと思います。 ただ、ブランディングは色やロゴの形だけでなく、サービス内に出てくる要素の名前や、説明の文章の口調もブランディングの一つです。 例えば、可愛いToDoアプリだったら「やること」という名前にし、クールなToDoアプリだったら「タスク」とか、「ToDo」にするとか。カジュアルなサービスだったら、「さっそくやることを登録しよう！！」というメッセージになったり、フォーマルなサービスだったら、「まずはToDoを登録しましょう。」になったり。サービス内に出てくる要素の名前や、説明の文章の口調もサービスに合わせてデザインしましょう。 --- ざっと思いついた6個を挙げました。まだまだたくさんあるので、この第二弾、三弾も書いていきたいと思います。 ##### 今回キャプチャを撮るために用意したサンプル - https://codepen.io/machida/pen/yyBgyYm - https://codepen.io/machida/pen/dPbNGPW - https://codepen.io/machida/pen/QwLdNKE - https://codepen.io/machida/pen/KwPazGv