tomo.mobi

Representation design of material


SVGアニメーション

SVGの機能を使ってアニメーションさせる
http://www.hcn.zaq.ne.jp/___/SVG11-2nd/animate.html

しかしながら、SMILは廃止の方向のうごきもあるらしい・・・・(?
http://postd.cc/the-state-of-svg-animation/

なので、参考記事に記載されているjavascriptで実装できるプラグインを試してみようと思いました。
GreenSock
http://greensock.com/

sample
http://tomo.mobi/test/greensock/sample1.html

設定や記述に関してはとりわけ特殊な事は無いです。
htmlのDOMと同じようにつかえるみたい。
※ただし、DOMを生成する時はhtmlとは違うので、生成する記述が少し違う。次回の更新時に記述方法を追記します。(書いたよ→http://www.tomo.mobi/?p=594)

htmlのぶぶんにid設定
jsでDOMを指定するため。

 <path id="android" d="
M49,89c0,2.2,1.8,4,4,4h4v14c0,3.4,2.6,6,6,6s6-2.6,6-6V93h8v14c0,3.4,2.6,6,6,6s6-2.6,6-6V93h4c2.2,0,4-1.8,4-4v-40H49V89z 

M39,48.9c-3.4,0-6,2.6-6,6v28c0,3.4,2.6,6,6,6s6-2.6,6-6v-28C45,51.5,42.4,48.9,39,48.9z 

M107.1,48.9c-3.4,0-6,2.6-6,6v28c0,3.4,2.6,6,6,6s6-2.6,6-6v-28C113.1,51.5,110.5,48.9,107.1,48.9z 

M87.3,25.5l5.2-5.2c0.8-0.8,0.8-2,0-2.8c-0.8-0.8-2-0.8-2.8,0l-6,6c-3.2-1.6-6.8-2.6-10.6-2.6c-3.8,0-7.4,1-10.6,2.6l-6-6c-0.8-0.8-2-0.8-2.8,0c-0.8,0.8-0.8,2,0,2.8l5.2,5.2c-6,4.4-9.8,11.49.8,19.4h48C97.1,36.9,93.3,29.9,87.3,25.5z 

M65,36.9h-4v-4h4V36.9z 

M85.1,36.9h-4v-4h4V36.9z
" fill="blue"/>

jsぶぶん。DOMでCSS操作。 TweenMax等はGreensockのAPI。

(function() {
var container = document.getElementById('container');
var android = document.getElementById('android');


TweenMax.set(['svg'], {
	position: 'absolute',
	//top: '50%',
	top: '100px',
	left: '50%',
	xPercent: -50,
	yPercent: -50
})

TweenMax.set([container], {
	position: 'absolute',
	//top: '50%',
	top: '100px',
	left: '50%',
	xPercent: -50,
	yPercent: -50
})

TweenMax.set(android, {
	transformOrigin: '50% 50%'
})

var tl = new TimelineMax({
	repeat: -1,
	paused: false,
	repeatDelay: 0,
	immediateRender: false
});

tl.timeScale(3);

tl.to(android, 10, {
	x: 150,
	y: 150,
	scale: 3,
	alpha: 0,
	ease: Power1.easeInOut
},'+=1')
})()

しかしながら、自由度はSMILの方がやはり高い。
SVGパスのアニメーション化はやはり諦めるしか無いのか・・・・(涙
CSS+javascriptでのアニメーションだけでは、今までと進歩が感じられ無いと思ってしまうのは私だけかな。
Flashのパスアニメーションをおもわず思い出してしまう。

でもでも、モバイル端末(※スマートフォン)でのコンテンツ作りにかかせないと思うのでもう少し勉強続けたいと思います。

Published by tomoka , on 10月 12th, 2015 at 10:01 am. Filled under: 未分類No Comments
この記事を読む

SVGについて

SVGのアニメーションをやってみようと試みる。
まずは、svgについて知らなくてはなのです。

以下のサイトで勉強させて頂きました。
http://www.hcn.zaq.ne.jp/___/SVG11-2nd/
http://www.h2.dion.ne.jp/~defghi/svgMemo/svgMemo.htm←pdf版もある!

avgの描画部分。
自由なパスが引ける為にはのd属性に指示子でコマンドを知る必要があるとおもう。
丸や四角等のパスに関してはに比べればそれほど難しい記述ではないです。

指示子の大文字と小文字には意味があります。
例:A(絶対), a(相対)※d属性”楕円弧曲線命令”の場合。
大文字が絶対値で小文字は相対値です。

また、描画させる値の設定にはいくつか決まりがあります。
それは、画像の形により違うのですが、同じパス内で始点と終点は同じ座標は指定できないようです。同じ座標を指定しても描画できませんでした。閉じるコマンドがあるので、閉じる時は”z”を指定です。

特に慣れていない自分用に、見ただけではよく意味が分からなかったコマンドに関してのみメモとして細かい設定内容を記述します。もう少し勉強が進んだら増やすかも?
名称未設定-1
** 円を角場合の指定について
(rx ry x-axis-rotation large-arc-flag sweep-flag x y)の内容をd属性に設定

** x-axis-rotationについて
名称未設定-2
どのぐらいx軸回転されるかを設定。

** large-arc-flag sweep-flagについて
以下の図がとても分かりやすい。始点と終点が決まっている重なり合った円の場合4とおりの接続方法がある。どの方法でつながるかを指定できる。
参考文献:http://www.hcn.zaq.ne.jp/___/SVG11-2nd/images/paths/arcs02.svg
スクリーンショット 2015-10-14 9.20.01

Published by tomoka , on 10月 10th, 2015 at 8:48 am. Filled under: 未分類No Comments
この記事を読む

デザインをリニューアルする事を考えてみる

私のブログは閲覧数も少なく特にリニューアルする事は考える事はないのですが、リニューアルする事を考える機会はたびたびあるのでメリットやデメリットについて、今一度考えた事をまとめてみようと思いました。

デザインのリニューアルをするとは

私がそろそろリニューアルを考えるべきでは?と思うのはサービスを開始した(改善を加えた)時期からみて、以下のようなの時期が適切なのではないかと思っています。

  • デザインのテイストが今の流行と大きくかけ離れてきたとき。
    • アプリの場合はなおの事デザインの移り変わりが早いので、すぐかけ離れてしまうため、リニューアル時期は注意が必要。
    • システムの改善だけではリニューアルは分かりにくい。アイコンを変えるとかでも目に見える変化が無いと手入れされていないサービスに見える。
  • 使い勝手が悪い箇所を改善することが、簡易的なカスタマイズだけでは対応できない。
    • サービスを開始した当時の使い方からユーザーの使い方が変わってきた。
    • ユーザーの求めている情報が変わってきた(サービスを開始時の流行とか年代とかが変わった)。
  • ユーザの興味がずれてきて、ユーザーが減りつずけ増える気配がない
    • 今のユーザーにとって魅力のあるコンテンツなのか内容の見直し
    • デザインのリニューアルで、今のユーザー層にアピール

デザインのリニューアルはしない

リニューアルする事によって、今まで滞っていた箇所を一気に改善できるし、目に見えて改革が行なわれるためユーザーにも分かりやすい変化なのでサービスが充実して行くイメージも強く押し出せ、とても良い事だと思います。でも、リニューアルしない事は悪い事ではないです。リニューアルしなかった時のメリット、デメリットを考えてみました。

メリット

  • 人によっては使いやすい、見慣れた画面。学習コストがかからない。
  • デザイン以外の部分のカスタマイズで開発費や宣伝費を押さえてリニューアルできる。

デメリット

  • デザインが古い=情報が古いように見える。
  • 変わりばえしない画面では特別な機能を追加しても目立ったアピールがしにくい。
  • 目に見えた変化が無いので、サービスが放置され手入れが行き届いていないように見える。

デザインのリニューアルをする

そもそも、サービスの提供をしてすぐにリニューアルを迫られるとしたならば、それはもともと、企画段階から見直す必要が出てきます。
しかしサービスを開始してからある程度運営したサービスだった場合。開始当時からユーザーの使い方も思想も時の流れに沿って変化するので、時が経てばたつほどユーザーとの操作性や必要とする情報のずれが大きくなります。

特にアプリの場合はデザインのはやり廃りも早く、OSのアップデートも早いためUIUXもめまぐるしい早さで更新されてゆきます。
使い方は常に変化してゆくき、削除が特に変化したと思います。過去は削除する項目を選択し削除実行するのが普通でしたが、今では横にスワイプしたり長押しする事で手軽に削除する事が出来ます。また、簡単に削除できるようになったので、削除した直後元に戻すかどうかを聞いてくれるため、誤って削除した時にはすぐにもどす事が出来ます。

結論

リニューアルは必ずしも必要な事ではないですが、ある程度、ユーザーの端末の操作性やサービスの使い方にずれが出てきて、起動回数や利用者が減ったりするのならば、現状を把握して今のユーザーにあった使いやすいUIをどのぐらいの度合いでリニューアルとして組み込むかを、サービスの露出の方法やアプローチの方向性も含めて対策として、方向性も含め、検討する事がリニューアルするメリットを十分に活かせて良いのではと思います。

Published by tomoka , on 8月 23rd, 2015 at 8:11 am. Filled under: その他No Comments
この記事を読む

マテリアルデザイン プロダクトアイコン

まえおき:英語良く分かっていないのですが、原文を読んで、翻訳しながら解釈した内容を日本語で書いていますので比喩があるかもしれません。また、自分の感想を書いている箇所もあるので、文章全てがページに書いてある事と言う訳ではないです。

アイコン作成に関して

例としてgmailのアイコンの説明

gmailのアイコン等は実際に紙を折って影の着き方等を参考にし作成されました。
アイコンとして形を作成し、決まっている光の方向(左、145度(photoshop参考))から影をおとしマテリアルの原型をつくりスポットカラーが配置されました。

アイコンの形を作成する用のグリッド(ガイド)に形を落とし込み作成されました。プロダクトアイコンを作成するのにグリッドが手助けをしてくれます。位置決めなど、規則性を持たせることができ、アイコンをまとめる事によりシステムに統一した雰囲気が出てきます。

Gmailのアイコンのスポットカラーは「赤」だと思うのですが。このスポットカラーの矩形には影を付けずに存在する場所によって陰影がついているのみで、アイコン上にはっきりさせています。

キーラインの種類に関して

キーラインを統一する事で、アイコンがまとまります。
Square
Height: 152dp
Width: 152dp

Circle
Diameter: 176dp

Vertical rectangle
Height: 176dp
Width: 128dp

Horizontal rectangle
Height:128dp
Width:176dp

DP グリッド

androidの推奨するアイコンは48dpで作成する事です。ですが実際にアイコンを作成する時は400%の192dp*192dp(角の丸みは4dp)で作成することを推奨しています。
これにより拡大縮小しても、きれいなエッジラインをのこせるようになります。
1:1の大きさではなく、4:1の大きさで作成する。

幾何学

円、正方形、長方形、垂直、および対角線:プリセットの基準は、特定のキーラインで決定されます。この小さなパレットは、製品のアイコンを統一します。

アイコンの構造

アイコンを解剖するとグラフィック要素で構成されています。この構成はロゴの微妙な特徴を表しています。また、基本構成を意識する事によって、ロゴデザインの学習になります。

コンポーネント

重なっているコンポーネントは1つ前の上に配置されています。
コンストラクチャの視点
アイコンの構造を斜めから観た例
それぞれ番号に名称がついています
1. 仕上げ
2. Material 背景:背景要素
3. Material 前景:背景に影を落として上に配置。
4. 色
5. 影

背景:背景要素
全景:背景の上に素材を乗せている
色:ごく一部の素材の色(ポイントカラー。gmailでいうならば、「M」の形とっている赤の事。)
宙に浮いている:色だとしたら隅々までひかれる(gmailでいうならば、アイコンのポイントカラーがつく前の原型の事。)
色付きの縁:素材の上の淵に白いテクスチャーか明るい色をオリジナルで用意するか。
影の淵:素材の下の淵に暗い色または暗いオリジナル色
影:柔らかい影をまとった隆起した素材。
仕上げ:全ての素材の上に左上右下へ影を落とす。

テーマ別色選別方法

色彩、覆い、影の値

色合いと陰影が追加されたときの各色が異なって反応します。すべてのエッジの色合い、エッジシェード、および影の色は、その背後にある各色ごとに調整する必要があります。色の調和を確保するために、それぞれについて適切な値を利用してください。

プロダクトアイコンのパターン

物理的な物質はいろいろな環境に影響を受け、表面と触感でのセンスは規則を作ります。相互作用でたくさんのユニークな構成物になります。

色の要素は、平らな紙の上に存在してください。
色の要素をエッジまたはシャドウで飾らないでください。

レイヤー

紙のレイヤー要素は深さを作り、エッジと影と持ちます。
重なる数に注意してください。
あまりにも複雑になるとフォーカスが欠けてしまいます。

昇降

シンプルな素材の上の中心部から影を伸ばします。
消して他のシェイプをクロップしないでください。

折り目を入れたマテリアルエレメントは幾何学的な要素を失わずに深さの感覚を持たせます。
折り目は中心を通り、形をシンメトリーにします。
中心でなかったり複数の折り目は使用しないでください

折りたたみ

折りたたみ要素は、見た目よりもおおきく歪みます。改変または重要な要素を詐称避けるのでスポットカラーの場所には、避ける。

重ね

オーバーラップ材料要素は、ユニークなシルエットを作成します。すべての要素、エッジ、シャドウはシルエットの内部に閉じ込められています。1つ以上のオーバーラップを超えないようにしてください。あまりにも多くを持つことは、アイコンを複雑にし、フォーカスを欠いてしまいます。

アコーディオン

折り畳まれた要素は単一の素材に次元を追加させます。ただし、2つ以上の折り目を超えないようにしてください。あまり階層を多く持つ事はアイコンを複雑にし階層を分からなくします。

ゆがみ

プロダクトアイコンは歪ませたりしてはいけません。エレメントは幾何学的な形をしていなくてはいけなくて、歪ませたり、傾けたり、伸ばしたりしてはいけません。

プロダクトアイコンを読んで

アイコンを歪ませると言う視点に関しては、デザイン上そう言う事もあるだろうなとは思うけれども、そもそもプロダクトアイコンとはどういったアイコンの事をマテリアルデザインではさすのかと言う視点から見るとと言う話なのでとてもなっとく。

そして、プロダクトアイコンも構造から考える。全て構造化。
アプリケーションである事を分かりやすく伝えるために、androidにインストールするアプリケーションに関しては規約をそろえるということなんですよね。

次は、システムアイコン。

Published by tomoka , on 8月 6th, 2015 at 10:47 pm. Filled under: Android,app,マテリアルデザインNo Comments
この記事を読む

マテリアルデザイン 色について

今日は色について勉強。
かなりひどい書きかけを修正しました。

カラーの指定をする時は、端末できれいに表示できる色を推奨しているようです。
マテリアルデザインのカラーページにはキーカラー用とアクセントカラー用の推奨カラーを記載しています。(http://www.google.com/design/spec/style/color.html)

キーカラー

原色を500として、プライマリカラーとアクセントカラーを記載しています。
※バージョンがA***となっているのは、アクセント用のカラーを指します。

色の選択方法

プライマリカラーとアクセントカラーをバージョンにAがついた2つ目のパレットから選択し、それぞれの色から3色相を選択することで、プライマリカラーとアクセントカラーの色使いを制限します。

透明度と重要度

style_color_uiapplication_alpha2 style_color_uiapplication_alpha1

テキストやアイコンの表示を他のテキストに比べていかに重要であるか伝えるために、テキストやアイコンの不透明度を変更して表現します。特にテキストはテーマを黒と白で選んだ時の透過度が変わります。
アルファ値の設定は明度でも彩度でもないので、色のバリエーションを増やすのみは指定しやすいのかなと思った。

暗い色のテーマ

Light text (#FFFFFF) Opacity
Primary text 100%
Secondary text 70%
Hint and disabled text and icons 30%

明るい色のテーマ

Dark text (#000000) Opacity
Primary text 87%
Secondary text 54%
Hint and disabled text and icons 26%

プライマリーカラーとアクセントカラーの指定

ツールバーとステータスバーの指定

  • ステータスバーの設定 プライマリカラーの700
  • ツールバーの設定 プライマリカラーの500

アクセントカラーの指定

  • アクションボタン、スイッチボタンの色に適応します。
  • テキストの場合。linkを設定するテキストのみなどにも利用します。

ここいらへんは、いままでのデザインの作り方とは大きくは変わらない。
コンバージョンを求める箇所に利用とかは良くつかってきたよね・・・・

アクセントカラーの特殊(?)なつかいかた

アクセントカラーの色の落とし方

アクセントカラーが機能できない場面に陥ったとき。例としてですが、アクセントカラーとして機能する為にはコントラストを十分に引き出す方向でアクセントカラーを作ります。
例えば、プライマリカラーの500が背景に使われてしまった場合、HSB色空間(Hue、Saturation、Brightness)のSaturation(彩度)を黒53% または 白100% にて調節してつかう。
画像は背景にプライマリカラーの500を使った場合で 黒53%
※ここら辺の言葉の意味が少し分からなかった・・・>< 英語力無い。

テーマに関して

アプリに一貫したテーマを選択します。明るいテーマと暗いテーマを用意してあります。
テーマは、明るいと暗いによって、表面の闇、影のレベル、およびインクの要素の適切な不透明度を指定できます。ページにテンプレートが用意されています。
http://www.google.com/design/spec/style/color.html#color-themes

いい加減、次の投稿の時にはCSS整えよう。
と、心に誓う。

Published by tomoka , on 7月 28th, 2015 at 11:50 pm. Filled under: AndroidNo Comments
この記事を読む

マテリアルデザイン 深度について

前置き

マテリアルデザインを急速に勉強中・・・・
http://www.google.com/design/spec/material-design/introduction.html

ここでは、深度について学んだ事をメモしたいと思います。

ベクトルの方向

whatismaterial_environment_3d
右上を(0,0)としている。
お気づきのように、Z-indexが存在します。

Z-index

これが深度の影の付け方にとても関係します。
オブジェクトの種類によって深さが変わるのです。

  • キーライト:影の方向性を決める
  • アンビエントライト:深度を決める
  • キー+アンビエントライト:2つの組合わせ

whatismaterial_environment_shadow3

whatismaterial_environment_shadow2

whatismaterial_environment_shadow1

物質的なプロパティ

ルール、箇条書きします。

  • オブジェクトには1dpの厚みがあります。
    whatismaterial_materialproperties_physicalproperties_thickness_01_yes
  • アンビエントによるshadowは深度に関連します。
  • オブジェクトに配置されるコンテンツには厚みがありません。
  • オブジェクトに配置されるコンテンツは配置されたオブジェクトよりも大きくなる事はありません。
  • 多くのコンテンツをまたいで、アクションをおこすトリガーを設定しない。(結構あたりまえかも?)
  • 意味の違うオブジェクトが同じ階層に存在する事はほぼ無い
  • 深度の違うオブジェクトが交差する事はない。(情報の構造はしっかりすれば大丈夫。)
  • オブジェクトの大きさによって矩形が変わります。円 < 角丸四角 < 四字熟語
  • 同じオブジェクトであれば、切り離しても、元の通りにつなげる事が出来る

深度と影について

種類により深度が変わります。
もちろん、3Dなので、影のdpの深さも変わります。

Elevation (dp) Component
24 DialogPicker
23
22
21
20
19
18
17
16 Nav drawerRight drawerBottom Sheet
15
14
13
12 Floating action button (FAB – pressed)
11
10
9 Sub menu (+1dp for each sub menu)
8 MenuCard (picked up state)Raised button (pressed state)
7
6 Floating action button (FAB – resting elevation)Snackbar
5
4 App Bar
3 Refresh indicatorQuick entry / Search bar (scrolled state)
2 Card (resting elevation)Raised button (resting elevation)Quick entry / Search bar (resting elevation)
1 Switch

補足:2つのオブジェクトの深度の差には6dpあります。
whatismaterial_3d_elevation1
仮想の深度が2dp上の深度が8dp。

横から見るとこんな感じ。
whatismaterial_3d_elevation2
ちなみに、影の大きさは深度のdpに関連します。
そして、オブジェクトに深度を付ける事により、他の階層のオブジェクトから特別とされ、特に機能が単独であれば他に関与されない独立された動きを実現するようになります。(gmailのメール作成の丸いボタンのように。)
http://www.google.com/design/spec/what-is-material/elevation-shadows.html#elevation-shadows-elevation-android-

マテリアルデザインの深度はアプリの構造もユーザーに伝えようとしたデザインと言う事になります。

Published by tomoka , on 7月 27th, 2015 at 10:48 pm. Filled under: appNo Comments
この記事を読む

ほしのしまのにゃんこ✧

読み直して、書き直した・・・・(汗)

ほしの島のにゃんこあそんでます ニャ-(●ↀωↀ●)✧
にゃんこの仕草が可愛くて可愛くて・・・にゃんこが働いている・・・にゃんこが遊んでいる・・・とても癒されています。

ふと気がつき、アプリ内の文章にひらがなが多く漢字には送り仮名が振られている事に気がつきました。
明らかに子供用に作られているなぁと言う感覚。
子供用のアプリで流行ったのと言うと、「どうぶつ将棋」ぐらいしか思いつかない自分。
気になってアプリについて誰かが話しているページをさがしてみました。

ほしのしまのにゃんこを知らない人も居ると思うのでざっくりと紹介。
きっと、ティザーサイトを観た方が早いと思う。
こちら→http://colopl.co.jp/hoshinyan/

そして見つけたインタビュー記事→http://gamebiz.jp/?p=126928
ターゲットユーザーに子どもが入っていた!
「子どもは成長して、大人は童心に戻れるアプリ」
家でお母さんと子どもがタブレットで遊んでいる姿が目に浮かびます・・・・。

子ども向けに、
・演出を派手に
・子どもの親しみやすい食べ物を取り入れる
・モチーフキャラクターを親しみやすく呼びやすい「にゃんこ」にした
 ・たくさんいてもくどくないように無表情
などなど。

あとは、記事の中のあまり子どもよりにしすぎると、子どもも飽きてしまう。と言う部分に納得。大人も子どももゲームをやっていて新しい発見が無いとつまらなくなるんだろうなと言う事か・・・と思った。

また、ターゲットユーザー層を集めて、ゲームを遊んでもらいリリース前にヒヤリングはやるべきなのかも。年齢別や性別、環境で感じる事、考える事は違うのでリアルなターゲット層を10~20人集めてテストする事は今まで見えなかったゲームへの要望も出てくるだろうし、良いと思っていた画面遷移に問題が出来るかもしれないので、必要だと思いました。

とくに開発中、新機能のテストフェーズのような期間を定期的に入れて軌道修正しながら開発をすると効率よくターゲット層にマッチしたコンテンツが作れそうですよね・・・。

Published by tomoka , on 7月 12th, 2015 at 6:00 am. Filled under: 未分類No Comments
この記事を読む

iOSの画面デザインを作る時にやっている事

iphoneはストーリーボードでレイアウトを作成するとき、比率かえずにレイアウト配置してしまうと
解像度が変わった時に意図したレイアウトにならなくなりますよね。
なので、レイアウトをする時はどの解像度でみてもあまり変わらないように割合でレイアウトを考えていると思います。

なので、私はカンプを作成する時に、320px基準に考え8ptのグリッド線をひいて作成しています。
iphoneの画面をデザインするとき、横(短い方)を1として、デザインする横幅の基準を決めれば、
横幅基準で割合にてレイアウトすると解像度が変わっても縦の見える範囲が変わるのみでレイアウトが崩れる事はありません。

@3で作成するのだったら、画面に24*24のグリッドをひいてレイアウトしています。

なぜ、1マス24pxかというと、Xcodeでレイアウトする時に@1にした時に1マス8ptとして考えられ、
320pxを基準で考えている場合、8/320=0.25と、割り易い数字なので割合で比率を計算し易くなります。

しかし、8はあくまでも基準です。
細かいレイアウトは8の倍数と言うわけにはいかないからです。
グリッドを意識してレイアウトするとストーリーボードに落とし込む時に落とし込み易いと言う程度です。

ちなみに、設定の中にある、photoshopの良くご存知のこの機能です・・・
グリッド線

最初はみづらいなーと思う。(私も思った)
グリッド線の色で画面が染まる・・・・。
スクリーンショット 2015-07-05 6.11.46

グリッド線は[command]+[@]でon/off出来るので、[command]+[h]とあわせて、
ショートカットを覚えておくと良いです。

Published by tomoka , on 7月 5th, 2015 at 6:15 am. Filled under: 未分類No Comments
この記事を読む

iPhoneアプリの素材、pngやpdfの読み込みに関してやってみた!

Xcodeでベクター(PDF)を使った開発方法
http://www.bravesoft.co.jp/blog/archives/987

やってみました。思った以上にベクターデータが汚くて残念。
ちなみに、前知識としてXcodeでのレイアウトは320pxを基準にしています。
スクリーンショット 2015-05-07 0.06.10

上から順番に・・・

1)アートワーク50px*50pxのベクターデータ(pdf)
2)キャンバス50px*50px 72dpiのpng
3)アートワーク50px*50pxにキャンバス50px*50px300dpiのpngを貼付けたpdf

それぞれを180*180のImage Viewに貼り込んでみました。
ベクターデータが一番きれいかなと思ったのですが、違った・・・!

でも、このやり方で素材を渡せば、@3で作った素材のクォリティーそのままで想像以上に汚くならず、しかも、素材の配置に手計算とかしなくても良いし、余計な手間がかからなくてすむかも。
※ちなみに、50px*50pxサイズの解像度違い300dpiと72dpiの画像貼り分けはほぼ変わりませんでした。
(やった後、そりゃそうだと思ったw)

pdfよりも300dpi相当の解像度の画像をpdfで圧縮した方がキレイになる事が分かりました。
300dpiだから@4相当です。

ちなみに、@3相当で作成するとベクターと同じ見栄えになります。
キャプチャ→サンプル画像はこちら

これから@3以上の@4、@5が出てきた時のことを考えるとベクターで素材を作るのがbestかもしれません。


Published by tomoka , on 5月 7th, 2015 at 12:22 am. Filled under: app,smartphone,未分類,調べものNo Comments
この記事を読む

iPhoneアプリの素材、pngやpdfの読み込みに関してやってみたい事

iPhoneアプリの開発の時にベクターデーターを読み込むとき横幅320pxデザイン幅でpdfにして素材を渡すのですが、ベクターデーターはもともとイラストレーターで作成するので600dpi以上はあるので拡大縮小に問題なくきれいにネイティブアプリでレンダリングしてくれますが、ベクターデーターで素材を渡す事のできない写真素材とかしずる感たっぷりのpng画像等に関しては320pxのデザイン幅で素材を渡すととっても残念な事になります。
なので、ちょっと考えてみたのですが、@3のサイズでデザインしたpng画像をイラストレーター上で320px幅のおおきさに縮小して320pxデザイン幅のpdf素材として、提供したらどうだろうと。
iPhone上で展開されれば、他のベクターデータと同じような解像度で表示できるのではないのだろうか。

また、png画像の解像度を300dpiぐらいに設定してレンダリングさせたら作成したサイズで表示されるのだろうか?
もし、72dpiで表示されたら4〜5倍の大きさで表示されてしまわないのだろうか。

私はデザイナーなのですぐに検証する事が出来ない。
端末によって液晶の解像度が違うのでdpiの違うpng画像をそのまま表示させたら、表示サイズが変わる可能性が高いと思った。だから、pdfにするのが良いのではとも思った。両方試してみたい。

気になったのでメモ。
検証できたら、このブログでお知らせします。

Published by tomoka , on 5月 2nd, 2015 at 9:41 am. Filled under: app,iPhone,smartphone,調べものNo Comments
この記事を読む