何気なく使っているアイコンができるまで - Web道場

アイコンの特徴を知り、あらゆるリソースを節約しよう

Transcript

1. web-dojo #1 何気なく使っている アイコンができるまで アイコンの特徴を知り、あらゆるリソースを節約しよう 2025年7月11日 @timdaik © Web道場
2. 前半 後半 目次 勉強会について 目的 方向性 アイスブレイク アイコンとは 定義 目的と特徴 歴史 アイコンの作り方 フロー・テクニックの紹介 使用時の注意点 まとめ
3. 勉強会について Web道場の進め方
4. 勉強会の目的 「独学できるようになるまでの学習期間をサポートする」 いちいち調べるのはもったいない！！ 体系（技術の関連性） 基礎知識 < 基礎知識の不足 専門用語が分からない...
5. 勉強会の方向性 ボリューミー、 きつい ガチガチの講義、集中講座 この勉強会 Web開催の勉強会、 ワークショップ 軽め、 やさしい
6. アイスブレイク ゆっくり始めましょう
7. アイコンクイズ 第1問
8. アイコンクイズ 第1問 電話(を掛ける、着信)
9. アイコンクイズ 第2問
10. アイコンクイズ 第2問 気球
11. アイコンクイズ 第3問
12. アイコンクイズ 第3問 ハイウェイ・高速道路
13. アイコンとは そもそもアイコンって何だっけ？
14. アイコンの定義 記号論という学問ではアイコンは次のように分類される SYMBOL 象徴記号 SYMBOL: そうと決めたなら対象を表す e.g. 文字「A」がリンゴを表す ICON: 視覚的に類似している対象を表す e.g. リンゴアイコンをリンゴを表す ICON 類似記号 INDEX: 対象を間接的に表す e.g. リンゴアイコンがフルーツ・青果店を表す INDEX 指標記号
15. アイコンの目的・特徴 ずばり「節約」 脳のリソースを節約できる 表現スペースを節約できる
16. アイコンの目的・特徴 脳のリソースを節約できる 「百聞は一見に如かず」 文字よりも直感的に意味や機能を理解することが出来る 脳が視覚的情報の意味を理解するのに13msしかかからない（要出典）
17. アイコンの目的・特徴 表現スペースを節約できる スペースの制約が厳しい場所でこそ効果を発揮する 右の例では使用スペースが段違い → ライトな印象を与えられる マップや駅の案内図によく使われている
18. コンピュータアイコンの始まり 1970年代にコンピュータ上の視覚的な情報を表現するために誕生！ 1984年 Machintoshの登場で一般人に浸透 スマートフォンの普及でアイコンはもっと身近に ~2025まで約50年の歴史しかない！ Xerox Starのアイコンたち
19. アイコンのそれ以前は...? 人類は文字より遥か昔から絵画・図記号を使用していた 世界最大のアイコン：ナスカの地上絵 ヒエログリフ：実は表音文字だった。 → シンボルかも ヒエログリフ ラスコー洞窟の壁画 ナスカの地上絵：ハチドリ
20. アイコンの作り方 アイコンはいかにして作られるのか？
21. 主な6つの工程 目的を再確認 対象をリサーチ カタチのスタイル ラフスケッチ デジタル化 ブラッシュアップ この4サイクルを回せ！
22. 4サイクルを回していく 目的を確認する why where who what 対象のリサーチ
23. 使用時の注意点 アイコンの正しい使い方
24. フィーリングで使わない
25. アイコンをタップしやすくする アイコンのサイズを大きくする アイコンの`padding`を大きく取る Googleでは、タッチターゲットは少なくとも48×48dpにすることを推奨してます。 48×48dpという大きさは、スクリーンの大きさに関わらず、だいたい９㎜のサイズになります。 → タッチターゲットのサイズは最低1cmほどは確保しておくと良い
26. まとめ お疲れさまでした。
27. 参考書籍 「アイコンデザインのひみつ」 米倉 英弘 著