アプリ開発したい人にオススメのプログラミングスクール

【Swift5】セルの右側に、「>」右矢印マークをつける方法。つける理由

サトリク

この記事では、テーブルのセルの右側についている、「>」このマークをについて、つける理由と、つける方法を解説していきたいと思います。

「>」マークとは

シェブロンマークとは、

これです。

このマークの名前は?

このような、ボタンなどについている右向きのマークは、シェブロンマークと言います。

iOSでの呼び方は、Disclosure Indicatorディスクロージャーインジケーターと呼ぶらしいです。

このブログでもよく使います。例えばこんな感じ↓

ボタン

このマークの意味は?

シェブロンマークがあると、ユーザーがボタンを押す確率が格段に上がります。

なぜかというと、シェブロンマークは、ユーザーに「ここ推せるよ!」とヒントを与える役割があるからです。もっというと、「違う画面に遷移するよ!」というヒントも与えています

下のシェブロンマークの画像

少し話がそれますが、このボタンはどう思うでしょうか。

 

下のシェブロンマークの開いた画像

そうです。当然、下にメニューが開かれます。

矢印の向きが違うだけで、このボタンを押すとどのようなアクションをするのかを一瞬で見分けられるのです。

 

ボタンをつける時は、このマークを必ずつけるように意識しましょう。重要です。

アプリでの実装

基本的にアプリでは、ボタンではなくテーブルビューのセルにつけます。

iPhoneの設定画面をみると、ほぼ全てのセルについています。

iPhoneのデフォルトアプリでは、タップできるセルに必ずついています。

サトリク

ということは、逆に、つけ忘れると、ユーザーに「押せないよ!」とヒントを与えてしまうかもしれません。

忘れていた人は、いますぐ以下の実装方法を見てつけましょう。

storyboardでの実装方法

意外と、簡単です。

Disclosure Indicatorにする画像

①シェブロンマークを表示させたいテーブルセルを選択する。

AccessoryDisclosure Indicatorにする

だけです。

これで、シェブロンマークが実装できます。

コードでの実装方法

コードで書きたい場合は、以下のように、テーブルセルに記述しましょう。

こちらも、これだけで実装できます。

まとめ

このようなちょっとしたアイコンでも、使いやすさが変わってきます。

シェブロンマークをつけていなかったらすぐにつけましょう。きっと、タップ回数が格段にアップするはずです。

実際に、僕のブログでもシェブロンマークを導入したらクリック率が上がりました。。

ここまで読んでくださり、ありがとうございます。

他にもUIデザインの記事や、Swiftの記事を書いていますので、ちらっと読んでください!

 

ブランドはじめました

エンジニアの心をくすぐるようなデザイン

購入はこちらから