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

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

目次

• 組版
• 間隔
• 色

組版

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

複製を使用して、一貫性と保守性を?qū)g現(xiàn)します

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

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

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

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

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

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

フォント選択の手順

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

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

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

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

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

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

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

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

間隔

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

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

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

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

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

ブランクは、強力な動きを作成するための便利なツールですが、使いすぎたり少なすぎたりします。ユーザーの目を?qū)Гⅴ偿螗匹螗膜蚍指瞍工毪郡幛摔饯欷蚴褂盲工敕椒à蚩激à皮坤丹?。適切に使用すると、ユーザーは空白自體に気付かないが、提示しているものにもっと集中できるようにすることができます。たとえば、ブランクを使用して（色付きのボックスではなく）コンテンツを分離することができます。その結(jié)果、レイアウトが亂雑になります。

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

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

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

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

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

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

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

色選択の指示

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

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

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

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

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

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

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

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

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

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

 <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>

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

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

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

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

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

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

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