開発者のための設計へのアプローチ方法

同じプロジェクトや製品に取り組んでいる場合でも、開発者と設計者はサイロで互いに離れて作業することがよくあります。 開発者は、製品の機能と比較した場合、デザインは重要ではなく、二次的なものと見なされることがよくあります。

この種の考え方は、開発者と設計者の関係に悪影響を与える可能性があります。 デザインの基本を理解していないと、開発者のキャリアが妨げられたり、デザイナーがいないという理由だけでプロジェクトを遂行できなくなったりする可能性があります。

開発者がデザインを学ぶべき理由

設計と開発はしばしば別々の分野と考えられていますが、両方を習得した人もいます。 誰かがデザイナーまたは開発者（両方ではない）になることにのみ興味があるとしても、少なくとも他の分野の基本を学ぶことは価値があります。

開発者がデザインを学びたい、または少なくともデザイン知識の基本的な基礎を開発したいと思う理由はいくつかあります。

まず第一に、小さなチームには専任のデザイナーがいない可能性があります。 さらに、プロジェクトに完全に自分で取り組みたい、デザイナーを雇う余裕がない（または他の場所でお金を使いたい）開発者がいます。 自分の製品をデザインすることを学ぶことは、少なくともデザイナーを雇うことができるまで十分にやり遂げることができるので、かけがえのないリソースです。

開発者がデザインを学ぶもう1つの大きな理由は、デザイナーとより効果的に連携できるようにするためです。 デザイナーがウェブサイトやアプリ用に完全にデザインされたファイルを渡して、完成品でピクセルパーフェクトであると期待しているのに、開発者がコーディングすることでデザインが大幅に変更されていることに気付くのは、非常に苛立たしいことです。

開発者が設計の基本を理解していない場合、UIを特にユーザーフレンドリーにし、プロジェクトのユーザーエクスペリエンスを意図せず妨害する、細部を見落とす可能性があります。 設計者が大量の修正を送り返すと、プロジェクトの完了が遅くなることは言うまでもなく、開発者と設計者の関係に負担がかかる可能性があります。

学際的なチーム間の関係とチームワークを改善するために、開発者は、純粋に開発の観点からデザインを見るのではなく、「デザイナーの目」を通してデザインを見ることを学ぶことによって自分自身を支持します。そのスキルを習得すると、プロジェクトが大幅に改善されます。

デザインマインドセットの作成

多くの場合、デザインを学ぶ開発者は、それらのデザインをサポートする基本的な原則ではなく、好きでエミュレートしたいデザインの美学に焦点を合わせすぎています。 彼らは、ボタンの色やサイズ、特定のフォント、境界線の使用方法などを、それらの選択の背後にある理由を理解せずに見ています。

彼らは、いわば、装飾しているスペースの目的を理解せずに（または配管や電気工事などが完了していることを確認することさえ）、壁にペンキをスプレーしてスペースを装飾し始めます。

設計者が決定を下す理由の背後にある原則を理解し、尊重することが重要です。 デザインに不慣れな人は、ゲシュタルトの原則や基本的な視覚的階層など、優れたデザインを構成する原則と理論をしっかりと把握してから、どこにでも飛び込んで塗料をスプレーし始める必要があります。

とは言うものの、新しい設計者は、開発のバックグラウンドを持っているかどうかに関係なく、理論的には行き詰まることがよくあります。 彼らは物事を学び、考えることに多くの時間を費やしているので、彼らが学んでいることを実際に適用することは決してできません。

デザイナーと開発者の両方が完璧主義者になる傾向があります。 しかし、完成する前にデザインを押し出すことは（おそらく決して完成しないため）、プロセスにとって重要です。 特に新しいデザイナーは、不安を乗り越え、仕事をそこに出し、受け取ったフィードバックから学ぶ必要があります。

デザインを実際に学ぶための最良の方法の1つは、他の人のデザインを再現しようとすることです。 うまくいくものとうまくいかないものを選び出し、特定のデザインが魅力的である理由を理解することは、新しいデザイナーや開発者が学ぶことができる最も価値のあるスキルの1つです。 既存のデザインに独自のスピンを加えることは、業界では一般的です（Dribbbleの「リバウンド」機能によって証明されています）。

ブラウザでのデザイン

多くの設計者は、ブラウザで直接設計することに抵抗します。これは、一般に、少なくとも基本的なHTMLおよびCSSコードを快適に記述できる必要があることを意味します。 これが、開発者が設計に取り掛かるのに最適であることが多い理由です。彼らはすでにコードを書くことに慣れています。

ブラウザでの設計に役立ち、設計者と開発者の両方の生活を楽にすることができるツールがあります。 シンプルなブラウザプラグインは、カラーパレットの選択から、別のサイトのCSSおよびHTMLコードの探索まですべてに利用できます。

また、ブラウザでフル機能のデザインツールのように機能するFigmaのようなより複雑なツールもあります。 Figmaを使用すると、設計者は共同作業を行い、資産を利害関係者に送信し（さらに、設計の内容やコピーに変更を加えることもできます）、開発者は実際の設計にリアルタイムでアクセスできます。 これは、時間の経過とともに拡張できる設計および設計システムを作成したい開発者設計者にとって最適なオプションです。

Webflowは、開発者が気に入るかもしれないブラウザで設計するためのもう1つのオプションです。 デザインインターフェイスは視覚的ですが、エクスポートされるコードはクリーンでセマンティックなCSSおよびHTMLであり、開発者は喜ぶでしょう（すべてのビジュアルデザインツールがクリーンなコードをエクスポートするわけではありません）。 Webflowには、デザインとレイアウトのためのツール、組み込みのCMSおよびeコマースツール、およびホスティングオプションが含まれています。

色、タイポグラフィ、およびレイアウトの使用

色、タイポグラフィ、レイアウトの視覚的な原則に飛び込む前に、基本的なユーザビリティについて話すことが重要です。 世界で最も美的に心地よいデザインは、使用できなければ役に立たない。

最も重要なユーザビリティの原則の1つは、一貫性または予測可能性の概念です。 デザインは、ユーザーがその使用方法を直感的に理解できるように、十分に予測可能である必要があります。 たとえば、クリック可能なリンクの青い下線付きテキスト、完全で適切にラベル付けされたナビゲーションメニューなどです。要素間の間隔、タイポグラフィ、および配色も一貫している必要があります。

すべての設計プロジェクトで考慮すべきその他のユーザビリティの原則には、エラー防止（およびエラーが発生した場合の有益なエラーメッセージ）、使い慣れた言語（「かわいい」または不明確な可能性のある創造的な代替手段ではなく、人々が慣れている言語を使用する）などがあります。 ）、柔軟性と効率、そして簡単に利用できるヘルプ。 Nielsen Norman Groupには、さらに留意すべきユーザビリティヒューリスティックがあります。

製品が設計および開発チームの意図したとおりに機能し、ユーザーが混乱しないことを確認するために、設計および開発プロセス全体でユーザビリティ評価を実施する必要があります。 ヒューリスティック評価では、製品が従う必要のある事前定義された設計原則のリストを実際の製品と比較して、逸脱が発生する場所を確認します（そしてそれらの逸脱を修正します）。

手元の製品に関連して使いやすさが完全に理解されると、デザイナー開発者はデザインのより視覚的な側面に進むことができます。

基本的な色彩理論

色彩理論は、ビジュアルデザインの最も複雑な側面の1つです。 色合いをわずかに変更すると、色の視覚的影響と感情的効果を完全に変えることができます。 これは、何年も業界に携わってきた多くのデザイナーがまだ色に苦労している理由の1つです。

多くの本が色彩理論について書かれていますが、デザイナー-開発者が始めるために学ぶことができるいくつかの非常に基本的な原則があります。 それらを利用可能な多数のカラーデザインツールのいずれかと組み合わせると、心地よいカラーパレットをかなり簡単に作成できます。

まず、暖かい色、冷たい色、ニュートラルの違いです。 温かみのある色には、赤、オレンジ、黄色があります。 温かみのある色は、一般的に鮮やかで活気に満ちています。 クールな色には、緑、青、紫があります。 これらの色は通常、落ち着いてリラックスできます。

ニュートラルには、白、黒、灰色、茶色、ベージュが含まれます。 暖色または寒色に白、黒、または灰色を追加すると、その意味と影響が変わります。 白は色を明るくし、一般的にその効果を弱くするか、よりポジティブにします（たとえば、紫は神秘的で堂々とした色と見なされますが、ライラックはしばしば春と幸福に関連付けられます）。 グレーは色をミュートし、その影響を少なくすることができます。 黒は色を暗くし、より保守的に見えるようにすることができます（明るい青と紺のような色の異なる影響を考慮してください）。

デザイナーが色の意味の基本を理解したら、Coolors、Design Seeds、Colormindなどのツールを使用して、デザインの最終的な調整されたパレットを考え出すことができます。

HSLカラーの使用

デザイナーがウェブカラーについて考えるとき、彼らはしばしば16進値の観点から考えます。 これはWebカラーに関して業界標準になっていますが、開発者はHSLカラー値を使用する方が理にかなっていることに気付くかもしれません。

ほとんどの人（設計者を含む）にとって、16進値は互いに相関関係がないように見えます。 非常によく似ている2つの色は、16進値が完全に異なる場合があります。 たとえば、＃68B4D4と＃92C8E0はかなり似た青の色合いですが（一方はもう一方よりも少し明るく明るい）、それらの16進値には明らかな相関関係がありません。

ただし、それらのHSL値は、それらがどれほど密接に関連しているかを示しています。＃68B4D4はHSL（198、58％、62％）になり、＃92C8E0はHSL（198、56％、73％）になります。 シーケンスの最初の数字（この場合は198）は、特定の色相を示します。 2番目の数値は、彩度のパーセント（色の明るさまたは鮮やかさ）です。 3番目の数値は、色の明度（または追加された白）のパーセントです。

色の値の相関関係はHSLと16進数で非常に簡単に確認できるため、開発者は、HSLを使用したコードを介した色の操作が非常に簡単であることに気付くことがよくあります。

タイポグラフィの原則

タイポグラフィは、経験豊富なデザイナーでさえもつまずく可能性のあるもう1つの分野です。 しかし、色彩理論のように、役立つツールがいくつかあります。

活版印刷の階層は、デザイナーと開発者が最初に学ぶべきことの1つです。 デザイン内の異なるタイプ要素間の関係は、そのデザインをより使いやすくするために不可欠です。

少なくとも、デザインには、タイトル、サブタイトル、本文フォントの3つのレベルの活版印刷階層が必要です。 タイトルが最も視覚的に目立つようにし、次に字幕が続き、次に本文のフォントが読みやすくなります。

多くの新しいデザイナーは、階層を作成する際にフォントサイズに重点を置きすぎており、フォントスタイルには十分ではありません。 たとえば、タイトルをサブタイトルよりも大幅に大きくするのではなく、タイトルを太字にするか大文字にすることができますが、サブタイトルはタイトルケースと通常の太さのままにしておきます。 色は、字幕とタイトル、およびそれらの要素と本文を区別するためにも使用できます。

異なるフォントを組み合わせると、多くのデザイナーを混乱させる可能性がありますが、それでも視覚的な階層を作成する一般的な方法です。 それらには、補完的なフォントの選択（反対はしばしば引き付けられますが、ある程度、フォントの組み合わせは、時間の経過とともに研ぎ澄まされた直感に基づいて決定する必要があります）、適切なフォントの選択（法的文書でComic Sansを使用しないでください）が含まれます。たとえば、小さいサイズでは判読できないボディタイプの表示フォント）、書体間のコントラストを作成します（非常に類似している2つは使用しないでください）。

フォントを組み合わせるもう1つの簡単な方法は、大きなフォントファミリからフォントを選択することです。 一緒にうまく機能するディスプレイ、セリフ、サンセリフのバージョンを含む家族もあります（Eaves夫人とEaves氏、Fedra、またはMuseoとMuseo Sansなど）。 フォントは一緒に見栄えがするように設計されているため、これはフォントの組み合わせを実際に試すための最も簡単な方法です。

より大きな活版印刷の階層（H1、H2、H3、H4などの追加など）を操作する場合は、活版印刷のスケールで何らかの理由に従うことが重要です。 フィボナッチ数列は、他にも確立された活版印刷の尺度がありますが、最初に考えられる尺度の1つです。

両方のタイポグラフィ（および一般的にデザインレイアウト）で使用される1つの一般的なスケールは、4、8、16、24、36、48、72、108などで構成されます。これらの図をさまざまな方法で組み合わせて、見栄えのするデザインを作成できます。比率（たとえば、24ピクセルのフォントと36ピクセルの線の高さの組み合わせ）。

基本的なレイアウトの原則

Webの開始以来、「標準」として登場した特定のレイアウトパターンがあります。 例としては、追加情報やナビゲーションオプションを備えた上部、左側、または右側のサイドバーのメインナビゲーション、残りのスペースを占めるボディコンテンツなどがあります。

この基本的なレイアウトからは明確な逸脱がありますが（トップナビゲーション、サイドバーなし、2つのサイドバーなどではありません）、新しいレイアウトを作成する場合、これは多くの場合かなり安全な方法です。 この基本的なパターンからの逸脱は、特に新しい経験の浅いデザイナー開発者が目的を持って行う必要があります。

予測可能なデザイン（通常は一貫性があることを意味します）を作成することは、製品の使いやすさに大きく影響します。 製品を使用するときにユーザーが期待するものから逸脱することは、ユーザビリティの向上が損失よりも大きい場合にのみ行う必要があります。

同じタイプのコンテンツでは、1つのページで72ピクセルの太字の青いタイトルを使用してから、別のページで36ピクセルの赤いタイトルを使用しないことをお勧めします。これは、レイアウトの一貫性が重要であるためです。 同様に、タイトルと本文の間隔（パディング）は、あるセクションで36ピクセル、次に別のセクションで32ピクセルであるため、視覚的な不整合が生じます。 人は違いが耳障りである理由をすぐには理解できないかもしれませんが、彼らはそれを感じるでしょう。

上記の活版印刷のスケールと同様に、4、8、16、24、36、48、72、または108ピクセルのスケールの要素の間隔は、視覚的に心地よいデザインを作成します。 要素間に十分なスペースを使用し、要素に呼吸の余地を与えることをお勧めします。 新しいデザイナーはしばしば空白を避け、雑然としていて圧倒的に見えるデザインになってしまう可能性があります。

なぜスケールがそのように間隔を空けられているのか疑問に思う人もいるかもしれません。 最初の2つの数値の間に4ピクセルの違いしかないのに、最後の2つの数値の間に36ピクセルのジャンプがあるのはなぜですか？ 理由は単純です。小規模では、4ピクセルの増加を簡単に識別できます（8ピクセルは4の2倍の大きさであり、簡単に識別できます）。 しかし、数値が大きくなると、72ピクセルと76ピクセルの違いは簡単にはわかりません。 サイズが大きくなると、違いが大きくなりやすくなります。

一貫した間隔は、グリッドベースの設計アプローチが非常に人気になった理由の1つです。 グリッド（通常は12列、16列、または24列）から始めると、設計者はすべての一貫性を維持するためのフレームワークを利用できます。 柱の間に組み込まれた側溝は、さまざまなデザイン要素とその中のコンテンツにある程度の余裕を持たせるのにも役立ちます。

結論

デザイナーも開発者も、キャリアを伸ばすためにスキルセットの拡大に​​集中する必要があります。 開発者が設計の基本原則を学ぶために費やす時間は、将来、設計者と協力したり、独自の製品を作成したりするときに時間を節約できます。

デザインの基本原則（ユーザビリティの原則、色彩理論、タイポグラフィ、レイアウト、UX）を理解することで、開発者は開発をより上手に行うことができます。 デザイナーが自分たちの選択を行う理由を理解できれば、開発者はデザイナーと協力して真に優れた製品を作成できます。

Toptal Designブログでさらに読む：

• デザインの原則とその重要性
• 設計者はどのくらいのコーディングを知っておく必要がありますか？
• 可能性のスペクトル：Go-ToUIカラーガイド
• これらの成功したインタラクションデザインの原則でUXを後押しする
• デザインの基礎–ビジュアル階層のガイド（インフォグラフィック付き）