UI観察：ドロップダウンボタンとスプリットボタンの最適活用術

UI観察の第13弾は「ドロップダウンボタン」について深掘りしていきます。 （その他のUI観察記事はマガジンはこちら ↓） ドロップダウンボタンとは、リンクのリストの表示/非表示を切り替えることができるボタンを指します。様々なタイプがあり、用途によって使い分けられます。 基本的なドロップダウンボタンの構造Bootstrapの公式にあるボタンが説明としてわかりやすいです。 ドロップダウンボタンはクリックすると、メニューが現れて複数の選択肢が出てきます。通常のボタンはボタン

UI観察 - アコーディオンの目立たせ方、最適解は？

UI観察の第12弾は「アコーディオン」について深掘りしていきます。 （その他のUI観察記事はマガジンはこちら ↓） アコーディオン（accordion）とはアコーディオンは、ウェブサイトのナビゲーションメニューの1つで、コンテンツを押し下げて広げるUIです。 アコーディオンは、クリックやタップすると内容が展開し、再度クリックすると折りたたむことができます。楽器のアコーディオンの動きに似ていることから、この名前が付けられました。 アコーディオンは、次の特徴があります。

「ユーザー一覧」の"ーー”の読みづらさ。可読性向上へのアプローチ。

私は長らく「ユーザー一覧」という表現に違和感を抱いていました。 音読すると「ゆーざーいちらん」となり、問題なく伝わります。しかし、文字で表現すると「ユーザー一覧」というフレーズが生まれ、ユーザ（ー）（一）覧と伸ばし棒が2連続で続いているように見えます。 この微妙な読みづらさは、地味に気になる点であり、「ユーザー一覧」を音読する際には、注意を払わないと自然に読むのが難しいと感じます。 それにもかかわらず、この不自然な表現である「ユーザー一覧」を使用しているサービスは数多く

Figma AutoLayoutでSTUDIOとのコラボレーションを最大限に活用する方法

Figmaのプラグイン（Figma to STUIDIO）を使うことで、実装へのシームレスなステップを提供し、ウェブサイトの制作プロセスを劇的に簡略化が出来ます。 しかしAutoLayout機能を正しく設定しないと、Figma to STUIDIO は機能してくれません。この記事では、FigmaのAutoLayout機能を正しく駆使して、STUDIOのノーコードツールを最適化し、ウェブサイト制作を効率的に行う方法について説明していきます。 FigmaでのAutoLayou

UI観察 - LINE・メルカリ等から学ぶ、適切なタブの使い方

UI観察の第11弾は「タブ」について深掘りしていきます。 （その他のUI観察記事はマガジンはこちら ↓） タブ（tab）とは タブの一般的なデザインパターン■ テキストのみ 選択されたタブに下線が引かれている。 ■ テキストのみ（横スクロール可能） 左右に矢印が存在し、矢印をクリックで、横スクロールが可能。文字が隠れているタブをクリックした場合、隠れている領域が微弱に横移動され文字が見えるようになる。 矢印があるVer. 矢印がないVer. ■ 横幅 ■

UI観察 - 三点リーダー（縦と横）の使い分けは出来てますか？

UI観察の第10弾は「三点リーダー」について深掘りしていきます。 （その他のUI観察記事はマガジンはこちら ↓） 三点リーダーとはUIで使用される場合でも「続きを省略」として使用されます。引用の通りに正しく英語で読むと「三点エリプシス」と呼ぶそうですが、読みづらいですね（「三点リーダー」で定着してよかったです）。 三点リーダーは縦と横どちらが正しいかnoteの三点リーダー 記事タイトルの横にある箇所の三点リーダーは横でした。hoverすると、真上にツールチップで「その

UI観察 - パンくずリスト（breadcrumbs）

今回のUI観察は、パンくずリスト（breadcrumbs）について深掘りしていきます。 （その他のUI観察記事はマガジンはこちら ↓） パンくずリスト（breadcrumbs）とはフロントエンドの開発に携わっている方にはお馴染みかと思いますが、パンくずリストは、ユーザーが現在どのページにいるのかを示す道しるべとしての役割を果たすリストです。 よく使われるUIテンプレートにおけるパンくずリストのデザインを詳しく見てみましょう。 MUIのパンくずリスト参照先 Boots

UI観察 - ピクチャー・イン・ピクチャー(PiP)

ピクチャー・イン・ピクチャー(PiP)という機能をご存知でしょうか？ これは、YouTubeやAbemaなどの動画アプリを画面の端に小さく表示しながら、他のアプリを操作することができる機能です。 （その他のUI観察記事はマガジンはこちら ↓） ピクチャーインピクチャーとはPiPはiOS14では動画に限定して使用できますが、iOS15からは動画以外のコンテンツにも対応しています。Androidではバージョン8.0（API レベル 26）以降で使用。PCでは、2018年10月

"Figma"で企画書を作るのは正しい選択か? あなたとチームの時間と労力を守る為のガイド。

近年、Figmaを用いた企画書作成の人気が高まっていますが、その背後には一体どのような理由があるのでしょうか。 デザイン制作を積極的に行うデザイナーにとって、Figmaの操作を習得することは間違いなく重要なスキルと言えます。しかし、非デザイナーが企画書をFigmaで作成する場合、使い方を覚えるまでのハードルが高いと感じるかもしれません。 Figmaで企画書を作成するにあたり、以下の5つの注意点が特に重要です。これらの点に目を通すことで、あなた自身がFigmaで企画書を作成

【スタートアップの定番ミスTop 10】 ガイ・カワサキの金言集

【スタートアップの定番ミスTop 10】というツイートのまとめが流れきて興味を持ち、 まとめました。新規事業の立ち上げやスタートアップに属している方は、特に興味を持つのではないでしょうか。ぜひご参考に。 ガイ・カワサキとは ガイ・カワサキの金言その1 - 市場の1%を狙いがち その2 - スケールを急ぎすぎる その3 - パートナーシップに期待するな その4 - ピッチよりもプロトタイプを その5 - ピッチの際は10/20/30ルールを採用せよ その6 - 全

UI観察 - ツールチップ

勉強の一環でUI観察を始めていますが、今回はツールチップです。 （その他のUI観察記事はマガジンはこちら ↓） ツールチップとは「ヒント」と言い換えると分かりやすいですね。ツールチップは使用しているツールで分かりづらいところや専門用語などを補足説明してくれます。 各デバイスの表示として（PCは hover・SPはタップ）で表示されます。 見た目として、ツールチップは吹き出しのデザインが主となりますが、様々なサービスのツールチップをまとめてみて、ツールチップのさまざまな

2023/04/02