大阪市中央区 システムソフトウェア開発会社

営業時間:平日09:15〜18:15
MENU

アクションを促すデザイン(押す/引く2):猫でもできるグラフィックデザイン61

株式会社クローバーフィールドの経営理念
著者:YOSHIDA Takayuki
公開日:2018/05/20
最終更新日:2018/05/20
カテゴリー:技術情報
タグ:

引き続き、押す/引くを促すデザインについての考察です。「押す」を促すには立体的なデザインが求められていましたが、スマホの普及によって必ずしもそうである必要がなくなりました。この場合、経験に加え、立体感以外のデザインによって「押せそうな感じ」をイメージさせることができるようです。

楽天市場などのオンラインショップや、メルカリなどのフリマアプリの画面では、必ず商品の一覧画面があります。商品一覧画面では商品の写真を掲載しますが、この写真が物理的なボタンのように立体的なデザインをしていることはまずありません。正方形、あるいは長方形であることがほとんどです。一覧ページの写真をクリック(あるいはタップ)すると商品詳細ページへジャンプしますが、もしこの挙動が無いと非常に使いにくいECサイトだと評価されることでしょう。

画面上のバーチャルなボタンが登場し、普及する過程では、おそらく立体的なデザインをなんとかして作ろうとしたはずです。これはユーザーの中で「押せるボタンは周囲よりも出っ張っている」という経験が大半だったからです。現在では商品一覧の写真やスマホのホーム画面に並ぶアイコンは、ユーザーが「押したら何かが起こる」ことを知っているため、立体的である必要がなくなりました。

さらに、スマホなどでは「押す」操作にバリエーションが登場しています。普通に押す(タップ)、素早く2回押す(ダブルタップ)、長押しする(ロングタップ)、同時に押す(マルチタップ)、強く押し込む(3Dタッチ)などです。これらははじめて触れたときに文章やイラストなどで説明を受けますが、それ以降はとくに説明もなく使っています。これらのアクションはデザインによって想起されることがないのが興味深いところです。

「押す」という行為は非常にやりやすく、操作がわからない場合にまず試してみるアクションです。これまでに書いたように、経験を前提にしても大きな問題が起こっていないのは、「押す」という行為が人間にとって自然なアクションだからでしょう。では逆に、「引く」についてはどうでしょうか。

押すと同様に、引くについても例をたくさん挙げることができそうです。部屋や戸棚の扉、引き出し、発動機のスターターやチョーク、ブラインドやロールカーテンの高さ調整、ペンダントライトのスイッチ、防犯ブザーのスイッチなどです。

「引く」を促すデザインとしては、いずれも「取っ手」がついているのがわかります。取っ手は、握力ではなく、腕の力を使って引けるようにするために、手の何処かに引っかけるためのものです。

    上に戻る