Webアプリ系デザインとホームページ系デザイン

本記事はエンジニアリングに興味があるデザイナー、デザインに興味があるエンジニアアドベントカレンダーの10日目になります。

Webデザインって2つない？

Webのデザインで大きく2つの系統があるなと思っていて、その違いについての考えてみました。ただし、すべてのWebデザインがこの2つに分けられるとも限らず、その境界はグラデーショナルです。

この記事はデザインを2つにぶった切る話でもなく、優劣の話でもありません。しかし、両者はデザインの考え方について異なったアプローチを行っていると思います。Webデザインについて語るときに、どのような背景を前提にしているかを知っていると無用な齟齬などを防げるでしょう。本記事では

• 見た目の特徴
• デザインの源流
• ビジネス要件との関係
• デザインツール
• 昨今のフロントエンド技術

という切り口でその違いについて説明していきます。

本記事で掲載している事例は主観によるものです。実際のデザイナーさんの意図とは違うかもしれませんが、その点は予めご了承ください。

見た目の特徴

一番違いのある、見た目のデザインについて見てみます。

Webアプリ系デザインの特徴

Webアプリやそのサービスを運営するサイトで使われているデザインです。デザインの特徴は、

• はっきりとした色遣い
• 線画やイラストを使ったシンボリックな図版
• コンポーネント志向なデザイン

などが挙げられます。提供するサービスの性質上、ユーザーの操作を必要とする場面が多く、ユーザーが迷わずに使えるかに主眼が置かれています。

Webアプリ系のデザインの一例（https://corp.moneyforward.com/）

ホームページ系デザインの特徴

ホームページ^[1]系デザインは商店のWebサイトや企業のコーポレートサイトなどで使われるデザインです。デザインの特徴は、

• 全体的に統一された色調
• 写真やイラストを大々的に取り入れたレイアウト
• タイポグラフィを取り入れ、構成要素の中で文字要素の比率が高い

などです。前者のWebアプリ系デザインと比べるとユーザーの操作は少なく、情報や印象を伝えるということに主眼が置かれています。

ホームページ系デザインの一例（https://tyo.co.jp/）

それぞれのデザインの源流

Webアプリ系は文字通りアプリのようにユーザーがマウス操作やキーボード入力などするシーンが多いです。デザインの源流はWebデザインというよりも、GUIの誕生以後から続くUIデザインの流れを汲むと思います。（さらに古くは機械の操作盤のような物理的なものにもさかのぼる気がします）

ネイティブアプリと同じような使い勝手のデザイン（Googleスプレッドシート）

ホームページ系デザインは情報を伝えることを目的としているので、Webの誕生以前からある紙媒体のデザインにその源流をたどることができるでしょう。フォントの選定、余白のとり方、文字サイズなどはエディトリアルデザインやグラフィックデザインと共通することも多いです。

しかしながら、Webという媒体の中ではそれぞれが完全に独立しているわけではなく、両者がそれぞれ混じり合いWebデザインという新たなデザイン領域を作っていると思います。Webアプリ系デザインでも余白のとり方は大事ですし、ホームページ系デザインにおいてもユーザー操作はあります。リンクやボタンのデザインは紙媒体のデザインにはない概念です。Webアプリに関してもWebならではの「ページ」という階層構造が存在します。（ページ概念はSPAの進化により薄らいでいる気がしますが）

そのほか、SEOや表示速度といったWebにしかない特徴もWebデザインというものに影響を与えているでしょう。

ビジネス要件とデザインの関係性

ビジネス要件とそれに採用されるデザインは切っても切れない縁です。特徴の段でも書きましたが、それぞれのデザインの違いは、要件による違いが反映されています。

Webアプリ系デザインのビジネス要件

Webアプリは新機能追加など常に変化して、デザインもその変化に堪えられるものである必要があります。そのため、機能ごとの見た目の一貫性、拡張性などがデザインに求められています。そこではコンポーネント志向のデザインと相性がよく、デザインシステムが構築されることもあるでしょう。デザインシステムがあれば、デザインに対する深い素養がなくともそのルールさえ守ればデザインの調和ができ、エンジニアだけで（デザイナーの作業なく）新規ページの構築なども可能になります。

同時にこのコンポーネント志向のデザインは昨今のフロントエンドの流れであるReactやVueといったJavaScriptフレームワークとも好相性で開発・デザインが噛み合います。このコラボレーションはビジネス観点でもメリットになります。Webアプリ系デザインは動的なデザインといえるでしょう

ホームページ系デザインのビジネス要件

一方でコーポレートサイトなどは一度作成すれば、しばらく（数年）はデザインにおいて大きな変更がないです。そこまで再利用性や拡張性などはデザインにそこまで求められません。それよりはビジュアル面やクリエイティブな表現を重要視することが多いのではないでしょうか。

お店のWebサイトにしても、コーポレートサイトにしても自分たちの商品の良さや世界観を伝えたいという面があります。そういった要素はサイトの中でも重要度が高く、多くのエネルギーをつぎ込むこともあります。

そこではデザインの一貫性や全体的なロジカルなルールよりも、個々の場面で最適化された、デザインとして完成されていることが求められます。見栄えを重要視し全体で1回しか出てこない要素や例外的な処理もありえます。

またこれらのサイトは「お知らせ」や「ブログ」など動的な部分もありますが、完全に新規のデザインが必要になる場面は少ないです。新規のページを追加するにしても、多くの場合、CMSからできるものに限られるのでデザインの幅も決まっています。サイトに公開後、次のリニューアルまで一度も変更されない部分なども存在します。ホームページ系デザインは静的なデザインといえるでしょう

デザインツールとそれぞれのデザイン

昨今はデザインツールにしてもフロントエンドの技術も多様で進化を続けています。デザインツールではFigma、Adobe XDといったものが、フロントエンドではReactやVueといったものが最近の流行りです。

デザインツールからみた両者ですが、有利不利はないと思っています。いずれのツールにもコンポーネント機能があるのでWebアプリ系デザインはデザインレベルのコンポーネントと実装レベルのコンポーネントと粒度を揃えることができます。一方でホームページ系デザインの方が作り込みが多い分FigmaやXDでは機能不足の点もあるかもしれませんが、デザインツール単体ではなく、複数のツールを組み合わせれば問題ないと思います。

FigmaやXDの強みはWebデザイン特有の自動レイアウトや、状態管理機能などがあることです。これらは他のグラフィックデザインツールにはなく、エンジニアとのコミュニケーションを強力にサポートしてくれます。

いずれのデザインでも、個々のこまかい部分の作り込みは、イラストや画像加工が得意なソフトに任せ、大きなレイアウトやコンポーネント機能を活用するのがベターだと思います。

フロントエンド技術とデザイン

先程Webアプリ系デザインはReactやVueと相性が良いと言いましたが、ホームページ系デザインが相性が悪いとは思いません。React・Vueはデザインによらず、強力なツールとして活用できるはずです。

ただし、デザインの都合というよりはビジネス的な都合でホームページ系デザインではReactやVueがあまり採用されないようにも感じています。これはコーポレートサイトやお店のWebサイトは完成後は製作者側タッチせず運用はクライアントに任せる、といったものも多く、CMSとしてWordPressを導入することがあるからです。WordPressベースだとReactやVueを全面的に導入する^[2]のは難しいかもしれません。しかしながらJamstack構成が普及してくれば、この状況は変わってくるかもしれません。

まとめ

一口に「Webデザイン」と言ってもそのサービスや求めるものによってデザインの考え方が大きく変わります。しかし一方で両者は不可分で、相互に影響しあいながらWebデザインを形成しています。分かりやすいようにWebサイトで分類して見てきましたが、細かいレベルで見ていけば1つのサイト中にはWebアプリ系のデザインの考え方・ホームページ系デザインの考え方が混在していると思います。それぞれの理論をまぜこぜにしてしまうと良いプロダクトにはならないでしょう。

デザイナーはもちろんのこと、エンジニアもこの視点があると無用なコミュニケーションの齟齬^[3]を防げると思います。お互いのことを理解しあってよいフロントエンド開発を目指しましょう。

関連記事

デザインとエンジニアの関係については以下の記事でも少し書いていますので、よかったら呼んでみて下さい。

https://zenn.dev/crayfisher_zari/articles/9db4f6655fcdd7253e90

脚注

1. 『Webサイト』という語の方が正確ですが、世間でホームページという言葉がイメージするものを指すことを意図して、このような名前にしています。

2. 全面的な採用は難しいですが、サイトの一部に活用することは可能かと思います。詳しくは拙筆『HTMLにちょい足しでできる！ Vue.jsでサクッと動きをつける方法』にて解説しています。

3. ちょくちょく話題にあがる「ピクセルパーフェクト論争」や「デザイナーはコーディングできるべきか論争」の原因の1つではないかと思っています。