ランサーズ等のサービスを開発・運用する中で得た知識やノウハウを紹介しています。

Labels:  デザイン 投稿者:morishita

「なんかちょっといい感じ」とは何か

はじめまして!
プロダクト開発部デザイナーのもりしたです。

今年の3月からランサーズにジョインし、デザインやコーディング業務を中心に、少し前から自分で施策を考えるようになりました。
学ぶことが多く楽しいと同時に、数字が読めず算数ドリルの必要性を感じている今日この頃です。

「いい感じ」とは何か

※このブログのゴールは、読んだ人が「あ、なんかデザインとかデザイナーのことちょっと分かったかも」となることです。そんな感じの内容を書こうと思います。

デザイナーなら「なんかちょっといい感じにして」とか、全く聞きたくない言葉です笑
デザイナーと非デザイナー間でのやりとりにおいて、例えば修正を依頼するとき、どう言葉にしようか悩むことってないでしょうか。

  • これを大きくして色を変えてほしい
  • もっと目立つ感じにしてほしい
  • 分かりにくい気がする
  • パッとしない(なんかダサくないかこれ、、)などなど

前職にWEB制作の会社でディレクターをしていましたが、対デザイナーってこんなに大変なんだなって思いました。みなさんお疲れさまです。

リストアップした例について、上から順に、下に向けて抽象度を上げてみました。
先ほど聞きたくない言葉として上げた抽象感ですが、それをヒアリングして解像度を上げるのもデザイナーの役割です。
けれどそれと同時に、デザイナーに向き合う人も歩み寄ることは大切かなと思います。

「いい感じ」には理由がある

ここで「デザインはセンスか理論か」話については深く掘り下げませんが、見え方・感じ方には必ず理由があると思っています。

そこで「こうするとなんかちょっといい感じになる」という実例を上げて、何がそれをそう見せているのか、少しでもその理由に触れるきっかけになればと思います。

今回は先日Reactの勉強会で登壇されたエンジニアの方のプレゼン資料を編集させていただきました。ありがとうございます。(そして先に謝っておきます。すみません)

※ ベースのプレゼン資料がある状態で、それをブラッシュアップするかたちで編集しています。プレゼンの内容自体には触れていません
※ Googleスライダーを使用しました。デザイナーとしてはもどかしい制約のもと(大変便利なツールです)、短時間で行ったクオリティです。ご了承ください

実際に「いい感じ」にしてみる

資料をいただいて一目見た瞬間、題材にはもってこい(意訳:適度にダサい)と思いました。
ありがとうございます。

今回修正にあたり、チェックしたポイントはこちらです。

全体構成と部分構成

  • プレゼンとしてのスライドの流れは適切か、過不足はないか
  • 各ページについて、必要な要素が配置されているか

見た目について

  • 何か違和感を感じたり、分かりづらい箇所はないか
  • どうするといい感じに見えるのか(どう見えることがいいのか)

※ 「いい感じにする」前提として要素の在るべきを判断するために、構成もチェックポイントに含めました

全体構成と部分構成

プレゼンとしてのスライドの流れは適切か、過不足はないか

  • タイトル
  • 自己紹介
  • 目次
  • コンテンツ
  • まとめ
  • 求人(勉強会での最近のトレンド)

定番はこんな感じかと思います。
いったん見た目には目を瞑って確認しました。

各スライドについて、必要な要素が配置されているか

  • ページ数の表示
  • 各スライドでのテーマ(メインの見出しよりも上位のカテゴリ)
  • 引用している場合は参考文献の記載 etc..

スライドによって構成要素は変わりますが、基本的な要素について要不要を判断しました。

■ 現在地を表示する(今どこにいるのか分からない)

スライドを見ていて、各テーマごとに枚数があったため、いま何について伝えているのか掴みづらさを感じました。(おそらく私が内容自体を理解できていないことが主原因ですが)

before

いま何について話しているのかが分かるように、右上に現在のテーマを追加しました。

after

見た目について

何か違和感を感じたり、分かりづらい箇所はないか

■ 整理する(いろいろズレている)

1番最初に気になった箇所です。見出しと本文の位置がスライドごとにズレていました。

before

1枚ずつ見る分にはそこまで気にならないのですが、プレゼン資料の場合だと同じ画面で切り替わって表示されるため、このズレは結構気になります。

おそらく各ページのコンテンツ量の違いからフォントサイズや配置を調整したのだと思いますが、この修正に限らず、スライドの前後の流れを意識しながら編集していくのがいいかと思います。(できるだけマスターはそのまま利用するのが安パイではあります)

見る人によってはあまり気にならないかもしれませんが、この小さな違和感が情報を伝えるノイズになったりもします。
ということで、少なくとも見出しの位置は動かないように修正しました。

after

まずは見やすくしたり分かりやすくする、という修正についてもっと詳しく知りたい方は、ぜひ「デザイン 原則」でググってみてください。内容を体現した見やすくて分かりやすい記事かたくさん出てきます。

揃えてみるだけでも、全体の印象が変わってきます。

before

after

■ 情報の役割と見せ方を考える(とにかく見づらい)

そして今回最大の悲劇はこちらです。

before

画像の文字(コード)とコメント(伝えたいメッセージ)が一体化していました。
何を見ればいいのか分かりづらいです。

ただこれをGoogleスライド上でいい感じにするのには限界を感じ、最低限見やすくなるレベルを目指しました。妥協策がこちらになります。

after

文字にハイライトをつける機能があったので、薄い色を敷いて画像上の文字と区別しました。またポイントとなる箇所の赤枠も目立っていなかったので、太さを調整しました。

■ メインカラーを決める(何だかモサっとしている)

殺風景でした。

before

色味のある色を使わないことも選択肢としてはありですが、うまく構成しないと「シンプル過ぎ」「物足りなさ」を感じさせてしまうため、今回はランサーズカラーを取り入れました。

after

メインカラーの実際の使用箇所としては、スライド1枚目と各テーマの間にカラーのページを挟みました。(後述しています)

こちらの例では見出しの箇所のみ色を入れたのであまり変化はありませんが、文字サイズを調整(まず見てほしい見出しの文字サイズを大きく、コンテンツの文字はそれより小さく)することも併せて行い、少しだけ引き締まったかなと思います。

どうするといい感じに見えるのか(どう見えることがいいのか)

■ メリハリを出す

スライドを全体通して見ると、どこで話が変わったのか、文字で書いてあるので読めば分かりますが、把握しづらいです。

before

いま何を話しているのか、いつテーマが変わったのかを視覚的に分かりやすくしました。
よく使われている手法ですが、各テーマの間にテーマ名を入れたカラーのページを追加しました。流れが単調になるのを防止し、聴衆を飽きさせない効果もあります。

after

■ スライド1枚目はちょっと気合いを入れる

ファーストインプレッションは大事です。とても大事です。

before

1番人に見られるスライドです。
少しキャッチーになるように、ランサーズくんを登場させました。そしてタイトルにメインカラーを使用し、ランサーズくんとのバランスを取って文字は左揃えに変更しました。

after

(タイトルの単語が改行で切れてしまうことは、今回は目を瞑りました)

細かいことですが、文字のサイズが一律だと平仮名は余白が大きい分、漢字よりも文字が大きく見えます。
そのためやり過ぎない程度に、平仮名のフォントサイズを漢字よりも2px程度小さくして調整しました。目立つページは他より少し丁寧に調整します。

そんな感じで、編集を終えました。

まとめ

いくつかのポイントを上げましたが、やっていることは基本的に「ユーザーからそれがどう見えるか」を考えることです。

目的を抑えた上で(必要であれば目的を再定義して)、そのゴールを達成するために相手と正しくコミュニケーションが取れているか、分かりやすく伝えられているか、そしてそれを実現するためにはどうしたらいいかを、考えながら編集しました。

「なんかちょっといい感じ」は、こうして生まれます。

資料を提供してくださったエンジニアさんから、
「デザインが良くなったおかげで、自信を持ってテンポよく発表できました。おかげで良いプレゼンテーションができました!」とコメントをいただきました。とても嬉しいです。(ダサいとか言ってすみません)

受け手に情報が正しく、分かりやすく伝わること。その上で心地良さだったり、驚きだったり、感動だったり、「なんかちょっといい」と感じてもらうこと。
届ける人をイメージしながら、これからも色んなものをつくっていけたらいいなと思います。

補足

冒頭に上げたデザインの修正依頼の話について、抽象的であればあるほど修正内容を絞れないため、余計な工数がかかります。(「ダサい」になるとデザイナーの力量の問題な気もしますが)けれど逆に、具体的になり過ぎることにも注意が必要かと思います。「大きくして色を変える」ことが、「目立つ感じにする」ための最善策ではないかもしれないからです。見せ方については、デザイナーが責任を持つ領域です。
このシーンで必要なのは、お互いが課題を明確にし、共有することだと思います。今回のブログはそれに臨む上で、「抽象的な感覚にも必ずそう感じる理由がある」という理解の助けになればと思い(デザイナーはそれをがんばって噛み砕いて、見た目に落とし込んでいますという主張も込めて笑)、書かせていただきました。

ランサーズではサービスを成長させてくれるエンジニア、デザイナーを募集しています!
ご興味がある方は、以下URLよりご応募ください。

Webエンジニア(Wantedly)
Rubyエンジニア(Wantedly)
フロントエンドエンジニア(Wantedly)
インフラエンジニア(Wantedly)
2017新卒エンジニア(Wantedly)
エンジニアインターン(Wantedly)
その他採用情報

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

thumbnail
AdobeXDを使ってLPを作ってみたお話

初めまして。デザイナーのchoponです。 今回私がお話するのは、AdobeXDを使って、ワイヤー・デザインの制作を行った過程といい点・悪い点について簡単にお話できればと思います。 AdobeXD(以下XD)とは、Adobeから今年リリースされた、新しいプロト …