TechAcademy（テックアカデミー） UX/UIデザインコース スマートフォンアプリ開発 アプリデザイン 【厳選！】アプリ開発の参考に！おしゃれなアイコンやロゴまとめ10選
icon
icon
アプリデザイン

【厳選！】アプリ開発の参考に！おしゃれなアイコンやロゴまとめ10選

アプリ開発に役立つアイコンやロゴをまとめているサイトを紹介します！どのアプリにも使えるように珍しいアイコンも多くとてもおしゃれです。今回紹介しているものは、ほとんど無料で使えますので、ぜひ試してみましょう。

テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社　調査期間：2021年8月12日～8月16日　 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名　 調査手法：インターネット調査

アプリを開発し、リリースさせるとなると必ず必要になってくるものが「アイコン」です。人に使ってもらうアプリであれば、見た目の心地よさは重要な要因になってきます。特にアイコンは、スマホのトップ画面に表示されるものです。

最近では、海外のデザイナーが作成したフリーで使えるアイコンの素材も多いので、ぜひチェックしておきましょう。

具体的にXcodeを使ってアイコンを編集する場合は、XcodeでiPhoneアプリのアイコン画像を変える方法をご覧ください。

 

なお本記事は、TechAcademyのUI/UXデザインオンラインブートキャンプの内容をもとに紹介しています。

 

1. Icon Drop

スクリーンショット 2016-04-06 16.47.20

iPhone/iPadアプリのおしゃれなアイコンをまとめているサイトです。普段から使っているアプリでもアイコンのデザインを細かく見る人は少ないでしょう。自分でアイコンを作成する上でも役に立つサイトなので、ぜひ参考にしてみてください。

Icon Drop

 

2. Instant Logo Search

スクリーンショット 2016-04-06 17.00.48

有名企業のロゴを検索、ダウンロードできる便利サイトです。ロゴは、アプリの中でどのページにも出てくるほど重要なものです。個人で開発するアプリであれば、ロゴを発注するほどお金はかけられません。とはいえ、初めてロゴを作る人からしたら難しいものです。

海外のサイトなので、海外のロゴが多いですがロゴ作成で勉強になりますね。

Instant Logo Search

 

[PR] UI/UXデザインで挫折しない学習方法を動画で公開中

3. 60 Vector Line Icons

スクリーンショット 2016-04-06 16.48.19

ここからはDribbbleなどに個人で挙げているものを紹介していきます。

天気や家具など日常的に使っているものを素材にしたアイコンが多くあります。

60 Vector Line Icons

 

4. Free Line Business Icon

スクリーンショット 2016-04-06 17.26.47

ビジネス向けのアプリに活用できるアイコンが多いです。シンプルなものが多いですが、ニュアンスは的を射てる感じがしますね。自分で一から作ろうとすると大変なので、参考にしてみてください。

Free Line Business Icon

 

5. Chic Female Icons

スクリーンショット 2016-04-06 16.50.24

女性のファッションに関するアイコンをまとめています。丸みを帯びたアイコンが多く柔らかい印象を与えるでしょう。こういった細かい部分に関しては女性の方が敏感です。よりアプリを使っていて心地よいと思ってもらうためには、機能や画面遷移だけでなくアイコンなどにも気を配ることが大事でしょう。

Chic Female Icons

 

6. Tourism Icon Pack

スクリーンショット 2016-04-06 16.50.53

こちらは旅行に関するアイコンをまとめています。訪日外国人も増えてきていて、外国人へのサービス提供も活発化しています。言葉で示すよりもこういったアイコンで表現した方がユーザーも分かりやすいでしょう。

数も多いので、旅行系のアプリを作ろうと思っている人はぜひ参考にしてみてください。

Tourism Icon Pack

 

1時間でできる無料体験！

7. 450 Simple Line Icons

スクリーンショット 2016-04-06 16.51.23

記号を表すようなシンプルなアイコンをまとめています。位置情報や電波のマークなどあまり目にはつかないものかもしれませんが、細部にまでこだわりたい人にはおすすめでしょう。

友達にも自慢できるアプリが完成するはずです！

450 Simple Line Icons

 

8. Hexagon Android Icon Set

スクリーンショット 2016-04-06 16.52.01

すでにあるアプリのアイコンをポリゴン風にしているサイトです。なかなか自分では作れないほどクオリティの高いものが揃っています。こういったのを参考に自分オリジナルのアイコンを作ってみても面白いと思います。

Hexagon Android Icon Set

 

9. Card Icons 2.0 Free

スクリーンショット 2016-04-06 16.52.20

クレジットカードに関するアイコンが並べられています。特におしゃれというものは無いかもしれませんが、アプリ内で決済システムを利用する場合はかならず必要になってくるでしょう。Webサイトでも利用できるので、とても実用的ですね。

Card Icons 2.0 Free

 

10. 3000 icons for iOS9

スクリーンショット 2016-04-06 16.52.44

このサイトのみ有料ですが、量・質ともにとてもクオリティが高いので紹介しています。

3000個という非常に多くのアイコンを利用することができます。また、iOS9と最新のバージョンに合わせて利用できるようになっているので、iPhoneアプリを開発したいという人はぜひ使ってみてください。

これ1つで十分と言えるほどアイコンの種類は揃っているでしょう。

3000 icons for iOS9

 

いかがだったでしょうか。

一部有料のサイトもありましたが、無料とは思えないクオリティのアイコンを使用することができます。アプリ開発する中で用意されているオブジェクトだけでは不十分に感じることがあるでしょう。

アプリ自体のアイコンもとても重要ですし、アプリ内で表示されているアイコンも気を配る必要があります。どこまで拘っても正解が出るものではありませんが、パッと見て「良い！」と思ってもらうために素敵なアイコンを選んでみてください。

[お知らせ]TechAcademyでは初心者でもUI/UXデザインができるようになるUI/UXデザインオンラインブートキャンプを開催しています。現役UI/UXデザイナーのサポートで学びたい場合はご参加ください。

記事を検索

関連するキーワード

関連する記事

「Sketch vs. Figma」デザインツールとして優れているのはどちらか

本稿は、Smashing Magazineのブログ記事を了解を得て日本語翻訳し掲載した記事になります。 本記事は、WebデザイナーであるChristian...
アプリデザイン

ほとんどのデザイナーが気付いていない「UXの4つの間違い」とは

本稿は、Webdesigner Depotのブログ記事を了解を得て日本語翻訳し掲載した記事になります。本記事は、HooktoWin.comの共同設立者であるAn...
アプリデザイン

UIデザインの作成ツール！誰でも分かるSketchの使い方【初心者向け】

アプリのUIデザインなどを作る上で有名なツール「Sketch」 デザイナーの方でSketchを使っている人は多いでしょう。元からあるツールや機能が多くUI...
アプリデザイン

デザイナーなら必見！どんな作業にも便利なSketch用プラグイン12選

本稿は、WebDesignerDepotのブログ記事を許可を得て日本語翻訳し掲載した記事になります。 本記事は、ライターでありUXデザイナーでもあるJak...
アプリデザイン

【今さら聞けない！】UI/UXデザインの違いとその学習方法とは！

スマートフォンが普及してから、主にアプリの開発において「UI/UX」というキーワードが非常に重要視されています。UIデザイナーやUXデザイナーといった職も生まれ...
アプリデザイン

【未来のUIデザイナーへ！】初心者のためのプロトタイピングガイド

本稿は、本稿は、Web Designerdepotのブログ記事を、Web Designerdepotより了解を得て日本語翻訳し掲載した記事になります。 &...
アプリデザイン

あわせてよく読まれている記事

【あの有名アプリから学ぶ！】アプリのアイコンデザインを改善する3つの施策

本稿は、Babich.bizのブログ記事を了解を得て日本語翻訳し掲載した記事になります。 本記事は、Nick Babich氏によって投稿されました。   全てのアプリには、アプリストアとホーム画面の両方においてユーザーの注目を集めることができる、美しくて記憶に残りやすいアイコンが必要です。それと同時に、アイコンはユーザーにとって瞬時に識別しやすいデザインにするべきです。 完璧な美しさを備えた、ユーザーにとって分かりやすいアイコンをデザインするために必要なことは何でしょうか？それほど難しいことではありません。本記事においては、そのための3つの施策をご紹介します。   1. 識別しやすいアイコンをデザインする アイコンは何よりもまず意味を伝えることができなければなりません。ユーザーにアイコンの意味を考えさせるデザインであってはならないのです。 アイコンは、アプリの目的をユーザーに一見で理解してもらうことができる最初のチャンスとなります。アイコンをデザインするときには、次のことを心に留めておいてください。 アイコンは、比喩による連想効果によってアイデアを伝える媒体であり、ユーザーはアイコンから特定の動作を連想するものです。ユーザーに意味を瞬時に伝えることができなければ、アイコンは上手く機能しているとはいえません。 そのため、アイコンを分かりやすくて直感的なデザインにすることが不可欠なのです。   抽象的なアイコンは上手く機能しないことがほとんどであるため、使うのは控えましょう。 ユーザーは、抽象的なアイコンの意味を経験から推測することはできません。アプリ「The Game Center（ゲームセンター）」のアイコンはこの問題の一例です。カラフルで透明ガラスのようなデザインのアイコンは、デザイン自体は良いものの、アイコンの意味を伝えるのは難しいでしょう。 アプリ「The Game Center」のアイコンは何を表しているように見えますか？ ゲームに関連した意味があるように見えますか？   ユーザーにとって識別しやすいアイコンを使用する方が確実です。またアイコンの中には、「家」、「印刷」、「ガラス用品」、「封筒」などほとんど世界共通で同じ意味を持つものもあります。 たとえば、Gmailのアプリのアイコンには「封筒」が使われていますが、世界共通で「封筒」は「メール」の意味として伝わりやすいです。 アイコンの「封筒」そのものが「メール」の意味を伝えています。   2. ミニマリズムを追求する アプリの本質をよく捉えていてそれをシンプルな形で表現できるアイコンをデザインしましょう。アイコンにとって本質的ではないその他の余分なディテールは全て省略します。 ほとんどのデザイナーは、アプリのアイコンを立派に見せたいと思う傾向があります。しかし時としてアイコンのデザインに多くを詰め込み、その結果アイコンは詳細を作り込み過ぎたデザインとなることがあります。 このような過度に詳細なデザインはかえってユーザーにとって理解の妨げとなり、UXにも影響します。   アプリ名の繰り返し、「見る（Watch）」「プレイする（Play）」などのアプリの使い方についての指示、「無料」という文字だけのプロモーション情報など、アプリにとって本質的ではない言葉はアイコンに表示するべきではありません。 アプリ名はホーム画面上でアプリのすぐ下に表示されるため、アイコンで繰り返して表示する必要はありません。   詳細な画像は小さなサイズでは見にくいため、アイコンのデザインに含めないようにしましょう。 写真の画像やスクリーンショットは使用しないこと   透視投影による3Dデザインはアイコンに使用するべきではありません。 透視投影による3Dデザイン、ドロップシャドウを加えるとアイコンは識別しづらくなります。   アイコンを分かりやすく直感的なデザインにするためには、詳細のバランスを図ることも重要です。 アイコンに具体的なオブジェクトを使うときには、その種のオブジェクト全てに共通する要素のみをデザインに反映して、その他の要素は省略します。 瞬時にユーザーの注目を集めて、ユーザーがアプリを容易に識別できるような「中心点」をアイコンの中に作ります。 良い例：アイコンが「天気」を意味することをユーザーに伝えるために必要な要素は、太陽と雲だけです。   [PR] UI/UXデザインで挫折しない学習方法を動画で公開中3. 異なる背景上でアイコンをテストする アイコンはホーム画面の背景上で見やすいデザインにしましょう。 識別しやすくミニマリスズムを追求したアイコンをデザインしただけでは、全てのプロセスを完成したことにはなりません。他のUIと同様に、設計後のテストが必須です。 ユーザーがホーム画面の壁紙にどのようなものを選択するかは予測不可能であるため、予め異なる背景上でアイコンをテストすることが必要です。   アイコンが背景と混同するようなデザインにしてはいけません。次の例では「Stocks」というアイコンは暗い色の背景をバックにすると識別が困難です。 ユーザーがアイコンを探すのに苦労するようなデザインにしないこと   アイコンが背景と同化するようなデザインにしてはいけません。――透明なアイコンを使用するのは避けて、不透明であることを確認しましょう。 透明なアイコンを使用するのは避けましょう。 また、端末の動きに合わせて背景が動く機能を備えたデバイス上でもアイコンをテストしてください。   結論 今、あなたのアプリを完璧に表現することができる美しく魅力的なアイコンをデザインするために時間をかけてください。   TechAcademyでは初心者でもUI/UXデザインができるようになるUI/UXデザインオンラインブートキャンプを開催しています。 現役のUI/UXデザイナーがパーソナルメンターとして受講生に1人ずつつき、マンツーマンのメンタリングで学習をサポートし、最短4週間でUI/UXデザインを習得することが可能です。
アプリデザイン

Androidアプリのアイコン画像を変更する方法【初心者向け】

Androidアプリの顔とも言えるアイコン。Google Playストアでも、アイコンはとても目立つ位置に表示され、ダウンロード数に影響が出るとも言われています。 そこで、今回はAndroidアプリのアイコン画像をEclipseから変更する方法をご紹介します。   本記事はTechAcademyのAndroidアプリ開発オンラインブートキャンプの内容をもとに解説しています。   大石ゆかり 田島メンター！！Androidアプリのアイコンってどうやって変更するんですか？ 田島悠介 アイコンもEclipseでできるよ。 大石ゆかり あ、そうなんですね！教えてください〜♪   目次 本記事は下記の流れでご紹介します。 アイコン画像を用意する 作成したアイコンをプロジェクト内に保存 マニフェストファイルを変更する 動作確認 アイコン画像を用意する まずは、Androidアプリのアイコンに使う画像を用意します。 使用できる画像は、PMGやJPG、GIFですが、PNGを使われることが多いです。また、画像のサイズは、もとの大きさに関係なく適当に作成しても自動でリサイズをして表示してくれます。 解像度に応じて表示させるアイコンを作成したいという場合は、以下のサイズで作成してください。 低解像度(mdpi)　：　48px 中解像度(hdpi)　：　72px 高解像度(xhdpi)　：　96px 超高解像度(xxhdpi)　：　148px また、Google Playストアでリリースしたいと言う場合は、512pxのPNG画像が必要になります。   今回は例として、このような単純な画像を使ってアイコンを変更をします。     [PR] UI/UXデザインで挫折しない学習方法を動画で公開中作成したアイコンをプロジェクト内に保存 画像が用意できたら、Eclipseを開きましょう。 [res]フォルダ内に[drawable]フォルダがなければ作成します。     続いて、作成[drawable]フォルダにアイコンを保存します。 この際、解像度に応じてアイコンを作成した場合は、それぞれの対応するフォルダに保存する必要があります。 また、変更前のアイコンと同じファイル名の場合は、頭に[drawable]が付くフォルダ内の変更前のアイコン画像をすべて削除するようにしてください。     マニフェストファイルを変更する 画像を保存しただけでは、反映されないためマニフェストファイルを変更します。 変更するには、AndroidManifest.xmlを開きます。「android:icon」で始まる行を探し、「@drawable/」の後ろをアイコンにしたい画像のファイル名に変更します。 このとき、拡張子は必要ありません。 これで変更は完了です。     動作確認 最後に、Androidアプリのエミュレーターを使って新しいアイコンが表示されるか動作確認をしてみましょう。 アプリの一覧で自分がセットした画像が表示されていれば成功です。   難しい作業ではありませんが、アイコン画像は大事な要素になるので、しっかりと設定するようにしましょう。 アプリが開発できたら、Androidアプリのデバッグも行いましょう。   大石ゆかり こうやってアイコンを変更するんですね！ 田島悠介 うん。Androidは特に機種がたくさんあるから、解像度によってアイコンの大きさをつくっておくことをおすすめするよ。 大石ゆかり はい、わかりました♪   [お知らせ]TechAcademyでは初心者でもオリジナルアプリが作れるAndroidアプリ開発講座(オンラインブートキャンプ)を開催しています。自分でアプリを公開してみたい場合はご参加ください。
Androidアプリ開発

WordPressでアイキャッチ画像を設定する方法【初心者向け】

WordPressでは、記事1つ1つにサムネイル画像（アイキャッチ画像）を設定できます。 ブログの記事冒頭や記事一覧ページに配置されている、一番目を引く画像です。   テックアカデミーマガジンの場合は、このように表示されています。   アイキャッチ画像を設定すると、下記のメリットがあります。 記事の内容がひと目で分かる 記事一覧の画面でわかりやすい 記事のクリック率が上昇する SNSなどでシェアされた時に目立つ   そこで今回は、アイキャッチ画像の設定方法について簡単にご紹介します。 目次1. Icon Drop2. Instant Logo Search3. 60 Vector Line Icons4. Free Line Business Icon5. Chic Female Icons6. Tourism Icon Pack7. 450 Simple Line Icons8. Hexagon Android Icon Set9. Card Icons 2.0 Free10. 3000 icons for iOS9   大石ゆかり 田島メンター！！記事一覧で見た時に記事ごとに画像が表示されていると思うんですけど、あれってどうやって表示するんですか〜？ 田島悠介 アイキャッチ画像のことだね。それなら記事ごとに設定するんだけど・・・ちょっとやってみようか。 大石ゆかり はい、お願いします！   Gutenberg（標準ブロックエディタ）でWordPressのアイキャッチ画像を設定する方法 WordPressバージョン5.0から、標準エディタがブロックエディタ（通称Gutenberg）に変更になっています。 ここでは、ブロックエディタでアイキャッチ画像を設定する方法をご説明します。   【Gutenberg】アイキャッチ画像の設定エリアを表示する Gutenbergでは、アイキャッチ画像は記事投稿画面でデフォルトで表示されています。 アイキャッチ画像の右側の∨マークをクリックすると、∧マークに切り替わり、「アイキャッチ画像の設定」ボタンが表示されます。     【Gutenberg】アイキャッチ画像を設定する 「アイキャッチ画像の設定」ボタンをクリックします。 上部の「ファイルのアップロード」タブをクリックすると、次のような画面が表示されます。   「ファイルの選択」ボタンをクリックして、設定したい画像を選択しアップロードしてください。 アップロードが完了したら、右下に表示される「アイキャッチ画像を設定」のボタンをクリックします。   投稿画面に、設定したアイキャッチ画像が反映されます。 これで設定は完了です。   設定する画像を間違えた場合には、「画像の置換」ボタンをクリックし、選択し直すことができます。 また、「アイキャッチ画像の削除」というテキストリンクをクリックして、設定の削除もできます。 設定は右上の「下書き保存」ボタンをクリックするまで保存されませんのでご注意ください。   旧エディタ（Classic Editor）でWordPressのアイキャッチ画像を設定する方法 WordPressは5.0から、標準のエディタがブロックエディタ（Gutenberg）になりました。 しかし旧バージョンから使用している方は、いままでの旧エディタ（Classic Editor）のほうが使い慣れている方も多いでしょう。 Classic Editorはプラグインとして追加することで、切り替えが可能です。 ここでは旧エディタ（Classic Editor）でアイキャッチ画像を設定する方法をご説明します。 アイキャッチ画像は記事投稿画面で設定できるのですが、デフォルトの記事投稿場面で表示されていない場合には、以下の手順で表示させてみましょう。   投稿編集画面で、右上に表示される「表示オプション▼」というボタンをクリックします。   すると、投稿画面で表示されるオプションリストが表示されます。 その中から「アイキャッチ画像」を探し、チェックボックスにチェックしましょう。   すると、投稿画面の右サイドに、「アイキャッチ画像」のエリアができます。 これでアイキャッチ画像追加の準備はできました。   【旧エディタ】アイキャッチ画像を設定する アイキャッチ画像設定エリアの、「アイキャッチ画像を設定」というテキストリンクをクリックします。 すると、画像追加画面が立ち上がるので、設定したい画像を選択しアップロードしてください。   アップロードが完了したら、右下に表示される「アイキャッチ画像を設定」のボタンをクリックします。   投稿画面に、設定したアイキャッチ画像が反映されます。 間違ってアップロードしてしまった場合は、「アイキャッチ画像を削除」というテキストリンクをクリックし、またやり直せば大丈夫です。   記事を公開し、どのように反映されているかを見てみましょう。 これでアイキャッチ画像の設定は完了です。   [PR] UI/UXデザインで挫折しない学習方法を動画で公開中WordPressのアイキャッチ画像が表示されないときの対処法とは 大石ゆかり 田島メンター！！アイキャッチ画像を設定したんですけど、表示されません…！ 田島悠介 原因はいくつかあるから順番に対処法みていこうか。 大石ゆかり お願いします！   ここではWordPressのアイキャッチ画像が表示されないときの対処法をご説明します。 前述した設定の通りアイキャッチ画像が保存されているのであれば、テーマの設定にアイキャッチ画像の機能を有効化する関数が設定されていない場合が考えられます。 オリジナルで作成したテーマなどを利用している場合などにも、functions.phpの設定の有無でアイキャッチ画像は表示されない場合があります。   functions.php /** * アイキャッチ画像の機能を有効化 */ add_theme_support( 'post-thumbnails' ); いままで表示されていたアイキャッチ画像が表示されなくなったような場合は、プラグインの競合が起きている場合がほとんどです。 このような場合は、有効化しているプラグインを順番に無効化していきます。 これにより、影響をおよぼしているプラグインを特定できます。 プラグインが特定できたら、しばらくそのプラグインを無効化して、次のバージョンアップなどで問題が修正されるのを待つのが方法の1つです。 または代替できるようなプラグインを探して、そちらに差し替えるなどの方法があります。 最後にもう一度各投稿記事を開いて、アイキャッチ画像が正しく設定できているかも確認してみましょう。   WordPressのアイキャッチ画像の最適なサイズとは アイキャッチ画像のサイズは、デフォルトでは「設定」の「メディア設定」の数値で決まります。   画像はWordPressにアップロードすると、この設定によりメディアライブラリにオリジナルサイズを加えて指定されたサイズで登録されます。 縦横比が上記の設定と違う場合は、以下のように横の長さを基準としてそれぞれの画像サイズで保存されます。 この例では、元の画像は横620pxで縦349pxの画像です。 この場合、メディア設定の大のサイズ指定よりも小さい画像なので、フルサイズはオリジナルのサイズ、中が横300pxを基準として縦横比で縮小したもの、サムネイルは横150pxを基準として中央で正方形にトリミングした画像です。 4番目の例は、「サムネイルを実寸法にトリミングする」のチェックマークをオフにした場合の画像です。 この場合は、サムネイルは同じ縦横比を保ったまま縮小されます。 固定または投稿ページに画像ブロックで配置した画像のサイズは、右側のプルダウンメニューから選択できます。 アイキャッチ画像はSNSのOGP画像としても使われることも多いので、最適なサイズは横1200px × 縦630pxとされています。 様々なSNSでの画像の表示を確認したい場合は、以下のサイトなどを利用すると便利です。 OGP画像シミュレータ   まとめ：アイキャッチ画像を設定して魅力的なサイトを作ろう 標準のブロックエディタ、旧エディタでのアイキャッチ画像の設定方法、アイキャッチ画像が表示されない場合の対処方法、最適なアイキャッチ画像のサイズと設定や確認方法をご紹介しました。 アイキャッチ画像はこのように記事の冒頭に表示されるので、テキストだけよりぐっと見た目が華やかになりましたね。 アイキャッチ画像を適切に設定して、より魅力的なサイトにしていきましょう。   他のカスタマイズ方法として、WordPressのウィジェット編集方法の記事もあります。   大石ゆかり アイキャッチ画像があると、記事のイメージがつかめていいですね♪ 田島悠介 そうだね。　アイキャッチ画像は一覧にすると特に印象に残りやすいから、必ず設定しておいたほうが良いね！ 大石ゆかり はい、分かりました！   WordPressを学習中の方へ これで解説は終了です、お疲れさまでした。 つまずかず「効率的に」学びたい 副業や転職後の「現場で使える」知識やスキルを身につけたい WordPressでのサイト制作を学習していて、このように思ったことはありませんか？ テックアカデミーのWordPressコースでは、第一線で活躍する「プロのエンジニア/Webデザイナー」が教えているので、効率的に実践的なスキルを完全オンラインでしっかり習得できます。 合格率10%の選考を通過した、選ばれたエンジニアの手厚いサポートを受けながら、WordPressを使ったオリジナルサイト構築を学べます。 まずは一度、一週間の無料体験で学習の悩みや今後のキャリアについて話してみて、「現役のプロから教わること」を実感してみてください。 時間がない方、深く知ってから体験してみたい方は、今スグ見られる説明動画から先に視聴することをおすすめします。  
WordPress

最もよく使われるデザインの3大ツールを比較してみた！

本稿は、Designmodeのブログ記事を了解を得て日本語翻訳し掲載した記事になります。本記事は、デザイナー、ライターであるJake Rocheleau氏によって投稿されました。   絶えず拡大し続けるデザインの世界に初めて入った人にとって、この世界は理解しにくいと思えるかもしれません。あまりにも多くのツールやテクニックがあるため、何から始めたらいいか分かりにくいかもしれません。 最も広く使用されているのデザインソフトウェアは、Adobe Photoshop、Adobe Illustrator、Sketchです。 このガイドでは、これらの3大ツールを比較しながら、デザインの一般的なタスクにおける活用方法をご紹介します。どれも優れたツールですが、それぞれ長所と短所があります。タスクごとに最適なツールを知っていれば、デザインの学習や作業は、はるかに効率的になると思います。   目次 UIデザイン アイコンのデザイン 写真の編集 グラフィックデザイン デジタルペインティング   UIデザイン インターフェースのデザインは、通常、Webサイトやモバイルアプリを対象としますが、ゲームのUI、インタラクションデザインの画面を対象に含むこともあります。 過去数年においては、PhotoshopがUIデザインにおける第1位のツールでした。Photoshopを使用すれば、ベクター形式のアイコンとテクスチャ素材の背景を組み合わせて、1つのレイアウトを作成することも可能です。   また、本来Photoshopは、画像編集のソフトウェアパッケージ（スイート）ですが、Adobe社によってFireworksの開発終了が宣言されたため、Photoshopの需要は一層高まっていました。 こうした状況で新たに登場したのがSketchです。Sketchのアプリの最初のリリースは、2010年後半のことでした。それ以来、Sketchの学習コミュニティ、無料サイトなどが拡大しています。 Sketchの使い方 現在では、UIデザインツールの覇者はSketchです。Sketchは、WebとモバイルのUIデザインに特化したソフトウェアパッケージです。パタン、テクスチャ素材、ベクター素材などを組み合わせた編集は、Photoshopで行うよりも簡単です。 唯一の短所は、対応OSがMac OS Xのみであるため、Windowsのユーザーは利用できない点です。 UIのデザインにIllustratorを好んで使う人もいますが、機能が不十分に思えます。Illustratorは、インターフェースに求められるピクセルパーフェクトなデザインを実現できるソフトウェアではありません。一方Sketchを使えば、ベクター素材とピクセル単位のデザインを組み合わせて、インターフェースを作ることも可能です。シェイプとベクターの編集、レイヤーの編集もより簡単に行うことができます。   もし、UIデザインのためのソフトウェアを探しているとしたら、Sketchが明らかにベストな選択です。しかし、OSがWindowsの場合にはSketchは選択できないので、Photoshopがベストな選択になります。PhotoshopでもSketchと同じような作業ができますが、Sketchを使った方が、UIデザインのワークフローは円滑に進みます。 現在Photoshopを使っていてSketchに乗り換えようか迷っている人は、「Sketchに乗り換えた理由と気に入っている点」を解説したSagi Shrieber氏による記事などが参考になると思います。 またもし、試しにSketchでデザインの作業をしてみたいという方は、Sketchのサイトで提供されているフリートライアルやチュートリアルを活用することもできます。 Sagi Shrieber氏による記事 Sketchによるヘッダーのデザイン例 Sketchによるログインフォームのデザイン例 Sketchによるニュースレターのデザイン例 Sketchのフリートライアル   [PR] UI/UXデザインで挫折しない学習方法を動画で公開中アイコンのデザイン アイコンのデザインは、ベクター形式で進められることがほとんどです。多くのデザイナーは、まずアイデアを紙に書き出して、次にそれをデザインソフトウェアに取り込むことでトレースします。私の経験からいうと、ペンツールによる直感的な描写が可能なIllustratorが良いと思います。 私はPhotoshopのペンツールもよく使っています。Photoshopは、アイコンをトレースしたり、デザインをマッピングする際に優れたツールとなります。ただし、Photoshopで作成したベクター素材をIllustratorで編集するのは簡単なことではなく、その逆もしかりです。しかしどちらかというと、IllustratorからPhotoshopへ編集を移行する方が、ワークフローはスムーズになると思います。   Illustratorではアイコンの細かな編集が可能で、Photoshopのパスパレット（paths palette）を使うよりも、レイヤーの編集が容易になります。 Sketchにも、アイコンのデザインに使える優れたツールが備わっています。操作性はIllustratorととよく似ていて、オンラインのチュートリアルなどを利用して練習を積めば、基礎を学べると思います。Sketchにおける重要な機能は、シェイプ（shape）を結合するときに使える、結合ボタン（Union button）です。これはちょうどIllustratorにおけるパスファインダー（Pathfinder）と似ていて、リアルな質感のアイコンをデザインするには欠かせないツールです。 ベクター形式のアイコンのデザインに関しては、Illustratorがベストな選択です。 しかし、Sketchも基本的な機能を備えていて、アイコンのデザインに使うには優れたツールでしょう。   写真の編集 Adobe Photoshopが特に優れているのは、写真の編集です。独自のアイデアからフォトバッシュ（photobashing：複数の写真や画像を組み合わせて、ペイントなどを加え、新たな1つの画像を作成するデザイン技法）をするとしても、古い写真をレタッチするとしても、Photoshop1つあれば全てのデザイン作業を完了できます。 Photoshopには、赤目の修正機能、部分編集に使える複製（duplicate）＆パッチツール、カラーやテクスチャのブレンドモード、選択したサイズで画像をエクスポートする機能など、豊富なツールが備わっています。 このような機能に関しては、IllustratorやSketchは到底敵いません。 Photoshopの代替ツールとして、AffinityやGIMPなどもありますが、Photoshopと同じようなワークフローを実現できるツールはほぼないといえます。 タスクによっては、アイコンのデザインはPhotoshopで行い、インターフェースのデザインはIllustratorで行うなど、複数のツールを切り替えて使うのが良い場合もあります。しかし写真編集に関しては、IllustratorやSketchを開く必要はありません（Photoshopだけで十分です）。 Photoshopは写真編集のソフトウェアパッケージとして25年の歴史があり、ベストなツールとして選ばれ続ける理由があるのです。   グラフィックデザイン 一言に「グラフィックデザイン」といっても、様々なタスクが含まれます。アイコンのデザインも、グラフィックデザインの領域に含まれるといえますし、アイデンティティデザイン（identity design：視覚的なブランディングデザインなど）、ロゴのデザイン、印刷物のデザインなども同様です。 Photoshopは、グラフィックデザインに関しても優れた機能を備えています。写真の編集や加工については基本的に何でもできます。またテキストの編集ツールも備えています。もっとも個人的な意見としては、タイポグラフィをカスタマイズするには、Illustratorの方が優れていると思いますが。   Sketchは、グラフィックデザインに関してはまずまずのツールです。しかし、ほとんどの人はSketchをインターフェースのデザインに使っているため、Web上のSketchのチュートリアルも、Webとモバイルのデザインに焦点を当てたものが多いです。 これらの特定のタスク以外では、Sketchはグラフィックデザインに使うにはベストなツールではありません。 グラフィックデザインに関してはIllustratorが一番だと私は思います。ポスター、ステッカー、パンフレット、さらにはTシャツのデザインに至るまで広範囲に使えます。またどのようなプロジェクトにおいても、グラフィックの最適なサイズを選択できます。 もっとも、写真加工に関してはPhotoshopも大いに役に立ちます。雑誌の中の広告のデザインなどでは、写真加工がよく使われています。 しかし、その他についてはIllustratorの方が優れています。 IllustratorはPhotoshopよりも長い歴史があります。PSファイルとAIファイルを相互に変換したときにも、Illustratorほどスムーズな編集が可能なソフトは、私は他にはないと思います。   熟練したグラフィックデザイナーになるためには、おそらく両方のソフトウェアを学ぶ必要があります。クリエイティブなプロジェクトにおいてそれぞれ、異なる目的、異なる段階で役に立ちます。いずれにしても、Sketchはグラフィックデザインにおいてはベストなツールではないと思われます。 また、印刷物のデザインに使うツールとして、もう1つおすすめなのがAdobe InDesignです。Adobe製品なので、Photoshop、Illustrator、InDesign間でファイルを移動するときにも、インポートの設定に困ることもありません。   デジタルペインティング（デジタル絵画） デザイナーが、アナログ媒体からデジタル媒体へとツールを移行するときには、2つの問題に直面します。：「どのタブレットを購入するか」と「どのソフトウェアを使うか」です。 デジタルペインティングには、ペイントツールSAI、Kritaなどのツールを使うこともできます。しかしほとんどの人は、Photoshopを選択するでしょう。またもし、IllustratorとSketchを比較するとしたら、どちらも遜色ないと思います。   Photoshopには、ピクセル単位のデザインを可能とするペイントツールとしてブラシが備わっています。ブラシを設定からカスタマイズすれば、滑らかな線を描いたり、筆圧感知をコントロールすることも可能です。 また、Photoshopは数多くの描画タブレットと互換性があります。Coolorus（カラーホイールのプラグイン）などのプラグインを追加すれば、Photoshopを使ったデジタルペインティングのワークフローを、よりスムーズに進めることができます。 Illustratorがデジタルペインティングにおいて良い選択とはいえない理由は、主にベクター形式で編集するツールであるからです。ベクター形式は、デジタルペインティングにおける画像の繊細な描写などに使う形式としては、適していません。 Photoshopのブラシのツールを利用すれば、ピクセル単位のデザインが可能であるため、デジタルアートにも最適なツールです。   まとめ これら3つのソフトウェアはどれも、それぞれが得意とするタスクで役に立ちます。 デザインのワークフローはデザイナーによって異なるため、一般化するのは難しいですが、私としては次のようにまとめられると思います。 Adobe Photoshop：写真加工とデジタルペインティングに最適なツール Adobe Illustrator：アイコンのデザインとグラフィックデザインに最適なツール Sketch：全てのUI/UXのデザインと一部のアイコンのデザインに最適なツール これらのソフトウェアには、それぞれにニッチ市場があり、各分野の専門家から過剰に称賛されることもあります。これらの中で、どれか1つのソフトウェアが他よりも絶対的に優れているというわけではありませんが、それぞれが得意とするタスクにおいては他を凌駕します。 あなたがクリエイティブな分野に進出したり、デザインの新たな領域に挑戦するときには、ぜひこのことを覚えておいてください。 [お知らせ]TechAcademyでは初心者でも最短4週間でオリジナルWebサイトを公開できるWebデザインオンラインブートキャンプを開催しています。デザインのスキルを磨きたい方はぜひご覧ください。
Webデザイン

マイクロインタラクションで気をつけたい5つのポイント

本稿は、Free Code Campのブログ記事を了解を得て日本語翻訳し掲載した記事になります。 本記事は、UX in Motionの設立者で、ワークショップを主宰しているIssara Willenskomer氏によって投稿されました。   この記事では、私が一週間をかけて数多くのUIアニメーションを観察した末に気づいた、マイクロインタラクションで気をつけたい5つのポイントを解説します。 最初にマイクロインタラクションとは何でしょう？これについては明快な説明を与えています。 「マイクロインタラクションとは、デバイス上でひとつのタスクだけをこなす最小単位の要素」   1. デザイナーとしてのエゴを抑制すること デザイナーであれば、称賛を受けて自分のエゴを満たしたいと思うかもしれません。しかし質の高いマイクロインタラクションをデザインするには、作業中はデザイナーとしてのエゴを忘れることが重要です。 次の例は、Sergey Valiukh氏のデザインしたアニメーションです。アニメーションは新しいアイデアが上手く機能するか実験するには絶好の土台ですが、彼の実験したアイデアは失敗しています（彼はフォント、レイアウト、配色、アニメーションにおいて非常に優れたデザイナーですが）。 このアニメーションの失敗の原因を分析します。 第一に、画像の3Dフリップ機能です。これは全く不必要で有害でさえあります。マイクロインタラクションにおいては、それを省いたらデザインがシンプルになるような無駄な部分は、省くことが正解なのです。 第二に、画像はフィード表示において切り取りされますが、編集ビューにおいて全画面表示になります。これは明らかに機能的ではありません。 第三に、上のナビゲーションメニューのアイコンは、画面遷移に時間が長くかかり過ぎです。最初は素晴らしいデザインに見えるかもしれませんが、そのうち長い待ち時間にうんざりするでしょう。マイクロインタラクションは迅速であることも重要で、最大でも300～400ミリ秒の時間内にスムーズに実行されるべきです。 最後に、画面下の2つのアイコンは表示されるタイミングが異なります。これは紛らわしく余分な設計であり、かえってユーザーの認知的負荷を増やします。   結論 この例のようなアニメーションを設計することには大きな価値があります。しかし、機能的なものとそうでないものを区別し、削るべき無駄な部分を判断して、エゴを忘れ、シンプルでユーザビリティに優れることが重要です。 これはデザイナーが楽しくて美しい詳細を設計してはいけないということではありませんが、デザイナーは自分にとって満足できる細部のデザインが、余分な部分にならないよう注意するべきです。   実践のポイント：削るべき余分なところを見極めましょう。 あなたの設計した詳細なアニメーションは、シンプルでユーザー体験を高める効果のあるものですか？それとも逆にユーザーの認知的負荷を増やすものですか？   2. クリエイティブなデザインを作るためにストーリー性を犠牲にしない ユーザーエクスペリエンスにおいては、さまざまな理由からストーリー性が重要です。 1つには、ユーザーの予想、継続性、認知的負荷と関係するという理由からです。また、私たちの脳が情報の意味を理解し整理するプロセスと関係するからでもあります。   次の例では、Srikant Shettyはストーリー性を台無しにしています（同氏は非常に優れたアニメーター、デザイナーですが）。その原因を分析してみましょう。 まず最初に、フォームの奇妙さに気づくと思います。ユーザーは、インライン入力できると予想します。しかし表示されている入力フォームの行は偽物で、入力できません。 本物の入力フォームはその後ろに隠されています。入力する行をタップすると、隠されていた入力フォームが現れてやっと入力可能になります。 ユーザーが入力フォームを使うときに予想するイメージが阻害されているのです。ユーザーは予想通りにタスクやフローを継続することができず、一度立ち止まって、予想外の状況に対処しなければなりません。   このような誤りは、デザイナーが「クリエイティブ」なデザインを創造しようとするときに生じます。 インタラクションにおけるイメージを維持することよりもクールな効果やテクニックを優先するため、こういったことが起き得ます。その結果インタラクションは不明瞭なものになります。   優れたマイクロインタラクションは、シンプルでフローを備えています。先の例と次の2つの例を比較しましょう。 画像：Andrej Radisic（上） & Matt D. Smith（下） これら2つの例においては、シンプルで的確です。上の例では、行が跳ねるような効果のある要素が使われていますが、基本的なインタラクションモデルに、面白さを追加できるデザインの細部として機能しています。 実践のポイント：シンプルに設計する   [PR] UI/UXデザインで挫折しない学習方法を動画で公開中3. 単一の動きで実装できなければ、実装しない方がいい 私が観察した限り、成功しているマイクロインタラクションは、例外なく単一の統一された動きで構成されています。一方、失敗しているマイクロインタラクションは動きが複雑です。 次の例で、Romain Passelande氏は間違いを犯しています（同氏はDribbbleのサイトでとてもクールなポートフォリオを公開していますが）。原因を分析しましょう。 アニメーションに慣れていない方には分かりにくいかもしれませんが、単一の動きとして統一できるはずの動きが、2つの別々の動きに分けられています。 変形する線 回転するアイコン 線が変形するのが1つ目の動きで、アイコンが回転するのが2つ目の動きです。次の例で並べて比べると違いが分かりやすいです。 左と右のアニメーションは「単一の動き」の法則に反しています。中央のアニメーションだけが、単一の統一された動きで構成されています。シンプルで効率的な動きです。 実践のポイント：マイクロインタラクションは、単一の統一された動きで構成しましょう。   4. 問題はアニメーションではなく、デザインにある UIアニメーションの微妙なニュアンスを研究する人は皆、デザイナーが「静的なデザイン」から「動き」を分離するのは難しいという問題に直面します。 これはもっともなことであり、優れたマイクロインタラクションが継ぎ目のない動きを備えていることにも起因します。   一方、失敗したマイクロインタラクションは非常に目立ちます。 次の図表は、デザインとアニメーションの関係性に関する理論を示したものです。 一般的には、点と矢印のある領域（良いアニメーション×良いデザインの領域）を目標とすることになるでしょう。 この理論を現実に応用してみましょう。   次の例では、デザインをアニメーションから分離する練習を行います。Sam Thibault氏は、あまりクールではないデザインに、優れたアニメーションを加えています（同氏は、Hanndsomeに勤める非常に才能のあるデザイナーですが）。 「このデザインは斬新で優れているのになぜ？」と疑問に思うかもしれません。 たしかにその通りですが、ここで問題としたいのは、「カートに追加（add to cart）」ボタンの扱い方についてです。   この例の場合、悪いデザインをアニメーションによって解決することは不可能です。問題はアニメーションではなく、デザインそのものにあるからです。 「カートに追加」ボタンには、形を変えて画像周辺のガターを占領するという、変形効果が加えられています。この効果は不必要であるだけではなく、「カートに追加」ボタンのUI要素としての重要性を考えれば、ユーザーの認知的負荷を増やします。   映画製作の世界では、セットの問題は脚本に起因すると言われています。悪い脚本は悪い撮影シーンを生み出します。それと同様に、悪いデザインは悪いマイクロインタラクションを生み出すのです。 実践のポイント：アニメーションに頼る前に、まずデザインの意味を考えましょう。   5. 打たないショットは100％外れる このメッセージは、アイスホッケー選手のウェイン・グレツキー氏の名言です。 彼はアイススケートのリンク上で、対戦相手の攻撃を軽快に滑ってかわしながら、ゴールのネットにボールを入れるのを得意としています。この名言は、マイクロインタラクションをデザインするデザイナーについても当てはまります。   ほとんどのデザイナーは300〜400ミリ秒のアニメーションをデザインすることに慣れていないため、デザインの細部を制御することは難しく、それらに隠されたチャンスに気づくことが難しいのです。 比喩で例えるとしたら、これは複雑なジャグリングであり、ボールを見失って落とすのはたやすいことなのです。   Ivan Bjelajac氏による次の例は、デザインの細部で表現できるはずの5つのチャンスを逃しています。 メニューボタンと「戻る」ボタンは、アイコンの変形をシンプルに美しくデザインするチャンスです。しかし、最初のトップページ全体がメニューアイコンのスライド効果で覆われるため、統一感のないデザインになっています。 四角形の黄色い右向き矢印アイコン ――この回転効果、スケール効果は不必要です。この矢印アイコンだけが主張するデザインは奇妙です。コンテンツに合わせた画面遷移にするべきです。 画面遷移において、テキストコンテンツに加えたこのフェードイン・フェードアウト効果は不必要です。一貫して表示したままの方がいいでしょう。 見出しごと左から右にスライドさせていますが、コンテンツだけをスライドさせた方が、よりシンプルに美しくなるでしょう。 メイン画像は、バナー表示されるときに切り取り効果が加えられています。画像はありふれた方法で表示するのではなく、コンテキストに合わせて再構成することが理想です。   細部のデザインに十分な注意が払われた次の例と比較してみましょう。 これほどシンプルで美しいマイクロインタラクションは想像できません。あらゆる手段が講じられ、細部のデザインは完璧です。 実践のポイント：デザインの細部に注意を向けましょう。あらゆる手段を講じましょう。チャンスを逃してはなりません。   結論 あなたにこれまでアニメーションをデザインした経験がないとしても、シンプルな美しいマイクロインタラクションをデザインすることは可能です。大事なコンセプトは次の5つです。 エゴの抑制 ストーリー性 単一の動き アニメーションは万能の解決策ではありません デザインの細部にはチャンスが隠されています   また、TechAcademyでは初心者でも最短4週間でオリジナルWebサイトを公開できるWebデザインオンラインブートキャンプを開催しています。 これからデザイナーとして働きたい、自分で思った通りのデザインを再現したいと思っている方はぜひご覧ください。
Webデザイン

JavaScriptのalertダイアログにアイコンを表示させる方法を現役エンジニアが解説【初心者向け】

JavaScriptのalertダイアログにアイコンを表示させる方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 目次1. Icon Drop2. Instant Logo Search3. 60 Vector Line Icons4. Free Line Business Icon5. Chic Female Icons6. Tourism Icon Pack7. 450 Simple Line Icons8. Hexagon Android Icon Set9. Card Icons 2.0 Free10. 3000 icons for iOS9 そもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まります。   田島悠介 今回は、JavaScriptに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 JavaScriptのalertダイアログにアイコンを表示させる方法について詳しく説明していくね！ 大石ゆかり お願いします！   はじめに ダイアログにアイコンなどの任意の要素を表示させる方法を説明します。 標準のダイアログでは、以下のようにメッセージとボタンしか表示されません。 こちらにアイコンなどの要素を表示することで、「エラー」「警告」「確認」などメッセージ以外でも視覚的にわかりやすくなるというメリットがあります。 今回は、このダイアログを個別に作成して実装する方法を説明します。 ぜひこの機会に、カスタマイズしたダイアログを実装できるようにしましょう。   alertダイアログとは ユーザーに確認をうながす機能のことです。 ブラウザによって見た目に多少差がありますが、JavaScriptでは以下のようにブラウザにメッセージを表示できます。   ・alert：メッセージとOKボタンが表示されます。 alert("メッセージ１rnメッセージ２");   ・confirm：メッセージとOKボタン、キャンセルボタンが表示されます。 confirm("メッセージ１rnメッセージ２");   いずれもメッセージ内で改行したい場合は改行コード(rn)を挿入することで、改行を行うことができます。   [PR] UI/UXデザインで挫折しない学習方法を動画で公開中alertダイアログにアイコンを表示させる方法 ダイアログの表示はブラウザが用意する部品ですので、アイコンの表示や見た目の装飾はできません。 そこでアイコンや独自の装飾を行いたい場合は、独自でダイアログを作成します。 独自にダイアログを作成することで、アイコンの表示やボタンを増やしたり装飾できるようになります。 表示させる方法は以下の通り、dialogタグに囲まれたHTMLをJavaScriptで取得してshowModalという関数を呼び出すだけで表示できます。 <dialog id="任意のID"> <!-- 任意のHTML要素 --> </dialog> let dialogObj = document.getElementById("dialogタグの要素ID"); dialogObj.showModal();   実際に書いてみよう それでは実際に、「確認」の3種類のカスタムダイアログを作成してみましょう。 アイコンはMITライセンスで提供されている以下のサイトのCSSを使って表示します。 css.gg <!-- cssアイコンstyleシート読み込み --> <link href='https://css.gg/bulb.css' rel='stylesheet'> <dialog id='dialog' style="width:400px;">
JavaScript

あなたの目的に合わせて学べるコース

副業したい方

Web制作の力を身につけ
副業までサポート

はじめての副業コース

転職したい方

未経験から16週間で
エンジニアに

エンジニア転職保証コース

スキルアップしたい方

AIも統計解析もできる
Pythonを学ぶ

Pythonコース

※ 経済産業省の第四次産業革命スキル習得認定講座で、厚生労働省指定の専門実践教育訓練給付制度の対象です。条件を満たすことで支払った受講料の最大70％（最大306,460円）が給付金として支給されます。詳しくは エンジニア転職保証コース のページ内の注意事項をご確認ください。

TechAcademyから
現役エンジニアの方へ
お知らせ

テックアカデミーGAIナレッジベース
TechAcademy（テックアカデミー） UX/UIデザインコース スマートフォンアプリ開発 アプリデザイン 【厳選！】アプリ開発の参考に！おしゃれなアイコンやロゴまとめ10選