ファイルブラウザ
パンくず・グリッド／リスト切替・クリックだけの複数選択を備えたファイル画面。フォルダを開くと階層が進み、選ぶと下部に「N 件を選択」の操作バーが現れる。
プレビュー
クリック
操作クリック／タップで動きます。
デザインの要点
- 選択は Shift や Ctrl を要求せず、クリックの積み重ねで足す。解除も同じ操作。スマホと同じ作法
- 操作バーは選択した瞬間に下から現れ、件数を最初に言う。何に対して操作するかを先に示す
- グリッドはサムネの色でファイル種別を、リストは更新日とサイズを見せる。切替は用途の違い
- パンくずは今いる階層を太字にし、上位はリンクにする。戻る操作を別ボタンにしない
プロのサイトでの実例
実例は「型の使われ方」の観察であり、コード・ロゴの転載ではありません。サイト側の更新で見え方が変わることがあります。
実装メモ
フォルダは「何も選んでいないとき」のクリックで開き、選択中はクリックが選択に切り替わります（ダブルクリックは常に開く）。実装ではこの二重の意味を避けるため、チェックボックスを別に置く設計も検討してください。
コード（コピーして使えます）
<div class="fb-app">
<header class="fb-head">
<nav class="fb-crumbs" id="fb-crumbs" aria-label="現在地"></nav>
<div class="fb-view" role="group" aria-label="表示形式">
<button type="button" class="fb-view-btn is-on" data-view="grid" aria-pressed="true" aria-label="グリッド表示"><svg viewBox="0 0 20 20" width="16" height="16" aria-hidden="true"><path d="M3 3h6v6H3zM11 3h6v6h-6zM3 11h6v6H3zM11 11h6v6h-6z" fill="currentColor"/></svg></button>
<button type="button" class="fb-view-btn" data-view="list" aria-pressed="false" aria-label="リスト表示"><svg viewBox="0 0 20 20" width="16" height="16" aria-hidden="true"><path d="M3 5h14M3 10h14M3 15h14" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg></button>
</div>
</header>
<div class="fb-body">
<div class="fb-list-head" aria-hidden="true"><span>名前</span><span>更新日</span><span>サイズ</span></div>
<div class="fb-items is-grid" id="fb-items" role="listbox" aria-multiselectable="true" aria-label="ファイル"></div>
</div>
<div class="fb-bar" id="fb-bar" role="toolbar" aria-label="選択した項目の操作" aria-hidden="true">
<span class="fb-bar-count" id="fb-bar-count">0 件を選択</span>
<div class="fb-bar-actions">
<button type="button" class="fb-bar-btn" id="fb-share">共有</button>
<button type="button" class="fb-bar-btn" id="fb-download">ダウンロード</button>
<button type="button" class="fb-bar-btn is-danger" id="fb-delete">削除</button>
<button type="button" class="fb-bar-btn is-ghost" id="fb-clear">選択解除</button>
</div>
</div>
</div>