デザイン

デザイン

PR

ユーザーインターフェース・デザインの基本ガイド完全版【UIを徹底解説】

4,324 views

読了時間 : 約3分21秒

 

UIデザインって何?

単純に、ユーザーインターフェース・デザイン(しばしばUIデザインと省略される)はインタラクティブな製品の見た目や印象を定めています。Facebookの例を見てみましょう。Facebookのデザイナーはウェブサイトやモバイルアプリの見た目を決定します。これには色やスタイル、アイコン、その他の視覚的要素が含まれます。

 

 

UXという言葉はよく聞くけど、これはUIと同じ?

UXは「user experience(ユーザー体験)」の略です。UXはウェブサイトやアプリにおいてレイアウトやインタラクティブ性を定めるUIとは異なるものです。UXデザイナーは人間がデザイン決定を行う基礎としてどのように相互作用するかといったことに関する知識やデータを用います。単純に言うと、UXがどのような働きをするか、UIがどのように見えるかといったことです。「UI/UXデザイナー」という言葉がしばしば使われています。これはデザインプロセスの両側面に関する知識や経験を持つデザイナーのことを指します。

 

 

基礎

ui①

ユーザーインターフェース・デザインの学習を始める方法はたくさんあります。Invisionのような素晴らしい無料のオンラインコースもあります。

最初に特定のプラットフォームに焦点を当てるのは良いアイディアです。3つの主要なプラットフォームはウェブ、iOS、アンドロイドです。これらの中から1つを選び、そこに行ってみましょう。それぞれがユーザーインターフェース・デザインの基礎を習得するのに役立つでしょう。iOSやアンドロイドにとっては、企業のユーザーインターフェース・ガイドラインを読むことがプラットフォームやアプリのデザイン方法について学ぶための素晴らしい方法となります。これらを通じて、あなたは大きさや寸法、スタイル、色などの詳細を発見するでしょう。非常に細かく書かれているので、全てのセクションを読む必要がないと感じるでしょう。読み流して興味のあるセクションをピックアップしましょう。本稿のために、私たちはスタート地点として主にモバイルユーザーインターフェース・デザインに焦点を絞ります。

 

 

ソフトウェア

もちろん、あなたは初めてのユーザーインターフェース・デザインを行う方法を知る必要があるでしょう。幸運なことに、ここには本当に素晴らしい選択肢がいくつかあり、その中にはあなたに最適なケースがあります。それぞれの利点を以下にリスト化しました。全て、コストは100ドル以下です。

ui②

Affinity Designer

  • MacとWindowsで使用可能
  • 50ドル以下
  • 会費なし
  • 伝統的なレイアウト/機能

Sketch

  • Macのみ使用可
  • 99ドル
  • 会費なし

Adobe Photoshop

  • MacとWindowsで使用可
  • 月額10ドル~
  • 伝統的なレイアウト/機能

Figma

  • あらゆるオペレーティングシステムで使用可
  • ブラウザ内で使用可
  • 無料
  • 革新的な機能

 

どれを使えばいいかわからない時は「Figma」を使ってみましょう。

 

 

 

初めてのユーザーインターフェースをデザインする

今や基本をいくつか把握し、デザインするためのアプリケーションを見つけたので、最初のユーザーインターフェースのデザイン方法に関するヒントをいくつか見ていきましょう。

 

 

 

無料のアイコンをダウンロードする

ui③

ほとんど全てのユーザーインターフェースにはいくつかのアイコンが必要です。「Noun Project」を見て、あなたのコンピューターにダウンロードしたいアイコンのセットを見つけましょう。

 

 

 

デフォルトの寸法に精通する

デザインを設定する時は、正確な寸法を使用する必要があります。たとえばiPhone7の場合は、375×667ポイントです。多くのソフトウェアがこの情報を含んでいます。

また、デフォルトのフォントサイズやアイコンサイズ、要素のサイズにも精通する必要があります。最初は気が重くなるかもしれませんが、上記のリンクに全てのユーザーインターフェース・ガイドラインが含まれています。それらを覚える必要はありません。単にページをブックマークして、必要な時に参考として使ってみてください。

 

 

 

 

実用性のあるものをいくつかダウンロードする

ui④

他のデザイナーのUIファイルをダウンロードすることは、インターフェースの構築法を見るのにうってつけの手段です。ありがたいことにあなたに最適な素晴らしいサイトがいくつかあります。それらのファイルの構造やスタイルの適用法、確かな効果やレイアウトの構築法を見てみましょう。

 

 

 

終わりに

これまで以上にユーザーインターフェース・デザインを始めることは素晴らしい時間となっています。入手可能な素晴らしい情報源がいくつかありますし、ソフトフェアは以前よりも改良され低価格になりました。そしてますます多くの企業が日々形成され、デザインを知ることが成功への鍵の一部となっています。途中で挫折しないでください。「Behance」や「Dribbble」のようにコミュニティ内であなたを助けてくれる素晴らしい人々や才能あるデザイナーは非常にたくさんいます。その産業が8年近く経過した後でも、理解することは非常に難しいです。一歩踏み出してみて、学習を続け、楽しんでみましょう!

 

 

 

 

※本記事は、Getting Started in User Interface Designを翻訳・再構成したものです。

おすすめ新着記事

おすすめタグ