LiBz Tech Blog

LiBの開発者ブログ

新卒エンジニアが「デザインの4つの基礎」を使ってはじめての名刺づくりをしてみた

はじめに

こんにちは! この春にリブに新卒で入社した江田です。

これまで、内定者インターン時代にテックブログを2記事執筆しています。

🔐 deviseとGoogle Authenticatorを用いてRailsシステムに「二段階認証」を導入した話 - LiBz Tech Blog

📝 ゼロから10分でブログが作れる!Rails 6の新機能「Action Text」を試してみた - LiBz Tech Blog

普段サーバサイドの開発に携わっている関係上、共にRuby on Railsに関する記事だったので、たまには違うテーマで投稿してみようかと思い、全く畑違いの「デザイン」を扱ってみることにしました。

デザインとは?

f:id:edenden:20190607100906p:plain

まずはじめに、皆さんに問いたい。デザインってなんですかね?

デザインと耳にすると、多くの人がUI(ユーザーインターフェース)に関わるデザインをイメージすると思います。

しかし、現代では様々な文脈でデザインが語られていますよね。

  • ユーザー体験をデザインする
  • 組織をデザインする
  • ブランドをデザインする

そんなわけで、一言でデザインと言っても文脈によってその意味合いが変わってくるわけです。

一方で、株式会社THE GUILD代表であり、『note』などのサービスを運営する株式会社ピースオブケイクのCXOを務めている深津貴之さんの記事でこんなコメントがありました。

デザインの意味を、僕は「造形」ではなく「仕組み」と考えているので、回らないものが回るようになるのが良いデザインだと思います。

参考:https://www.axismag.jp/posts/2019/03/117035.html

このときまで、自分がデザインと聞いてピンと思い浮かぶのは「造形」でした。

デザインに対して様々な解釈があれど、造形はデザインの1役割でしかなく、そもそも「仕組み」だという深津さんの記事は自分にとって、大きな衝撃でした。

デザインが介在することで、「ユーザーに提供できていなかったプロダクトの価値が提供できるようになった」「進まなかったプロジェクトが進むようになる」は往々にしてあると思い、個人的にも避けては通れない道だと思いました。

このときから、いつかデザインに対しての知識もインストールして、普段の開発業務に役立てたいと思うように。

今回は、非デザイナーの自分が、弊社のデザイナーに勧められた『ノンデザイナーズ・デザインブック』から初歩的な4つの基本原則にフォーカスして紹介し、名刺作りを通して4つの原則を当てはめていこうと思います。

4つの基本原則

デザイン初学者にとって有名な本である、『ノンデザイナーズ・デザインブック』に記されていた原則を紹介します。

結論から伝えると、以下の4原則になります。

  • 近接
  • 整列
  • コントラスト
  • 反復

以降は、簡易的に名刺をつくりながら4つの原則をあてはめていきます。

最初の状態

とりあえず名刺の土台に要素を載せただけの状態です(カオス・・・)

f:id:edenden:20190607113435p:plain
最初の状態

フォントサイズや文字の太さがすべて同じで、配置がバラバラ。

ひと目では何の情報が書かれているか理解できないですね。

ここから完成形に近づけていきます!

まずは、4つの原則のうちの「近接」を用いて情報の整理を行います。

近接(Proximity)

近接の原則とは、関連する項目をまとめてグループ化するということです。関連する項目を物理的に近づければ、それらは、無関係な断片の群ではなく、1個のまとまっグループに見えるようになります。

(引用:ノンデザイナーズ・デザインブック 15頁)

人は位置的に近いものを「関係があるもの」と認識する習性があるそうです。つまり、位置関係を整理するだけで、視覚的に理解しやすいレイアウトを作ることができるのです。

基本的な目的は「組織化」で、ポイントとなるのは 「余白」 です。 余白を意味もなく設定せずに、関係する要素同士の余白、そうでないもの同士の余白…という風に、余白の一つ一つを整理し、近接を効果的に使っていきます。

f:id:edenden:20190607113938p:plain
近接の原則

今回関係する要素としては「人」と「会社」にまつわる情報に区別しました(この区別に特に正解はないです)

これによって、人物像のイメージと、会社像のイメージができるようになったかと思います!

しかし、まだ違和感が残りますよね。続いては「整列の原則」です。

整列(Alignment)

ページ上では、すべてを意図的に配置しなければなりません。あらゆる要素が、他の要素と視覚的な関連をもつ必要があります。整列は、すっきりと洗練された見え方を生み出します。

(引用:ノンデザイナーズ・デザインブック 13頁)

整列のポイントは、「見えない線」 で繋げること。

「基準となる線」 をいくつか探し、揃えられるものは全て揃えてみます。

f:id:edenden:20190607114108p:plain
整列の原則

なぜ見やすくなったのでしょうか。それは、整列によって左右に「見えない線」を感じることで、画面がすっきりと整理されたからです。

f:id:edenden:20190607114213p:plain
見えない線を見出す

整列の原則は4つの基本原則の中でも、見た目の印象が大きく変わるので変化が分かりやすいです。

コントラスト(Contrast)

コントラストの背景にある考え方はページ上の要素同士が単に「類似」するのを避けるということです。もし要素(書体、色、サイズ、線の太さ、形、空きなど)が同一でないなら、はっきり異ならせるということです。

(引用:ノンデザイナーズ・デザインブック 13頁)

コントラストを意識する場合は、まず情報の優先度を明確にしましょう。

重要な項目は見出しや太字で扱い、大きくしたり、太字にしてみたりします。 それに対して、本文は小さく、相対的に線も細くしましょう。分かりきったことのように感じますが、思い切りがなく対比をさせない場合、パッとしないデザインになっていまうことがあります。

これを意識して変化を加えてみます。

f:id:edenden:20190607114414p:plain
コントラストの原則

氏名は最も記憶に残ってほしい要素ですので、フォントサイズを最も大きくしました。 さらにローマ字は補足程度の情報であるため、他の要素よりもさらにフォントサイズを小さくして対比させています。

ここまでで3つの原則を紹介しましたが、名刺作成はここで一旦完成とします。 最後の原則は名刺だと表現しづらいので別事例も交えて紹介します。

反復(Repetition)

デザインの視覚的要素を作品全体をとおして繰り返すことです。色、形、テクスチャー、位置関係、線の太さ、フォント、サイズ、画像のコンセプトなどを反復させることができます。反復は、組織化を促進し、一体感を強化します。

(引用:ノンデザイナーズ・デザインブック 13頁)

例えば、今回はrgb(152, 152, 152)のグレーカラーをベースにしていたり、フォントも「ヒラギノ角ゴ ProN」、フォントサイズは通常を20px、拡大サイズを36pxで統一しています。

仮に全ての要素がバラバラなフォント、カラーで表現されていた場合、これまでの3つの原則を駆使していたとしても、可読性に欠けるデザインになってしまいます。

f:id:edenden:20190607114527p:plain
極端な例

可読性が下がるだけでなく、重要な情報が何なのかも不明になってしまいましたね。デザインにおいては一貫性を保つことも非常に重要です。

また、反復を用いるとサイトや文章を読み進めるに当たって、次の項目がある程度予測できるようになり、ユーザーのストレスを下げる役割もあります。

例えば、弊社が運営するサービス(https://libinc.jp/)のLPを例に出すと、反復の法則が見えてきます。

f:id:edenden:20190607103113p:plain
LiBzCAREER

f:id:edenden:20190607112656p:plain
例1「アイコン + 見出し + 説明」のグループ

1つ目の要素に目を通したあと、2つ目、3つ目の要素も近いカテゴリーの内容かつ、文章量も同程度と予想できます。これにより、情報を「閲覧する」に至るまでのハードルを下げると共に、読後の理解を深める効果があります。

まとめ

いかがでしたでしょうか?

今回はデザインの4つの原則をさらっと説明しましたが、この原則を知った上で他のデザインを眺めると、今までと違う観点の発見があると思います!

個人的には、この基本原則を踏まえてさらにWebやスマホに特化したデザインの手法も会得していきたいです💪

参考文献

Robin Williams著、吉川 典秀翻訳『ノンデザイナーズ・デザインブック』(マイナビ出版、2016年)