このスマホの画面ってWebサイト？ それともアプリ？ 比べて分かるWebサイトならではのUIとデザイン

ここに2つのスマートフォンの画面があります（※下記のイメージ画像を参照）。どちらも、なんらかの商品を選択して、商品を購入できるサービスの画面です。

実はこの2つの画面は、それぞれWebサイト風・アプリ風になるようにデザインしています。どちらがWebサイトっぽく感じられましたか？

おそらく、左の画面がWebサイト風に感じられたのではないでしょうか。それでは、両者の違いはなんでしょうか？　どちらも「商品を購入できる」という点では同じなのに、なぜそのような見た目の違いが生まれるのでしょうか？　この差こそ、Webサイトとアプリの似てるようで全く違う構造上の違いが現れているのです。

そこで今回は、表層に現れる「見た目の違い」に着目して、Webとアプリにおける構造上の違いを探っていきます。

目次

Webサイトとアプリの違い／その壱「メニュー」

先ほどのWebサイトとアプリの画面には、メニュー表現に大きな違いがあります。左には「ハンバーガーメニュー」、右には「（Webサイト風に表現すると）固定フッターメニュー」があります。

ハンバーガーメニューは、PC版ではヘッダーに固定して表示できていたページタイトルを、スマートフォンという小さな画面に収めるために生み出されたUIと言えます。

この記事が掲載されている当サイトのMdNも、PC版ではページタイトル（メニュー）が上部に固定されていて、スマートフォン版ではハンバーガーメニューにそれらが格納されています。

ハンバーガーメニューはどのページにも表示されているので、ユーザーはいつでもメニューを開き、違うページにアクセスできます。例えるならば、本の目次でしょう。

 一方で、アプリではページの下部に、概ね2～5個のメニューが固定されています。正式名称はOSによって異なり「タブバー（iOS）」「ボトムナビゲーションバー（Android）」と言います。

「タブ」という名前が示す通り、これらのメニューは独立しています。タブごとに独立した作業空間のイメージです。タブを切り替えると最後に見ていたページ（画面）が保存され、また同じタブに戻ってきたらその途中から再開できます。独立しているのでタブを横断するような遷移は基本的に起こりません。

では、もし、このUIをWebサイトにそのまま当てはめるとどうなるでしょうか？

画面の下部にメニューが固定され、常時表示されるのは確かに便利かもしれません。しかしWebサイトは仕組み上、それぞれのメニューで独立して情報を保存することができません。

結果、アプリのような見た目にも関わらず、ユーザーが期待する操作感を裏切ることに繋がってしまいます。Webサイトのメニュー表現は、やはりハンバーガーメニューが適していそうです（Webサイト版とアプリ版の両方あるサービスを比較してみると、Webサイト版にはタブがない、というパターンもよくあります）。

Webサイトとアプリの違い／その弍「サイト名の有無」

Webサイトは、検索エンジンの結果画面から、あるいはシェアリンクから、ユーザーが下層ページに直接流入することがあります。そのため、直接コンテンツにたどり着いたユーザーに、そのWebサイトが何かを知らせるために、ページ上部にWebサイト名の掲載が必要になります。MdNも画面の上部に「MdN」のロゴが常に表示されています。

このロゴをクリック（タップ）すると、Webサイトの最上層のディレクトリページ（いわゆるトップページ）に遷移します。ほぼ全てのWebサイトは、この方式が取り入れられていて、ユーザーはこのリンクが存在することを期待するでしょう。Webサイトにおいて、なくてはならないUIと言えます。

一方でアプリは「今からこのアプリを使う」という動機があって使い始めるものなので、起動後にアプリの名前を表示し続ける必要はありません。そのため、アプリ名は画面上部に存在しないのが標準となっています。

例外的に、アプリ名を画面上部に固定表示するアプリもありますが、それにはユーザーに強くブランドを印象付ける意図があるのかもしれません。

Webサイトとアプリの違い／その参「メニュータイトル」

MdNのメニューを開いて、メニュータイトルに注目してください。「デザインする」「WEBを作る」「アート＆カルチャー」……このタイトルをよく見ると、動詞表現（デザインする、WEBを作る）と名詞表現（アート＆カルチャー）が両方存在することに気づきます。

このとき、「デザインする」というメニューを選んだら、デザインツールが立ち上がり作業を開始できる……と考えるユーザーはいないでしょう。この「デザインする」はもちろん、「デザインする」をテーマとした記事がまとまっている、という意味です。

このように、Webサイトにおいてメニュータイトルは、高い自由度で表現できます。例えば企業の採用サイトでは、メニュータイトルを「企業情報」ではなく「会社を知る」と表現し、無機質さを和らげることもあるでしょう。ユーザーに与える印象を重視して、表現を工夫することが許容されます。

一方でアプリのメニュー（タブ）を思い出してみてください。電話アプリなら「連絡先」「留守番電話」のように、短い名詞で表現されていることが多いことに気づきます。「電話する」というように、動詞がメニュータイトル化することは珍しいです。

ここにも、Webサイトとアプリの構造上の違いがあります。その違いとは、Webサイトはメディアとしての側面が強く、アプリはツールとしての側面が強い、という点にあります。メディアの側面が強いWebサイトは、前述の通りコピーライティングのようにメニュータイトルを検討できます。

一方でアプリはツールの側面が強く出ます。すなわち、ユーザーはアプリで何かしらの目的（写真アプリなら、写真を閲覧したい、追加したい、編集したい、など）のために使います。

もし、写真アプリのメニュータイトルが「思い出を見る」だったらどうでしょうか？　情緒的ですが、何ができるのかピンときません。もう少し分かりやすく「写真を見る」はどうでしょうか？　これは確かに何ができるか分かりやすいですが、ここに落とし穴があります。動詞（機能）でメニュータイトルを作ると、「閲覧する」「追加する」「削除する」のように、機能ごとにメニューを作らなくてはならず、収集がつかなくなります。

しかし、これらを機能の対象となる「写真」という名詞でまとめたら、1つで済みます（この「名詞」でまとめる方法はオブジェクト指向と呼ばれ、本来はより詳細な解説をすべきところですが、ここでは割愛します）。ユーザーは「写真」というタブを選択したら、そこには写真が並んであって、眺めたり、編集したりできると直感的に理解できます。

この考えはWebサイトにも適用できます。ECサイトや業務系の管理サイトのように、機能が重視されるサイトならアプリと同様の考え方を採用した方が、使いやすさに繋がるでしょう。メディアの色が強いWebサイトの場合は前述の通り、印象も重要な要素となるため、必ずしもその限りではありません。

なぜWebサイトとアプリは似ているようで表現が違うのか

Webサイトとアプリの、似ているようで違う部分が見えてきました。しかし、上記の原則によらない具体的なWebサイト・アプリを思い浮かべる人も多いのではないでしょうか？　とりわけアプリにおいては、上記で「Webサイトならでは」と説明したはずの内容が採用されているケースが多いのは事実です。

 Webサイトデザインはそれだけ影響力が強く、アプリUIデザイナーでさえも、無意識にウェブサイトの「当たり前」を前提として、アプリのUIをデザインしてしまうことがあります。その最たる例が「トップページ（ホーム）」という概念でしょう。

Webサイトにおいては、トップページは必ずといっていいほど確実に存在するものです。サイトの玄関口、本で言うところの表紙とも言えるそのページは、ユーザーを引きつけ、コンバージョンを獲得するためのプレゼンの場です。広告流入の受け口となることも多いので、このトップページは何よりも重要であり、「トップページが存在しない」Webサイトは想像できないでしょう。

その影響からか、このトップページに該当する「ホーム」というメニュー（タブ）が、あらゆるアプリに登場することになりました（「トップページ」は和製英語であり、英語ではhome pageと呼称します）。多くのアプリで、アプリを起動したとき、最初に表示されるタブに「ホーム」という名称が与えられています。

しかし、その名前は本当に適切なのでしょうか？

その参の「メニュータイトル」で示した通り、タブの名称はユーザーが操作する対象物の名前（名詞）にする方が、端的かつ直感的になるはずです。「ホーム」という名称では、何を対象とし、何ができるタブなのかが分かりません（自宅の室温や湿度を確認する機能ならまさしく「ホーム」が最適ですが）。

逆に「ホーム」という名称でしか言い表せないのであれば、それはアプリではなく、Webサイトで実現すべきサービスなのかもしれません。

まとめ

Webサイトとアプリを比較することで、Webサイトならではの特徴や構造がより明らかになったのではないでしょうか。今回の比較を通じて、Webサイトの特徴を一言でまとめるなら「Webサイトとはメディアである」でしょう。メディアとは、発信する側の意図を伝え、コンバージョンという目的を達成するためのものです。ユーザーがツールとして使うアプリとは、その点が大きく異なります。

このように、Webサイトで当たり前とされていることが、実はWebサイトの構造ならではの表現だったということが見えてきます。今回のアプリとの比較にとどまらず、当たり前とされているデザインがなぜよしとされるのか、立ち止まって深堀りする。それがより効果的なWebデザインの実践へと繋がるでしょう。