話題のデザイナーにUI添削してもらったキロク

みなさんお世話さまです、コウヘイです。

先日デジハリSTUDIO上野の卒制発表会を乗り切ったところで大変な開放感に包まれております。立派な卒業証書もいただきましたが、それをどう使ったってデザイナーになどなれないのでまだまだ精進していきます。

今回はTaiki IKEDA(@iTiekey)さんが運営しているデザインメンターSlackでのUI添削のやり取りをまとめさせていただきたいと思います。

デザインメンターSlackについての記事を紹介しようと思ったのですが、該当記事が諸般の事情で消失しているので簡単に説明します。

作ったUIを投稿すると、すごい速さで添削&アドバイスが返ってくる場所

それでは実例を紹介させていただこうと思います。

▶ 制作したUI

左:自分で作ったもの、右:添削して作り直したもの

Daily Cocoda! #001
『20代女子向けの写真SNSサービスのプロフィール画面』

▶ 自分で作るときに考えたこと

左のUIを作っているときです。添削前ですね。

- 写真SNSだからインスタを参考にしてみたらよさそう
- 女子向けだから色はピンクかな
- フォントはウェイトを軽くして華奢な雰囲気にしよう
- 行間・余白は広めにしよう
- 画面上をプロフィール情報、画面下を写真一覧で理にかなうな

いま見返すと、考えたこととUIがあんまり一致してないのが分かります。恥ずかしい。

行間・余白なんて結構みっちみちで抜け感が無いですね。トーンも暗めですし、なんというか全体的に野暮ったい

こちらのUIをデザインメンターSlackでTaiki IKEDA(@iTiekey)さんに添削していただきました。

▶ 添削結果(アドバイス)

- 全体の雰囲気を20代女子に合わせる
- レイアウトの理由付けを強くする

大きくこの2点でした。それぞれを細かく説明していきます。

▶ 添削#1:全体の雰囲気を20代女子に合わせる

『これを意識したらそれらしくなりますよ』というアドバイスがコチラ↓↓

- 素材の雰囲気を合わせる(主に写真)
- 形状は『角丸』
- 丸文字を使い、行間を大きめにする
- shadow、borderなどに使うグレー色にピンクを混ぜる

▶ 素材の雰囲気を合わせる
『まず写真が20代女子感がないですね』とのことです。私は28歳男性なので仕方ないのですが、そうも言ってられないので素材の探し方を教えてもらいました。

フリーフォト検索サービスで『girly』や『feminine』で検索するとそれっぽいのが出てきます。

確かに上記のワードで検索するといい感じの写真が出てきました。それらを集めてUIに入れていきます。

写真を変えるだけでも雰囲気がガラッと変わりました。UIの主役が写真なので、影響力が大きいですね。

▶ 形状は角丸
自分で作ったUIを見ると、プロフィール欄は角丸なのに写真一覧は真四角になっています。そもそもトンマナが合っていないでしょうし、改めて見ると画面下半分だけ無骨です。

写真一覧も角丸にすることで、全体の雰囲気が整いつつ柔らかさを感じさせるUIにすることができました。

ここで注意したいなと思ったのは、グリッド要素の角丸を大きくしすぎると角の余白が大きくなりすぎるのでバランスが悪くなる点です。程よいR値を探すのが大事ですね。

▶ 丸文字を使い、行間は大きめにする
自分で作ったUIではOS標準フォントを使っています。原則として『そうするものだ』という認識があったので。…しかし下記のアドバイスが。

単なるモックなので、ヒラ角や日本語に縛られなくても良いかもです。

確かにそれもそうだなと。

取り組みの指標として『雰囲気出し』のスキルを重視していたので、ある程度の決まりごとは気にしないことに。良さげな丸文字フォントを使用

添削後に使用したフォント↓↓
欧文:Quicksand
和文:ヒラギノ丸ゴ

合わせて行間・余白も大きくしています。これだけでかなり印象変わりますね。

▶ shadowやborderに使うグレーにピンクを混ぜる
とりあえずグレーの比較をご覧ください↓↓

左:通常のグレー、右:ピンクを混ぜたグレー

けっこう違うのが分かりますね。それぞれ単独で見たら等しくグレーですが、こういった工夫が全体のトンマナを合わせる秘訣だと思います。

言われてみると、フォントカラーは単なる黒でなくチョコレート色っぽい感じになっているのに気づけるかと思います。

▶ 添削#2:レイアウトの理由付けを強くする

まずは参考画像からご覧ください。

ポイントとなる考え方は、『要素自体をどこに置くか』ではなく『レイアウトのブロックをイメージして組み立てる』ということです。

1枚目の画像でいうと、フォロワー数などのテキストは『配置領域を3分割したブロックの中でそれぞれ左揃え』となっています。
ブロック幅の計算式は (Screen Width - 16*2 - 70 -24)/3 です。

また2枚目の画像では、『それぞれのブロック単位でアカウント画像に対し中央揃え』を意味しています。

要素はそれ自身を配置するのではなく、必ず四角い箱にはいっているものだと考えて配置するのが重要です。HTMLで要素並べるときもflexboxを使ってdivとかでくくった箱を並べますよね。
こういったレイアウトのロジックがしっかりしていると、実装の際には確実に楽になるだろうと思います。

全体のバランスを見ながらレイアウトを調整しました。添削前でもそれらしく配置はできているのですが、より強いロジックでレイアウトを説明することができました。

▶ 全体像

ここまでの内容を踏まえて、改めて制作したUIをご覧ください。

左:自分で作ったもの、右:添削して作り直したもの

どことなく野暮ったさを感じさせていたUIが、若い女子らしいカジュアル感や抜け感を醸し出すUIになっているのではと思います。

▶ さいごに

他にも細かいアドバイスを頂いたり、自分なりに考えて改善したところは多々あるのですが割愛します。

『iPhoneの画面サイズでいろいろ要素を置いてみたけど、なぜかUIらしく見えない…』という悩みは、恐らくみなさんが等しく抱える悩みだと思います。このとき例によって『自分にはUIデザインのセンスが無いんや…自分はもうアカンのや…!!』と嘆くのは早計です。

『らしさ』とは何かを調べ、それらを一つずつ丁寧に落とし込んでいきましょう。

そうすればちゃんとできます。

=======

Twitterやってます。よろしければフォローミー。

若くて生きのいいデザイナーを探している方がいらっしゃれば、いつでもご連絡ください!!  DM解放してお待ちしております🙇🏻‍♂️

ポートフォリオはこちら↓↓

詳しいプロフィールはこちら↓↓

どうも!

この記事が気に入ったら、サポートをしてみませんか?気軽にクリエイターを支援できます。

ウンバホ族の逆襲
39

Kohey Aoyama

みんなの『気に入らない』をデザインでゴリゴリ解消していきます| UI制作スピード爆上げ中|デザインツールなんでも使えます|出:山形天童・在:千葉柏|鶴岡高専出身→開発職→設計職→サービスデザイナー(求職中)| https://www.resume.id/kohey_aoyama
コメントを投稿するには、 ログイン または 会員登録 をする必要があります。