TechAcademy（テックアカデミー） UX/UIデザインコース スマートフォンアプリ開発 アプリデザイン 【あの有名アプリから学ぶ！】アプリのアイコンデザインを改善する3つの施策
icon
icon
アプリデザイン

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

アプリストアとホーム画面の両方においてユーザーの注目を集めることができる、美しくて記憶に残りやすいアイコンが必要です。それと同時にユーザーに分かりやすいものにすべきです。有名なアプリのアイコンをぜひ参考にしてみてください。

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

本稿は、Babich.bizのブログ記事を了解を得て日本語翻訳し掲載した記事になります。

本記事は、Nick Babich氏によって投稿されました。

 

全てのアプリには、アプリストアとホーム画面の両方においてユーザーの注目を集めることができる、美しくて記憶に残りやすいアイコンが必要です。それと同時に、アイコンはユーザーにとって瞬時に識別しやすいデザインにするべきです。

完璧な美しさを備えた、ユーザーにとって分かりやすいアイコンをデザインするために必要なことは何でしょうか？それほど難しいことではありません。本記事においては、そのための3つの施策をご紹介します。

 

1. 識別しやすいアイコンをデザインする

アイコンは何よりもまず意味を伝えることができなければなりません。ユーザーにアイコンの意味を考えさせるデザインであってはならないのです。

アイコンは、アプリの目的をユーザーに一見で理解してもらうことができる最初のチャンスとなります。アイコンをデザインするときには、次のことを心に留めておいてください。

アイコンは、比喩による連想効果によってアイデアを伝える媒体であり、ユーザーはアイコンから特定の動作を連想するものです。ユーザーに意味を瞬時に伝えることができなければ、アイコンは上手く機能しているとはいえません。

そのため、アイコンを分かりやすくて直感的なデザインにすることが不可欠なのです。

 

抽象的なアイコンは上手く機能しないことがほとんどであるため、使うのは控えましょう。

ユーザーは、抽象的なアイコンの意味を経験から推測することはできません。アプリ「The Game Center（ゲームセンター）」のアイコンはこの問題の一例です。カラフルで透明ガラスのようなデザインのアイコンは、デザイン自体は良いものの、アイコンの意味を伝えるのは難しいでしょう。

1-1

アプリ「The Game Center」のアイコンは何を表しているように見えますか？

ゲームに関連した意味があるように見えますか？

 

ユーザーにとって識別しやすいアイコンを使用する方が確実です。またアイコンの中には、「家」、「印刷」、「ガラス用品」、「封筒」などほとんど世界共通で同じ意味を持つものもあります。

たとえば、Gmailのアプリのアイコンには「封筒」が使われていますが、世界共通で「封筒」は「メール」の意味として伝わりやすいです。

アイコンの「封筒」そのものが「メール」の意味を伝えています。

 

2. ミニマリズムを追求する

アプリの本質をよく捉えていてそれをシンプルな形で表現できるアイコンをデザインしましょう。アイコンにとって本質的ではないその他の余分なディテールは全て省略します。

ほとんどのデザイナーは、アプリのアイコンを立派に見せたいと思う傾向があります。しかし時としてアイコンのデザインに多くを詰め込み、その結果アイコンは詳細を作り込み過ぎたデザインとなることがあります。

このような過度に詳細なデザインはかえってユーザーにとって理解の妨げとなり、UXにも影響します。

 

アプリ名の繰り返し、「見る（Watch）」「プレイする（Play）」などのアプリの使い方についての指示、「無料」という文字だけのプロモーション情報など、アプリにとって本質的ではない言葉はアイコンに表示するべきではありません。

3-1

アプリ名はホーム画面上でアプリのすぐ下に表示されるため、アイコンで繰り返して表示する必要はありません。

 

詳細な画像は小さなサイズでは見にくいため、アイコンのデザインに含めないようにしましょう。

写真の画像やスクリーンショットは使用しないこと

 

透視投影による3Dデザインはアイコンに使用するべきではありません。

5-1

透視投影による3Dデザイン、ドロップシャドウを加えるとアイコンは識別しづらくなります。

 

アイコンを分かりやすく直感的なデザインにするためには、詳細のバランスを図ることも重要です。

  • アイコンに具体的なオブジェクトを使うときには、その種のオブジェクト全てに共通する要素のみをデザインに反映して、その他の要素は省略します。
  • 瞬時にユーザーの注目を集めて、ユーザーがアプリを容易に識別できるような「中心点」をアイコンの中に作ります。
1時間でできる無料体験！

6-1

良い例：アイコンが「天気」を意味することをユーザーに伝えるために必要な要素は、太陽と雲だけです。

 

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

3. 異なる背景上でアイコンをテストする

アイコンはホーム画面の背景上で見やすいデザインにしましょう。

識別しやすくミニマリスズムを追求したアイコンをデザインしただけでは、全てのプロセスを完成したことにはなりません。他のUIと同様に、設計後のテストが必須です。

ユーザーがホーム画面の壁紙にどのようなものを選択するかは予測不可能であるため、予め異なる背景上でアイコンをテストすることが必要です。

 

アイコンが背景と混同するようなデザインにしてはいけません。次の例では「Stocks」というアイコンは暗い色の背景をバックにすると識別が困難です。

7-1

ユーザーがアイコンを探すのに苦労するようなデザインにしないこと

 

アイコンが背景と同化するようなデザインにしてはいけません。――透明なアイコンを使用するのは避けて、不透明であることを確認しましょう。

8-1

透明なアイコンを使用するのは避けましょう。

また、端末の動きに合わせて背景が動く機能を備えたデバイス上でもアイコンをテストしてください。

 

結論

今、あなたのアプリを完璧に表現することができる美しく魅力的なアイコンをデザインするために時間をかけてください。

 

TechAcademyでは初心者でもUI/UXデザインができるようになるUI/UXデザインオンラインブートキャンプを開催しています。

現役のUI/UXデザイナーがパーソナルメンターとして受講生に1人ずつつき、マンツーマンのメンタリングで学習をサポートし、最短4週間でUI/UXデザインを習得することが可能です。

初心者・未経験でもできる。まずはテックアカデミーに相談しよう

プログラミングを独学で学習していて、このように感じた経験はないでしょうか？

  • ・調べてもほしい情報が見つからない
  • ・独学のスキルが実際の業務で通用するのか不安
  • ・目標への学習プランがわからず、迷子になりそう

テックアカデミーでは、このような 学習に不安を抱えている方へ、マンツーマンで相談できる機会を無料で提供 しています。
30分間、オンラインでどんなことでも質問し放題です。

「受けてよかった」と感じていただけるよう カウンセラーやエンジニア・デザイナー があなたの相談に真摯に向き合います。

「自分に合っているか診断してほしい」
「漠然としているが話を聞いてみたい」
こんなささいな悩みでも大丈夫です。

無理な勧誘は一切ありません ので、まずはお気軽にご参加ください。
※体験用のカリキュラムも無料で配布いたします。（1週間限定）

今なら参加者限定の割引特典付き！ 無料相談を予約する

記事を検索

関連するキーワード

関連する記事

作る前にチェック！海外のiPhoneアプリのデザイン集サイト18選

スマートフォンの普及に伴って、Webサイトをスマートフォンサイト用に対応するのはもちろんのこと、スマートフォンのアプリのリリースを検討している方も多いのではない...
アプリデザイン

近未来を感じる！インタラクションデザインとは

本稿は、Designmodeのブログ記事を、了解を得て日本語翻訳し掲載した記事になります。また本記事はCarrie Cousins氏によって投稿されました。 ...
アプリデザイン

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

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

【プロトタイプを作る！】初心者でもすぐに分かるProttの使い方

プロトタイピングツールとして有名な「Prott」の使い方について解説しています。 Prottは作業画面からサポートまで全て日本語対応のプロトタイプ作成ツー...
アプリデザイン

UI/UXのテンプレートを購入できるプラットフォーム「uiuxassets」が登場！

UIキット、ワイヤーフレーム、テンプレート、アイコン等デザインをする上で必要なアセットを購入できるマーケットプレイス「uiuxassets」が登場しています。 ...
アプリデザイン

【アプリ開発にも役立つ！】プロトタイプを作成できるツール5選

プロトタイプとはWebデザインにおいて、動作を確認するための試作品を指します。モックアップがレイアウトやデザインを見るものであるのに対して、プロトタイプは機能の...
アプリデザイン

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

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

本稿は、Webdesigner Depotのブログ記事を了解を得て日本語翻訳し掲載した記事になります。本記事は、HooktoWin.comの共同設立者であるAndrew McDermott氏によって投稿されました。   デザイナーは不可能を可能にすることを期待されます。 信じられないほど複雑なプロセスを、シンプルで美しいものに作り変えるよう求められることも、何度もあるかもしれません。そして成功したときには、ロックスターになったような気分を味わえるでしょう。 しかし、こうした大きな期待に応えられなかったときには、ひどく落ち込むかもしれません。デザイナーには完璧主義者の人が多く、自分自身が自分に対する最悪の批評家であることもよくあります。間違いを自分の責任と見なして、全てを台無しにしてしまったかのように思うこともあります。   それでも、落胆するような状況において間違いを受け入れることで、これを成長と学びの機会とすることができるはずです。 もし本当のことをお伝えするとしたら…… デザイナーが気づいていない真実：間違いのほとんどは、デザイナーの責任ではありません。辛い現実：いずれにしても、デザイナーは責任を負うことになります。 デザイナーに不足しているのは、人についての知識 新規の仕事やプロジェクトにおける、デザイナーの目標設定の仕方が、間違いの原因というわけではありません。ほとんどの場合、実際はその逆です。デザイナーは、多くの人が気にしないような細部のデザインまで、こだわりを持って熱心に取り組みます。神は細部に宿ることを知っているからです。 問題となるのは、人についての知識が不足しがちなことです。これは、デザイナーが学校で教えられないことですが、仕事に大きな影響を与えます。 もしデザイナーが正規の（または非正規の）教育を受けていれば、その過程で自分独自のデザインを究めることを求められます。また、デザインの原則、デザインと配色の関係、色彩なども学びます。しかし、これだけでは十分ではありません。 デザインや美術について教育を受けることはあっても、人について深く学ぶ機会はありません。こうした理解不足は、デザインに影響し、ひいては予期しないUXの間違いの原因となります。デザイナーに不足しているのは、人についての知識なのです。   UXの間違い1：ユーザーが実際以上に多くを知っていると思い込むこと デザイナーは合理的な人々です。インターフェースの設計に多くの時間を費やすため、デザインがWeb上でどのように機能するかを直感的に理解しています。 「これは常識だ！」とデザイナー自身が思っていても、実際はそうではないこともあります。デザイナーにとっての常識が、ユーザーにも通用するとは限りません。デザイナーは設計に多くの時間を費やしているために、よく知っているだけなのです。 また、デザイナーがプロフェッショナルであるのに対して、ユーザーが同等の専門性を備えていないこともあります。こうした理由から、ユーザーに対して次のように仮定するのは、間違いです。 適切な質問を選ぶことができる 設定の操作について理解している アイコン、マーク、ロゴの意味を知っている コンテンツに意識を集中し続けることができる Webサイトで提供している指示をよく読んでそれに従う 必要とするコンテンツの見つけ方を知っている   問題の核心が見えてきたでしょうか？デザイナーがこのように仮定すること自体は合理的ですが、問題を引き起こすおそれがあります。なぜなら、こうした仮定は現実に基づいたものではないからです。 利用方法が全く分からないユーザーもいます ユーザーの中には設定の操作が初めてという人もいます あなたの設計したサイトを、乱雑で混乱するようなデザインだと思うユーザーもいます 関心が他に向いているマルチタスク型のユーザーは、コンテンツに集中するほど時間がありません 指示に従うのを拒むユーザーもいます ほとんどのユーザーは、見ているコンテンツについて詳しく知っていません こうした場面でデザイナーに求められる仕事は、「迷える羊の群れを、頭数を減らして束ねる」ことです。 条件に合うユーザーだけを選び抜き、意図したプロセス通りに彼らがサイトを利用できるような設計にします。その他の条件に合わないユーザーは、除外します。   UXの間違い2：ユーザーのためのデザイン 「ユーザーのためのデザイン」は、ここ数年で繰り返し提言されているアドバイスで、頭にたたき込まれているデザイナーも多いかもしれません。デザイナーは、ユーザーのニーズをよく理解して、ユーザーを中心にデザインするよう教えられています。 しかし、このアドバイスには見落としている点があります。「なぜ？」と不思議に思うかもしれません。見境なく教え込まれているアドバイスですから。 その見落としている点とは、必ずしも全てのユーザーがターゲット・オーディエンス（Target audience：広告やマーケティングにおいて、目標とする顧客）と一致するとは限らないことです。サイトを利用しているユーザーが、「求めているユーザー」像と一致しないことがあるのです。   例として、Googleを考えてみましょう。 Googleは、そのエネルギーや注意の大半をユーザーに向けています。Googleにとってのユーザーとは、検索者です。検索者により良いユーザー体験を提供するために、多くの時間と巨額の資金を投資しているのです。   しかし、検索者がGoogleの唯一のユーザーでしょうか？実は、その他にもGoogleのユーザーは存在しています。 広告主：Googleは広告主が自らの命令に従うことをよく知っています。Googleは、広告主やサイト運営者に対してポリシーを公開しています。もし彼らがGoogleのポリシーに違反して、好き勝手に利用するとしたら、広告掲載やサイトは強制停止されます。 ボット（クローラ）：Googleは、ボットなどによってサイト上で「通常以上のトラフィックが検出」された場合に、これをブロックします。検索している主体が人間でも、誤検知（False positive）によりブロックされてしまうこともよくあります。 詐欺者：Googleは詐欺サイトもブロックしています。例えば、偽のダウンロードボタンをクリックすると、ランサムウェア（ransomeware）がコンピュータにインストールされるよう仕組んであるサイトなどです。 検索者：Googleの検索エンジンの利用者です。このユーザーたちこそGoogleに利益をもたらしています。彼らが広告をクリックしたり、アプリケーションを利用したり、ソフトウェアをダウンロードすることで、Googleに収益が発生する仕組みになっています。 Googleは、自らの目標や利益に反するユーザーに対しては、ユーザーエクスペリエンスの提供を拒否しているのです。 Googleは、ほとんど全てのユーザーに提供されていますが、Googleのユーザーリストに載っていない人々（ボット）は締め出されます。 広告主が検索者にスパムを送信するとしたら、広告掲載を強制停止されます。Googleは、自らの目標や利益に反するユーザーに対しては、提供を拒否しているのです。 「ユーザーのためのデザイン」は、デザイナーがターゲット・オーディエンスだけに意識を向けるという前提があってこそ有益なアドバイスになることは、十分理解できるかと思います。 しかし、多くのデザイナーがユーザーについて見落としている重要な点は他にもあります。それは次の「UXの間違い3」で述べるとしましょう。   [PR] UI/UXデザインで挫折しない学習方法を動画で公開中UXの間違い3：フリクションが不十分であること Webデザインにおける「フリクション（friction）」とは、Webサイト（のレイアウトに使われている要素）の利用を阻害することを意味します。 一般にデザイナーたちは、フリクションを悪いものだと考えています。Webサイトを上手く設計しなければ、意図した通りにユーザーが行動しないおそれもあります。こうしたイメージから、デザイナーはフリクションを恐れがちです。 しかし、全てのWebサイトにはフリクションが必要です。   もし音楽を聴いていて、うるさいと感じたらどうしますか？おそらく音量を下げますね？ 同じことがフリクションにも当てはまります。ユーザーは音楽に、フリクションは音量調節のダイヤルに、それぞれ例えることができます。望ましいユーザーだけをWebサイトに集めるために、いわばフリクションというダイヤルで、音量を上げたり下げたり調整するのです。   フリクションを活用しているWebサイトの例を、次にいくつかご紹介します。 Craigslist（クレイグズリスト）：Craigslistは、同じ広告を50回連続で投稿されたりするのを嫌がります。そのため、Ghostingという技術によってフリクションを生み出しています。ユーザーがスパムを送信したり、広告を過度に多数回投稿した場合には、広告はブロックされて誰にも見えないように非表示になります。 Google：Googleはユーザーに自らのポリシーを尊重してもらいたいようです。もしサイトを悪用したり、検索結果を利用してWebスクレイピング（Web scraping）を行えば、「通常と異なる」ユーザーとして検出されます。さらに警告を無視するとブロックされます。 Quora：Q&Aのサイトです。利用ガイドラインはシンプルで、「Be nice, be respectful.（マナーと節度をもって利用すること）」というポリシーを掲げています。このポリシーを無視するユーザーには警告を与え、ブロックまたは利用禁止にします。フリクションを利用することで、他のユーザーにとって安全なサイトであることを保証しているのです。Quoraのサイトのシステムは、ユーザー体験の質を最大限に高めるようにデザインされています。 デザイナーにとってフリクションは、問題となるかもしれません。しかしそれはデザイナーが、フリクションというダイヤルを調整する方法を知らなかったり、またはフリクションが存在すること自体知らないからです。 デザイナーのフリクションに対する理解が不足していると、フリクションに過剰反応してしまったり、皮肉なことに望ましくないユーザーにWebサイトを悪用されることも起こり得ます。   では、フリクションを具体的に実装するとしたら、どのようになるのでしょうか？例を見てみましょう。 問い合わせフォームに、キャプチャを3～4つほど複数設けて、人間であることを判別する 利用に至るまでのステップ数を必要以上に増やすことで、ユーザーをふるいにかける 文字で埋め尽くされたページ、またはデザイン要素がぎっしりと並んだページにする 入力フォームを必要以上に多く設置することで、ユーザーを疲労させ、興味を失わせる（逆に入力フォームを十分に設置しないとしたら、全てのユーザーのアクセスを容易にすることになります。） コンテンツと関連性の低いストックフォトや画像を使うことで、ユーザーがコンテンツの意味を理解する妨げとする ユーザーに個人情報や支払い情報の入力を求める一方で、サイト運営者の顔写真や個人情報などは可能な限り非公開にしておく フリクションは重要な設計であり、その形やサイズは様々ですが、多くのデザイナーが理解に苦戦するのは確かです。   UXの間違い4：上司の指示にいつも忠実であること この間違いを回避するには勇気を要します。 それに加えて、さらに重要なことですが、目標を明確に理解していることも必要です。現在デザインしている要素は、どのような完成形が望ましいのか、開発しているWebサイトの目標は何なのかなどです。   目標に関するこうした質問にクリアで決定的な答えを出しておくことは、必須です その理由は、あなたの上司、会社の役員会、クライアント、関係責任者から、目標に反する要求をされることがあるからです。 相手の要求通りに進めたら良い結果は生まれないと、経験から予測できることもあるかもしれません。当初の目標に反して進めた結果、失敗プロジェクトとなるおそれもあります。もっとも、「指示通りに仕事をこなしてさえいれば、彼らは報酬を支払ってくれるから構わない。」という考えで、上司に協調するのは簡単ですが。   自分の意見を声に出して伝えることが非常に重要です 上司が自分自身のために行動しない場合には、あなたが上司に代わって行動することが重要です。もし上司が、彼ら自身の利益を損なうような指示を出してきたら、あなたの意見を声に出して伝えましょう。悪いニュースを伝えるべき場面です。上司に彼ら自身が犯そうとしている間違いを理解してもらうためです。 もし自分の意見を声に出して伝えないことが習慣化したら、平凡なポートフォリオしか生まれない ほとんどのデザイナーは自分の意見をはっきりと伝えることはありません。仕事を失ったり、キャリアに傷が付くのを恐れているからです。しかし、そのことが逆にこうした事態を招く原因となります。   この間違いに対処する手立てが何もない場合には デザイナーとしてチームに参加したときに、計画やデザインがすでに決定されていた場合にはどうするべきでしょうか？ まずチームの他のメンバーと話し合いを持ちましょう。そして自分の意見をサポートする根拠（例えば、リサーチ、レポート、データなど）を十分に用意した上で、プロジェクトの責任者に意見を伝えましょう。 最初は不可能に思えるかもしれませんが、実際には行うことは可能です。小さなステップから始めて、段階を追ってゆっくりと進めてみましょう。 あなたはデザイナーとしてプロフェッショナルです。デザインツールを活用すれば、他の人が見逃してしまうようなUXの間違いを見つけることもできると思います。間違いを正すことで、複雑なプロセスを、シンプルで美しいものへと作り変えることができるでしょう。 [お知らせ]TechAcademyでは初心者でもUI/UXデザインができるようになるUI/UXデザインオンラインブートキャンプを開催しています。現役UI/UXデザイナーのサポートで学びたい場合はご参加ください。 プログラミングを独学で学習していて、このように感じた経験はないでしょうか？ ・調べてもほしい情報が見つからない ・独学のスキルが実際の業務で通用するのか不安 ・目標への学習プランがわからず、迷子になりそう テックアカデミーでは、このような
アプリデザイン

今年のトレンド！2016年最も売れたフォント、トップ50を集めてみた

本稿は、Designmodeのブログ記事を了解を得て日本語翻訳し掲載した記事になります。 また、本記事は、Doru Ciobanu氏によって投稿されました。   タイポグラフィは、独自の世界観、テクニック、統一感を組み合わせたアートです。素晴らしいデザインには、素晴らしいタイポグラフィがあります。 Webデザインまたは出版物のデザインでも、パンフレットやユーザーインターフェースのデザインでも、ロゴのデザインでも、プロジェクトを成功させるために重要な鍵となるものの1つはフォントです。 フォント、色、その他デザインをどのように組み合わせるかという選択が、成功と失敗の分岐点となります。こうした細部に十分な注意を払わないがために、優れた製品を生み出すために費やした全ての努力が無駄になることもあります。 しかし幸いなことに、優れたタイポグラフィのためのガイドとなるリソースは、豊富に存在しています。 そして、これから紹介するのは、2016年に最も売れた50のフォントです。   1. FF DIN デザイナー：Albert-Jan Pool デザインされた年：1995 発行者：FontFont FF Dinは、1995年から2009年にかけて、オランダのデザイナーAlbert-Jan Poolｚ氏によって制作されたフォントです。FF Dinには、20のウェイト（フォントの太さ）があります。 編集、出版物、広告、パッケージ、ブランディング、クリエイティブ産業（creative industries：知的財産権に関わるデザイン）、ポスター、看板、Webや画面の設計に適しています。なお、キリル文字とギリシャ語の書記体系については、サポートが限られています。   2. Brandon Grotesque デザイナー：Hannes vonDöhren デザインされた年：2010 発行者：HVD Fonts Brandon Grotesqueは、6つのウェイトとそれに対応する6つのイタリック体から成る、有名なサンセリフのフォントです。このフォントは、可読性を高めるために光学的な修正を加えた幾何学的形状から、インスピレーションを受けています。 Brandon Grotesqueは機能的かつエレガントなフォントです。ウェイトの太さをthinで色をブラックにすると、展示デザインに適しています。 Brandon Grotesqueは、洗練されたプロフェッショナルな印象を与えるデザインを生み出すには良い選択です。また、西ヨーロッパ言語だけでなく、中欧および東ヨーロッパ言語をサポートする拡張文字のセットもあります。   [PR] UI/UXデザインで挫折しない学習方法を動画で公開中3. Century Gothic デザイナー：Monotype Design Studio　Sol Hess　Morris Fuller Benton デザインされた年：1990-1995-2007 発行者：Monotype Century Gothicは、Futuraフォントの競合他社の2つの書体から派生したフォントですが、Futuraフォントの影響も強く受けています。 軽くて広々とした印象の書体であり、クリーンな縁取りを備えた、細部まで完璧なフォントです。見出しや大きな看板のデザインには理想的です。   4. Proxima Nova デザイナー：Mark Simonson デザインされた年：2005 発行者：Mark Simonson Proxima Novaのフォントファミリーは、有名なProxima Sansフォントの完全な復古版です。OpenTypeフォント機能は48個に拡張されました。 3つの幅には、それぞれ16のフォントが対応しています。 人間的な比率と幾何学的なデザインを組み合わせた、スタイリッシュなフォントです。ほとんどのラテン語系言語の文字をサポートしています。   コラム コスパとタイパ、両方結果的に良くなる良くなる学び方とは？ 「スクールは高いし時間も縛られて効率が悪い」と考える方は多いと思います。 もちろん、時間も費用もかかることは間違いありません。
Webデザイン

1900年代のデザインの歴史から学ぶ！デザインの基本とは

本稿は、Smashing Magazineのブログ記事を了解を得て日本語翻訳し掲載した記事になります。 本記事は、Dmitry Fadeyev氏によって投稿されました。   近年人気の高い「フラット」なインターフェースのデザインは、単なるトレンドではありません。それは真のデザインへの欲求の現れです。つまり、視覚的に過剰なものを抑え、偽物や余分なものを排除しようとする欲求です。 技術の進歩はときに過剰なものを生み出すことがあります。 19世紀には、機械化された大量生産によって、装飾品を早く生産することができるようになり、その結果、製品は過剰に装飾されるようになりました。   近年、同様のことがデザインの世界でも起きています。 ディスプレイやスタイリングの技術の進歩によって、デザイナーたちはリッチな外観のインターフェースをデザインすることが可能になりましたが、その結果、スキュアモーフィックデザイン（現実の質感を模倣したデザイン）やスタイリングが過剰になりました。 モダンデザインの運動は、本物のデザインを求める過程で、19世紀の過剰な装飾を抑制することによって、現代の大量生産によりふさわしいデザインを生み出しました。   目次 モダンデザインの誕生 デジタルの装飾 本物のデザイン ミニマリズムではない 本物のデザインが重要である理由   モダンデザインの誕生 1908年、オーストラリアの影響力の強い建築家であるアドルフ・ロースは、『装飾と犯罪』という挑発的なタイトルのエッセイを書きました。 ロースは、「現代の装飾主義者たちは、文化的に遅れているか病理の症例である。彼らの作品は今後3年も持たないだろう。彼らの生産したものは、文化人には受け入れがたいものであり、他の人々にとってもやがてそうなるだろう。」と主張しています。 さらに大胆にも、「人々の水準が低いほど、装飾は贅沢になる。装飾に依存するのではなく、形に美しさを見つけることが、人類が目指すべき目標である。」と主張しています。   なぜロースは装飾を批判するに至ったのでしょうか？モダンデザインの先駆者であるロースのマインドセットを理解するには、初めに19世紀のデザインの実態を知る必要があります。 蒸気機関の発明によって、機械化された大量生産の時代が始まりました。美術評論家のフランク・ウィットフォードは、「蒸気駆動の機械は、人間の手作業よりも速く、より規則的にほぼすべての物質を切って型抜きして、生産することができます。 生産が機械化されたことにより、より低い価格でより高い利益が実現されています。」と書いています。   しかし生産方式が人の手作業から機械に変化した一方で、製品のデザイン自体は変化しませんでした。 建築や家具から衣類や食器に至るまで、ほとんどの製品には、ルネサンス時代からの伝統的なデザインに基づく、豪華な装飾が加えられていました。 歴史的に、人の手作業による装飾品は生産コストが高く、富と贅沢の象徴とされてきました。しかし機械化によって、こうした需要の高い装飾品の模造品を安く早く生産できるようになりました。 どのようなデザインが大量生産に適しているのかを立ち止まって考えることもなく、メーカーは低コストで歴史的なデザインを模造することができる機会に飛びつきました。 その結果、アドルフ・ロースをはじめとするモダンデザインの先駆者たちが批判したような、低品質で装飾が過剰な製品が氾濫するようになったのです。   有名な建築家であるル・コルビュジエは著書の『今日の装飾芸術』の中で、「ごみが豊富に装飾されているものである。」と遠回しに批判しました。また「贅沢な物は、しっかりとした造りで、美しくクリーンで、純粋で健康的です。無装飾なそのままのものには製造のクオリティが現われます。 しかし、製造業界ではこのことが逆転しています。装飾の多い鋳鉄製のストーブは、普通のものよりも生産コストが低いのです。というのも葉のパタンの装飾が多く施されていれば、鋳造の欠陥が見つかりにくいからです。」と述べています。   また、影響力のある批評家・ジャーナリストであるモントゴメリー・シュイラーは、19世紀のファサード（建築物の正面）の装飾について批判しました。 「もし通りの建築物の表面の装飾を削り取ったとしたら、すべての建築スタイルを取り除いたことになるが、今までと変わらない良い建築物になるだろう。」と述べています。 「超高層ビルの父」として知られる建築家のルイス・サリヴァンは、「元型として良く形成された美しい建築物を生み出すことに集中するために、何年もの間、装飾をやめるとしたら、私たちの美学的な利益に資するだろう。」と述べ、装飾を抑制することを主張しました。 1920年代には、ドイツで新即物主義という美術運動が起こりました。 新即物主義は、純粋な実用性をデザインに求める運動でした。ドイツの建築家ヘルマン・ムテジウスは、彼自身が機械のスタイルと呼ぶものを生み出すために、実用性をスタイルにどのように適用できるかを説明しました。ヘルマンは、「鉄道列車の駅、展示ホール、橋、蒸気船などにその例を見ることができます。   一方、他のモダンデザインの先駆者たちは、装飾を批判する代わりに、機能的な形態を高めることに集中しました。 1934年、近代建築家のフィリップ・ジョンソンによって企画された展覧会「マシンアート」が、ニューヨーク近代美術館で開催されました。 展示品として、飛行機のプロペラや産業用断熱材など、さまざまな機械的な備品が並んでいました。 この展覧会の目的は、純粋に機能的な目的に従った形態を持つ物の美しさを強調することでした。そして、美しさと上品さは、表面的な装飾からではなく、デザイン自体から生まれるということが示されたのです。 モダニズムの運動が浸透するには、20世紀前半の時間の多くを要しましたが、最終的にはこの新しい手法が、伝統的なスタイルや技術に勝利しました。 Jonathan Woodhamは、著書『Twentieth Century Design』において、「現代の美学は、クリーンな幾何学的形状・クロムメッキ加工された鋼・ガラスなどの現代的な素材の使用、平面の明暗への人工的な操作によって特徴づけられる。色の使用はしばしば抑制され、ホワイト・オフホワイト・グレー・ブラックなどの色が強調される。」と述べています。 モダンデザインの運動が全体として反装飾的なものであったと見なすのは誤りです。アール・ヌーヴォーやアール・デコなどに代表される新たなデザイン様式が、現れては消えました。 未来派のスタイルは、誇張された技術的な美学を推し進め、一方、デ・ステイルのスタイルは、数を制限したパタンや形の中に調和を見出しました。   しかし、これらのスタイルの変容の根底にあったのは、必要のない装飾からの脱却でした。 モダンデザインの運動は全体として、よりクリーンで、美しさを表面的な装飾よりもスタイルや形態そのものに見出すような、抑制されたデザインを求める運動だったのです。   [PR] UI/UXデザインで挫折しない学習方法を動画で公開中デジタルの装飾 モダンデザインの歴史とソフトウェア・Webデザインの短い歴史を比較すると、似ている点があることに気づきます。 機械化された大量生産が装飾の過剰使用をもたらしたのと同様に、ディスプレイやスタイリングの技術の進歩は、ソフトウェアのインターフェースやWebサイトにおいて過剰な装飾をもたらしています。 初期のWebデザイナーたちは装飾に積極的であり、画像にアニメーションや音を加えて、過度にリッチで派手なユーザー体験を生み出しました。 グラフィカルユーザーインターフェイスを備えた初期のオペレーティングシステムは、外観や使用感は依然として基本的なものでした。   もっとも、ファイルのディレクトリを表すためにフォルダの画像を示したり、ユーザーにクリックできることを伝えるために面取り効果の加えられたボタンが示されるなど、現実世界に近いデザインにするための試みがなされました。 しかし、Webデザイナーが視覚的にリッチなユーザー体験を創造したいと思ったかどうかに関係なく、当時は白黒の低解像度のディスプレイであったため、デザインは全体的にフラットで抑制されたものでした。 技術の進歩に伴い、デザイナーたちはインターフェースの外観デザインにおいてより大きな自由を獲得しました。MicrosoftはWindows XPで、カラフルなスタイルを導入し、ハイライト、シャドウ、グラデーションを豊富に使用した外観になりました。 さらにAppleは、新たにリリースしたMac OS Xで、光沢感のあるプラスチック製の泡、ブラシ加工されたアルミ、リアルなアイコンなどをインターフェース上で表現することに成功しました。   また、MicrosoftはWindowsに、光沢感のある透明なガラスのようなテーマを加え、Appleはカレンダーアプリに革のテクスチャを導入したり、ブックリーダーにページめくりの機能を加えるなど、デスクトップおよびモバイルのシステムにより実物に近いデザインを導入しました。 現実世界のオブジェクトやテクスチャを模倣したスタイルのことを、「スキューモーフィズム」といいます。 インターフェースをユーザーにとって親しみやすい外観にするという唯一の目的のために、デザイン要素は現実世界の物に似せて作られます。   しかしデザイナーたちは近年、ノートアプリを紙のメモ帳に似せてスタイリングすることや、カレンダーアプリに革のテクスチャやページめくり機能を加えることの理由に疑問を感じ始めました。 これらの効果はユーザーの関心を引く外観をデザインできますが、現実世界の静的な物体を、それとは相容れない流動性やダイナミズムのあるデジタル世界のインターフェースと結び付けようとする過去の遺物なのです。 MicrosoftはWindows 8のリリースで、こうした過剰な外観から脱するために勇敢な一歩を踏み出し、オペレーティングシステムを完全にデジタル化して「本物の」外観にすることを試みました。 インターフェイスは、Microsoftが初期のモバイルリリース用に適用した原則に基づいて設計され、テクスチャや現実世界のオブジェクトの模倣をほぼ完全に排除した外観となりました。 その代わりにデジタル画面に秩序と上品さをもたらすために、Windows 8は、タイポグラフィ・間隔・色に工夫がなされています。現実世界を模倣した効果、過剰なスタイルを排除した後に残ったのは、シンプルなコンテンツのみでした。   かつてヘルマン・ムテジウスが、鉄道列車の駅を例として挙げたように、Microsoftのデザイナーたちは、「Metro」という名称で知られれるWindowsのインターフェースのインスピレーションを、地下鉄の駅の標識から得たと述べています。 また、近年Webも同様の変容を遂げました。表やFlashに基づく初期のデザインによって、エンジニアはインターフェースをピクセルパーフェクトに制御することが可能になり、デザイナーもコンテンツのためにリッチな外観を備えたコンテナをデザインすることを躊躇しませんでした。   しかし、新しいメディアの流動性を受け入れ、CSSを使用してデザインとコンテンツを分離するようになるにつれて、Webデザインはより拘束されるようになりました。 装飾が多く加えられたコンテナは、幅や位置の変更が容易ではありませんでした。そのため、デザイナーは画像の数を減らして、レイアウトをより適応性が高く保守しやすくするためにCSSのスタイリングを使うようになりました。   近年はレスポンシブデザインの進化、またデザイナーたちにはPhotoshopを使わずに最初からコードでデザインを始める傾向も見られます。 こうした動向は、テクスチャや装飾的な画像を多用するのではなく、タイポグラフィ・間隔・色から美しさを引き出すような、よりシンプルでコンテンツに焦点を当てた、本物のWebデザインの美しさを推し進めています。   Appleも、モバイルのオペレーティングシステムであるiOS 7のリリースにより、本物のデジタルデザインへの第一歩を踏み出しました。 縫製の革のテクスチャ、破れたページ端のデザインは消え、代わりにシンプルなアイコンと半透明な表面を備えた、ほとんどフラットなデザインのインターフェースとなりました。   本物のデザイン モダンデザインの先駆的な時代から、現代のソフトウェアおよびWebデザインの変容に受け継がれているものは、本物への欲求です。 この欲求こそ約100年以上前にデザイナーたちの作品から装飾を削ぎ落としたものであり、現代のデジタルデザインをよりクリーンで、より機能的な美しさを備えたものに変える原動力となっているのです。   しかし、正確には何がデザインを「本物」にするのでしょうか？ 本物のデザインの目的は、偽物を否定し余剰を排除することです。本物のデザインは、偽物のテクスチャで素材をマスキングしたりせずに、弱点を隠す代わりに強さを見せるものです。そして製品をより親しみやすく、または魅力的に見せるためだけの無意味な機能を排除します。機能は最適な形態で表現され、効率性にこそエレガンスさがあることに確信を持てるものです。 そして表面的な装飾を排して純粋なコンテンツに美しさを見出します。   本物のデザインにおいてスタイルが重要ではないということはありませんが、装飾によって追求されるものではないのです。むしろ、形態の美しさはコンテンツに依拠するものであり、スタイルはクリエイティブな解の結果として自然に生じるものです。 スージック.Dは、アングルポイズスタイルのランプ（以下画像参照）について次のように言及しています。 「ランプがどのように見えるかは――特にシェード（笠）の部分は――後付的なことでした。しかし、そのことは魅力的なことであったのです。ちょうどランドローバー（イギリスの自動車メーカー）の初期のデザインは、消費者受けを狙ったというよりも、技術的に独創的なアイデアを基礎としていたことで信頼性を高めたように、審美性を考慮しない本来のピュアな形態からこそ、本物が生まれるのです。」 デジタルデザインにおいては、デザインは大きく次のように集約できます。 デジタルな外観を保持すること 金属、木材、革などのテクスチャをコンピュータの画面上で模倣する必要はありません。デジタルインターフェイスはこれらの素材から作られているわけではないので、模倣することには意味がありません。 しかし、平面のフラットな背景色だけでデザインするべきだということでもありません。むしろ、現実世界のテクスチャを模倣しようと試みたり、それに拘束されるべきではないという意味です。   スキューモーフィズムを排すること 電子書籍は、ページをめくるときに実際の紙を模倣する必要はありません。またノートアプリも、革のカバー、破けた紙の切れ端、手書き風文字などを備えた実際の紙のメモ帳のように見える必要はありません。スキューモーフィズムはいつも悪となるわけではありませんが、インターフェース上に不必要な制約を生み出します。 例えば、メモ帳アプリのインターフェースを、現実世界のものに似せて作ろうとしたら、物理的な模倣をすることに制約が生じます。一方、静的で一次元なデザインにするとしたら、そうした制約はありません。   コンテンツを中心にしたスタイルにすること スタイリングや装飾よりも、コンテンツに集中しましょう。このことは当然に思えるかもしれませんが、多くのWebサイト上では、既製のテーマが繰り返されているのではないでしょうか？ テーマは常にダミーのコンテンツをベースに作られているため、本質的に、最適なコンテンツを表現することは不可能です。ダミーのテキストによってテーマを作る場合には、すでにコンテンツは形骸化しているので、デザイナーはスタイリングと装飾に走ることになるでしょう。   コラム コスパとタイパ、両方結果的に良くなる良くなる学び方とは？ 「スクールは高いし時間も縛られて効率が悪い」と考える方は多いと思います。 もちろん、時間も費用もかかることは間違いありません。 ただ 結果的に無駄な学びにお金も時間もかける方がリスクが高いという考えもあります。 コスパ・タイパ最適化の参考として、
Webデザイン

現役のデザイナーが語る！優秀なUI/UXデザイナーに不可欠なスキルとは

本稿は、Designmodeのブログ記事を了解を得て日本語翻訳し掲載した記事になります。本記事は、Webデザイナー・ライターのJake Rocheleau氏によって投稿されました。   UI/UXデザイナーの仕事の求人を見つけると、困惑を覚えるかもしれません。これら2つの仕事のスキルセットは密接な関係がある一方で、常に重なる領域があるとは限りません。たしかに優秀なUIデザイナーがみんな、ユーザー心理の理解に長けているとは限りません。同様に、優秀なUXデザイナーが皆、PhotoshopやSketchの使い方をマスターしているとは限らないのです。 しかし、求められるスキルセットには重なる領域が多いため、優秀なUI/UXデザイナーとなるには、試しに両方のスキルに挑戦してみることも必要です。 このガイドでは、優秀なUI/UXデザイナーになるために必要な基本的スキルについて紹介します。両方のデザイナーの役割をこなすことができれば、職業の安定化につながりやすいというメリットがあります。 またプロジェクトにおいて、全体像をはるかに把握しやすくなります。   目次 ユーザーの代弁者であること ビジュアルコミュニケーション デザインソフトウェア 共感力・クリティカルシンキング   ユーザーの代弁者であること UI/UXデザイナーはユーザーの代弁者であるべきです。しかしユーザー自身ではありません。この違いを理解しておくことは重要です。というのも、製品を使うほとんどのユーザーは、UI/UXデザイナーと同等の専門性を備えていないからです。 ユーザビリティテストが非常に重要であるのは、こうした理由からです。製品の好ましい点・好ましくない点について、直接ユーザーに尋ねてみましょう。ユーザーの意見（フィードバック）を集めるのです。ユーザーの抱える問題の根本原因を見つけて、それを解決するために必要十分な修正のみ加えます。 UXの本質は、美しいインターフェースというよりも、UIの使い心地・振る舞い・ユーザーインタラクションへの応答にあります。細部にまで十分な注意を向け、あなたが優れていると思えるアイデアでも、ゼロから考え直す労を惜しまない姿勢が大切です。 デザイナーのあなたの好むデザインでも、それがほとんどのユーザーに受け入れられない状況では、アイデアを一度捨てて修正を加えることが一般的には賢明です。 ユーザーの不満に耳を傾け、彼らの本当に言いたいことを理解しようと努めることが大切です。ユーザーテストの大部分はUXの分野になりますが、このことはUIデザイナーとUXデザイナーの両者が心掛けるべきです。 どんなに美しいインターフェースも、適切に機能しなければ、何の価値もありません。 言葉や行動を通して、「ユーザーの代弁者であること」を実践しましょう。これは、UXデザイナーに第一に求められるスキルです。具体的なスキルではないため、習得するのが難しく思えるかもしれません。しかし、心を開き、デザインを再考する労を惜しまなければ、ユーザーの視点をはるかに理解しやすくなると思います。   [PR] UI/UXデザインで挫折しない学習方法を動画で公開中ビジュアルコミュニケーション デザイナーにとって最も貴重なスキルは、おそらくビジュアルコミュニケーション（視覚コミュニケーション）です。 ほとんどのデザイナーは、頭の中で思いついたアイデアを、プロジェクトマネージャー、エンジニア、他のデザイナーたちに説明するべき場面に直面します。 そのため、スケッチの描写によってアイデアを視覚的に伝えることができるとしたら、それは素晴らしいスキルになります。あるいは、ワイヤーフレーム、モックアップ、インタラクティブデザインのプロトタイプなどを作成して、デジタルな媒体でアイデアを伝えることもできます。 アイデアを伝えるためのツールや媒体として何を使うかは、それほど重要なことではありません。 もちろん多くのツールを使いこなせればそれに越したことはありませんが、もしPhotoshopについての知識がなくて、ワイヤーフレーム作成用のツールしか使えないとしても、アイデアを伝えるには十分事足ります。 デザインチームと開発チームにアイデアを視覚的に伝えられることは、非常に重要です。もちろん言葉で伝えることも可能ですが、デザインを直接見せる方がはるかに効率的です。 また、ビジネスやマーケティングなど他の分野の人にも、アイデアを伝えられるようになりましょう。デザインの専門家でない人に対して、複雑な機能について伝えるには、より平易な言葉で説明することが求められます。   このように、視覚的にまたは言葉によって、UXの計画を全ての人に上手く伝えられるようになることが重要です。そのために必要となるのは、1つには視覚的にアイデアを伝えるスキル（スケッチの描写スキル、ソフトウェアなど）、もう1つはコミュニケーションスキルです。 デザイナー自身がアイデアをよく理解しているからといって、他の人にも自然と理解してもらえるとは限りません。 チームやクライアントに対しては、追加説明が必要かどうかを確認して、質問の機会を与えましょう。彼らが質問をするのを恐れて、ただ受動的に座って話を聞いているような状況にしてはいけません。ソフトスキルも、UXの仕事には不可欠です。 コミュニケーションスキルを磨けば仕事の円滑化につながります！   デザインソフトウェア 全てのUXデザイナーがPhotoshop、Sketch、Illustratorなどのデザインソフトウェアを使いこなせるとは限りません。しかし全てのUIデザイナーは、この中のソフトウェアの少なくとも1つは、使えるようにしておくべきです。 両者の仕事の違いは、小さいですがとても顕著です。UIデザイナーは、アイコン、ロゴ、インターフェースのモックアップなど、外観のデザインを担当します。一方UXデザイナーは、これらのデザインされたインターフェースの振る舞い、ユーザーエクスペリエンスのデザインを担当します。 しかし、UXデザイナーの道を進むとしても、PhotoshopまたはSketch（もしくは両方）の使い方を学んでおくのが賢明です。どちらか1つだけでも使うことができれば、アイデアを視覚的に分かりやすく表現するのに役立ちます。雇用主からも、収益性の高いスキルとして高く評価されやすいでしょう。   そして、必要があれば、Web上に数多く存在しているオンラインソフトウェアも利用しましょう。 Adobe Creative Suite（アドビ クリエイティブスイート）などのデスクトップソフトウェアは、デザインプロセスに不可欠です。またInvisionやUXPinなどのプラットフォームを使いこなせることは、ポートフォリオの中で紹介するスキルとして重要です。 これらのツールは、プロトタイピングを素早く行い、インタラクティブなデモを作成するためのものです。 もしくは、Bootstrapなどのフロントエンド言語用のライブラリを使うこともできますが、コードを学ぶ必要もあるため、全てのUXデザイナーが使えるようになるべきツールではありません。 実際のところ、どのツールでプロトタイプを作成するかは、あまり重要ではありません。しかし、数多くのデザインソフトウェアを使えたら、スキルとして履歴書に書くことができるので有利でしょう。   最後におすすめしたいのは、アニメーション（動画）制作用のソフトウェアです。最も人気のあるソフトウェアから選ぶとしたら、PrincipleとAdobe After Effects CC（アドビアフターエフェクツCC）です。 これらのソフトウェアは、モックアップの作成や、レイヤーの操作によってアニメーション（動画）を編集するのに役立ちます。 優秀なUI/UXデザイナーとなるためには、デザインプロセスを各段階ごとに考えることが大切です。デザインプロセスは、まずワイヤーフレームとプロトタイプの作成、次にデジタルグラフィック（UI）のデザイン、最後にインタラクティビティの実装、という順で進めるのが一般的です。 アニメーション（動画）制作用のソフトウェアを使えば、実際にコードを書いてインターフェースのデモを作成しなくても、シミュレーションを行うことができます。 プロジェクトリーダーも、こうしたソフトウェアを使えるスキルのあるデザイナーを高く評価する傾向にあります。実際のデザインプロセスにおいても、役に立つことを実感できるスキルだと思います。   コラム コスパとタイパ、両方結果的に良くなる良くなる学び方とは？ 「スクールは高いし時間も縛られて効率が悪い」と考える方は多いと思います。 もちろん、時間も費用もかかることは間違いありません。 ただ 結果的に無駄な学びにお金も時間もかける方がリスクが高いという考えもあります。 コスパ・タイパ最適化の参考として、 テックアカデミー卒業生がスクールを選んだ理由
アプリデザイン

最もよく使われるデザインの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年の歴史があり、ベストなツールとして選ばれ続ける理由があるのです。   コラム コスパとタイパ、両方結果的に良くなる良くなる学び方とは？ 「スクールは高いし時間も縛られて効率が悪い」と考える方は多いと思います。 もちろん、時間も費用もかかることは間違いありません。 ただ 結果的に無駄な学びにお金も時間もかける方がリスクが高いという考えもあります。 コスパ・タイパ最適化の参考として、
Webデザイン

無限スクロールの課題とは！スクロールが長いサイトのデザイン手法

本稿は、Smashing magazineのブログ記事を許可を得て日本語翻訳し掲載した記事になります。 本記事は、UXデザイナーのNick Babich氏によって投稿されました。   縦長で無限にスクロールするWebサイトが最近一般的になってきています。ロングスクロールを使うと、ユーザーはページをスクロールするだけで大量のコンテンツを閲覧することができるようになります。 無限スクロールはFacebook・Twitterなどのフィードで見られる、エンドレスなスクロールの手法です。 ロングスクロールには次のような利点があります。 ユーザーをより引き込むことができます。スクロールを利用することで、目的のために必要な操作を最小限に抑えることができます。「次へ」をクリックする必要がないというメリットによって、ユーザーは次のページに移動する変化を気にすることなくコンテンツに没頭することができます。 モバイルデバイスにうまく変換されます。ロングスクロール技術の普及の背景には、モバイル画面がよく使われるようになったということが大きく関わっています。画面が小さいほどスクロールの頻度は増えます。モバイルデバイスのジェスチャーコントロールによって、スクロールは直感的で楽しいものになります。 しかし、このやり方には欠点がないわけではありません。デザイナーはコンテンツとナビゲーションにしっかりと注意を払う必要があります。 この記事ではロングスクロールにおいてのいくつかの利点、考慮すべき点、それと簡単なヒントについて解説します。   どのようなときにロングスクロールを利用するか ロングスクロールはすべてのWebサイトに使われるわけではありません。次のような場合にふさわしいでしょう。 ストーリーテリング(ストーリーテラーのために線型構造を作り出す) 長い記事や複数のステップによるチュートリアルなど、連続した長いコンテンツ(複数のページに分割するよりもユーザーエクスペリエンスが向上する) コンテンツを別々のパーツに分割できず、全体として提示する必要がある場合(インフォグラフィックなど) 製品の機能・品質・特質を物語形式で見せたいとき   どのようにロングスクロールを実装するか 次の10のルールが、ロングスクロールによいユーザーエクスペリエンスをもたらすのに役立ちます。 1. ユーザーにスクロールを促す ページが表示されるとすぐにユーザーはスクロールを開始しますが、サイト上部のコンテンツは依然として重要です。 訪問者の最初の印象と品質に関する予想は、ページ上部の内容で決まります。ユーザーがページをスクロールするのは、サイトの上部に表示されているのが期待できるものである場合だけです。なので、最も魅力的なコンテンツを置きましょう。 良い導入部・前書きを提示しましょう。(コンテンツの状況をはっきりさせて、ユーザーに「このページがどういうものであるか」ということを分かってもらうことができます) 魅力的な画像を使いましょう。(そのサイトに関連する情報を含む画像は、ユーザーの注意を引きつけます)   2. ナビゲーションオプションを常に保持する ロングスクロールのWebサイトを作成する場合、ユーザーは現在の位置とナビゲーションを把握したいと思っていることを忘れないでください。ロングスクロールではナビゲーションに関する問題が起こることがあります。 ページをスクロールしたときにナビゲーションバーが表示されなくなった場合、下の方までスクロールしていたのに一番上まで戻らなければいけなくなったりします。 こういう問題に対しての解決策として、常に一貫した場所に表示され続けるメニューがあります。 モバイルデバイスの場合：モバイル画面は他のデバイスよりも小さいため、ナビゲーションバーが画面の大部分を占めることがあります。ユーザーがコンテンツを見るためにスクロールしているときはナビゲーションバーを隠して、トップに戻るために画面を引き下げたときに表示させるとよいでしょう。 ヒント：追加のナビゲーションを使用して、ページ内の各セクションの間をジャンプさせることもできます。 以下のアニメーションの場合、ユーザーは自分の進行状況を確認することができると同時に特定のセクションへのショートカットとしてこれを利用することができます。   3.「戻る」ボタンが適切に動作することを確認する ロングスクロールのサイトでは、ユーザーが自分のページ上の位置を見失うことがよくあります。ロングスクロールのリストからクリックして該当のページに行ったあと「戻る」ボタンを押したとき、元いた場所でなくページの一番上に戻ってしまうというような形です。 そうすると、一度見たコンテンツをまたスクロールしなければいけなくなります。適切な場所に戻れないことで、当然ユーザーは不満を感じるでしょう。 フィード内の要素をアクティブにしたあと、元いたところにきちんと戻れるようにしておく必要があります。Flickrの「戻る」ボタンはこのような機能についての良い例です。スクロール位置が記憶されており、「戻る」ボタンを押すと元の場所に戻ることができます。   4. スクロール位置に基づいてURLを変更する ロングスクロールの一般的な問題のひとつとして、ページ上の特定の場所へのURLによる共有ができないという点があります。スクロール位置はURLに反映されず、そのページの先頭に繋がります。 URLが現在の位置を捉えないので、ユーザーは画面を簡単に切り替えることができなくなり苛立つことになります。 HTML5からは、history.pushState()関数を使うことで、ページをリロードすることなくブラウザに表示されるURLを変更することが可能になっています。   5. ページ内ジャンプ機能を使用する ロングスクロールのもうひとつの共通の問題は、方向感覚がなくなることです。ユーザーは前に見たものを探すときに苦労します。長いチュートリアルなど、コンテンツが複数の重要なセクションに分かれている場合に特に深刻な問題になります。 「セクションへジャンプ」オプションをつけることでこの現象を解決することができます。 例えばTumblrでは、ページ内で迷子になったときのためにページの下や上にジャンプすることができるようになっています。ページ上のコンテンツはいくつかのはっきりしたブロックに分けられており、大きなインジケーターのドットが画面の左に固定されています。 ヒント：「セクションへジャンプ」機能では、インジケーターのドットを使いやすくする必要があります。 ドットがクリックやタップがしにくい状態だとユーザーを苛立たせることになります。そのため、ドットの大きさが適切であるかどうか確認してください。   6. コンテンツを読み込むときに、視覚的なフィードバックを表示する ヤコブ・ニールセンのユーザビリティ10原則のひとつによると、システム状態の視認性はUIデザインにおいて重要な原理です。ユーザーはシステム上の現在の状態をいつでも知りたいと思っており、Webサイトは閲覧者を不安にさせてはいけません。 適切な視覚的フィードバックを通して、ユーザーに今何が起きているのかを伝える必要があります。Webサイトがコンテンツを動的に読み込む場合は、ローディングが行われていることをはっきりと示さなければいけません。 進行状況を示すインジケーターを使用して、新しいコンテンツが読み込まれていることを表現しましょう。 読み込み時間は2秒～10秒の短い時間であるはずですので、システムが動作していることをループアニメーションで表すことができます。   7. スクロールハイジャックを行わない スクロールハイジャックのWebサイトでは、スクロールが制御され基本的なWebブラウザの機能を無効にされてしまいます。ユーザーがページをコントロールできない上に動作の予測ができなくなってしまうため、スクロールハイジャックは好ましくありません。 この問題はAppleのMac Proのページで見ることができます。ユーザーがどれだけ早くスクロールしても、レイアウトはあらかじめ決められた速度で移動します。 このページの全てのコンテンツはスクロールに関連付けられているため、訪問者はページを遅い速度でブラウズすることを強いられてしまいます。   8. ページの読み込み時間を最適化する ロングスクロールのページでは、読み込みの長さの問題も発生します。これはWebサイトにおいて致命的な問題です。 実際に、ユーザーの47％が2秒以内のWebページの読み込みを求めています。ページが3秒以内に読み込まれない場合、57％のユーザーが去ってしまいます。 ロングスクロールの読み込み時間の問題は解決することができます。レイジーローディングなどの読み込み技術を利用し、ページの読み込み時間を最適化することで基本的なコンテンツにすぐにアクセスできるようにします。   9. リソース消費を考慮する ロングスクロールを使用する場合は、ページが消費するリソース(CPUとメモリ)を常に考慮に入れてください。 ページをリロードせずに複数のページの写真・アニメーションGIF・動画をスクロールすると、システムリソースが大幅に浪費される可能性があります。リソースが限られているデバイス(iPhoneなど)では大量のアセットの読み込みによる遅延が起きる可能性があります。 そのため、さまざまなデバイスでWebサイトをテストし、該当の場所を通り過ぎたときにはアニメーションや動画を一時停止するなどの手法を利用します。   10. ユーザーの行動を考える ロングスクロールがどう効果的であるかを判断するために、ユーザーがどのように操作しているかを調査してください。アナリティクスデータが有効です。 例えば、Googleアナリティクスではページ解析によって何人のユーザーが折りたたまれた部分の下をクリックしているか確認することができます。そのデータに応じてデザインを調整することが可能です。   [PR] UI/UXデザインで挫折しない学習方法を動画で公開中ECサイトでのロングスクロール ECサイトではロングスクロールは頻繁に使用されます。ユーザーは製品のリストや検索結果を、中断することなくスクロールして閲覧し続けることができます。 ただしユーザー満足度を向上させるためには、いくつかの一般的な問題に対処する必要があります。 ナビゲーションとフィルタをスティッキーに フィルタリングが適切に行われていると、ユーザーは何千ものWebサイト内の選択肢をニーズに合った数少ない項目に絞り込むことができます。ナビゲーションメニューとフィルタオプションを持続的に表示することで、ユーザーがコンテンツをうまく管理することができます。   それぞれのアイテムをブックマークできるようにする 後々参照できるように気になったアイテムを簡単にブックマークしておける機能は、ユーザーにとって強力なツールです。   条件に一致したアイテムの数を表示する 利用できるアイテムの数を表示することで、ユーザーはフィルタリングによる結果内容のスクロールにかかる時間を判断することができます。   フッターにアクセスできるようにする ユーザーはフッターの概念を理解しており、そこにWebサイトの大事な情報があると思っています。 しかし、ロングスクロールではフッターの閲覧が困難なことがあります。ページの下に行くと新しいアイテムが継続的に読み込まれ、フッターは見えないところに押し込まれます。この問題は深刻なもののように思われますが、「もっと見る」ボタンを利用することで解決できます。 この手法では、コンテンツはオンデマンドで読み込まれることになります。新しいコンテンツは、ユーザーが「もっと見る」ボタンをクリックするまでは自動でロードされません。これによってフッターに簡単にアクセスできるようになります。   ロングスクロールと視差効果 インタラクションデザインはロングスクロールを使ったWebサイトの基礎であり、アニメーションはその中でも欠かせない部分です。 Web上でのユーザーの注目のスパンが約8秒であることを考えると、楽しいスクロールは注意を引きつける時間を引き伸ばすことができると言えます。閲覧者を喜ばせるアニメーションのひとつに視差効果があります。 視差スクロールでは背景画像は手前のコンテンツよりもゆっくりと動き、深みと没頭の錯覚を作り出します。この効果によって画面の立体感が増します。   パララックススクロールをどんなときに使うか 視差は大きな印象を与え、訪問者がもっとスクロールしたくなるなる面白い視覚効果です。ユーザーをあっと言わせたいときに便利な手法になります。 パララックススクロールは、ガイド付きの物語形式で効果を発揮します。 ストーリーをスムーズに直線的に伝えたい場合、視差効果とロングスクロールを組み合わせることによってユーザーは閲覧を実体験のように夢中になって楽しむことができます。 The Boatでは、画面がスクロールされると次のコンテンツのパスを作成しながらアニメーションによって閲覧者を次の場面に導きます。スクロールの動作はより楽しいものになり、ユーザーは「次はどうなるんだろう？」とワクワクするでしょう。   パララックススクロールを使うべきではないケース 多くのユーザーがはっきりしたタスク(製品の購入など)を目的としている場合は、パララックススクロールは使用しないでください。もし製品を購入するたびに視差効果を見せられるAmazonがあったら、どれだけフラストレーションがたまるか想像してみましょう。   パララックスとページパフォーマンス 視差効果を使用するWebサイトの多くは、スクロールのパフォーマンスに苦しんでいます。iPhoneのような高画素のデバイスでは特に害のあることです。 すべてのパフォーマンスの問題を完全に解決することはできませんが、簡単な手法でスクロールのパフォーマンスを向上させることができます。 ブラウザのアニメーションにはtranslate3d・scale・rotation・opacityといった手軽なプロパティのみを使用してください。 大量の画像をアニメートしたり、劇的にサイズを変更させたりしてはいけません。ブラウザに画像(特に巨大なもの)をリサイズさせると、コストがかかる可能性があります。 一度にたくさんのものをアニメートしないようにしましょう。   パララックスとアクセシビリティ 前庭機能障害を持つユーザーが、そのWebサイトを使用したとき視覚的にどのようになるかを考慮しましょう。アニメーションによって目まいが起きる可能性があります。 Val Headはより安全なアニメーションをデザインする方法として、もしWebサイトに大量の動きがある場合はモーションをオフにするオプションをつけることを推奨しています。 ボタンあるいはトグルスイッチを使用して、Webサイト上のアニメーションを減らしたり消したりできるようにします。このアイデアの研究のために、Nat TarnoffはどのWebサイトでも使用できるトグルスイッチのプロトタイプを開発しました。   コラム コスパとタイパ、両方結果的に良くなる良くなる学び方とは？ 「スクールは高いし時間も縛られて効率が悪い」と考える方は多いと思います。 もちろん、時間も費用もかかることは間違いありません。 ただ 結果的に無駄な学びにお金も時間もかける方がリスクが高いという考えもあります。
Webデザイン

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

副業したい方

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

はじめての副業コース

転職したい方

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

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

スキルアップしたい方

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

Pythonコース

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

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

1時間でできる無料体験
挫折しない学習方法とは？
TechAcademy（テックアカデミー） UX/UIデザインコース スマートフォンアプリ開発 アプリデザイン 【あの有名アプリから学ぶ！】アプリのアイコンデザインを改善する3つの施策