これまでなかったアイコンの歴史と知識、ノウハウ、実例、デザインのコツがわかる本。
◆アイコンとは何か、様々な角度から紹介◆
あなたのスマホ画面にもずらりと並ぶアイコン。今、アイコンのデザインは私たちの生活にとても身近な存在です。
アイコンとは、小さなスペースで、素早く意味や機能を伝えられる絵文字のこと。
便利であるとともに、なぜか見ているだけでも楽しく、気になる存在なのではないでしょうか。
本書では、「ピクトグラム」「サイン」「マーク」なども含む幅広い絵文字やビジュアルシンボルをアイコンとして様々な角度から見ていきます。
◆とにかくアイコンデザインがわかる！◆
アイコンとはそもそも何なのか。今使われているアイコンの歴史と成り立ち。バリエーション、さまざまなスタイル、現代のアイコンデザインで使われている表現方法……etc.
著者であるアイコンが大好きなプロのデザイナーが教えてくれる、アイコンをデザインする際の手順と制作のコツも必見です。
これまでなかったアイコンについての見方が変わる保存版の一冊です。
▼こんな人におすすめ
・デザイン好き、アイコン好きな人
・アイコンの背景や歴史に興味がある人
・様々なアイコンのデザインを見たい人
・プロのアイコンデザインの方法が知りたい人
・アイコンデザインで悩むことがある人
▼構成
●chapter1 「アイコン」ってなあに？
●chapter2 「アイコン」を見てみようー歴史編ー
●chapter3 「アイコン」を作ってみよう
●chapter4 「アイコン」のバリエーション
●chapter5 アイコン実例集 13works
▼著者について
米倉 英弘／桑沢デザイン研究所卒業後、道吉デザイン研究室を経て、細山田デザイン事務所入社。『seven（朝日新聞社）』誌、『ロハス・メディカル』誌などの創刊、『山と溪谷』、『Web Creator（エムディエヌコーポレーション）』、『Newton（ニュートンプレス）』などのリニューアルを手がける。雑誌、書籍など紙媒体のエディトリアルデザインを中心に、アートディレクション、デザインを手がけている。
小さなスペースで、素早く意味や機能を伝えられる絵文字、アイコン。そもそもアイコンとはいったい何なのかを、ひも解きます。
エジプトのヒエログリフから、欧州の紋章や日本の家紋、道路標識、パソコンやスマホのアイコンまで。古代から現代への絵文字の歴史をビジュアルたっぷりで紹介します。
アイコンを自分でデザインする際の手順と考え方を紹介します。目的とリサーチ、ラフスケッチから、グリッドやトレースを用いた作り方。知っておきたいブラッシュアップのコツまで。
アイコンのスタイルはさまざま。ひとつのアイコンも、線の太さや塗りの色を変えたり、線を切ったり、シルエットにしてみたり。思わず自分でも作ってみたくなるヒントがいっぱい。
▼chapter1 「アイコン」ってなあに?
私たちが「アイコン」と呼んでいるものは、何でしょう
画面の上の「アイコン」にもいろいろな種類があります
「記号論」という学問の中では、「アイコン」をこんな風に位置付けています
よく使われる言葉「ピクトグラム」と、「アイコン」はどう違うの？
私たちは、毎日「アイコン」的なものに囲まれて生活しています
素早く、意味や機能を伝えることができる
小さなスペースの中で、たくさんの情報を入れることができる
絵＋言葉で、覚えやすい、思い出しやすい
生まれ育った地域で話される言語を超えて、意味を伝えることができる
私たちは、アイコンを「見て」いるのでしょうか、「読んで」いるのでしょうか
▼chapter2 「アイコン」を見てみよう－歴史編－
人類は、文字よりはるか以前から「絵」や「線」を描いていました
洞窟に描かれていたのは、「絵」だけでは、ありませんでした
岩に描かれた絵には昔からアイコン的な表現がたくさん使われていました
世界最大の「アイコン」は、南米大陸にあります
多くの人を魅了するヒエログリフは「アイコン」のご先祖様？
ヒエログリフ以外にも、世界にはたくさんの「アイコン」のような文字がありました
やがて文字が、言葉の音を表すようになると、記号は別の機能を進化させていきました
日本が誇るアイコン、家紋はとってもモダンでクールです
地図記号は、アイコンのパラダイスです
現代につながる「アイコン」の始まりは、交通標識から
統計知識と出会った絵記号は「ピクトグラム」の始まり
「ピクトグラム」東京オリンピックで花開く
「直感的」な反応が求められる自動車のアイコンなどは、意外と古くからあります
今も、交通機関で多く見かけるサインは、1974 年にまとめられました
みんなのためのコンピューターから「アイコン」が誕生しました
コンピューターの画面がカラーになるとアイコンもカラーになりました
直接タッチできるアイコンも90年代から登場しました
インターネットブラウザの登場で、アイコンも大航海時代に入ります
スマートフォンの登場は、「アイコン」の第2 の誕生日になります
そして、みんな平面になった?画面はフラットデザインの世界に
これからのアイコンデザインは、どのように変化していくのでしょう
FF Transit Pict／Poppi／Netto Icons
▼chapter3 「アイコン」を作ってみよう
「アイコン」をデザインしよう アイコンデザインの進め方
step1 目的の確認 ：なぜ、アイコンを使うのか／どこで使うのか／「誰」に見てもらうのか／「何」を伝えたいのか
step2 対象をリサーチしよう：何を描くか決まっている場合／そもそも、何を描けばいいの?
step3 カタチのスタイルを考えよう：スタイルで共有、認識される／繰り返すことでスタイルになる
step4 ラフスケッチは大事：紙の上で、手を動かそう／ここまでのおさらい デザインは行ったり来たり
step5 実際に作ってみよう：
トレースで作ってみる 1／トレースで作ってみる 2
グリッドから作ってみる 1／グリッドから作ってみる 2／グリッドから作ってみる 3／グリッドから作ってみる 4
step6 ブラッシュアップのポイント：
白い部分、スキマをチェックしよう／角をチェックしよう／グリッドは目安／全体をもう一度見直しましょう
▼chapter4 「アイコン」のバリエーション
いろいろなデザイン＆アイデア：「アイコン」って、みんな同じ？ いろんなスタイルを試してみよう
フォントファミリーという考え方：「絵文字」ですから、「フォントファミリー」は参考になります
パスの太さを変える：線の太さを変えるだけでも、印象は大きく変わります
角を丸くする：角の処理の違いは、全体の印象に大きな影響を与えます
黒く塗る：ベタ面を主体としたアイコンデザイン
パスを切る：線を閉じない、スキマのあるアイコン
カクカクしてみる：正円＋垂直・水平・45 度の線だけでアイコンを作ってみよう
シルエットにする：シルエット的なアイコンをもっと極めてみる
四角いドットで作ってみる：粗いビットマップアイコンはレトロな雰囲気に
電球やLEDのイメージで」：丸いドットで作るアイコンは電光掲示板風
点線で作ってみる：ラインスタイルのアイコンを点線にしてみる
色をプラス1：アイコンの一部に、ピンポイントで色をつける
色をプラス2：アイコンの一部に、同じ色とカタチを足し繰り返す
色をプラス3：黒以外の2 色の配色でアイコンを彩ってみよう
アイソメ変形：アイコンの1面を斜めに変形してみる
立体にする 1：上から俯瞰して見たアイコンを作ってみる
立体にする 2：アイコンに様々な厚みをつけて奥行きを出してみる
手描き風 1：アイコンの線を手描き風にしてみる
手描き風 2：アイコンの描線を鉛筆で描いたようにしてみる
グラデーション：グラデーションでアレンジしてみる
変化、強調をプラス：アイコンの要素の一部を光らせてみる
一部をぼかす：見える? 見えない? アイコンの一部をぼかしてみよう
ユーモアは大事：アイコンに、何か足したり引いたりしてみる
パズルをモチーフに：シンプルなパーツを組み合わせて作る
▼chapter5 13works アイコン実例集
▼column
パソコン画面での衝撃はゴミ箱から始まった!? －ゴミ箱アイコンの歴史－
アイコンは言語の違いを乗り越えられるか!?
アイコンの歴史を振り返ってみよう－アイコン年表－
パソコンのアイコンの歴史をまとめたサイト
海外で出会ったアイコン・ピクトグラム
特別なアイコン、矢印と風景アイコン
「絵文字」の歴史－絵文字もアイコンの仲間？－
公衆衛生とアイコンデザイン
▼technique アイコン作りで使いこなしたい2つのツール
－「ライブコーナー」「パスファインダー」－
▼デザイン書コーナーには置いていないお勧め書籍
【法人・教育機関のお客様へ】新年度の大口注文・お見積りなど、お気軽にご相談ください
デザインやコーディングなど、Webデザインに役立つスキルが身につく書籍を揃えました
テキスト生成、画像生成、動画生成など、生成AI活用のスキルが身につく本をご紹介
新社会人の役に立つスキルが身につく本。ビジネスパーソンとしてスタートダッシュを切ろう！
小学校から必修化！人気の『ルビィのぼうけん』ほかプログラミング教育の本はこちら
開発・ビジネス・マーケティング・EC運営・営業支援など、幅広いジャンルの講座を開催
