UIデザインにおけるスケッチとカラードローイング

ユーザーインターフェースのデザインは、デザイナーにとって難しいことがあるよね。効果的で使いやすいデザインを作りつつ、目立たせる必要があるから。そこで、デザイナーは既存のデザインを参考にすることが多いんだ。インスピレーションを見つけるための人気のある方法が2つある。一つはDribbbleやBehanceみたいなデザインプラットフォームをブラウズすること。たくさんのデザインを見ることができる。もう一つは、スケッチや既存のデザインに基づいてデザイン例を提案するツールを使うこと。これらのツールはアルゴリズムを使って似た画像を見つけるんだ。

これらの方法は助けになるけど、いくつかの問題もあるよ。デザインポートフォリオをブラウズするのは圧倒されることがあって、デザイナーが元のアイデアから離れることもある。一方で、似たデザインにあまりにもこだわると、オリジナルなものを作るのが難しくなることもある。

もっといい方法を見つけるために、研究者たちはStyleGANというモデルを作った。このモデルは初期のデザイン入力に基づいて幅広いデザインサンプルを作れるんだけど、レイアウトやデザインの特定の要素に対するコントロールはあまりできない。デザイナーは色やテクスチャといったスタイル属性だけを選べる。

この研究では、デザイナーがモックアップを作成するのを助けるための2つの異なる方法を見ていくよ。一つはスケッチを使う方法、もう一つは異なるデザイン要素を表現するために特定の色を使った詳細な描画を使用する方法。スケッチ方法はデザイナーがアイデアをすばやく表現できるのに対して、カラー描画方法はデザインをより正確に表現するのを助けるんだ。

#方法論

スケッチ方法では、Pix2Pixというモデルを使ってスケッチを高品質な画像にするのが得意なんだ。一方、カラー描画方法ではSPADEという別のモデルを使って、セマンティックなカラー描画に基づいて画像を生成する。このアプローチは特定のデザイン要素をよりよくコントロールできて、最終デザインの正確な表現を助けるよ。

この2つの方法が、表現力、使いやすさ、時間の要件、直感性の観点でどのようなパフォーマンスを発揮するのかを見たかったんだ。そこで、ヒューマンコンピュータインタラクションを学んでいる13人の学生でテストを行った。各学生は、両方の方法を使ってモバイルアプリのモックアップを作成し、その過程での体験を共有した。

#参加者

この研究には、コンピュータ工学に関連する修士課程の1年目の学生13人が参加した。彼らはユーザーインターフェースデザインのトレーニングを少し受けていた。参加者は2人の女性と11人の男性で、年齢は23歳から25歳まで。参加者数が少ないから、これらの結果は予備的なもので、より大きなグループで確認するためにはさらなる研究が必要だね。

#研究デザイン

参加者には、モバイルユーザーインターフェースを最初にスケッチし、その後セマンティックに描くという2部構成のタスクが課された。彼らは提供されたガイドを通じてタスクの完了方法について説明を受けた。どのデジタル描画ツールを使ってもよかったけど、将来の研究では、一つのオプションに制限することで、結果がより一貫性のあるものになるかもしれないね。

最初の部分では、彼らはアイデアをスケッチした。次に、カラー描画方法に切り替えて、デザインのより詳細なバージョンを作成した。このタスクの順序は、初期のラフなアイデアがより構造化されたデザインに進化する典型的なデザインプロセスを反映するように選ばれた。モックアップを完成させた後、参加者は使いやすさ、表現力、直感性などのさまざまな次元で自分の体験を評価した。また、両方の方法で生成されたモックアップの質についての考えも提供した。

#方法の評価

#直感性

各方法の理解のしやすさや使いやすさを見てみると、スケッチ方法の方が一般的に高得点だった。ほとんどの参加者は、スケッチでアイデアを明確に表現でき、レイアウトをよりよく視覚化できると感じていた。何人かは、自分の考えをスケッチに移すのがもっと自然に感じたって言ってた。

でも、カラー描画方法は直感的な感じが薄いと感じた参加者もいて、異なる要素の色割り当てを覚えるのが大変だったって言ってた。何人かは、この方法が混乱を招く感じで、役に立つのか見えなかったとも。

#使いやすさ

使いやすさに関して、参加者は両方の方法について混合した感想を持っていた。スケッチには特定の描画スキルが必要だと感じる人もいれば、カラー描画方法は基本的な形（四角や長方形など）に焦点を当てているからシンプルだと考える人もいた。参加者の間では、マウスで描くことや異なるデバイスへの適応など、直面した課題について意見が分かれた。

#時間効率

各方法にかかる時間については、参加者の意見が分かれていた。スケッチプロセスの方が自由にレイアウトをアウトラインできるから早いと感じる人もいれば、まともなスケッチを作るのに苦しんで動けないと感じる人もいた。カラー描画方法についても意見が分かれ、一部は早く終わったけど、他の人は正しいソフトウェアを見つけたり、出てきたアイデアと合うものを見つけるのに時間がかかりすぎたと言ってた。

#表現力

表現力に関しては、参加者は一般的にスケッチ方法を好んでいた。彼らは、スケッチだとより詳細なアイデアを伝えられる感じがすると言ってた。一方、多くの人がカラー描画方法はオリジナルなコンセプトを十分に表現できないと感じていた。ある人は、スケッチがほぼすべてのビジョンを描けるのが好きだったけど、カラー描画方法は制約が強すぎると感じた人もいた。

#結果の質と忠実度

各方法で生成された最終モックアップを比較すると、スケッチアプローチの方がカラー描画方法より質の高い画像が得られた。多くの参加者は、スケッチ方法の方が元のアイデアに近いと感じていた。ただし、質や初期デザインへの忠実度の差は、表現力の差ほど広くはなかった。

#追加の洞察

参加者からの追加コメントを見てみると、好みが分かれていることがわかった。一部の参加者はスケッチ方法が良いと言いながら、各要素の機能を定義する際の課題を解決するためにカラーチャートを追加することを提案していた。他の人は、スケッチとカラー描画を組み合わせることでより機能的な体験ができる利点を見ていた。

多くの参加者が、最良の方法はデザインタスクの文脈によるかもしれないと主張した。彼らは、どちらの方法も優れているわけではなく、一緒に使うことでお互いを補完するよね。

#結論

この研究では、ユーザーインターフェースのモックアップを生成するための2つの方法、すなわちスケッチとセマンティック描画を評価し比較した。参加者は一般的に、直感性と表現力の高さからスケッチを好んでいた。でも、両方の方法にはそれぞれ利点と欠点があって、二つを組み合わせるのが最も有益なアプローチかもしれないね。

アイデア生成のためにスケッチを、詳細な表現のためにカラー描画を含むミックス方法は、デザイナーがモックアップを作成するための強力なツールを提供できるだろう。これによって、彼らはアイデアを明確に表現しつつ高い精度を保って、より良い最終製品を得ることができる。

今後の研究は、これら二つの方法を効果的に統合する方法を探求し、ユーザーインターフェースのデザインプロセスを改善することができればいいね。