カメレオンデイズ

読者です 読者をやめる 読者になる 読者になる

カメレオンデイズ

デザイナーdoubleMによる気ままな記録スペース

【つまづいたらチェック!】フラットデザイン採用時に起こりがちな問題点と解決策

デザイン デザイン講座

f:id:doubleM:20151125225207p:plain

※この記事は2015-11-25に書いた文章のリライト記事です

スマホアプリのデザイン制作に携わって4年目に突入しました。
移り変わるデザイン事情を現在進行形で楽しくお勉強中のデザイナーdoubleMです。

今日は、フラットデザインを作成する際に現場で起こりがちな問題と、その問題に対してデザイナーが現場で行なっている地味な努力について、公開してみようと思います。

この記事の狙い
「シンプル過ぎてどうも扱いが難しい!」フラットデザインを

「オシャレで洗練された」フラットデザインに!!



フラットデザインてこんなやつ

フラットデザインというと、きっとみなさまが思い浮かべるのはこんなデザインじゃないでしょうか?

f:id:doubleM:20151122231536p:plain

ペタッとしてて、ノイズ(余計な情報)がなく、かつかわいらしいので私もフラットデザインがもてはやされる昨今の風潮は気に入っています。

その半面、フラットデザインは実はデザイナー取扱い注意な側面があることも、ご存知でしたでか?

現場でありがちな、連動課題

「流行りのフラットデザインにして!」
こんなオーダーをもらった際、杓子定規に先ほどのようなフラットなパーツで全体のデザインをするとどうなるか…。大抵は、こんな反応が返ってくるんですよね。

・ちょっとシンプルすぎる
・"押せる"感が足りない
・もう少しリッチな印象にしたい

こうした反応に対して、そもそも論としての「フラットデザイン」の精神性を説いたり、アニメーションで補完したりすることもできますが、私がよく取るのはこんな手法です。

課題解決の一例("良い"デザインのための考え方)

f:id:doubleM:20151122233839p:plain
各所で厚み、影、光を表現していますね。

これを見て、これじゃフラットじゃないじゃん!立体じゃん!!と思った方。その感覚ももちろん間違いではありません。

(ここからは、今お見せした例じゃ納得行かない!という方向けの解説になります。)

優先すべきは何か

「チーズバーガーのチーズ無し」と同じように、「フラットデザインで、シンプル過ぎなくてリッチな感じ」はすでにオーダーが破綻しています。

トレードオフ(両立不可能なこと)が含まれるオーダーが挙がってきた場合、まず確認すべきは誰にとって何が今、一番優先すべき事項かということです。

私はUIデザイナーにとって最優先すべきことは、「機能」を表現することだと考えています。

その前提に立って考えた時、例えば先ほどの指摘の中でユーザーにとって最も影響をあたえるのは「押せることがわからないこと」つまり機能が伝わらない点です。UXを考える上で、ユーザーに使いかたが伝わらなくては話になりませんね。
その上で、その他の装飾部分を極力クライアントの希望に寄せることが、最もシンプルで丸く収まるデザイン方法だ、という個人的な方針でこの先を進めます。

言葉の定義を掘り下げる

次に、クライアントの言葉の定義を掘り下げる必要があります。

例えば…ですが。
シンプルすぎる
 → どのラインから「シンプル」ではなくなるのか、逆にどこからは「派手」になってしまうのか
"押せる"感が足りない
 → どうであればユーザは押せる、と認識するのかまた、どの層のユーザーについて言及しているのか
  (※ 高リテラシーユーザはすでにフラットデザインに慣れている)
もう少しリッチな印象にしたい
 → なにをもってリッチと認識しているのか。リッチはシンプルの対局にあることを理解しているのか。
などなど。

もちろん、上記項目はクライアントに直接質問しても答えは出ません。
というか、逆効果ですのでデザイナーは自分でこれを探る必要があります。

これと同時進行で、クライアントの言う「フラットデザイン」についても掘り下げる必要があります。
上記のようなオーダーが入っている時点で、すでにクライアントは「フラット」であることを望んではいません。
あくまでも、「フラットっぽい」デザインを望んでいることが伺えます。では、クライアントの感じるフラットっぽさ、とはなにか。それさえ分かれば、ここだけを外さずに、あとは自由にやってよし!と解釈できますね。

外さないポイントは独自にルール化

先ほどお見せした展開例(画像)はほんの一例ですが、あの中でも私が独自に決めているルールが有ります。

f:id:doubleM:20151122234456p:plain

例えば
・シャドウにボケ足を付けない
・光を表現する場合もグラデーションは使わない
・色の数を増やさない

などです。

こうすることで、説明可能なデザインが生まれます。

まとめ

デザイナーは現場で、奥ゆきのあるフラットデザインを作ってる!!

少し説明が冗長になってしまった気もしますが、
今回はデザインの現場で行われているUIデザイナーの思考回路を簡単に公開してみました。
(実際はもっと複雑な政治的事情なんかも絡んできて紆余曲折することも多いのですが…笑)
「デザインで問題解決をする際、どう考えていいかわからない」
と感じている方に、ひとつのサンプルとしてご覧いただければ嬉しいです!




「女学生語」に学ぶ!取引先担当者とちょっと仲良くなれる(かもしれない)ビジネスメールの崩し方✦

ライフ・雑記 考え方 仕事効率化

遊びの頻度が高すぎて記事作成が間に合いません!今年も順調にパーティ野郎のdoubleMです。下町生まれの私にとって、8月は盆踊りで非常に忙しくなる季節です。櫓を囲んで円になり、祭囃子の音に合わせて舞う夏の風物詩。

f:id:doubleM:20160814014834j:plain

この盆踊り、実は歳の離れた(50-60代の)お姉様がたと交流できる年に一度の社交の場でもあります。

WM:ここの公園は八木節とか河内男節とか御神輿音頭とか、曲のチョイスがイイっすよねー!
OG:あらアナタ話が分かるじゃない!そうなのよ○○公園は曲が古くて飽きちゃうのよねぇ!
WM:わかりますー。とはいえどこ行っても東京音頭と炭坑節はテッパンですけどね(笑)

みたいな感じで【イケてる曲】について語り合ったり…

WM:やっぱ付け襟オシャレっすねー!
OG:そーぉ?アナタも髪の色と浴衣が合っててとっても素敵よぉ✦
WM:ありがとうございます♪ 今年は帯留め買おうか迷ってたんですけど、どっかおすすめのお店とかってあります??」

みたいな感じで【ファッション】について語り合ったり…年齢差を気にせずガールズトークができるのもまた、盆踊りの魅力のひとつです。

ところで、文字にするとオネエと見紛うこの口調。この年代のご婦人たちが話していらっしゃるのはいわゆる「女学生語」だって、ご存知でしたか?
個人的に結構この話法がすごく気に入っているので、ちょっと勝手に語らせてください!

この記事で学べること
取引先担当者と仲良くなれる(かもしれない)メール表現✦



女学生語とは…

「よろしくてよ」「すてきだわ」「かまいませんことよ」などのような語彙と語尾を特徴とする口調。明治時代頃に流行したとされる。現代では、お嬢様や上級階級の婦人などの口調などで用いられることがある。(via Weblio)

てよだわ言葉と呼ばれることもあります。50-60代のちょっと上流なご婦人方の間では今でも使われることがありますが、若者の間ではまず耳にすることがありませんよね。(ドラマやアニメ、小説などでは使われていますが。)この言葉、敬語が主流だった明治時代に「親しみを込めた話し方をしたい!でも相手への敬意も示したい」という意図で女学生同士の間で生まれた言葉なんです。

女学生語がもたらす「親近感」

確かに、
①「素敵だと思います。」
②「かまいません。」
③「あなたもいらっしゃいませんか?」
といった言い回しでは距離感を感じますが、
①「すてきだわ」
②「かまいません(こと)よ」
③「あなたもいらっしゃる?」

に変化させると、一気に親しみが湧いてきますよね。
上記の例は「①(相手を)評価する表現」「②(相手に)許可を下す表現」で言葉を崩すことで、「目上から目下」という構図を回避しています。「③(相手の)意向を伺う言葉」でも同様に、表現を崩すことで相手を「敬い過ぎる」ことを回避しています。

今回のエントリでは、(流石にそのまま使え、とは言いませんが)この特徴を活かしたフレーズを使うことによって、取引先とのメールのやり取りがより円滑になる!(かも?)という例をご覧にいれたいと思います。

やってみよう!

1. 相手との距離をぐっと縮める、メールフレージング

制作現場あるあるですが、業務メールというのはどうも淡白になりがち。面と向かって会う機会があればまだ良いのですが、他社の担当者と電話とメールだけでの付き合いをするケースも儘ありますよね。そのままだとなかなか距離も縮まらない…ということで、ファーストコンタクトから数回経ったら少し、文末に印象アップのためのフレーズを入れてみませんか?

お気づきの点がございましたら下記までご連絡ください。

プロたるもの、当然完全データをやり取りするのがベストではありますが、人間誰しもミスはするもの。そんな時の連絡は早くもらえるに越したことはないですよね。こういったフレーズにプラスすると良いのが、「な」「ね」「ませ」の3種類。

お気づきの点がございましたら下記までご連絡ください
お気づきの点がございましたら下記までご連絡ください
お気づきの点がございましたら下記までご連絡くださいませ

どうでしょう。だいぶ印象が和らいだ感じがしませんか?もちろん、「お気軽に」というフレーズを追加するのも効果的ですが…本心を言うと、「気軽に」仕様外の要求をされても困ります。私はそんな「余計なワードを入れずに表現を和らげたい」時にこの手法を使っています。
ほかにも、「宜しくご査収くださいませ。」とか、「○○ですよね?」など、少し語尾の敬語を崩してみるのも、心理的距離感を縮めるのに効果的ですよ。

2.(ちょっと軽めに)語尾アレンジ!!

上の例だと少し気安すぎると感じる方は、文終わりの「。」に変化を付けてみてはいかがでしょうか?例えば…

素早くご対応いただいて非常に助かりました。
今後とも宜しくお願いいたします。

ところで、○○の納期は✕✕日で問題ありませんでしょうか。

というフレーズを、

素早くご対応いただいて非常に助かりました!!
今後とも宜しくお願いいたします

ところで、○○の納期は✕✕日で問題ありませんでしょうか??

に変えてみる、とか。
下記のようにダメ出しをしなければいけないシーンでも効果的ですね。

仮名様

お世話になっております。○○でございます。
ご納品物、無事拝受いたしました

内容を確認させていただいたのですが、✕✕のファイルが含まれていなかったようです。。
お手数お掛けしますが、再度ご確認いただけますでしょうか??

よろしくお願いいたします。

毎回やるとただの「アホの子」になってしまいますが、特に「感謝を伝える際」と「聞きにくいことを聞く際」は感情が前面に出ても相手はさほど嫌な気持ちはしません。こういったシーンに限ってでも、文末表現を変えてみると相手の印象がきっと変わってくるハズですよ。

※逆に「こちらに何も不備がなく、絶対的に相手がミスしている」(しかも相手側に誠意が感じられない)場合など、真剣に問い詰めたい時は敢えて堅い文体にすることでのギャップも出せます。

3.(やり過ぎ覚悟で)応用編

モノづくりをしていると嫌でも「ダメ出し」をしたりされたりするケースが出てきます。しかも、「ダメ出し」したら「ダメ出し」した側のミスだった…なんてこともあるので怖いですよね。そしてそんな時こそ、淡白過ぎる対応は避けるべきです。
例えば先程のメールに対して

✕✕のファイルですが、こちらで確認した限りでは問題ありませんでした。
○○の形式で再度お試しいただけないでしょうか。

納期は△日のままで問題ありません。

と返してしまうと流石にちょっと、角が立ちますが

✕✕のファイルですが、こちらで確認した限りでは問題ありませんでした。
もしかして、■■のアプリで開いていらっしゃったりしませんか??
○○の形式であれば開けるのでは…と思います!
お試し下さいませm(_ _)m

※納期は△日のままで大丈夫ですー!

と返せばツンケンした印象はなくなりますよね。
え?やり過ぎですか?…そうかもしれません。
でも、本当に大切な相手であれば、「相手が転んだら一緒に転んであげる」くらいの気持ちで接してあげるべきですよね。
日本語は「恩義」の関係性の上に成り立っています。ですから、こういったケースでの相手の「(意図せぬ)非礼」を帳消しにしてあげるためには、こちらも同等の「非礼」を働いてあげた方が、相手が気詰まりなく過ごせるというものです。

…なんて、後付けの理由ですけどね。でもそう考えてみれば、「相手の失敗をフォローするとき」に限っては、このくらいおちゃらけても許されるような気がしてきませんか?

まとめ

私は基本的に、他者とは対等に話がしたいタイプの人間です。
友人同士はもちろんのこと、例えば「雇用主と雇用者」「クライアントとクリエイター」「先生と生徒」なども対等であるべきだと思っています。雇用主は雇用者に対して力を持っていると思われがちですが、雇用者はその能力と時間を雇用主に「売り」、雇用主はそれを「買って」いる…つまり等価交換がなされているわけですから本来対等なはずですし、クライアントとクリエイターと同様の関係です。先生と生徒も同じで、先生はその「知識」を提供し、生徒(本人あるいは親)がそれを購入している、という構図ですね。購入側は、相応の価値があると思うからそれを買うのですから、「お金を出している方が偉い」という考えは誤りだと思うのです。

女学生語の真意は、こういった本来対等であるべき関係性を崩してしまう危険があるケースに於いて、わざと「正しい話法」を崩すことによって、パワーバランスの調整を測る試みだと言えるでしょう。

今日のエントリー例は、「いつでもどこでも誰にでも」当てはまるものではないと思いますが、「特定の時や場や人」においては非常に効果的に作用するはずです。時と場と人を見極めて、ぜひ活用してみてくださいな!




UI/UXデザインの方法が知りたい!という人が知っておくべき、UX改善の成功例

デザイン デザイン講座 アイデア

「髪の毛をピンクにしたまま社会人になりたくて、デザイナーになりました。」と言うと必ず「え、冗談でしょ!?」と言われますが、ホントです。doubleMです。

f:id:doubleM:20160807141405p:plain
久々に、まじめにUXの話をしてみます。

この記事のターゲット
UXデザインってなにすりゃいいの!?という人向け

  • UXとUI。UI/UXデザイナーはなぜ生まれたか?
  • よくある質問「UXデザインって、どうやって創るの?」
  • イノベーションに「セオリー」は、ない。
    • 前提として、立場が違う。
  • ここまでのまとめ
  • 本題です。具体的な話を、しましょう。
    • 1. ダグ・ディーツ氏が斬新な発想で小児向けMRIのUX改善を行った話。
    • 2. IDEOの自動販売機
    • 3.フォルクスワーゲンの「ピアノの階段」
    • 4.言葉を変えたらチカンがいなくなった話。
    • 5. 24種類のジャムより6種類のジャムの方が購買率が高い
    • 最後に



続きを読む