開発者向けのデザイン原則：より良いWebデザインのためのプロセスとCSSのヒント

技術的には、誰もが料理できることは真実です。しかし、おいしい料理を調理する方法を本当に知ることと、運を試すためにいくつかの材料を鍋に投げることには違いがあります。同じことがWeb開発にも当てはまります。 「材料」 - background-color 、 .heading-1理解することができますが、これらの材料を美しく使いやすいWebサイトに変換する方法を誰もが知っているわけではありません。

HTMLとCSSを使用するたびに、デザインしています。他の人が理解できるようにコンテンツフォームと構造をギビングします。人々は何百年もの間設計しており、今日のデジタルインターフェイスにも適用されるプロセスでいくつかの原則を開発してきました。これらの原則は、テキストの表示方法（タイプセット）、コンテンツの配置方法（間隔）、およびパーソナライズされた追加（色）の3つの重要な領域に反映されています。開発者の観点からこれらのWebデザインの「材料」を使用する方法を調べ、CSSプロパティとガイドを活用して、Webデザインの推測成分を排除します。

目次

• 組版
• 間隔
• 色

組版

読みやすいWebサイトは偶然ではありません。実際、Taimur Abdaalはこのトピックに関する記事を書きました。これには、タイポグラフィを扱っている開発者からの多くのアドバイスが含まれています。私たちは、より楽しくて読みやすい繰り返しと階層でテキストを表示するのに役立つ2つの基本的な設計原則に焦点を当てます。

複製を使用して、一貫性と保守性を実現します

ソフトウェアの再利用性の重要性があるため、ネットワークでは繰り返しが非常に自然に表示されます。たとえば、CSSクラスを使用すると、テキスト用の特定のスタイルを定義し、Webサイト全体で再利用できます。これにより、同様のコンテンツの重複した一貫したテキストスタイルが生じ、ユーザーがWebサイトを閲覧するのに役立ちます。

たとえば、新しい段落のスタイルに取り組んでいる場合は、まず同様のスタイルの既存のコンテンツがあるかどうかを検討し、同じCSSクラスを使用してみてください。そうでない場合は、ウェブサイトの他の場所で再利用できる共通名で新しいクラスを作成できます。 .footer\_\_paragraph--emphasize 、または.hero\_\_site-titleの代わりに.heading-1を使用する代わりに.paragraph--emphasizeを使用することを検討してください。最初のいくつかの例はあなたのウェブサイトで使用できますが、後者は特定のコンポーネントに限定されています。 text-などのプレフィックスを追加して、クラスがテキストスタイルに特別に使用されていることを示すこともできます。このアプローチは、CSSファイルのサイズと複雑さを削減し、将来的にはグローバルスタイルの更新を容易にします。

デザインでは、スタイルを試すには無数の方法があります。デザイナーは、フォントスタイルに夢中になり、わずかに異なる類似のスタイルを作成することがあります。ただし、コードでは、テキストスタイルを最小限に制限することは非常に価値があります。開発者は、デザイナーに同様のスタイルを組み合わせてコードの量を減らし、再利用性と一貫性を向上させるよう促す必要があります。

階層は、コンテンツの明確な視覚順序を提供します

階層は、存在しない場合にのみ本当に気付くものです。版画では、階層とは、さまざまなテキスト間の視覚的な違いを指します。これは、タイトル、段落、リンク、その他のテキストスタイルの違いです。この違いは、各タイプのテキストコンテンツに対して、さまざまなフォント、色、サイズ、ケース、およびその他のプロパティを選択することで達成されます。優れた階層により、複雑な情報が理解しやすくなり、ユーザーがコンテンツを閲覧するように導きます。

HTML自体はいくつかの階層を提供します（たとえば、タイトルのフォントサイズはからです<h1></h1>到着<h6></h6>徐々に減少します）が、CSSはより大きな創造性への扉を開きます。による<h></h>タグはフォントサイズが大きくなり、タイトルレベルの間に大きな寸法の違いをすばやく作成でき、より多くの階層を形成できます。より多くの変更を作成するために、色、 text-align 、 text-transformプロパティを変更することもできます。

フォント選択の手順

=========================================================================================== =========================================================================================== =========================================================================================== ===========================================================================================

===================================================================================================== ====================================================================================================== ===================================================================================================== ====================================================================================================== ===================================================================================================== ====================================================================================================== ===================================================================================================== ======================================================================================================

タイポグラフィに関しては、可能な限り読みやすいことを確認する必要があります。最大の読みやすさの全体的な要素は、選択したフォントです。これは大きなトピックです。多くの要因がフォントの「読みやすさ」を決定します。一部のフォントは、タイトルまたは短いテキスト用に特別に設計されています。これらは「ディスプレイ」フォントと呼ばれ、テキスト用に設計されたフォントよりも個人的なものです。ユニークな装飾や癖により、小さなサイズのフォントと大きな段落の一部として表示されると、読みにくくなります。経験則として、より直感的なフォントをテキストに使用し、タイトルにフォントのみを表示する必要があります。

供給不足で読み取り可能なフォントが必要な場合は、Googleフォントを試してください。プレビューフィールドにテキストを追加し、サイトに表示されるおおよそのサイズにサイズを変更します。その後、結果をSerifまたはSANS Serifフォントに絞り込み、読みやすいフォントのフォントリストをスキャンできます。 Roboto、Noto Sans、Merriweather、PT Serifはすべて非常に読みやすいオプションです。

読みやすさを改善するためのCSSプロパティ

• メイン段落のフォントサイズは、選択したフォントに応じて、16px〜18px（1emと1.25em）の間である必要があります。

• テキストの混雑を軽減し、読みやすくするために、ラインの高さ（2行のテキスト間の垂直スペース）を手動で設定します。タイトルの場合、 line-height: 1.25 （つまり、フォントサイズの1.25倍）、段落は少なくとも1.5（ただし1.9以下）で、必要に応じて調整します。テキストラインが長いほど、ラインが大きくなるはずです。テキストの柔軟性を維持するには、列の高さにユニットを追加しないでください。ユニットがないと、設定した線の高さはフォントサイズに比例します。たとえば、 line-height: 1.5およびfont-size: 18pxラインの高さ27ピクセルになります。フォントサイズをfont-size: 16pxに変更すると、計算されたラインの高さが自動的に24ピクセルに変わります。

• テキストラインに含まれる文字の数に注意してください。ゴールは45〜75文字の長さ（句読点やスペースを含む）です。そうすることで、テキストラインを追跡するために目と頭の動きを制限することにより、ユーザーの読み取り疲労が軽減されます。ネットワークの変動により、ラインの長さを制御することは不可能ですが、 max-width値とブレークポイントを使用して、テキストラインが長くなりすぎないようにすることができます。一般的に言えば、テキストラインが短いほど、スキャン速度が速くなります。また、1行あたりの文字の数を計算することについてあまり心配しないでください。数回終わった後、あなたは正しいように見えるものについて感じるでしょう。

間隔

レイアウトを表示した後、一歩下がってコンテンツのレイアウトまたは間隔を確認できます。動きと近接性は、間隔に関連する2つの設計原則です。

動きとは、コンテンツプロセスに関するものです

運動とは、目がページを通過する方法やページの流れです。ムーブメントを使用して、ユーザーの視力を導き、ストーリーを語り、メインアクションアイテムを指している、またはスクロールを奨励することができます。これは、各コンポーネント内にコンテンツを構築し、これらのコンポーネントを配置してページレイアウトを形成することによって行われます。コンテンツを通過する方法に注意を払うことで、ユーザーがページをスキャンするときにどこを見るべきかを知るのを助けることができます。

本（多くの場合、非常に線形構造がある）とは異なり、ウェブサイトはレイアウトでより創造的になります - 無数の方法で。コンテンツをレイアウトする方法に目的を持っていることを確認し、できるだけ簡単にコンテンツをユーザーにガイドする方法でレイアウトすることが重要です。

上記の3つの例を考慮してください。どれが最も理解しやすいですか？左側の配置は、画像の位置のために画面から左に視力を動かし、ボタンを見つけるのが難しくなります。中間オプションでは、タイトルに比べて画像が大きすぎるため、タイトルを無視するのは簡単です。右側では、タイトルが最初にあなたの注意を引き付け、画像はメインアクションアイテムであるボタンを指すように構築されます。

ブランクは、強力な動きを作成するための便利なツールですが、使いすぎたり少なすぎたりします。ユーザーの目を導き、コンテンツを分割するためにそれを使用する方法を考えてください。適切に使用すると、ユーザーは空白自体に気付かないが、提示しているものにもっと集中できるようにすることができます。たとえば、ブランクを使用して（色付きのボックスではなく）コンテンツを分離することができます。その結果、レイアウトが乱雑になります。

関係を確立するための近接性

オブジェクトが近づくと、それらは関連性があると認識されます。要素の周りの間隔を制御することにより、それらの間の関係を示唆することができます。繰り返しによる一貫性を構築し、乱数の使用を避けるための間隔システムを作成することが役立つ場合があります。このシステムは、デフォルトのブラウザフォントサイズ（1REMまたは16PX）に基づいており、ほとんどのシナリオをカバーするさまざまな値を使用します。

• 0.25rem（4px）
• 0.5rem（8px）
• 1rem（16px）
• 2REM（32px）
• 4rem（64px）

SASSまたはCSS変数を使用して、これらの値をプロジェクト全体で一貫性に保つことができます。システムはこのように見えるかもしれませんが、物事を命名するのは難しいので、あなたが快適に感じるものは何でも使用します。

• $space-sm
• $space-med
• $space-lg
• $space-xl
• $space-xxl

色は個性を伝え、注目を集めます

色はウェブサイトの個性に大きく影響します。適切に使用すると、ページが活力と感情に満ちたものになります。不適切に使用すると、コンテンツから気を散らすか、さらに悪いことに、アクセスできないようにします。色は、ほとんどの設計原則と密接に関連しています。ユーザーの視線を導くことでモーションを作成するために使用でき、最も重要なアクションアイテムに注意を引くことで強調を作成するために使用できます。

色選択の指示

色があれば、どこから始めればいいのかを知ることは困難です。支援するために、4段階のプロセスを使用して色の選択をガイドし、ウェブサイトのパレットを構築できます。

ステップ1：あなたの感情を理解してください

色を選択する前に、あなたのウェブサイトとブランドのトーンや態度を理解する必要があります。コンテンツをチェックして、あなたが伝えようとしているものを決定してください。楽しく、有益で、レトロで、騒々しく、暗いですか？一般に、ウェブサイトのトーンをいくつかの形容詞に要約することができます。たとえば、Appleはミニマルで美しいですが、冒険的で頑丈なものとして北の顔をまとめることができます。

ステップ2：メイン色を見つけます

あなたの感情を覚えて、それを表す色を想像してみてください。色の飽和（色の強度）と明るさ（色の近接の程度）から始めます。あなたの気分が楽観的であるか、ゴージャスである場合、より軽い（より飽和）色が最適かもしれません。あなたの感情が深刻または暗黙的である場合、暗い（飽和しすぎない）色の方が優れています。

次に、色相を選択します。色相とは、ほとんどの人が色と考えていることを指します。色ホイールの回転のどこにあるのでしょうか？色の色合いはそれに最大の意味を与えます。人々は特定のアイデアと色合いを関連付ける傾向があります。たとえば、赤はしばしば力や危険に関連しており、緑はお金や自然に関連しています。同様のサイトやブランドをチェックして、使用する色を理解することは役立つ場合がありますが、リーダーシップに従う必要はありません。試してみることを恐れないでください！

ステップ3：補助色を追加します

2つまたは3つの主要な色が必要な場合がありますが、これは必要ありません。さまざまなブランドの色を考えてください。単一の色を使用するものもあれば、一次色と1つまたは2つの補助色を持っているものもあります。コカ・コーラはユニークな赤い色を使用しています。イケアは主に青色で、黄色です。潮はオレンジ色で、青と黄色があります。あなたのウェブサイトのムードによっては、いくつかの色が必要になる場合があります。 Adobe ColorやCoolorsなどのツールを使用してみてください。どちらもメイン色を追加し、補完的な色やモノクロなどのさまざまな色の関係を試して、何かがうまくいくかどうかをすばやく確認できます。

ステップ4：カラーパレットを展開します

絞り込んでメインの色を見つけたので、プロジェクトに汎用性と制約を提供するパレットで範囲を拡大する時が来ました。ここのトーンと影がトリックです。色合いはメインの色を白と混合することによって作られ、色合いは黒と混合することによって作られます。 SASSカラー関数を使用して、適切に組織化されたシステムをすばやく作成できます。

 <code>$main-color: #9AE799; $main-color-lightest: lighten($main-color, 20%); $main-color-lighter: lighten($main-color, 15%); $main-color-light: lighten($main-color, 10%); $main-color-dark: darken($main-color, 40%); $main-color-darker: darken($main-color, 50%); $main-color-darkest: darken($main-color, 60%);</code>

パレットを完成させるには、白と黒などのいくつかの色も必要です。メイン色の暗い、ほとんど黒い色合いの「リッチブラック」を作成してみてください。スペクトルのもう一方の端で、メイン色で色付けされたいくつかのライトグレーを選択してください。白と黒の着色は、あなたのページにより多くの個性を追加し、一貫したルックアンドフィールを作成するのに役立ちます。

最後になりましたが、インタラクティブ製品を扱っている場合は、成功、警告、エラーステータスのために色を追加する必要があります。通常、緑、黄色、赤はこれらに適していますが、色相を調整してパレットに適している方法を検討してください。たとえば、気分がフレンドリーで、ベースカラーが緑の場合、赤の感情を軽減するために、間違った状態の色の飽和を下げる必要があるかもしれません。

これは、ベースカラー、デフォルトのエラー色、および間違った色と混合するベースカラーの割合を提供することにより、 mixサスカラー機能を使用して行うことができます。 desaturate関数を追加すると、色のトーンを減らすのに役立ちます。

 <code>$success: mix($base-color, desaturate(green, 50%), 50%); $warning: mix($base-color, desaturate(yellow, 30%), 5%); $error: mix($base-color, desaturate(red, 50%), 20%);</code>

ネットワークに関しては、特に注意を払わなければならない色の原則があります：コントラスト。これが次に紹介するものです。

対比

色のコントラスト - 2つの色の飽和、明るさ、色相の違いは、ネットワークが低視覚または色覚異常を持つ人々がアクセスできるようにする重要な設計原則です。テキストとそのウェブサイトの背景の間に十分なコントラストがあることを確認することにより、通常のビジョンを持つすべてのユーザーがアクセスすることを改善します。アクセシビリティを表示するときは、W3CのWebコンテンツアクセシビリティガイド（WCAG）に記載されているColor Contrastガイドに従ってください。 Chrome開発ツールのチェックパネルなど、これらのガイドラインに従うのに役立つ多くのツールがあります。

今、これらの原則を実践する時が来ました！これらのプロセスとCSSのヒントを使用して、設計の推測要素を排除し、より良いソリューションを作成することができます。あなたがよく知っているものから始めて、最終的に、ここで言及されているデザインの原則はあなたにとって第二の性質になります。

より実用的なヒントを探しているなら、Adam WathanとSteve Schogerは彼らのお気に入りのヒントに関するいくつかの記事を書いています。

以上が開発者向けのデザイン原則：より良いWebデザインのためのプロセスとCSSのヒントの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。