1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

export/importアイコンどっちにするかで社内で話題に

1
Posted at

export と import のアイコン、どっち向きが正しいのか?

UIを作っていると、一度は悩むのがこれです。

export のアイコンって、矢印は上向き?下向き?
import は逆?
26182486.png

一見すると単純そうですが、実はこの問題、**「どこを起点に考えるか」**で答えが変わります。

  • クラウドから見れば、外に出すのが export
  • ユーザーから見れば、クラウドに送るのが export
  • ファイル管理画面から見れば、ダウンロードが export に見えることもある

つまり、どれか一つが絶対に正しいわけではないのです。

この記事では、
「export / import のアイコンは何を基準に決めるべきか」
を、実務のUI設計の観点で整理します。


そもそも、なぜ混乱するのか

多くのサービスでは、以下のような表現がよく使われます。

  • export: クラウドに対して下向き矢印
  • import: クラウドに対して上向き矢印

この表現を見慣れている人は多いはずです。

ただ、ここで一つ疑問が出ます。

「いや、export って“外に出す”ことなのだから、
自分のデータをクラウドの中に入れるなら上向きでは?」

この違和感はとても自然です。

なぜなら、人によって “基準点” が違うからです。


export / import は「誰目線か」で意味が変わる

この問題を整理するには、まず視点を固定することが重要です。

1. システム目線で考える場合

システムやクラウドを中心に考えると、こうなります。

  • import: 外部からシステムの中へ取り込む
  • export: システムの中から外部へ出す

この考え方だと、アイコンの方向は次のようになります。

  • import: 内向き
  • export: 外向き

この定義は、ソフトウェアやデータ処理の文脈ではかなり一般的です。
たとえばCSVインポート、データエクスポートなどは、ほぼこの意味で使われます。


2. ユーザー操作目線で考える場合

一方で、UIではユーザーの感覚が優先されることがあります。

たとえばユーザーが見ている画面上で、

  • サーバーから手元に落とす
  • 手元のファイルをアップロードする

という操作を考えると、ユーザーはこう捉えがちです。

  • 手元に持ってくる = 下向き
  • どこかへ送る = 上向き

この感覚だけで設計すると、

  • export = ダウンロードっぽい = 下向き
  • import = アップロードっぽい = 上向き

となりやすいです。

実際、世の中の多くのUIがこの表現を採用しているため、
慣習としてはこちらのほうが直感的に通る場面も多いです。


つまり「正しさ」は1つではない

ここがこのテーマの面白いところです。

export に下矢印を付けるのも、上矢印を付けるのも、文脈次第では成立します。

ただし、実務では
“理屈として成立するか” より “ユーザーが迷わないか”
のほうが重要です。

UIはクイズではありません。
利用者に「これどっちだっけ?」と思わせた時点で負けです。


実務での結論: 慣習に寄せたほうが強い

結論から言うと、一般的なプロダクトUIでは次の整理が最も安全です。

推奨

  • import: 上向き矢印
  • export: 下向き矢印

なぜかというと、ユーザーは多くの場合、次のように認識するからです。

  • 上向き = アップロード
  • 下向き = ダウンロード

そして実際の利用シーンでは、

  • import = 外部ファイルを取り込む = アップロード
  • export = データを書き出して取得する = ダウンロード

となるケースが多いためです。

つまり、厳密なデータ流通の概念よりも、
ユーザーが普段見慣れている操作感に合わせたほうが誤解が少ないということです。


ただし、クラウドの絵を使うとややこしくなる

ここで問題になるのが、クラウドのアイコンです。

たとえばクラウドの絵に矢印を重ねると、

  • クラウドの中に入る
  • クラウドの中から出る

という見え方が強くなります。

すると、ユーザーによってはこう感じます。

  • クラウドに入れるなら export では?
  • クラウドから持ってくるなら import では?

これは、クラウドが「保存先」として解釈されるためです。

つまり、クラウドアイコンは「どこに向かうか」を強く示しすぎるのです。
そのせいで、export / import の用語とぶつかることがあります。


この問題を避ける方法

1. アイコンだけで伝えようとしない

一番大事なのはこれです。

export / import は、アイコン単体だと誤解されやすい言葉です。

なので、可能なら必ずラベルを添えます。

例:

  • インポート
  • エクスポート
  • CSVを読み込む
  • CSVを書き出す
  • アップロード
  • ダウンロード

特に業務システムでは、
用語の正しさより、操作内容が一瞬でわかることが重要です。


2. クラウドより「トレイ」のほうが誤解が少ないこともある

クラウドは便利な記号ですが、意味が広すぎます。

  • オンライン保存
  • サーバー
  • 同期
  • バックアップ
  • 配信基盤

など、さまざまな意味を持ってしまいます。

そのため、単純な入出力を表したいなら、
クラウドではなくトレイ型の upload / download アイコンのほうが分かりやすい場合があります。

たとえば、

  • 上向き矢印 + トレイ = アップロード
  • 下向き矢印 + トレイ = ダウンロード

これは多くのユーザーがすでに見慣れています。


3. 用語を export / import のままにする必要があるか見直す

実はこれもかなり重要です。

エンジニアや管理者向け画面なら export / import で通じますが、
一般ユーザー向けUIでは、次のほうが伝わりやすいことがあります。

  • import → 読み込む
  • export → 書き出す
  • import → アップロード
  • export → ダウンロード

つまり、言葉を翻訳するだけで、アイコン問題そのものが小さくなるのです。


では、「上向き export」は間違いなのか?

間違いとまでは言えません。

たとえば、設計思想として
「このアプリから外部のクラウドへ送る」
という意味を強く持たせるなら、上向き export も理屈は通ります。

ただし問題は、利用者の多数派がそう読まない可能性が高いことです。

UI設計では、作り手の理屈が正しくても、
ユーザーが別の意味に受け取るなら、その設計は強くありません。

なので、

  • 論理的には成立する
  • でも実務上は誤読されやすい

というのが、上向き export に対する現実的な評価です。


実務でおすすめの判断基準

迷ったら、次の順で判断すると整理しやすいです。

1. その画面の利用者は誰か

  • エンジニア向けか
  • 一般ユーザー向けか
  • 社内業務向けか

2. ユーザーは何をしたいのか

  • ファイルを取り込むのか
  • ファイルを持ち出すのか
  • クラウドに保存するのか
  • 手元へダウンロードするのか

3. 世の中の慣習とズレないか

  • 見慣れた upload / download の感覚と逆転していないか
  • 初見で誤読されないか

4. ラベル込みで一瞬で理解できるか

  • アイコンだけで悩ませていないか
  • テキストを付ければ誤解が消えるか

結論

export / import のアイコンに絶対的な正解はありません。
正解を決めるのは、言葉の定義だけではなく、画面の文脈とユーザーの認知です。

ただ、一般的なUIとしては次の組み合わせが最も無難です。

  • import = 上向き
  • export = 下向き

理由はシンプルで、
多くの人が「上向き = アップロード」「下向き = ダウンロード」と認識しているからです。

そして本当に大事なのは、
アイコンの論理的な美しさではなく、ユーザーが迷わず操作できることです。

もしアイコンの向きで議論が起きたら、
それは「どちらが正しいか」を争うより、
“誰目線で、何の操作を表しているのか” を揃えるべきタイミングなのかもしれません。


おわりに

UIの細かい表現は、つい「些細なこと」に見えます。
でも実際には、こういう小さな違和感の積み重ねが使いやすさを左右します。

export / import の矢印、どっち向き問題 もその一つです。

正しさを求めるだけでなく、
利用者にとって自然かどうかで判断する。

これが、実務のUI設計ではかなり重要だと感じます。


参考として一言でまとめると

  • 理屈で見ると、どちらにも説明は付けられる
  • 実務では、export = 下、import = 上 が無難
  • 迷うならアイコンだけに頼らず、文言で補強する

このあたりが落とし所になりそうです。

1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?