見出し画像

今更?いや今から!Appleデザインガイドラインを読み解く#1

はじめに

はじめまして、フリーランスのUIUXデザイナーを目指すゆ〜かと申します( ᜊ°-° )ᜊ

初記事なので自己紹介を少し、、
プロダクトデザイン系の4年制大学を卒業してからSベンチャー企業に1人ぽんとデザイナーとして入社。将来はデザインはフリーランスで、夜はバーテンダーとして、色んな人の支えになりたいと日々奮闘中です。

新卒入社なので2年目となる私ですが、なんとデザインガイドラインをふわっとしか読んでない!!
やばい!忙しかったは言い訳にしかなりません!

と言うことで新年から目標を立てて即行動!
noteで言語化をしたいと思ってこの記事を書いています。

ゆるゆると自分の言語化をしながらやっていきますのでおつき合いください。

こんな人におすすめ

  • Appleのデザインガイドラインを読み直したい

  • デザインガイドラインの他の見解をしりたい

  • デザイナーの卵を応援したい(とても嬉しいです!)

それでは頑張ります


まずAppleのデザインガイドラインってなんなの?

まずそうですよね、一体「デザインガイドライン」ってなんじゃろなというところです。

Appleのガイドラインにはこう書かれています

ヒューマンインターフェイスガイドライン(HIG)

プラットフォーム、基本要素、パターン、コンポーネント、入力、 テクノロジーに関する重要な情報を理解できます。HIGは、すべてのAppleプラットフォームで優れたユーザー体験をデザインするためのガイダンスとベストプラクティスを提供します。

https://developer.apple.com/jp/design/human-interface-guidelines/

つまり、Apple製品上のアプリケーションの動作や要素、それらのコンポーネントとかをAppleで定めたよ。これに乗っ取ってデザインすればAppleの全ての製品上でいい使い心地の画面が作れるよ。ということだと思います。

かっこい〜!!!いい方がかっこいい。明確で的確。流石のスマートさ。

バカっぽいって?いいんです小難しいのでこのくらいのテンションで行きましょう


では内容に行きましょう!

デバイス毎に考慮すること

iPhone

移動やトイレ、仕事中などどんな時でも使えるように想定をしよう。
時間感覚は1-3分の短時間もあれば、メディアを眺める1-2時間の時もあります。
また複数のウィンドウを開き行ったり来たりしながら使うことがほとんどだということも頭に入れておこう。
効率的な操作のためショートカットもあるからそれも考慮しよう。

iPad
iPadはメディアの視聴、ゲーム、制作作業などに使われることが多い。
また、スタンドに立てて離れて使うことやなにかの上に置いたりすることもあるからそれも考慮しよう。
入力方法は手(タッチパネル)の他、iPadPencilやキーボード、遠隔のジェスチャー、音声など多岐にわたる。
またiPhoneと違い、ドラッグアンドドロップや画面に1つ以上の画面を同時に表示してマルチタスクを行うことができるからその想定も忘れずに。

Mac

制作作業、メディアの視聴、ゲームをするなどの作業をマルチタスクで長時間行うことを考慮しよう。
また、基本机に置いて離れて見ることも忘れずに。
Macには、メニューバーやファイル管理、フルスクリーンなど画面が大きいからこそ出来ることが増えている。なので画面サイズに合わせて解像度や色など見やすさもちゃんと確保してね。あと自由なカスタマイズができることも利点だよ。アプリの機能は簡潔に分かりやすくユーザーが自由にカスタマイズできるようにしておいてね。

 どんどん要求されていることが増えている気がしますが……全部大事なことなのでたしかにという感じですね。

画像

解像度

デバイスの解像度によって、画像の表示サイズは異なります。これは当然ですね。
なのでこれを考慮し、統一するために、倍率を考えます。その時にはポイントという抽象的な測定単位が用いられます。

倍率1=1画像に対して:ピクセル密度が1
つまり10×10pxの画像は倍率1だと変わらないので10×10pxです
この時のポイント=1 

まとめると
ポイントX=ピクセル密度
ピクセル密度=倍率
倍率=解像度
倍率は、1ポイント当たりのピクセル数を表します。

で、高解像度ディスプレイはピクセル密度が高いので、画像に必要なピクセル数が増加します。

高解像度ディスプレイで画像を表示する場合は、倍率を2や3に設定すると、画像が粗くなるのを防ぐことができます。

さじゃあ具体的な解像度の指示は??ということでドン

iPhoneは2か3倍率
Macは1か2倍率
iPadは2倍

だそうです
私今まで解像度は高い方がいいでしょって3倍で書き出してた気が…………
いやいやこれから直しましょうそのためのアウトプットですから!

では今回は、ここら辺で!
継続頑張ります!

この記事が気に入ったらサポートをしてみませんか?