デザインと開発の連携を効率化！Adobe XD用Semantic UIキット開発の舞台裏 | アドビUX道場 #UXDojo
エクスペリエンスデザインの基礎知識
デザイン作業を進める途中でデザイン要素の一貫性に問題が起きて行き詰るのは、決して珍しい状況ではありません。その上、UIの原則についてデザイナーと開発者の意見が一致していない場合は、必要以上に時間のかかるプロセスになるでしょう。結果として、公開の成功も左右するかもしれません。
インタラクションデザイナーのオーレ・フレデリックは、こうしたデザインの問題の実用的な解決方法についてしばしば考えています。彼の最近のアイデアは、Semantic UI Kitとして形になりました。法律関連のサービスを提供するスタートアップ企業Justifyのデザインディレクター兼共同設立者としての日々の業務の中で見つけた、チームや組織としての課題に対応するものです。
「私の信念は、デザイナーと開発者が一つのチームとして働き、同じ言葉を話し、同じUIの原則を共有することが、成功の可能性を高めるというものです」とオーレは語りました。
ここでUIキットの導入方法を見てみましょう。その後に、キットを制作した彼の動機や、Semanticフレームワークとの関係を紹介します。
Semantic UIキットの設定方法
オーレのUIキットを使えばすぐにプロトタイプをつくり始められます。そのための手順は以下の通りです。
1. 最新バージョンのAdobe XDをダウンロードする
2. Semantic UI Kitをダウンロードする
3. 「Master Component」アートボード内のコンポーネントの見た目（色やタイポグラフィなど）を変更する
- Semantic UI Kitをクラウドドキュメントとして保存する
5. 新しいXDドキュメントを開き、「アセットをリンク」ボタンをクリックする
6. 「クラウドのドキュメント」タブ内のSemantic UI kitを選択する
7. アセットパネルから任意のコンポーネントをカンバスにドラッグしてデザインをつくり始める
8. コンポーネントを右クリックして可能な操作を確認する（「マスターコンポーネントを編集」を選択するとすべてのインスタンスに影響する）
9. 共有ボタンから「編集に招待する」を選び、チームにUIキットを共有する
10. UIキットをいろいろと試して楽しむ！
統一されたチームは、良いデザインの実現に役立つ
一般的に、デザインプロセスについて語るデザイナーには2つの流派が存在します。複雑なデザインシステムとそれを実装するコードをそれぞれゼロからつくろうとする考えと、組織として使う特定のフレームワークについての同意を集め、チーム全体が同じ方向に動くという考えです。
オーレの考えは、後者に強く根ざしています。
「私たちは、Semantic UIのコンポーネントから作業を始めることで合意しました。そして、私たちのビジュアルアイデンティティに合うように、コンポーネントを修正しました。これが私がSemantic UIキットをつくろうと考えたきっかけでした。キットがあれば、デザインプロセスを加速して、アイデアから開発までの時間を最小化できるだろうと期待したのです」と彼は明かしました。
「個人的には、デザインシステムを持つことの価値を強く信じています。同時に、それを使うことになる組織の合意を得て、組織内にデザインシステムをしっかりと定着させることで、とても多くのものを得られると信じています。私たちの場合は、ボタンやチェックボックスやラジオボタンなどを独自に作り直すよりもSemanticフレームワークを使うことが状況に適っていました」
もちろん、Semanticフレームワークを使わなければ、Semantic UIキットが役に立たないということではありません。このキットは独立したツールとして使うことができます。Semanticフレームワークへの技術的な依存は何もありません。
出典：Mimi Thian
そう指摘した上で、このキットの基になっているSemanticフレームワークを使って構築することで、チームや組織は多大な恩恵を得られるとオーレは語ります。
「私が発見したのは、縦割りの組織間で資料をやり取りするプロジェクトよりも、部門をまたぐチームの存在するプロジェクトの方が、ずっと上手くいく確率が高いことです。これまでに、職能の枠を超えた協業が想像以上に効果的であることを目の当たりにしてきました。それが、Adobe XD用にSemantic UIキットを作成した理由のひとつです」と彼は説明しました。
「Semantic UIは最も広く使われているフレームワークのひとつで、美しいレスポンシブなレイアウトを人が理解しやすいHTMLで実現するのを支援してくれます。包括的なUIコンポーネントが提供されていて、クライアントごと要件に合わせてフォームや色も簡単に変更できます。つまり、モックアップから最終的なコードまでのデザインプロセスに費やす時間を大幅に短縮できます」
クリエイティブな問題解決方法と好ましくないWebデザインのトレンド
オーレは、デザインする課題に着手する際、クリエイティブな問題解決手法を支持しています。10年以上前にデザインスクールを卒業して以来、この考え方を適用しながら様々なクライアントに全力で取り組んできました。
「私はずっとクリエイティブな問題解決手法に興味を抱いてきました。デザインの学位を2007年に得て以来、デザイナーとして大小いろんなクライアントのために働いてきました。その際、私はユーザが直面するチャレンジやニーズから閃きを得ています。そして、彼らのニーズを満たし優れたデザインを通じて問題を解決するクリエイティブな方法の発見に多くの時間を費やしてきました」
出典：Green Chameleon
キットを見ると、オーレがミニマリズムのファンであることは明らかです。結局のところ、単純化できるデザインプロセスを複雑にしておく理由はありません。この簡易なシステムには、種々のWebデザインのトレンドに対する彼の考えが反映されています。
「何年もの間に多くのトレンドが登場しては消え去るのを目にしてきました。その中で、飛びぬけて問題だと感じたのは過剰なエフェクトの使用です。パララックス、スライドイン、ポップ、バウンス、フェード等はすべて読みやすさと一般的な使いやすさを犠牲にします。といっても、アニメーションやエフェクトは趣を演出することができ、正しく使わればデザインに多くを追加できます。ただ、それを機能させるのには細部への細心の配慮と多少の賢さが必要なのです」と彼は言いました。
もし、何らかのフレームワークをベースにしたデザイナーの役に立つUIキットを探しているなら、オーレのSemantic UIキットを試してみましょう。そして、アイデアから開発までに使う時間が効率化されることを確かめてみてください。
この記事はThe Semantic UI Kit for Adobe XD: Speeding Up Design from Ideation to Production（著者:Marc Schenker）の抄訳です
