こんにちは。アシアルの鴨田です。
今回はアシアルのデザインチームから、近年の取り組みや考えについて紹介させていただきます。

アシアルのデザインチームの近年の取り組み

アシアルのデザインチームにおいて、ここ数年の間に取り組んだプロジェクトで共通した要素として、大きく２つのものがあります。

一つはデザインシステムの構築・利用です。私達とお客様とでデザインシステムを一から構築したり、お客様が構築したデザインシステムを利用したWebシステムやアプリのデザインや実装を行うことが多々ありました。

もう一つは、ウェブアクセシビリティへの対応です。こちらは2024年4月1日に義務化され、2024年6月4日までに完了させる必要があるといったこともあって、注目が集まったかと思います。ただ、実際のところ大手企業以外では、まだ対応されていないところも多いのではないでしょうか。

生成AIブームの中で

業界的には昨年から生成AIが盛り上がっていて、もちろんデザイン周辺においても、見逃すことはできないトピックでしたので、アシアルのデザインチームでも各メンバーで様々なツールを使って、仕事に役立てられないかと試行錯誤を繰り返す毎日です。

ただ、現時点では表に出すデザインそのものとしての利用はほぼなく、デザインを思考する過程での調査に利用したり、アイデアのバリエーションを出すときの参考にしたり、社内で使用するようなデザインに用いるといった用途での利用に留まっているのが現実的なところです。

生成AIがデザインシステムを作れるのか

そのような潮流を考えると、最終的なアウトプットとしてのデザインはいずれ生成AIがどうにかしていくのであろうと思いますが、そこに至るまでの筋道を設計するのが今後のWeb系デザイナーにとって最も大事なことであると考えています。

これを踏まえたうえで、これまで我々が取り組んできたデザインシステムを生成AIが構築できるようになるのかと考えると、単に統一的なデザイン規則に沿ったコンポーネント集を作るだけであれば、すぐにでも可能なのかもと思います。

しかし、どのような用途に使うコンポーネントなのか、どのようなパラメータを持っているのか、どのようなデザインタイプがあるのか、などシステムを必要とする組織とコミュニケーションを取りながら、細かな調整も含めて進めていくとなると、やはりこのあたりにはまだデザイナーの存在が不可欠であると考えています。

デザインシステムにおける成果物

アシアルが携わった一番大きなデザインシステムの成果物は下記の様な感じです。

• デザイントークン（100色程度のカラーセット、フォントサイズやマージンなどのデザインセット、ライトモード/ダークモード対応）

• Vue2/Nuxt2, Vue3/Nuxt3用のstorybookを用いた50を超えるUIコンポーネント集

• 上記UIコンポーネント集のFigma

• 上記Figmaを利用したFigma上のサイトデザイン一式

• 上記サイトデザイン一式を実装したシステム一式（ウェブアクセシビリティ対応含む）

• 上記をまとめたデザインガイドライン

そして、今現在もメンテナンスしながら、エンハンスを行っています。

これを生成AIが作れるようになれば、人が何年もかけて構築してきたものが、さほど時間をかけずにできるようになると思うと、感慨深いのですが、果たしていつのことになるのだろうという気もしています。

まとめ

デザインシステム/ガイドラインを作る中で感じたことがあります。それは、統一的なデザインを構築するための仕組みとして作っているので、文字通り法則性を持った規則を作っているということではあるのですが、法則や規則からはみ出て考えないといけない場面が度々出てくるということです。

そうしたときに総合的に考えたり、あるいは独善的に選択したりといったことをコミュニケーションを取りながら調整し、調和させていくことが人間の役割に他ならないのかなということです。

基本的なベースデザインやパターン出し、調査といったところは、今後AIがすごいスピードで効率的に担っていってくれるものだと思います。その組み合わせであったり方向性に関する調整や調和を選択して物事を進めていくのが、人間の役割であると感じました。これはきっとWeb系デザイナー/デザインに限らず、いろんな職種や業界において、スタンダードになっていくものだと考えています。