設計プロセス

開発者のためのデザインへのアプローチ方法

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

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

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

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

2017年に販売されたドローンの数

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

まず第一に、小さなチームには専任のデザイナーがいないかもしれません。さらに、プロジェクトに完全に自分で取り組みたい、デザイナーを雇う余裕がない（または他の場所でお金を使いたい）開発者がいます。独自の製品を設計することを学ぶ、少なくとも十分にデザイナー雇うことができることは非常に貴重なリソースです。

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

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

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

デザイナーと開発者がお互いを理解していると、開発者のコラボレーションのためのWebデザインが簡単になります。

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

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

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

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

とは言うものの、それは新しいものにも一般的ですデザイナー、彼らが開発のバックグラウンドを持っているかどうかにかかわらず、理論的に行き詰まる。彼らは物事を学び、考えることに多くの時間を費やしているので、学んでいることを実際に適用することは決してできません。

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

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

によって設計されたグラスルーツ名刺（右）レオ、はグラスルーツのロゴアニメーションのドリブルリバウンドです（左）エッセイ。リバウンドは、関連するプロジェクトをリンクするためによく使用されます。

ブラウザでのデザイン

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

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

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

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

Webflowには、使いやすいビジュアルデザインインターフェイスがあります。

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

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

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

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

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

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

スーザン・ワインシェンクそしてディーンバーカー（Weinschenk and Barker 2000）は、多くのソース（Nielsen、Apple、Microsoftを含む）からユーザビリティガイドラインとヒューリスティックを調査し、チェックする20のユーザビリティヒューリスティックのこのセットを生成しました。

基本的な色彩理論

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

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

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

色彩理論はデザインの非常に重要な部分であり、経験豊富なデザイナーでさえ難しいと感じることがあります。

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

デザイナーが色の意味の基本を理解すると、次のようなツールを使用できます。クーラー、デザインシード、または Colormind 彼らのデザインのための最終的な調整されたパレットを考え出すために。

HSLカラーの使用

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

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

色の外観と16進値の関係を確認するのは非常に困難です。

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

色の外観とそのHSL値の相関関係を簡単に確認できます。

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

タイポグラフィの原則

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

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

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

印刷に最適なサンセリフフォント

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

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

ルミナリーセリフフォントとサンセリフフォントを非常に見た目に美しい方法で組み合わせます。

フォントを組み合わせるもう1つの簡単な方法は、大きなフォントファミリからフォントを選択することです。ディスプレイ、セリフ、サンセリフのバージョンが一緒に機能するファミリーもあります（MrsEavesとMrEaves、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ピクセルの赤いタイトルを使用しないことをお勧めします。これは、レイアウトの一貫性が重要であるためです。同様に、タイトルと本文の間隔（パディング）が1つのセクションで36ピクセル、次に別のセクションで32ピクセルになると、視覚的な不整合が生じます。人は違いが不快な理由をすぐには理解できないかもしれませんが、彼らはそれを感じるでしょう。

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

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

一緒に働くデザイナーと開発者

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