スタイル・エッジ技術ブログ

士業集客支援/コンサルティングのスタイル・エッジのエンジニアによるブログです。

エンジニアも知っていると嬉しいデザインの原則

こんにちは!システム事業部のMJです。
もうすぐ新卒4年目、インターンも含めると5年目になり、年次を重ねるごとにさまざまな経験をさせていただいています。
ここ1年ほど新規事業のシステム開発に携わっていますが、その中で特に記憶に残ったのがシステムのデザインを1から担当したことでした。
(この話をすると、毎日Adobe XDと睨めっこしながら、2ヶ月ほどピクセル単位の修正をしていた記憶が蘇ってきます…)

上記のようにシステムのデザインとまではいかなくても、UI設計を行ったり、プレゼン資料を作成したり…とエンジニアがデザインをする機会は想像以上にあり、デザインの経験がなくても知識を身に付けておくだけで役に立つことがあります。
今回は、知っているだけでドキュメントや成果物のアウトプットが向上するデザイン・設計のテクニックをご紹介します!

ペルソナ設計

ペルソナ(Persona)とは、サービス・商品の典型的なユーザ像のことです。 マーケティングなどでよく聞くペルソナですが、デザインでも必要になってきます。 ペルソナを設定するメリットとしては、

  • プロジェクトの関係者間で、共通した人物像を形成することができる

  • ユーザを具体的にイメージしやすくなるため、製品やシステムが実際に使われている場面をイメージしながらデザインができる

  • その人物像を掘り下げることで需要の高い(低い)コンテンツが見えてくるため、取捨選択など各種判断の材料になる

などが挙げられます。

具体的には、システムのメインカラーを決める際に暖色系か寒色系かで自分とステークホルダの意見が割れたのですが、今回設定した主要なペルソナが20代女性で美容クリニック勤務(以下詳細割愛)だったため、それを根拠に議論を重ね、双方納得する色合いでデザインを進めていくことができました。

このように、デザイン決定の判断軸としてペルソナ視点を用いることでスムーズに問題解決ができたときなどは、ペルソナ設定の重要性を痛感しました…

デザインの4原則

わたしが実際にデザインを担当してみるまでは、デザインというと、色や柄などの美しさのイメージが先行していました。
ただ実際にデザインしてみると、色や柄が美しくてもレイアウトが整っていないと、ユーザに情報が的確に伝わらないということがわかりました。

レイアウトを整えるために重要になってくるのが「デザインの4原則」です!

  • 近接
    関連する要素をまとめることで、グループ化して情報の整理を行う

  • 整列
    要素を意図的に配置してページ上に関連性や統一感を持たせる

  • 反復
    ルールに基づいてデザインの要素を繰り返す

  • 対比
    異なる要素間でサイズや色の強弱を強め、目立たせたい情報を強調する

この4原則を用いることで、論理的にレイアウトを決めていくことができます。

ただし、顧客管理のようなシステムでは情報過多になるため全体的に項目が詰め込まれる傾向にあり、近接・整列・反復は実現できても対比などは難しく苦労しました…
アクセントカラーを決めたり、アイコンを使用するなどして多くの情報の中でも目を引くよう意識しました!

システム開発時に意識するポイント

上記2つのポイントはデザイン全てにおいて基本となる考えですが、システムを開発する際に意識すべきポイントもあります。

流行りのデザインと使いやすいデザインは違うということ

システム事業部にはデザイナーも在籍しているため、おしゃれなデザインやかっこいいデザインを見せていただく機会も多く、システムにも取り入れたいと思ったことが多々ありました…

流行りのデザインは斬新で魅力的に感じますが、ユーザが日常的に使うシステムの場合、デザインによってはユーザが入力する前に考える時間が増えてしまうことがあります。

例えばボタンをアイコンのみで表現した場合、「このボタンはなんのボタンだっけ…?」と悩む一瞬の時間が積み重なってユーザのストレスに繋がりかねないため、デザイン性と利便性を兼ね備える必要があります。

おそらく、流行りのデザインはユーザにとって馴染みがない、システムで使うには情報が省略されすぎている、などの点から使いやすいと言えない場合があるのだと思います。

ターゲットや場面によって「使いやすいデザイン」が変わってくるので、都度判断していくことが大事になります。(この判断軸としてペルソナを用いることも有効)

ユーザレビューを必ず行うこと

これはシステム開発においてどのフェーズでも必要ですが、特にデザインをしていると、自分のデザインしたシステムが自分の「当たり前」になってしまいます。
自分が使いやすいと思ってデザインをしていても、実はユーザの業務都合上項目の配置はこうがいい、といったケースを何度も経験しました。

それだけでなく、世間的にベターとされている手法や理論でさえも、使い方次第ではユーザに受け入れられない場合もあります。
そういった気づきや学びを得るためにも、ユーザレビューは必ず行うよう心がけていました。

おわりに

今回は自分の経験から「エンジニアも知っていると嬉しいデザインの原則」をご紹介しました。
エンジニアとデザイナーは、別分野として捉えがちですが、知っておいたほうがいい知識がたくさんあります。少しでも興味を持つきっかけになれば幸いです!

実はわたしがシステムデザインを担当したきっかけは、色彩検定を取得したことでデザインに興味を持ち、「やってみたい!」と頼み込んだことでした。
やりたいことがあれば、話を聞き、実践する環境を用意し、気にかけてくれる、そんな社風が弊社の素敵なところだなと感じています…!

☆スタイル・エッジ・グループでは、一緒に働く仲間を募集しています☆
もし興味を持っていただけましたら、採用サイト↓も覗いてみてください!
recruit.styleedge-labo.co.jp