サイタWeb・デザインスクールIllustrator教室兵庫 よくわかるIllustrator スクールブログ WEB・アプリ...

WEB・アプリデザインの基本ポイント!

今日はイラストレータを使って、スマホアプリの画面を作成してみました。背景カラーには昨年くらいからよく見かける「デュオトーン」というグラデーションを使ってみました。


WEBだったり、アプリの画面デザインをする上でまずは知っておきたい基本的なポイントを挙げておこうと思います。


(1)カラー設定はRGB
印刷物ではなく、PCのモニタやスマホの画面で見るためのデータを作るとき、色の設定はRGBになります。ファイルの設定をRGBにして、カラーパレットやスウォッチもRGBを使用しましょう。印刷物に用いられるCMYKとRGBの違いは掘り下げるとなかなかややこしいので、またどこかの機会で説明したいと思います!


(2)単位はすべてピクセル
PCのモニタやスマホの画面はピクセルで構成されているので、データを作るときもピクセルを使用しましょう。ミリメートルを使っていると、ピクセル変換したとき、小数点が出てしまい、正確なデータが書き出せません。ピクセルの最小単位が1pxなので、小数点は再現できないからです。自分が今作成しているデータの単位が何なのか、常に意識することが大事です!


(3)サイズと配置座標はすべて整数
(2)と重複するところもありますが、アートボードやオブジェクトのサイズと配置座標はすべて整数にしないと、データを書き出したときに1px余分に余白が付いてしまったりすることがあります。慣れない内は違和感があるかもしれませんが正確さを求められるデータ作成時は、サイズや配置座標は数値を入力しましょう!


幾つか専門的な用語が出てきましたが、一緒に作業を進めながらレッスンを行いますので、思ったよりずっとシンプルな話です!「このデータの作り方で合ってるんやろか!?」という要らぬ不安を抱えて制作をするのはしんどいことですからね。クリエイティブな作業に集中するために、データの作り方は最初に抑えてしまいましょう☆

ちなみにデモで画像を作っただけなので、こんなアプリは存在しません(`・ω・´)

WEB・アプリデザインの基本ポイント!

(2017年7月23日(日) 17:31)

次の記事

この記事を書いたコーチ

プロの製作現場の知恵を余すことなく伝授。イラレの勘所を掴むお手伝い

新着記事

週末、国立国際美術館でやっているブリューゲルの『バベル』を観てきました。 これはラピュタの影響だと思いますが、子どもの頃から憧れていた絵画で、しかも今回は大好きな大友克洋さんが描いたバベルの塔の内部も展示されているということで、色々とワクワクしながら中之島にやってきました。 率直な...

少し前に会社案内制作の依頼を受けてデータを作成しました。出力は印刷通販サイトを使用しましたが、改めてその安さに驚きました。A4見開き, 両面カラー印刷, マットコート厚紙, オフセット印刷,500部で2万円を切っていました。 オフセット印刷、オンデマンド印刷ともに近年急激に価格が下が...

日々暑いですね。真夏に近づくこの時期になると、思い出すことがあります。 大学の専攻は経営学だったのですが、昔から絵を描いたり写真を撮っとりすることが好きだったので、大学卒業後、一年制のグラフィックデザインを習える専門学校に入学しました。 学校ではまずPhotoshopとIl...

今日はイラストレータを使って、スマホアプリの画面を作成してみました。背景カラーには昨年くらいからよく見かける「デュオトーン」というグラデーションを使ってみました。 WEBだったり、アプリの画面デザインをする上でまずは知っておきたい基本的なポイントを挙げておこうと思います。 ...

ブログ記事 ページ先頭へ