Design System の主要な原則の理解

学習の目的

このモジュールを完了すると、次のことができるようになります。

  • Salesforce Lightning Design System とは何か、およびその用途について説明する。
  • Design System が基づく主要な設計原理について説明する。

Salesforce Lightning Design System のご紹介

Salesforce ユーザエクスペリエンスチームは、21 世紀の Enterprise UX を実現すべく懸命に取り組んできました。今回は、Lightning Design System をご紹介いたします。Design System を使用すると、新しい Salesforce Lightning のデザインと一貫性のあるアプリケーションを簡単に構築でき、UI をカスタム CSS としてリバースエンジニアリングする必要がありません。実際、新しい Design System マークアップを使用すれば、CSS をまったく記述しなくても Lightning のデザインのページに仕上がります。興味がわいてきましたか? ワクワクしますか? 私たちもです。続けましょう。

Lightning Design System の Web サイト

Lightning Design System と言うと舌を噛みそうなため、ここでは、「Design System」ということにします。

Web サイトの構築に Twitter Bootstrap や Foundation といった類似の設計システムを使用したことがある方もいるでしょう。この Design System の主要な利点は次のとおりです。

  • Salesforce アプリケーションの構築に適しています。Design System マークアップおよび CSS フレームワークを使用すれば、Salesforce Lightning のデザインを反映した UI が作成されます。アプリケーション構築に重点が置かれています。マーケティングページの構築に重点を置く一部のフレームワークと異なり、Design System ではパディングや余白などのデフォルトが過度に適用されません。Design System では、必要とする正確なレイアウトを簡単に指定でき、さらに新しい Lightning UI との一貫性も保たれます。
  • 継続的に更新されている。Design System の最新バージョンを使用している限り、ページには Salesforce UI の変更が常に適用されます。
  • アクセス許可はコンポーネントの背後にある CSS フレームワークに組み込まれています。
  • CSS の競合を避けるため、CSS は slds- プレフィックスで完全に名前空間化され、slds-scope クラスで範囲が指定されます。

Design System には、アプリケーション構築に役立つ 4 種類のリソースがバンドルされています。

  • CSS フレームワーク — スペーシング、サイズ設定、およびその他の視覚的調整を行うためのページヘッダー、表示ラベル、フォーム要素などの UI コンポーネント、グリッドレイアウトシステム、および単一目的のヘルパークラスを定義します。
  • アイコン — アクション、カスタム、文書型、標準、およびユーティリティの各アイコンの PNG および SVG (個別かつスプライトマップ) バージョンが含まれます。
  • フォント — タイポグラフィは Salesforce 製品の中核を成すものです。Salesforce 製品であることが明確に認識されるようにデザインされた新しい Salesforce Sans フォントを Design System から利用できます。
  • 設計トークン — これらの設計変数を使用して、ブランドに合うようにビジュアルデザインを調整できます。カスタマイズ可能な変数には、色、フォント、スペーシング、サイズ設定があります。

Design System は、最新ブラウザの機能に対応するように構築されており、ブラウザの最小要件があります。Chrome、Safari、Firefox の最新バージョンは完全にテスト済みです。Microsoft Internet Explorer (MSIE) はバージョン 11 のみと Microsoft Edge がサポートされます。MSIE の以前のバージョンでは、アイコンが表示されないなどの問題が発生する場合があります。

基本設計原理

Design System で表わされる Lightning Experience UI は 4 つの基本設計原則を使用して作成されました。アプリケーションを開発するときは、これらに留意してください。

  • 明確性 — あいまいさを取り除きます。ユーザが自信を持って確認、理解、行動することができます。新しい UI では乱雑さが軽減され、ユーザは必要な情報を簡単に見つけることができます。
  • 効率性 — ワークフローを合理化し、最適化します。ニーズをインテリジェントに予測し、人が作業をより効率的に、スマートに、短時間で行うのに役立ちます。たとえば、新しい Lightning UI ボタンでは、行動要請がより顕著になりました。
  • 一貫性 — 同じ問題に同じ解決策を適用することで、親しみやすさを生み、直感性を高めます。たとえば、新しい UI では、1 つのボタンスタイルがすべてのコンテキストに適用されます。
  • 美しさ — 心のこもった洗練されたクラフトマンシップを通じて人の時間と心遣いに敬意を表します。美しい UI を作成することは可能でしょうか? もちろんです!

Design System を使用できる場所

新しい Design System では、幅広い技術スタックで Lightning に準拠した Salesforce アプリケーションを簡単に構築できます。

  • リモートオブジェクトまたは JavaScript Remoting 経由で Salesforce データにアクセスする Visualforce ページ。Design System はまだ <apex> タグとの互換性はありませんが、メモスペースとは互換性があります。
  • Salesforce および Lightning Experience で使用可能な Lightning ページおよびコンポーネント
  • Mobile SDK または別の API から Salesforce にアクセスするモバイルアプリケーション
  • Heroku または類似のプラットフォームから提供されるスタンドアロン Web アプリケーション

モジュールの前提条件

モジュールの残りの部分には、実践的な技術的作業が含まれています。始める前に、次の前提条件を確認してください。

  • Salesforce 開発者アカウントへのアクセス権が必要です。
  • 例のページは、Web 開発 (HTML、CSS、JavaScript) と Salesforce の管理に関する知識があることを前提としています。
  • このモジュールでは、Visualforce ページ内での Design System の使用に重点が置かれているので、この技術についての経験があると有益です。コード例は Visualforce に固有のものですが、軽微なカスタマイズで他のスタックでも再利用できます。

リソース