愛をこめてデザイナーへ（フロントエンド開発者からの手紙）

親愛なるデザイナー、

この手紙は何年もの間醸造されてきました。 その一部は、長い間、スピーチや書面でさまざまなデザイナーに届けられてきました。

しかし、私はいつも、それが私が働いている現在のデザイナーやクライアントに関係することを恐れて、それを公開することを恐れてきました。 ですから、先に進む前に、これは特定の不満ではなく、18年間の意見の不一致の項目別リストであることを強調したいと思います。

私たちはほぼ20年間協力してきましたが、あなたが送ってくれた各PSDファイルには（多かれ少なかれ）同じ問題がありました。 それなら、あなたにあなたの仕事を教えようとする猥褻さを許してください。

グラフィックや美学について教えてくれるとは思いません。 タイポグラフィ、読みやすさ、空白の使用については詳しく説明しません。

代わりに、あなたの労働の成果が私にどのように情報を与えるかを説明したいと思います。

デザインをピクセルパーフェクトなWebページとして再現するために必要なことを思い出させてください。 デザインファイルがドキュメントにどのように使用されるか、および作成するイメージが使用されるテクノロジーをどのように決定するか、つまりスケーラビリティとパフォーマンスの非常に基本的なレベルに至るまでを説明したいと思います。

また、すばやく簡単に実行できることと、プロダクション全体をクロールにドラッグするオーバーヘッドを生成するものを示したいと思います。

そして何よりも、あなたが今作成している写真は、相互作用し、反応し、何千人もの異なる個人と通信し、彼らに教え、学ぶ必要のある生き物になります。可能な限り最も楽な方法でそれらを。 それと彼らの両方のために。

ドキュメントの設計

まず、作成しているPSDファイルは、クライアントが承認するための画像のソースであるだけでなく、開発者向けの技術文書およびソース資料でもあることを思い出してください。 したがって、レイヤーとグループを整理し、整理し、名前を付けてください。

デザインに注釈を付けます。 使用した規則を使用して別のファイルを作成するか、別の非表示レイヤーにそれらを書き留めます。

どのフォントを何に使用したか教えてください。 使用する色、間隔、コンテキストを教えてください。 私は知る必要がある。

また、特定の機能の設計が行われていない場合に何を推定するかを知る必要があります。

私が言おうとしているのは、次のとおりです。可能であれば、設計している製品の簡単なスタイルガイドを作成してください。

どちらの場合も、タイトルなどの標準のテキストブロックを追加するときは、その後ろに長方形を追加して、周囲の間隔を示します。 それはあなたがそれらを毎回一貫して配置することを可能にするはずです。 これが大変な作業である場合は、少なくともドキュメント内のどの例が標準であるかを示してください。

タイトルが目で配置されているので、タイトルが配置されている単一のインスタンスに視覚的にフィットしていることがどれくらいの頻度でわかるかはわかりませんが、測定すると、それぞれに独自の間隔があることがわかります。

同じことがコンテンツブロックにも当てはまります。 さまざまなコンテンツブロックのリストがある場合は、それらを一貫して配置してください。

コンテンツのデザインのセクションで詳しく説明しますが、タイトルが常に1行になるとは限らず、その情報をファイルで使用してください。

フォントサイズが22px、行の高さが92pxのこれらのタイトルに出くわします（明らかにメインページのタイトルからコピーして貼り付けます）。 選択した設定は、エクスポートされたファイルを視覚的に変更しない場合でも関連性があります。

テクノロジーのための設計

これには2つの側面があります。何ができるか、そして何が媒体に適切かということです。

Webサイト開発ですべてが技術的に可能になる段階に急速に到達していますが（他に何もないとしても、キャンバスを使用してピクセルごとに描画できます）、これらのソリューションの多くは本番環境に対応していません。

誰かがWebGL3DとCSSブラーおよびフィルターマスクをデモページにうまく組み合わせた例を見つけたという事実は、それをシングルページアプリケーションのフルウィンドウ視差パネルとして使用できることを意味するわけではありません。

そして、本当に最先端を歩きたいのであれば、承認のためにデザインを提出する前に、開発者に相談してください。 さもなければ、クライアントをより少なく解決させるのは難しいでしょう。

ただし、本当にエッジをテストしたい場合、および楽しみのために試してみたい場合は、個人的に私に連絡してください。 私はあなたと同じようにそのようなものを作るのが大好きです。 予算のある制作プロジェクトにそのようなものを入れないでください。

それらのことを超えて–できることの限界をテストすることを超えて、何をすべきかに関して敏感で賢明であるようにしてください。

あなたはグラフィックアーティストではありません。 あなたはそれ以上のものです、あなたはデザイナーです。

特定の方法で表示されるように設計するだけでなく、特定の方法で実行し、通信し、特定の方法で動作するように設計する必要があります。

どこにでもいるデザイナーに馴染みのある決まり文句を探すために：誰も座ることができない場合、ゴージャスな見た目の椅子は何が良いですか？

デザインを画像ではなくデザインにするには、ロードの速度、実行の速度、使いやすさをデザインに組み込む必要があります。

HTMLとCSSだけで可能な限り達成するようにしてください。 Photoshopで利用できる見栄えの良い機能の使用は避けてください。 ブレンディングは使用しないでください。 フェイクボールドとフェイクイタリックは使用しないでください。

要素を画像にする場合を除いて、最も単純な影以外のフィルターは使用しないでください。

ブレンドカラーフィルを使用しているので、色を計算したり選択したりしないでください。 オーバーレイブレンディングを使用して透明な画像を偽造しないでください。 私は実際に現場で透明な画像が必要です。

Bootstrapなどのフロントエンドフレームワークを使用している場合、これらの問題の多くはすでに解決されているので、その方法と変更方法を学びます。 関係のないものを気ままに設計するだけではいけません。

デザインがフレームワークの機能と一致していない場合、それを実装することはデザインを実装することではありません。 代わりに、フレームワークを選択的にオーバーライドすることになります。そのため、設計を混乱させてから、最初から実装することはありません。 ワークロードは半分ではなく2倍になります。

そして最後に、サイトで3つ以上のフォント（またはフォントバリアント）を使用しないでください。 それぞれが独自の通常および斜体のバリエーションを持つ6つの異なるウェイトが必要な場合は、Web用に設計する必要はありません。

双方向性のための設計

これは巨大なものです。 そして、この手紙はもともとこのトピックのためだけに書かれました。 ユーザーと機能が相互作用するすべての方法を本当に知り、理解する必要があります。

最も単純なもの、つまりリンクから始めましょう。

リンクには2つの状態だけがありません。

私が受け取るナビゲーションでは、常にリンクとアクティブリンク（現在のページ）のデザインを提供します。

その他の場合、通常はベース状態とホバー状態を提供します。

少しでもユーザーフレンドリーになりたい場合は、ベース、ホバー、フォーカスの状態を明確にデザインする必要があります（UXの場合、訪問済みとアクティブも便利です）。 また、ナビゲーションの場合、リンクとアクティブリンクにはそれぞれ上記のすべての状態があります。

ああ、州間のリンクレイアウトをあえて変更しないでください（さまざまな境界線の幅、パディングなど）。

同様に、ボタンのように見えない場合は、背景がありません。 限目。 インラインテキスト要素のパディングは混乱し、パディングされていないテキストの背景は決して効果がありません。

これはモバイルで使用するため、個別のインタラクティブ要素間に十分な空白があり、各ヒットボックスが十分に大きいことを確認してください。 各軸で最低42pxが標準だと思います。

非表示の長方形、またはヒットボックスを示す非表示のレイヤーを描画します。 それらが重複していないこと、およびユーザーの操作が明確であることを確認してください。

フォーム要素はさらに悪いです。

私が目にする最も一般的なケースは、ラジオボタンとチェックボックスです。 標準のものは醜いです！ それで、あなたはあなた自身をデザインし、私にチェックされた状態とチェックされていない状態を与え、そしてあなた自身が終わったと考えます。

ただし、チェックボックスには多次元の状態テーブル全体があり、それぞれをユーザーに視覚的に示す必要があります。

次の状態があります。

• チェック済みまたはチェックなし
• ホバーするかどうか
• 焦点を合わせるかどうか
• 有効または無効
• エラーかどうか

それらのそれぞれは、他のものと組み合わせることができます。

Disabledは、一部の組み合わせ（通常、無効にするとホバーとフォーカスは関係ありません）を防ぎますが、すべてではありません（checked-disabled-errorは、チェックボックスの完全に有効で有益な状態です）。 したがって、16の有効な状態と4つの無効な状態になり、合計で少なくとも20の異なる状態が得られます。 たとえば、あなたが通常私に与える状態は、その設定ではチェックされていない、有効になっていない、およびチェックされていない、有効になっていない、ではありません。

他のフォーム要素は、チェックされていない状態ではない場合がありますが、空または空ではない場合があります（プレースホルダーテキストを表示）。 それらはまた、より複雑な情報状態を持つことができるので、エラーかどうかのケースは、ニュートラル警告エラーの成功と同じくらい複雑になる可能性があります。

次に、その上に、ラベル、入力ヘルプ、およびエラーテキストの明確に定義されたレイアウトとデザインとともに、必須またはオプションのインジケーターが必要です。

また、本当にユーザーフレンドリーにしたい場合は、ユーザーがデータを提供したことがないか、データが既に保存されているか、変更されているがまだ保存されていないことを示す、元の状態を設定する必要があります。

私が言っているのは、双方向性のための設計は難しいということです。 また、ラジオボタンの外観を変更したい場合は、2つの状態で見栄えを良くしないでください。

対話性を設計する上での最後のポイントは、対話がどのように見えるかを決定することです。 つまり、インタラクティブな要素に使用する規則を決定し、他の要素には使用しないでください。

いいえ、特に重要なコンテンツを強調するために同じソリューションを使用する場合は、リンクを示すために主要なブランドの色を使用することは許可されていません。

コンテンツのデザイン

唇のコンテンツで満たされた各要素の理想的なレイアウトは、視覚的なスタイルの承認を得るためにクライアントに写真を提示するのに十分です。 しかし、コンテンツのデザインはそこで始まりも終わりもありません。

コンテンツレイアウトで何をしたいのかが大まかにわかったら、動的コンテンツで作業していることを忘れないでください。 コンテンツごとに確認する必要がある2つのケースがあります。

• それが多すぎる場合はどうなりますか？
• 少なすぎる（または完全に欠落している）場合はどうなりますか？

タイトルが途方もなく短いか、異常に長い場合はどうなるかを確認してください。 重要な要素が欠落している場合、コンテンツブロックはどのように見えるべきですか？ 写真がない場合はどうなりますか？

ページセクションのコンテンツがない場合は、セクション全体（タイトル、コンテナなど）を削除しますか、それともセクションを保持して、「まだ記事がありません。後でもう一度確認してください」という行に沿って何かを表示しますか？ さらに良い：「このコンテンツが到着したときに通知を受け取りますか？ ニュースレターに登録してください！」

決定を下してください！ 次に、それらを設計します。

外部ソースまたは動的ソースからロードされたフィードまたはコンテンツを設計している場合は、すべてのエラーと通知を含めることを忘れないでください。 実際、ページ通知メタコンテンツをデザインして、グローバルにどのように見えるかを示し、問題が発生した場合にユーザーに通知するために、これらのデザイン規則に従います。

固定幅のボタンや固定高さのテキストブロックは避けてください。 そして、私が前にそう言ったことがなければ、それが常に1行のテキストになると思うなら、あなたは間違っています！ それでは、マルチラインにするための最良の方法を確認してください。

同じコンテンツが同じ構造であることを確認してください。

同じタイトルが複数の場所に表示されている場合は、ある場合と別の場所で1つの単語を太字にしないでください。

実際、タイトル内の構造をフォーマットすることは絶対に避けてください。 同様に、ある場所でテキストを手動で分割するのではなく、別の場所で別の方法でテキストを分割します。 実際、手動でテキストを壊さないでください！

これらのことでデザインが改善される可能性がありますが、コンテンツはCMSを介して入力される可能性が高く、入力する人は公開されるまでどのように見えるかわからない場合や、手動で壊すツールさえない場合があることを覚えておいてください。テキストをフォーマットします。

最終的なコンテンツと同じ制限（固定幅のテキストコンテナと自動ワードラップ）を使用してデザインします。 そのように醜く見える場合、デザインは良くありません。

応答性のための設計

これは最近かなり進んでいます。 少なくとも、モバイルが実際に設計されている場合。 ますます、ブートストラップにそれを理解させ、バンドエイドを亀裂に叩きつけます。

とにかく、知っておく必要のある簡単な原則がいくつかあります。

まず、モバイルとデスクトップのバリエーションは別々のページではありません。 私はあなたがこれを知っていることを知っています。 それらは単に同じページのリフローです。

簡単に言えば、左揃えのテキストを操作するのと同じです。 小さな容器に入れたからといって、単語や文字の順序が変わることはありません。

また、コンテンツグループはすべてのレイアウトで共有する必要があります。 列を追加するときは、列の区切りが一貫していることを確認してください。

また、規則は、ページのバージョンが異なる場合でも同じ構造に従う必要があります。 つまり、2つの要素がデスクトップで同一に見える場合、モバイルでも同一である必要があります。

ああ、視差が必要な場合は、動き回るのに十分な大きさの画像を提供してください。 合わせたり、クライアントに表示しているファイルに正しく表示されるように画像をトリミングしたりすると、移動する必要がなくなります。

例外の設計

もちろん、例外は常に可能です。 さらに、それらは製品が魅力的で効果的に見えるために必要です。 ただし、最初のパスのボックスごとにそれらを追加しないでください。

同じ設計の問題を何度も解決していることに気付いた場合、特にインスタンスごとに異なる解決策を探している場合は、これは機能しません。

上記のすべてを実行すると、効率的で安定した、一貫性のある（多少鈍い場合でも）設計が得られるはずです。 今こそ、物事を盛り上げる時です。 ページ全体を見て、クライアントに話しかけてマネーショットを特定します。これは、彼らに最大の利益をもたらすアイテムです。

私たちは何年にもわたって協力してきましたが、クライアントは常に最終結果に満足しています。

もちろん、これらのポイントのいくつかを見逃した場合は飛び込みます。複雑なデザインを使用することが正当化される場合は、必要に応じてJavaScriptでレンダリングロジックを記述します。

必要に応じて、クライアントに介入して余分な作業を正当化します。 何年もの間、受け取ったデザインに加えてフォームと双方向性をデザインしてきたので、これは問題にはなりません。

これを読んだことで、次回一緒に作業するときにこれらのヒントのいくつかを覚えておいていただければ幸いです。 あなたが何をすべきかわからないとき、彼らがあなたの仕事を知らせて、ガイダンスを提供することを願っています。 私たちの関係は私にとって重要であり、私はあなたを傷つけるためではなく、私たちの関係をより良くするためにこれを書いたのではないことを理解していただきたいと思います。

愛を込めて、

フロントエンド開発者