UIデザインを勉強したら街の風景がWeb画面に見えてきた話

今回は、Amazonさんのサイトなど、優れたUIデザインを勉強していたら、街の風景がWebデザインに見えてきた話をします。

１．UIデザインの基本

UIデザインの書籍で有名な、オブジェクト指向UI(OOUI)デザインによりますと、UIデザインは基本、コレクションビューとシングルビューの2つで構成されます。

◎コレクションビュー
メニューやリストなどの要素集合の一覧表示

◎シングルビュー
コレクションビューから遷移する先の、単一要素の詳細表示

２．商店街の風景をUIデザイン的に見ると

商店街の風景を、UIデザイン的に見ると次の様になります。

◎コレクションビュー
商店街に並ぶ看板たちが、さながらWebサイトのリストメニューの様に見えます。

◎シングルビュー
実際にファミマに近づいた時の風景です。Webサイトに例えると、コレクションビューから遷移した先の詳細画面と言えますね！

３．コンビニの店内をUIデザイン的に見ると

では、コンビニの店内も見てみましょう。
コンビニ店内の商品陳列棚も、次の様に見るとWebデザインになります。

◎コレクションビュー
店内に並ぶ商品群が、さながらWebサイトのアイコン群の表示と同じ位置付け。

◎シングルビュー
例えば、カップヌードルに実際に近づいて手に取って見た時の視界が、商品の詳細表示と言えます。

４．まとめ

現実の魅力的なお店の風景も、Web上の優れたUIデザインも、本質は案外同じなのかもしれませんね！

もし面白かった方は、「ハート」をクリックしてもらえると嬉しいです。
ではでは。