Advertisement

5min-guide-for-non-designer-15min-guide-for-non-designer-featured-image-1

 

優れたデザイン原則は、誰にでも学ぶことができ、活用することもできます。

 

このガイドは、デザインの現場で利用できる実用的で基本的なテクニック10個をまとめてご紹介します。これらの基本ルールを知るだけで、あなたのデザインがずっと良くなります。

 

design-basic-rule-2017
「デザイン」に対して興味のあるすべての人を対象に、いつまでも長く利用できるデザインの基礎テクニックを、これまで当サイトで紹介したエントリーの中から、各ポイントごとに
color-palette-basic-2017-featured-image
なにかデザインをはじめるとき、無数にある色から配色を決定するのに頭を悩ませることもあるでしょう。この記事では、適切な配色カラーパレットを決めるのに役立つ8つの基本ル

 

 

コンテンツ目次

 

01. コントラストを活用しよう。

目へのストレスを軽減するためには、背景とフォントカラーは十分に配色の異なる、コントラストを意識するようにしましょう。

 

通常、白い背景に黒い文字がもっとも可読性が良いとされています。明るい灰色や黄色、みどり色などは避けるようにすることで、目を細めて文字を読まなければいけない、やっかいな問題は起きないでしょう。

 

5min-guide-for-non-designer-1

 

 

 

02. 「黒に近い黒」が「黒」よりも読みやすい。

もし黒色を文字テキストに設定する機会があれば、純粋な黒(#000000)ではなく、「灰色がかった黒」(#333333)を利用してみましょう。白背景に純粋な「黒」を重ねることで、すこし揺れているように見え、文字テキストにフォーカスするのが難しくなってしまいます。

 

5min-guide-for-non-designer-5min-guide-for-non-designer-2

 

 

 

03. 重要なコンテンツを最初に。

まず、もっとも重要な情報をレイアウトすることで、アプリやウェブサイトの使い心地をサポートしてくれます。重要なコンテンツは、ズームやスクロール、タップ無しできちんと表示する必要があります。

 

5min-guide-for-non-designer-3

 

 

視覚的な階層をうまく利用している、いくつかの参考例を見てみましょう。Instagram は、ユーザーによって投稿された写真/ビデオにはっきりとフォーカスされています。

 

Pinterest は、検索バーを一番上に配置することで、素敵なグリッドレイアウトでコンテンツを並べています。アプリにとって、検索は核となる機能で新しいコンテンツや情報を発見、探すためにも Pinterest は使われています。

 

5min-guide-for-non-designer-4

 

もう少し他の参考例も見てみましょう。

 

Spotify では、音楽アルバムのアートワークをはじめに、そして曲名が次、最後にコントロールボタンを配置しています。早送り/巻き戻しに比べ、再生/録音ボタンに注目が集まるように工夫されています。
5min-guide-for-non-designer-5min-guide-for-non-designer-5

 

gridmethod-top
海外デザインブログCanva Design School Blogで公開された「15 Reasons Why A Grid Based Approach W
golden-ratio-top
海外デザインブログCanva Design School Blogで公開された「What Is the Golden Ratio? What You Nee

 

 

 

04. すべてのものを整列させよう。

デザインをしているときに、「なにか違う」「なにかおかしい」と感じたときに、もっとも素早く問題を解決する方法は、各デザイン要素がきちんと整列されているか確認してみましょう。こうすることで、アプリやウェブサイト、グラフィックデザインの見た目を格段に改善することができます。

 

5min-guide-for-non-designer-6

 

他にも、「整列」に関する具体的な参考例として、Medium.com を見てみましょう。なにかおかしいと感じる部分はないでしょうか。

 

左のレイアウトでは、うまくコンテンツが整列されていない点を強調しており、右側では主要なコンテンツがきちんと整列されているのが分かります。

 

5min-guide-for-non-designer-5min-guide-for-non-designer-7

 

5min-guide-for-non-designer-8

左のレイアウトでは視線が移動してしまいますが、右のレイアウトでは統一感のある整列が利用されています。

 

 

 

05. 文字サイズと文字スペースに気をつけよう。

フォントサイズを大きくすることでより読みやすくなり、文字間隔を調整することでコンテンツを理解しやすくなります。

 

5min-guide-for-non-designer-5min-guide-for-non-designer-10

適切なフォントサイズ vs. 間違ったテキストサイズ by Ui Design DO’s and Don’t | Apple

 

5min-guide-for-non-designer-5min-guide-for-non-designer-11

適切な文字スペース vs. 間違った文字スペース by Ui Design DO’s and Don’t | Apple

 

nondesigner-tip-top
海外サイトMediumで公開された「3 Typography Tips for a More Comfortable Read」の著者Luke Jonesより許可を
20typo-mistake-top
海外デザインブログCanva Design School Blogで公開された「20 Typography Mistakes Every Beginner Make

 

 

 

06. 検索結果の順番が重要なときは「リスト表示」。

多くのモバイルアプリやウェブアプリには、いくつかのタイプの検索があり、結果を表示する方法についてはいまも議論が行われています。

 

結果としては、順序が重要な場合は、リスト形式がもっとも効果的でしょう。あまり検索結果の順番が関係なく、ユーザーが新しいコンテンツを発見するのを手助けするときは、より視線の動くグリッド形式が好まれます。

 

5min-guide-for-non-designer-12

How Do Users View Search Results Presented in a Grid Layout?

 

 

 

07. まずは白黒でデザイン、あとから色を追加しよう。

白黒モノクロでデザインすることは、アプリの核となる問題点を解決しながら、デザインを設計できるテクニックです。

 

色によって異なる感情や反応を無意識に示してしまうため、UIコンポーネントなどの機能面を設計する邪魔となってしまうことがあります。

 

5min-guide-for-non-designer-13

 

 

 

08. 快適なデザインを目指そう。

片手で押しにくいボタンなど、操作性に問題があるときは、以下のイラストを参考にしてみましょう。

 

5min-guide-for-non-designer-14

このイラストでは、右手のみでスマートフォンを操作するときの押しやすさを視覚化したもので、このテクニックを効果的に利用したアプリでは、スクリーン画面の下部1/3にナビゲーションメニューや核となる機能やアクションが配置されています。

 

 

 

09. 素敵な配色カラーパレットを使おう。

色はとても奥の深い芸術アートでもあり、デザインに適した配色を選ぶことが重要となります。Dribbble の Color Palettes で見つけるか、 CoolorsColor Claim のようなカラーパレット生成ツールを利用することを強くオススメします。

 

5min-guide-for-non-designer-5min-guide-for-non-designer-15

 

color-tool2015-top
PhotoshopVIP編集部: 2016年8月22日に公開された記事を再編集し、前回より17個のツールやサービスが増え、合計36ツールをご紹介しています。
color-in-ui-design-2017-pt1
配色とは、他のデザイン要素と同じように、適度に使用することが大切です。最大で3つの色数に抑えることで、より良い結果を得ることができる傾向があります。デザインプロジェ

 

 

10. Apple や Google のデザイン原則を学ぼう。

Apple と Google は、Android や iOS 用ソフトウェアを開発するひとにとって重要な素晴らしいリソースを公開しています。

 

たとえば、Google マテリアルの概要には、アプリデザインを開始するためのガイドラインから、各種素材リソース、配色、アイコン、コンポーネントなどが揃います。

 

Apple には、Human Interface Guideline 通称 HIG と呼ばれるドキュメンテーションがあります。このガイドラインには、iOSアプリケーションを設計するうえで知っておくべきすべてが詳しく解説されています。

 

5min-guide-for-non-designer-16

 

 

さいごに。

デザインにおける問題点を探せるようになるには、多少の時間と練習が必要ですが、今回ご紹介したテクニックを活用することで、より素敵なデザインを作成できるようになるでしょう。では、デザインを楽しんで!

 

海外サイト Design Your Way で公開された How to not suck at design, a 5 minute guide for the non-designer by Marc Hemeon より許可をもらい、翻訳転載しています。

 

参照元リンク : How to Not Suck at Design, A 5 Minute Guide for the Non-Designer – Design Your Way