モバイル
愛を込めてデザイナーへ（フロントエンド開発者からの手紙）
親愛なるデザイナー、
この手紙は何年もの間醸造されてきました。その一部は、長い間、スピーチや書面でさまざまなデザイナーに届けられてきました。
ただし、現在のデザイナーやクライアントに影響を与えることを恐れて、公開することを常に恐れていました。したがって、先に進む前に、これは特定の不満ではなく、18年間の意見の不一致の項目別リストであることを強調したいと思います。
私たちはほぼ20年間協力してきましたが、あなたが送ってくれた各PSDファイルには（多かれ少なかれ）同じ問題がありました。それなら、あなたにあなたの仕事を教えようとする卑劣さを許してください。
グラフィックや美学について教えてくれるとは思いません。タイポグラフィ、読みやすさ、空白の使用については詳しく説明しません。
代わりに、あなたの労働の成果が私にどのように情報を与えるかを説明したいと思います。
デザインをピクセルパーフェクトなWebページとして再現するために必要なことをお知らせします。デザインファイルがドキュメントにどのように使用されるか、作成する画像が使用されるテクノロジーをどのように決定するか、つまりスケーラビリティとパフォーマンスの非常に基本的なレベルに至るまでをお伝えしたいと思います。
また、迅速かつ簡単に実行できることと、プロダクション全体をクロールにドラッグするオーバーヘッドを生成するものを示したいと思います。
そして何よりも、私はあなたにそのことを思い出させたいと思います 画像 あなたが今作成しているものは、相互作用して応答し、何千もの異なる個人と通信し、彼らに教え、可能な限り最も楽な方法で彼らから学ぶ必要がある生き物になります。それと彼らの両方のために。
ドキュメントの設計
まず第一に、私はあなたに思い出させたいと思います PSDファイル あなたが制作しているのは、クライアントが承認するための画像のソースであるだけでなく、 技術文書 そして ソース資料 開発者向け。したがって、レイヤーとグループを保持してください きちんと整理され、名前が付けられています 。
デザインに注釈を付けます。使用した規則を使用して別のファイルを作成するか、別の非表示レイヤーにそれらを書き留めます。
どのフォントを何に使用したか教えてください。使用する色、間隔、コンテキストを教えてください。 私は知る必要がある。
また、特定の機能の設計が行われていない場合に何を推定するかを知る必要があります。
私が言おうとしているのは、可能であれば 簡単なスタイルガイドを作成する あなたがデザインしている製品のために。
どちらの場合も、タイトルなどの標準のテキストブロックを追加するときは、その後ろに長方形を追加して、周囲の間隔を示します。これにより、毎回一貫して配置できるようになります。これが大変な作業である場合は、少なくともドキュメント内のどの例が標準であるかを示してください。
タイトルが目で配置されているため、配置されている単一のインスタンスに視覚的にフィットしていることがどれくらいの頻度でわかるかはわかりませんが、測定すると、それぞれに独自の間隔があることがわかります。
同じことがコンテンツブロックにも当てはまります。さまざまなコンテンツブロックのリストがある場合は、それらを一貫して配置してください。
詳細については、 コンテンツのデザイン セクションですが、タイトルが常に1行であると想定せず、その情報をファイルで使用してください。
フォントサイズが22px、行の高さが92pxのこれらのタイトルに出くわします（明らかにメインページのタイトルからコピーして貼り付けます）。選択した設定は、エクスポートされたファイルを視覚的に変更しなくても関連性があります。
テクノロジーのための設計
これには2つの側面があります。 できる そして 適切なもの 媒体のため。
ウェブサイトの開発ですべてが技術的に可能になる段階に急速に到達していますが（他に何もないとしても、キャンバスを使用してピクセルごとに描画できます）、これらのソリューションの多くは次のとおりです。 ない 生産準備完了。
ギリシャ危機とは
誰かがWebGL3DをCSSブラーとフィルターマスクを組み合わせてデモページに成功した例を見つけたからといって、それをシングルページアプリケーションのフルウィンドウ視差パネルとして使用できるわけではありません。
そして、本当に最先端を歩きたいのであれば、開発者に相談してください 前 承認のためにデザインを提出する。さもなければ、クライアントにそれ以下で解決させるのは難しいでしょう。
ただし、本当にエッジをテストしたい場合、そして楽しみのために試してみたい場合は、私に個人的に連絡してください。私はあなたと同じようにそのようなものを作るのが大好きです。 予算のある制作プロジェクトにそのようなものを入れないでください。
それらのことを超えて–できることの限界をテストすることを超えて、以下に関して敏感で賢明であるようにしてください 何をすべきか 。
あなたはグラフィックアーティストではありません。あなたはそれ以上のものです、あなたはデザイナーです。
特定の外観になるようにデザインするだけでなく、次のようにデザインする必要があります。 実行 ある方法、 コミュニケーション そして 振る舞う ある意味で。
どこでもデザイナーに馴染みのある決まり文句を探すには： 誰も座れないゴージャスな椅子は何がいいのか ？
デザインを作成するには、読み込み速度、実行速度、使いやすさを組み込む必要があります。 設計 代わりに写真。
HTMLとCSSだけで可能な限り達成するようにしてください。HTMLとCSSだけで可能な限り達成するようにしてください。 Photoshopで利用できる見栄えの良い機能の使用は避けてください。ブレンディングは使用しないでください。フェイクボールドやフェイクイタリックは使用しないでください。
要素を画像にする場合を除いて、最も単純な影以外はフィルターを使用しないでください。
ブレンドカラーフィルを使用しているので、色を計算したり選択したりしないでください。オーバーレイブレンディングを使用して透明な画像を偽造しないでください。私は実際に現場で透明な画像が必要です。
次のようなフロントエンドフレームワークを使用している場合 ブートストラップ 、これらの問題の多くはすでに解決されているので、それがどのように行われ、どのように変更できるかを学びます。関係のないものを意地悪に設計するだけではいけません。
デザインがフレームワークの機能と一致していない場合、それを実装するよりも、デザインを実装することにはなりません。代わりに、フレームワークを選択的にオーバーライドすることになります。そのため、デザインを混乱させて最初から実装することはありません。ワークロードは半分ではなく2倍になります。
最後に、サイトで3つを超えるフォント（またはフォントバリアント）を使用しないでください。それぞれが独自の通常および斜体のバリエーションを持つ6つの異なるウェイトが必要な場合は、Web用に設計する必要はありません。
双方向性のための設計
これは巨大なものです。そして、この手紙はもともとこのトピックのためだけに書かれました。ユーザーと機能が相互作用するすべての方法を本当に知り、理解する必要があります。
最も単純なもの、つまりリンクから始めましょう。
リンクには2つの状態だけがありません。
私が受け取るナビゲーションでは、あなたは常にのためのデザインを提供します リンク と アクティブリンク （現在のページ）。
他の場合、あなたは通常提供します ベース そして ホバー 状態。
少しでもユーザーフレンドリーになりたい場合は、 ベース、ホバー そして フォーカス 州（ 訪問した そして アクティブ UXにとっても便利です）。そしてナビゲーションのために、リンクとアクティブなリンクはそれぞれ持っています 上記のすべての州 。
ああ、州間のリンクレイアウトをあえて変更しないでください（さまざまな境界線の幅、パディングなど）。
同様に、ボタンのように見えない場合は、背景がありません。限目。インラインテキスト要素のパディングは混乱し、パディングされていないテキストの背景は決して機能しません。
これはモバイルで使用するため、個別のインタラクティブ要素の間に十分な空白があり、各ヒットボックスが十分に大きいことを確認してください。各軸で最低42pxが標準だと思います。
非表示の長方形、またはヒットボックスを示す非表示のレイヤーを描画します。それらが重複していないこと、およびユーザーの操作が明確であることを確認してください。
フォーム要素はさらに悪いです。
私が見る最も一般的なケースは、ラジオボタンとチェックボックスです。標準のものは醜いです！だから、あなたはあなた自身をデザインし、私にチェックされた状態とチェックされていない状態を与え、そしてあなた自身が終わったと考えます。
ただし、チェックボックスには多次元の状態テーブル全体があり、それぞれをユーザーに視覚的に示す必要があります。
次の状態があります。
- チェック済みまたはチェックなし
- ホバーするかどうか
- 焦点を合わせるかどうか
- 有効または無効
- エラーかどうか
それらのそれぞれは、他のものと組み合わせることができます。
Disabledは、一部の組み合わせ（通常、無効にするとホバーとフォーカスは関係ありません）を防ぎますが、すべてではありません（checked-disabled-errorは、チェックボックスの完全に有効で有益な状態です）。したがって、最終的に16の有効状態と4つの無効状態になり、合計で少なくとも20の異なる状態が得られます。たとえば、あなたが通常私に与える状態は、その設定では、checked-not-not-enabled-notおよびunchecked-not-not-enabled-notです。
他のフォーム要素は、チェックされていない状態ではない場合がありますが、空または空ではない可能性があります（プレースホルダーテキストを表示）。また、エラーの有無がニュートラル警告エラーの成功と同じくらい複雑になるように、より複雑な情報状態を持つこともできます。
次に、その上に、ラベル、入力ヘルプ、およびエラーテキストの明確に定義されたレイアウトとデザインとともに、必須またはオプションのインジケーターが必要です。
また、本当にユーザーフレンドリーにしたい場合は、ユーザーがデータを提供したことがないか、データが既に保存されているか、変更されているがまだ保存されていないことを示す、元の状態を設定する必要があります。
双方向性の設計は困難です。また、ラジオボタンの外観を変更したい場合は、2つの状態で見栄えを良くしないでください。私が言っているのは、双方向性のための設計は難しいということです。また、ラジオボタンの外観を変更したい場合は、2つの状態で見栄えを良くしないでください。
対話性の設計に関する最後のポイントは、対話がどのように見えるかを決定することです。つまり、インタラクティブな要素に使用する規則を決定し、他の要素には使用しないでください。
いいえ、特に重要なコンテンツを強調するために同じソリューションを使用する場合は、メインのブランドカラーを使用してリンクを示すことは許可されていません。
コンテンツのデザイン
で満たされた各要素の理想的なレイアウト lipsum コンテンツは、視覚的なスタイルの承認を得るためにクライアントに写真を提示するのに十分です。しかし、コンテンツのデザインはそこで始まりも終わりもありません。
コンテンツレイアウトで何をしたいのかが大まかにわかったら、動的コンテンツで作業していることを忘れないでください。コンテンツレイアウトで何をしたいのかが大まかにわかったら、動的コンテンツで作業していることを忘れないでください。コンテンツごとに確認する必要がある2つのケースがあります。
- それが多すぎる場合はどうなりますか？
- 少なすぎる（または完全に欠落している）場合はどうなりますか？
タイトルが途方もなく短いか異常に長い場合はどうなるかを確認してください。重要な要素が欠落している場合、コンテンツブロックはどのように見えるべきですか？写真がない場合はどうなりますか？
ページセクションのコンテンツがない場合は、セクション全体（タイトル、コンテナなど）を削除しますか、それともセクションを保持して、「まだ記事がありません。後でもう一度確認してください」という行に沿って何かを表示しますか？さらに良いこと：「このコンテンツが到着したときに通知を受け取りたいですか？ニュースレターに登録してください！」
決定を下してください！ 次に それらをデザインしてください！
外部ソースまたは動的ソースからロードされたフィードまたはコンテンツを設計する場合は、すべてのエラーと通知を含めることを忘れないでください。実際、ページ通知メタコンテンツをデザインして、グローバルにどのように表示されるかを示し、問題が発生した場合にユーザーに通知するように、これらのデザイン規則に従います。
固定幅のボタンや固定高さのテキストブロックは避けてください。そして、私が前にそう言ったことがなければ、 常に1行のテキストになると思うなら、あなたは間違っています！ それでは、マルチラインにするための最良の方法を確認してください。
同じコンテンツが同じ構造であることを確認してください。
同じタイトルが複数の場所に表示されている場合は、ある場合と別の場所で1つの単語を太字にしないでください。
実際、タイトル内の構造のフォーマットは完全に避けてください。同様に、ある場所でテキストを手動で分割するのではなく、別の場所で別の場所で分割します。実際、テキストを手動で分割しないでください。
これらのことでデザインが改善される可能性がありますが、コンテンツはCMSを介して入力される可能性が高く、入力する人は公開されるまでどのように見えるかわからない場合や、手動で壊すツールさえない場合があることを覚えておいてください。テキストをフォーマットします。
最終的なコンテンツと同じ制限（固定幅のテキストコンテナと自動ワードラップ）を使用してデザインします。そのように醜く見えると、デザインが良くありません。
応答性のための設計
これは最近かなり進んでいます。少なくとも、モバイルが実際に設計されている場合。ますます、私たちはブートストラップにそれを理解させ、亀裂にバンドエイドを叩きつけます。
とにかく、知っておくべき簡単な原則がいくつかあります。
まず、モバイルとデスクトップのバリエーションは別々のページではありません。私はあなたがこれを知っていることを知っています。それらは単に同じページのリフローです。
簡単に言えば、左揃えのテキストを操作するのと同じです。小さな容器に入れたからといって、単語や文字の順序が変わることはありません。
また、コンテンツグループはすべてのレイアウトで共有する必要があります。列を追加するときは、列の区切りが一貫していることを確認してください。
また、規則は、ページのバージョンが異なる場合でも同じ構造に従う必要があります。つまり、2つの要素がデスクトップで同一に見える場合、モバイルでも同一である必要があります。
ああ、視差が必要な場合は、動き回るのに十分な大きさの画像を提供してください。収まるか、クライアントに表示しているファイルに正しく表示されるように画像を切り抜くと、移動する必要がなくなります。
例外の設計
もちろん、例外は常に可能です。さらに、それらは製品が魅力的で効果的に見えるために必要です。ただし、最初のパスにボックスごとに追加しないでください。
同じ設計の問題を何度も解決していることに気付いた場合、特にインスタンスごとに異なる解決策を探している場合は、これは機能しません。
上記のすべてを実行すると、効率的で安定した、一貫性のある（多少鈍い場合でも）設計が得られるはずです。今こそ、物事を盛り上げる時です。ページ全体を見て、クライアントに話しかけてマネーショットを特定します。これは、彼らに最大の利益をもたらすアイテムです。
私たちはずっと 一緒に働いている 何年もの間、私たちのクライアントは常に最終結果に満足しています。
もちろん、これらのポイントのいくつかを見逃した場合は飛び込みます。複雑なデザインを使用することが正当化される場合は、必要に応じてJavaScriptでレンダリングロジックを記述します。
必要に応じて、クライアントに介入して追加の作業を正当化します。何年もの間、受け取ったデザインに加えてフォームとインタラクティブ機能をデザインしてきたので、これは問題にはなりません。
これを読んだことで、次回一緒に作業するときにこれらのヒントのいくつかを覚えておいていただければ幸いです。どうしたらよいかわからないときは、彼らがあなたの仕事を知らせ、ガイダンスを提供してくれることを願っています。私たちの関係は私にとって重要であり、私はあなたを傷つけるためではなく、私たちの関係をより良くするためにこれを書いたのではないことを理解していただきたいと思います。
愛を込めて、
フロントエンド開発者
