こんにちは！エキサイトお悩み相談室でデザイナーをしているサヅカです。
サイトをもっと使いやすくするべく日々UI改修を行っているのですが、今回アイコンの選定に非常に悩みましたのでその時のお話をしようと思います。
アイコンの意味を他のデザイナーと考えてみた
アコーディオン＝クリックするとビヨーンとさらに内容が表示されるアレなのですが、ページ改修をしていてアコーディオンのデザインガイドラインはまだ設定していないことに気付きました。
こちらは「エキサイトお悩み相談室」のコイン購入ページの一部になります。
今回アコーディオン化することになったので、シェブロン下、シェブロン右、プラスマイナスの3種類を提案しました。
シェブロン下（開くとシェブロンは上になる）
👩🦰：一番よく見かける気がする
👨：Web標準化団体w3cでも用いられているようです
シェブロン右（開くとシェブロンは下になる）
👩🦰：他のページに遷移しそう
👨：右と下というのが動きに統一感がない
プラスマイナス（開くとプラスはマイナスになる）
👩🦰：「コイン購入」ページということもあり「＋」は混乱しそう
👨：コンテンツの内容が多い時に使うイメージ
👱♀️：プラスマイナスアイコンは追加/削除の意味を持っていてアコーディオン以外でも頻用されると思う
色々な人と意見交換して検討した結果、弊サービスでは「シェブロン下」を採用することにしました。
個人的にはプラスマイナスが分かりやすくて好きなのですが、デザイナーの好みで安易に決めてしまうとユーザーが混乱するので気を付けたいと思います。
おまけ「”く”みたいなやつ」ってもう言わない
上の記事で「シェブロン」という言葉を使いました。矢印みたいな、ひらがなの”く”みたいなやつのことです。
正式名称を知りたくて色々と調べました。
シェブロン
服の生地などで「シェブロン柄」というのがあるのですが、どうやらそこからきているようです。
キャレット
キーボードの「キャレット」という記号のことで、「キャレット右」というデザイナーも多いようです。
結局のところ正式名称は？
特にこれといって正式なものはないようですが、マテリアルアイコンでは”Chevron Right”という名前でしたので「シェブロン」と呼ぶのが良いかもしれません。浸透するまではチーム内では「矢印」等で会話しそうですが汗
