5分で基本的なUIデザインを学ぶ

HTMLとCSSの基本を理解していて、ブラウザで見栄えの良いユーザーインターフェイスを作成したい場合は、もう探す必要はありません。この記事では、次の7つの基本事項について学習することで、UIデザインスキルを向上させます。

  • 空白
  • アラインメント
  • コントラスト
  • 規模
  • タイポグラフィ
  • 視覚的階層

この記事は、DesignCourseとしても知られる素晴らしいGarySimonによって作成された無料のScrimbaコースに基づいています。このコースでは、自分のペースで受講したり、やり直して学習を実際に組み込むことができる一連のインタラクティブなチュートリアルを提供しています。

コースの立ち上げ:UIデザインの基礎を学びますか?

すべてのフロントエンド開発者は、基本的なUIデザインスキルを持っている必要があると考えています。だからこれで?もちろん、@ designcoursecomはあなたにそれを教えます。HTML&CSSだけで、デザインツールを使用せずにすべて。

RTは高く評価されていますか?// t.co / mT9fDjShUd#100daysofcode

—スクリンバ(@scrimba)2020年1月28日

したがって、この記事でもっと欲しくなる場合は、必ずコースをチェックしてください。さあ、飛び込みましょう!

ホワイトスペース

最初に検討する基本的な設計は、ネガティブスペースとも呼ばれるホワイトスペースです。名前が示すように、それはページ上の要素間のスペースです。

空白のないページに押しつぶされた要素は、見た目が魅力的でないだけでなく、ナビゲートするのが難しく、読みにくいものです。

空白は、パディング、マージン、行の高さなど、さまざまな方法で調整できます。下の前後の画像をチェックして、効果的な空白がどのような違いを生むかを確認してください。

空白調整の前後

配置

次はアライメントです。これは、たとえば列がページの下に配置されるようにすることで、すべての要素が他の要素に対して正しく配置されるようにするプロセスです。

次の画像からわかるように、多数の異なる列に要素がある最初のページ(弱い配置)は、強い配置を持つ2番目のページよりもはるかに魅力的で読みにくくなっています。

配置が弱いページ強い位置合わせのページ

コントラスト

ページやアプリケーションを作成するときは、コントラストも考慮することが重要です。コントラストは、ページ上で隣り合って表示される色の違いです。

この例からわかるように、コントラストの低いページは読みにくく、要素が目立ちません。

コントラストの悪いページ

以下のようなコントラストの良いページは、見た目がはるかに良くなるだけでなく、よりユーザーフレンドリーでアクセスしやすくなります。

良いコントラストの例

コントラストを適切に保つために、WCAG(Web Content Accessibility Guidelines)は、最小(AA)コントラスト比を4.5:1以上、大きなテキストの場合は3:1、または拡張(AAA)コントラスト比を7にすることを提案しています。大きなテキストの場合は:1または4.5:1。これを確認するためのさまざまなプラグインまたはWebサイトがあります。

規模

スケールもUIの重要な部分であるため、すべての要素のサイズを慎重に検討してください。たとえば、要素はページに対して十分な大きさである必要があります(したがって大きなギャップはありません)。また、見出しなどの重要度の高い要素は、重要度の低い要素よりも大きくする必要があります。

以下の前後の画像を見て、ページが正しく拡大縮小されたときにどれだけ見栄えが良くなるかに注目してください。

スケールの悪いページ良いスケールの例

タイポグラフィ

タイポグラフィもUIに大きな影響を与えます。これを調整するには、フォントの選択、フォントサイズ、配置、文字間隔、行の高さ、フォントスタイル、色、コントラストなど、さまざまな方法があります。

原則として、1ページに2つ以下のフォントファミリを使用し、重要度の順序を確立するためにさまざまな側面が連携するようにします。これは視覚的階層と呼ばれ、以下で詳しく説明します。

これらのヒントに従うと、ページは次のように表示されます。

良いタイポグラフィの例

そして、このように混乱して読めないことはありません:

タイポグラフィが不十分なページ

ユーザーエクスペリエンスを最初に形作るUIデザインの基本はです。色の心理学とは、各色が特定の人々に意味を引き出すことを意味します。たとえば、赤は危険を意味し、白は清潔さと静けさを呼び起こすことができます。

ただし、色には注意してください。意味は文化によって異なるため、色を選択するときは常に調査を行い、対象読者を考慮してください。

また、色が多すぎるとUIが悪くなる可能性があり、使用する色は互いに補完し合う必要があることを覚えておくことも重要です。経験則として、同じ色相の明るいバリエーションまたは暗いバリエーションを並べて使用することは間違いありません。下の2番目の画像が最初の画像と比べてどれだけ見やすいかを見てください!

色の選択が不十分なページ色の使い勝手

視覚的階層

DesignFundamentalsリストの最後の項目はVisualHierarchyです。UIの一部の要素は、他の要素よりも重要です。視覚的な階層により、この重要性を確立できます。

これは、下の2番目の画像に示すように、位置、コントラスト、色、スケール、スタイル、または上記の組み合わせで実行できます。これは、最初の画像よりもはるかに優れた視覚的階層を持っています。

視覚的な階層が不十分なページタイポグラフィと色を使用して視覚的な階層を確立する

要約

この記事では、空白、色、コントラスト、スケール、配置、タイポグラフィ、視覚的階層という7つの主要なデザインの基本について説明しました。これらはすべてUIにとって等しく重要です。これらの要素のいずれかが不足していると、ユーザーエクスペリエンス全体が損なわれます。したがって、UIデザインを作成するときは、それらすべてを考慮してください。

UIデザインの基礎コース

これらのテーマをさらに掘り下げたい場合は、Scrimbaの無料のUIデザインの基礎コースをチェックしてください。その中で、あなたははるかに詳細に基本について学びます。

頑張って、そして幸せなコーディング:)