Entry Web

非デザイナーのためのデザイン(Part 1)

2019-05-03

author:

非デザイナーのためのデザイン(Part 1)

たとえデザイナーでなくても、仕事においてプロジェクトのランディングページを作成する、フォームをデザインする、自身のWebサイトを作成する、スライドを作成するなど、視覚的な何かを求められることは必ずあるでしょう。

Part 1のテーマはこちらです ― デザインする上で、一番心に留めておくべきことは何か?

それは、
乱雑さをなくすこと。

以上です。これだけに専念してください。デザインをより美しく感じさせたければ、視覚的な乱雑さを減らすことです。

この醜いウィジェットに、デザインコンセプトを適用していきましょう。

乱雑さ排除のコツを説明するため、こちらの簡単なウィジェットを作りました。以降のコンセプトを説明するにあたり、それらをウィジェットに適用することで、より視覚的にまとまって魅力的に見えていく様子を確認していこうと思います。

では、始めましょう!

グリッドを追加して要素の配置を揃え、乱雑さを減らす。

Foundation front-end frameworkより

デザイナーとフロントエンド開発者との間の争いについて、有名な逸話があります。デザイナーは開発者にモックアップを与え、開発者はコーディングでデザインを実装します。そしてデザイナーは、これこれの要素を2ピクセル落とすように、などとダメ出しし、開発者をあきれさせます ― 2ピクセル?そんな誤差、どうだっていいだろう!またデザイナーのふざけたあら探しが始まった!

しかし、小さなずれはほとんど気づかない程度のものであっても、デザインの「乱雑さ」に影響します。要素が互いに整列していなければ、それらはランダムに配置され、調和していないと感じられることがあります。

どちらがよりまとまって見えますか?

誤って余分なパディングやマージンを見出しやコンテンツに追加してしまうと、ずれというのはすぐに生じてきます。上のスクリーンショットの例では、右側のものは均一なマージンおよびパディングが設定されており、すべての要素が同じ左のグリッド線上に整列しているため、よりまとまりのあるプロフェッショナルなデザインになっています。

すべての要素の左端と右端を揃えることで、ウィジェットが少しだけまとまりを持ちます。

例のウィジェットでは、左右のマージンがばらばらでした。これらのマージンを手早く揃えると、ウィジェットが少し秩序立って見えます。

一言で言うと、要素を整列させ、乱雑な感じを減らすこと。

Webデザインには、FoundationBootstrapSkeletonPureCSSなどのグリッドを含むフロントエンドWebフレームワークを使用した、ショートカットを活用します。これにより、HTMLの要素をランダムに配置することはほぼ不可能になります。

Webデザイン以外の作業やモックアップ作成には、SketchPhotoshopGimpなどのデザインプログラム内でグリッドやガイド線を使用することもできます。

デザインの色を制限することで、乱雑さを減らす。

色の選択というのは非常に難しいものかもしれません。配色理論が、デザインスクールでしばしば一学期に渡るクラスとなっている理由の一つです。

GoDaddyの旧サイトと、現在のサイト。

上に示したGoDaddyの旧サイトに見られる特徴の1つは、デザイン全体で使用されている色の数が非常に多いことです。赤、緑、オレンジ、ダークグレー、ライトグレー、黄色、青とすべてが特徴的です ― そしてこの虹色の配色は、(他の要因と相まって)ひどい乱雑感の一因となります。

現在のGoDaddyのWebサイトは、デザイン全体を通して同じ色合いの黒、緑、オレンジを使用しているため、はるかにきれいに見えます。また、写真の大部分はグレーのため背景に溶け込み、フォームの緑色のボタンを際立たせます。

色の選択の背後には、この記事を圧倒するほど多くの理論とベストプラクティスがあります。そのため、ここでは特にショートカットの活用を推奨します。

Adobe Color CCのWebサイトでは、ポイント・アンド・クリックで操作し補色のカラーパレットを作成できる、優れたインターフェースがあります。

カラーパレットを一から選択するのは面倒な作業です。そのため、事前に作成されたカラーパレットを紹介するWebサイト、または基本色からパレットを作成できるColormindAdobe Color CCColorblendyなどのWebサイトを活用しましょう。これらのサイトは、調和のとれた少数の色から構成されるパレットを作成するのに役立ちます。

カラーパレットを適用。

パレットから一つ選択し、例のウィジェットに適用しました。ここで注意しておきたいのは、パレット上の色すべてを使用する必要はなく、またパレットで指定された色と全く同一でなくても良い、ということです。新たな「Download」ボタンは、パレットの濃いピンクと全く同じ色ではありませんが、これで出発点としては素晴らしいものになりました。

配色作成の過程についてより深く知りたければ、Smashing Magazineに掲載された素晴らしい記事「A Simple Web Developer’s Guide To Color(Web開発者のための配色ガイド)」がお勧めです。

使用するフォント数を減らし、乱雑さを減らす。

現在私たちが利用できるフォントがたくさんあることに感謝しましょう!ほんの2、3のフォントしか選択できなかった時代は終わったのです。

タイポグラフィは、避けては通れないもう一つの大きなテーマです。セリフ、サンセリフ、モノスペース、ディスプレイ、Webセーフ、スラブというのはすべて、フォントと書体を説明および分類するために使われる用語です(タイポグラファー以外にも、一般的に同じ意味で使用されます)。

フォントの選択に関しては多くのガイドラインがありますが、初めのうちは次の2点を推奨します:一つのデザインにつき使用するフォントは2つまでとすること、そして派手なフォントやディスプレイフォントは避けること。

2つの書体のみを使用すると、ウィジェットの外観がすっきりして見えます。

左側の元のウィジェットは4つの異なるフォントを使用していましたが、右側の手直ししたウィジェットでは2つのみです。新しいウィジェットはイタリック体やオールキャップスなどのスタイルを使用しているため、まだ要素間の違いが感じられるものの、全体的にはまとまった印象を与えます。

しかしながら、利用可能なすべての選択肢の中から2つのフォントを選択することは、依然として途方もないことです。Typekit(年間99ドルまで無料)やGoogle Fonts(無料)などのサイトには、プロフェッショナルで美しいフォントがたくさんありますが、それらの中にも何百もの選択肢があります。

TypewolfBeautiful Web TypeFont PairTyp.ioなど、無料フォントをまとめたサイトを使用します。

フォントのキュレーションサイトを使用してより限られた数のフォントを表示させ、それらの実際の表示を確認することで、選択肢を減らしていきます。TypewolfBeautiful Web TypeFont PairTyp.ioなど多くのWebサイトに、利用可能な中で最も優れたGoogleフォントの一覧が掲載されています。何百ものフォントをスクロールして見ていく必要は、もうありません ― これらのサイトを見て、組み合わせが見た目にもよく、状況に即していると感じるものを選ぶだけです。

書体の選択についてより深く知りたければ、Smashing Magazineの素晴らしい記事「How To Choose A Typeface  –  A Step-By-Step Guide(書体の選び方 ― ステップガイド)」をご覧ください。

A Book Apartには、Webタイポグラフィを詳述した書籍もあります:「On Web Typography

空白を追加することで、乱雑さを減らす。

空白は、乱雑さを減らす究極の要素です。

駆け出しのデザイナーは、あまりに多くの情報を矢継ぎ早に押し出そうとしがちです。大きな空白は不快で不自然な感じがするため、初心者はしばしば空白を、情報や要素で埋め尽くそうとします。

私のWebサイトに空白を追加する前と後。

しかしデザインの余白(行間や文字間のスペース、要素周りのマージンやパディング)は文字を読みやすくし、インターフェースを秩序立て、デザインをよりプロフェッショナルなものにします。

空白を加える(そして要素間のスペースを標準化する)と、ウィジェットはよりプロフェッショナルに。

ウィジェット内のたくさんの場所 ― 各コンテンツの間、緑色の背景の端、見出しと段落の間、テキストの行間、フォームの内部 ― に空白を追加することにより、ウィジェットがよりプロフェッショナルに見え、また読みやすくなります

ここでの使用に適したショートカットはありません。ただ一つ、心に留めておいてください:自分が必要と思う以上の空白を入れること。デザインしているものが何であれ、要素に十分なマージンを持たせ、スペースを与えて配置すること、テキストの各行に十分なスペース(行高)を持たせること、またコンテンツ間や端にも十分なスペースを持たせることが必要です。

詳しくは、以下の素晴らしい記事をご覧ください。

まとめ:デザインの見栄えを良くするため、雑然さを減らすことを覚えておいてください。

ウィジェットに適用した雑然さ排除の原則により、見た目が大幅に改善されました。
  • グリッドを使用し要素を整列
  • デザインの色数を制限し、補色パレットを使用
  • 使用するフォント数を削減
  • 空白を追加

要するに、「簡潔で」整然としたデザインを目指すことです。

もちろんデザインは見た目を整えるだけではなく、より重要なのはその機能です。本記事のPart 2、Part 3では、デザインの過程とデザインを見る目を養う方法を見ながら、ユーザー体験について説明していきましょう。

「非デザイナーのためのデザイン」は、3部構成のシリーズです。ユーザー体験についてはPart 2を、デザインの直観力を鍛える方法についてはPart 3をご参照ください。

私の本では、さらに多くの情報やコツをご紹介しています!「Hello Web Design」は上に記した情報を含んでいるだけでなく、プログラマーやデザイナー以外の人々を対象に、理論やベストプラクティスについて、現実的かつ平易な言葉で説明しています。

「Hello Web Design」のご注文はこちらから。価格は電子書籍 24.95ドル~

ご覧頂き、ありがとうございました!ご質問があれば、Twitterでフォロー&メッセージをお願いします

Tracy Osborn        
デザイナーであり開発者、著作家、技術系起業家。好きなことは、製品づくり、人々の学びの手助け、山登り。

この記事は、著者の許可を得て翻訳しています。なお、原文はこちらです。