かんたんで複雑な、ウェブサービスの作り方を紐解くブログ

画面設計とデザイン、それぞれの役割の違いとは?

UX
2021/07/21

ウェブサイトを作成する時に必要となる「UI / 画面設計」「コピー/文章作成」「デザイン作成」。 同じ人がすべてを担当する場合もあるし、それぞれ違うメンバーが担当することもあります。この3つのタスクに関して、それぞれどのようなことが決まれば良いのか? 今回は、画面設計とデザインの違いを元にまとめてみます。

UI・画面設計段階で決めるべきこと

デザインの前に必要となる画面設計。このフェーズでは「ワイヤーフレーム」と呼ばれる資料を作成し、各ページそれぞれの中に「どのようなコンテンツを配置するか?」などを決定していきます。 具体的に決めるべきこととしては、以下となります。 ■各ページそれぞれの中に「必要となる要素・コンテンツ」が何かを決める ■配置された各要素が「どのような順番で配置されるべきか?」を決める ■配置された各要素が「どの程度強調されるべきか?」を決める ■配置された各要素から「どのページにリンク遷移するか?」を決める ここで決めるべきはあくまでも「各ページの構成要素」のため、これら4点に集中すべきとなります。 逆にワイヤーフレーム段階では、各要素の色味などを含むデザイン化は行うべきではありません。 ここで「要素の優先順位」と「デザインなどの色付け」を同時に行おうとすると、優先順位を明確に整理しきれないまま色付けやデザイン上の強弱が行われてしまうため、UI・画面設計段階では「各ページの構成要素」に集中すべきです。

コピー・文章作成段階で決めるべきこと

ワイヤーフレーム段階では、大枠の入れるべき要素は確定しつつも、その各要素に付与するキャッチコピーや文章まで細かく決める必要はありません。 ワイヤーフレーム確定後に、具体的に配置すべき要素が見えてきたら、それらを詳しく説明するためのキャッチコピーやテキスト文章を「ライター」が作成していきます。 特にページの上部にくる「メインビュー」では、キャッチコピーひとつでユーザーの反応が大きく変動するため、コピーやテキストはとても重要な要素となります。 このタスクで必要なコピー・テキスト文章が確定し、それらがワイヤーフレームの中に挿入される形となります。

デザイン作成段階で確定すべきこと

コピーやテキストを含めてワイヤーフレームが完成したら、次に行うのがデザイン化です。 このフェーズでやるべきことは大きく以下となります。 ■ワイヤーフレームからトンマナを考慮した上で色味を追加すること ■各要素に必要な画像・イラスト等が全て配置されること ■各要素に対して、必要なデザイン化・装飾が行われること これらは、例えば「ワイヤーフレームで強調すべき」と判断された箇所には強い色味・装飾や目立つ画像が配置され、反対に強調すべきでない箇所にはそれらにあったデザイン化が行われます。 このように、それぞれの要素に対して色味やイラスト、各種のデザイン化・装飾を行うことが、このフェーズで必要なこととなります。

最後に感想として

同様のメンバーが行うことも多く、以外と見落とされがちのこれらのタスク。 スケジュール管理の観点から、いきなりデザインを作成するなどもある場合もありますが、やはりまずは要素の優先順位付けをしっかりと行い、その上に必要なコピーとテキストのせ、最後にそれらをデザインとして完成させていくというステップが、よりよいものを生み出せる最適解となります。 読んでくださった方、ありがとうございます。