「ヘルシンキ・デザインシステム（Helsinki Design System）, HDS」は、ヘルシンキ市のデザイン言語をまとめた情報システムです。都市空間の魅力と機能性の向上、およびヘルシンキのブランドやアイデンティティの形成において、ヘルシンキはデザインを積極的に活用しており、HDSもその中心的なツールとなっています。本記事ではHDSに焦点を当て、その機能や活用方法について詳しく解説します。
デザインシステム（Design System）とは
デザインシステム（Design System）は、統一された「デザインおよび開発のガイドライン」、「コンポーネントライブラリ」、「スタイルガイド」、および「パターンライブラリ」の集合体です。これは、企業や組織が製品やサービスの一貫性を維持し、効率的なデザインおよび開発プロセスを確立するために使用されます。
デザインおよび開発のガイドライン
一貫性を保つためのデザインの指針や開発を行う上で理解しておく基本的な事項をとりまとめたガイドライン。これにより、異なる部門やプロジェクトで一貫性を維持することが容易になります。デザインシステムの導入により、企業は製品やサービスを効率的に開発し、一貫性を維持しながらユーザーエクスペリエンス（UX）を向上させることができます。
コンポーネントライブラリ
再利用可能なデザイン要素やコンポーネントのセット。これにはボタン、フォーム、アイコンなどが含まれます。これらのコンポーネントは、同じデザイン言語に基づいているため、作り手に関わらず統一感を出すことができます。
スタイルガイド
色、フォント、スペーシングなどのスタイルに関する指針。これにより、デザインや開発者は一貫性のある外観および触ったときの感覚や印象（Look＆Feel）を簡単に設計することができます。
パターンライブラリ
特定の課題やユーザビリティの問題に対処するためのデザインおよび開発のプリセットパターンです。これにより、特定の課題に対処するための最適解（ベストプラクティス）がデザイナーおよび開発者に共有されます。
詳細はこちらを参照ください。
ヘルシンキ・デザインシステム（Helsinki Design System, HDS）とは？
「Helsinki Design System, HDS」はヘルシンキ市のデザイン言語に関するナレッジを集約した情報システムです。公共サービスやデジタルプロダクトの統一性を確保し、効率的な開発を促進するために使用されています。このドキュメンテーションサイトでは、デザインシステムの各機能が何に使われるかがわかりやすく示されています。またデザイナーか開発者かによって異なるスタートガイドを用意し、ヘルシンキデザインシステムを簡単に始めるための工夫が施されています。
Helsinki Design Systemのサイトはこちら
なぜヘルシンキ市はデザインシステムを作ったのか？
以前のヘルシンキは、行政としてのブランディングやメッセージ発信が不十分で、ビジュアルアイデンティティが統一されておらず、行政機関、プロジェクト、運営事業、イベントが独自のビジュアルアイデンティティを持っていました。その結果、住民はヘルシンキ市が提供する具体的なサービスや機能について理解することが難しくなっていました。
それ以降、ヘルシンキ市は都市空間の魅力と機能性の向上、およびヘルシンキ市のブランドやアイデンティティの形成のために、積極的にデザインを活用しています。
ヘルシンキ市は2012年にWorld Design Capitalに選出されるなど、都市のアイデンティティやブランド形成にデザインが大きく寄与してきました。ヘルシンキ市はデザインを通じて自身の独自性を打ち出し、他の都市との差別化を図ったのです。Design Capital Helsinkiの選定により、ヘルシンキ市は国際的な注目を集め、デザインにおいてリーダーシップを発揮する都市としての地位を確立しました。
またヘルシンキ市は、都市空間や建築物が魅力的で機能的なものになるようデザインされ、市民や観光客が快適に過ごせる環境が創り出されています。
デザインを活かした都市のブランド形成は、魅力的で活気ある都市環境を生み出し、投資や観光を引き寄せ、地域経済を活性化させる要因となります。言い換えれば、注目を浴びれば経済的に潤うのです。
このような背景から、ヘルシンキ市は更なるブランド力向上を目指し、デザインシステムを構築し、一貫したブランドメッセージを世界に発信しています。これは、サステナブルで人々のウェルビーイングを高め、洗練されたイメージを打ち出す試みです。
現在のヘルシンキ市のブランドと視覚的なアイデンティティについて
いまのヘルシンキ市のブランドコンセプトは、ヘルシンキ市がサステナブルで、人々のウェルビーイングを高め、洗練されたイメージの強化です。視覚的なアイデンティティ（ビジュアルアイデンティティ）は、ヘルシンキ市のブランド戦略を可視化します。明確で統一された外観により、一貫したブランドメッセージを発信することでヘルシンキ市への観光や投資を加速させます。
ヘルシンキ市のブランディングの目標は、市民や観光客がヘルシンキ市の共通イメージを共有し、それに基づいてユニークで魅力的な都市を築くことです。この共通イメージは、正しい選択を促し、ヘルシンキ市を良い方向に発展させる手助けとなります。
ブランドとマーケティングの方針として、ヘルシンキ市はウェルビーイングと自主性を大切にしています。これらの価値観が都市を魅力的にし、多くの人を引き寄せます。私たちはヘルシンキ市独自のブランドを構築し、都市コミュニティの様々な関係者と協力してマーケティングを行い、さまざまなユーザーグループをターゲットにしています。
ビジュアルアイデンティティは、ヘルシンキ市における知覚可能な要素を構築します。これはブランドを視覚的に表現するものであり、ヘルシンキ市の外部および内部向けのコミュニケーションで使用されます。ビジュアルアイデンティティはヘルシンキ市が発信するメッセージを強化し、付加価値を生み出すために重要な役割を果たします
ヘルシンキ市のビジュアルコミュニケーションについて
ヘルシンキ市はビジュアルコミュニケーションに重点を置いています。デザイナーやエンジニアは、アイコン、写真、動画、イラストを活用して、魅力的で印象的なビジュアルコミュニケーションを制作することが求められます。ビジュアルコミュニケーションの一貫性を保つことで、ヘルシンキ市のブランディングを引き立てます。一貫性のあるビジュアルにより、言語の制約を超えて「ヘルシンキらしさ」を伝える効果が期待されます。本記事では、ビジュアルコミュニケーションのレファレンスガイドからHDSでも使用されるアイコンに焦点を当て、詳細を説明します。
アイコン
ヘルシンキ市のビジュアルアイデンティティには、何百もの既製のアイコンが含まれています。これらのアイコンは、単純化された視覚的な形式を用いてメッセージを効果的に伝えます。様々なサイズで適切に機能し、しばしば説明テキストなしでも理解されるように設計されています。これらのアイコンは、ヘルシンキ市のデザイン言語に基づき、一貫したビジュアルスタイルで統一されています。
アイコンの活用事例
ユーザ・インターフェースで用いられるアイコンはコンテンツに沿ったものを選定することで、ユーザ・エクスペリエンスを向上させます。
ヘルシンキサービスセンターでは、食品ラインの内容を説明するアイコンを使用してテキストをサポートしています。
こちらは筆者もよく通ったPasila図書館に掲げられたの垂れ幕です。図書館でどんなことができるのかをアイコンを使って可視化しています。
HDSを活用した素材ダウンロード
素材のダウンロードはこちらから可能です。
HDSの使い始めるにはどうするのか？
ヘルシンキ・デザイン・システム（HDS）は、チームの作業とコミュニケーションをより効率的に行うのに役立つ、デザイナーと開発者の共通言語として役立ちます。
HDSは、製品開発プロセスを計画に進めさせ、すべてのデジタルサービスを通じてヘルシンキ市のブランドの一貫性を保つのに役立つ、実用的なコード、設計に必要なライブラリ、ガイドラインを提供します。
デザイナー向けHDSは、デザイナーがヘルシンキ市のブランドガイドラインに合致した美しく、使いやすく、アクセスしやすいユーザーエクスペリエンス（UX）を作成するために必要なコンポーネントやデザインキットを提供しています。設計ファイルはライブラリに含まれており、ダウンロード可能です。
開発者向けHDSは、デジタルサービスを効率的に構築するためのモジュール式のアクセス可能なコンポーネントライブラリを提供しています。これにより、柔軟かつ拡張可能なデジタルサービスを時勢に合わせて開発できます。
どちらもHDSは、視覚言語の一貫性を保つためにアイコンやロゴなどの視覚アセットを提供しています。さらに、コンポーネントや設計トークン、ビジュアルアセットを実際に使用する方法に関する詳細情報をまとめたドキュメントサイトも提供されています。これにより、一貫性のあるデザインと効果的な開発が可能です。
デザイナーとしてHDSを使う
HDSのデザインキットには、ヘルシンキ市ブランドに準拠した美しくアクセスしやすいユーザ・エクスペリエンス・デザインを開始するために必要なすべてのリソースが含まれています。
開発したデザインのファイルをHDSのライブラリに接続すると、HDSが更新されるたびにコンポーネントを同期させることができます。
設計原則
設計を決定するときは、次の基本原則を常に念頭に置いてください。
モジュール式で柔軟である
すべてのコンポーネントは、再利用可能でカスタマイズ可能な構成要素として機能するように設計されており、人々がよりスマートに、より良く、より速く作業できるようにします。
一貫性を担保する
すべてのコンポーネントはシームレスに組み合わされるように設計されており、一貫性のあるユーザ・エクスペリエンスを保証します。
アクセシビリティを優先させる
アクセシビリティは、最初から最後までプロセスの一部です。能力や状況に関係なく、すべてのプロセスにおいて優先させる必要があります。
はじめる
- ヘルシンキ市ビジュアル アイデンティティ ガイドラインを探索して、ブランドのデザイン原則を学びましょう。
- 利用可能なものと、それらを設計に組み込む方法については、コンポーネントのドキュメントを参照してください。
- デザイン資産は、デザイン キットを直接ダウンロードするか、ヘルシンキ市のホームページから入手できます。 HDS ライブラリを使用するには、Sketchをインストールする必要があります。ライブラリのダウンロードとセットアップの詳細については、HDSホームページを参照してください。改善のアイデアや、Design System への追加に役立つコンポーネントがある場合は、貢献ページで詳細をご覧ください。
開発者としてHDSを使う
HDSは、アクセシブルな Web サイトを構築するための既製のコンポーネントのコレクションを提供します。ヘルシンキ市で承認されている導入手法はReact、WordPress、Drupalです。現在、HDS は HTML と React での実装のみを提供しています。プロジェクトで WordPress または Drupal を使用している場合は、こちらのウェブサイトを参照してください。
はじめる
- GitHub の Helsinki Design System をご覧ください。まずリポジトリの READ MEを読んでから、hds-reactを確認することをお勧めします。
- コンポーネントのドキュメントとHDS ストーリーブックを参照して確認してください。
- 貢献したい場合は、貢献ページで詳細をご覧ください。
- ヘルシンキ市向けのオープンソース コード開発の実践的な詳細については、Develop with Helsinki サイトをご覧ください。
HDSは他のデザインシステムと同様に効率的なデザインおよび開発プロセスを確立するために使用されます。そのための開発コードおよびDOとDon’tを明確に示すことでわかりやすくしています。
Abstractを介したHDSの活用
Abstractはデザインコラボレーションプラットフォームです。これにより、Sketchファイルを保存でき、そのバージョン管理として機能します。Abstractを使用すると、元のファイルを失うことなくSketchファイルに変更を加えることができます。必要に応じていつでも元のデザインに戻すことができます。
Abstractを使用すると、他のヘルシンキのデザイナーと共同作業したり、開発者とデザインを共有したりすることもできます。インスピレーションや例を得るために、他のヘルシンキ市のデザイン プロジェクトを簡単に参照することもできます。
ヘルシンキ市のすべてのAbstractプロジェクトはヘルシンキ市が管理するアーカイブ群の傘下にあります。これらのプロジェクトにアクセスするには、招待が必要です。詳細はこちらをご参照ください。
HDSでヘルシンキ市のブランド力は変わったのか？
The Global Liveability Index 2023によると2023 年の最も住みやすい都市トップ 50の中でヘルシンキ市は12位となっています。ちなみに東京は15位です。
また、ヘルシンキ市はConde Nast Traveller’s 2023 Readers’ Choice Award（2023年読者が選ぶヨーロッパで最もフレンドリーな都市）で第4位にランクインしました。同誌の旅行調査の投票者総数は50万人を超える中で、ストックホルム、オスロ、コペンハーゲンを抑え、北欧で唯一選出されています。ヘルシンキ市が選出された理由として、アートやデザインのシーンで他の北欧諸国の首都に追いつきつつあり、新しいレストランが次々とオープンしている点が挙げられました。
このような点からヘルシンキ市がデザインシステムを導入することで、住みやすく、デザインやアートを楽しむ観光にもフレンドリーな都市の変貌していることがわかります。
終わりに
デザインをデザインシステムは透明性を高めてフィードバックを獲得し、改善を繰り返すことで企業価値を高めることに貢献します。日本においてもデジタル庁や企業がデザインシステムを公表しており、今後ますます増えていくと思います。しかし、新興のデザインシステムは大雑把で細かな点が抜け落ちていることもしばしばあります。ヘルシンキ市のデザインシステムを例に皆さんの企業ブランディングをデザインシステムを活用して構築してみてください。creativeog[クリオグ]では、フィンランドに関する記事を多数執筆しています。他の記事もぜひご覧ください。