UX / UI のデザインに強いWebシステムの開発と、BtoB Webマーケを支援するWeb制作を提供するN’s Creates (エヌズクリエイツ) 株式会社の坂本です。

日々 先輩デザイナーの下でコンテンツごとに異なる課題やご要望に対し、
最適な案を検討している中でふとあることに気づきました。
それは、次の画面へとユーザーを導く「遷移のトリガー」の違いです。
Webでは「詳細はこちら」というテキストリンクが主役ですが、アプリではカードそのものがその役割を担うことが多いことに気づきました。

調べてみるとWebとアプリでは、それぞれの生い立ちや使われ方に根ざした深い違いがあることがわかってきました。
今回は、調べた中から違いを生んだポイントを3つご紹介します。

なぜ違いが生まれるのか

1.マウスと指、精度の違い（フィッツの法則）
UIデザインの世界には「フィッツの法則」という考え方があります。
簡単にいえば、ターゲットが大きく近いほど素早く正確に操作できるという原則です。

マウスはピクセル単位で細かく動かせるため、小さなテキストリンクでも正確にクリックできます。
一方、スマホアプリを操作する際の指先ではマウスに比べ接触面積が大きく、どうしても精度が落ちてしまいます。
そのため、アプリのUIでは「詳細はこちら」という小さなリンクよりも、カード全体やサムネイル画像そのものをタップできる設計が好まれるのだと思いました。

2.「文書」と「道具」、それぞれのルーツ
そもそもの生い立ちにもWebとアプリのUIが違う理由が隠されていました。
Webはもともと学術論文や資料を共有するための「文書」として発展してきました。
文書の中に参照先へのリンクを埋め込む文化は、HTMLのハイパーリンクそのものです。
だから「詳細はこちら」というテキストリンクが自然に馴染むのです。

対照的に、アプリは最初から「道具」として設計されています。ハサミや鍋のように、使い手が直接対象に働きかける感覚が重視されます。
ボタンよりも、「このカードをタップする」という要素そのものを触るという直接的な操作感が、アプリには適しているのです。

3.OSガイドラインが浸透させた「直接操作」の思想
こうした違いは、AppleやGoogleのデザインガイドライン（HIGやMaterial Design）にも色濃く反映されています。
両者が共通して推奨しているのが「直接操作（Direct Manipulation）」という考え方です。
コンテンツそのものに触れる体験を重視する。この思想がアプリ開発者の間に広く浸透していると言えます。

まとめ

Webデザイナーをしていた時には1時間に1回は目にしていた「詳細はこちら」というラベル。最近は、その言葉をほとんど打っていない自分に気づきました。
今回調べたことで、「Webっぽい」「アプリっぽい」という感覚的な違和感の正体の1つは遷移のトリガーに対する思想の違いにあるのだと気づくことができました。

アプリにおいてもテキストで「詳細はこちら」と添えることが正解となる場面は確かにあります。
ただ、アプリの作法を無視して安易にWebの手法を持ち込み、「なんだかWebっぽい（＝アプリとして使いにくい）」という違和感をユーザーに与えてしまうのは、デザイナーとして避けたいところです。

今回調べた直接操作を型としつつも、最終的には「Webだから」「アプリだから」という形式に縛られるのではなく、
「今、この画面と向き合っているユーザーにとって何が一番親切か」を考え、一つひとつの案件に丁寧に向き合っていこうと思います。

UX / UI のデザインに強いWebシステムの開発と、BtoB Webマーケを支援するWeb制作を提供する
N's Creates 株式会社は、神戸三宮オフィスまで週１出社（それ以外はリモートワーク）できる「デザイナー」「エンジニア」を募集しています。

興味のある方は、カジュアル面談しますので気軽にお問い合わせください！