ホームページ制作WORKS制作実績BLOGブログRECRUIT採用情報COMPANY会社概要CONTACTお問い合わせ03-6659-5220WordPress・レスポンシブが得意!ホームページ制作BLOGAndroidアプリデザインを始める前に知っておきたい4つのことAndroidアプリデザインを始める前に知っておきたい4つのこと2016/02/04ツイートAndroidアプリをデザインしよう!と思い立っても、ウェブデザイナーさんがいつものように作ろうとすると上手くいきません。Androidアプリのための特有の知識が必要だからです。調べてみると知らないことが大量に出てきて焦りますよね。そこで、Androidアプリデザインを始める前に、最低限これだけ学べば何とかなる!という4つのポイントをまとめてみました。(1インチあたりのドット数)1インチの中にいくつドットが入っているかを表す画面密度の単位。pixels(密度に依存しないピクセル)画面密度が異なる端末間でも表示サイズをいい感じに揃えてくれる単位。最初に勉強しなくてはいけないのがよく似たこの2つの単位です。「dpi」は1インチ(2.54cm)の中にどれだけドット(点・ピクセル)が入っているかを表す画面密度の単位です。Android端末の画面密度はldpi、mdpi、hdpi、xhdpi、xxhdpiなどのグループに分けられます。※ldpiのシェア率は非常に低いため、考慮する必要はほとんどありません。Developers)mdpiは160dpiなので、1インチの中に160個のピクセルが入っているということになります。mdpi(160dpi)とxhdpi(320dpi)を比べると、xhdpiは1インチの中に入っているピクセル数が2倍(1pxのサイズが半分)になるので、より鮮明に表示されます。上記の例の場合、フォントサイズをpxで指定するとxhdpiでは半分の大きさで表示されてしまいます。これを解決するために利用するのが「dip」です。「dip」とは密度非依存ピクセル、つまり画面密度に左右されない単位のことです。他の画面密度との比率に応じて適切なピクセル数に変換されるので、これを使えばどの端末でも同じようなサイズで表示できます。画面密度とdipの関係は以下のようになっています。見た目のサイズがmdpi端末に比べて半分になってしまいます。32pxこのように適切なpxに変換してくれるので、同じ表示サイズになります。Qiita2.何pxでデザインするかとにかく一番知りたいのは、どのサイズでデザインを作り始めればいいの?ということですよね。基本的には、一番大きいサイズに合わせて作成します。Androidの画面横幅は480系(480px、640px)と540系(540px、720px、1080px)の2種類ありますが、現在の主流は540系なのでxxhdpiの1080pxに合わせて作るのが一般的なようです。60px短い480系で切れても問題ないようにということも念頭に置きましょう。6pxこのように、6pxの倍数でデザインを作成すれば、他の画面密度の端末用に縮小しても端数が出ずにうまくいくというわけです。keisuke.tsukayoshiちなみに、アイコンサイズについてはアンドロイドのガイドラインで定められています。代表的なものを下記にまとめます。1920pxのデザインを作成したら、主に次の3通りのやり方で他の画面密度用の画像を作成します。1各画面密度用にそれぞれ画像を作成する。Developersで推奨されているやり方。画面密度の倍率に応じて画像を縮小し、つぶれてしまう部分などがあれば微調整して、各サイズの画像を作成します。2一番大きいサイズの画像(xxhdpi用の画像)を縮小表示させる。これには画像をいくつも用意しなくてよいというメリットがある反面、下記のようなデメリットもあります。・細かい模様がつぶれることがある・無駄にサイズの大きな画像を読み込むので表示速度が遅くなるシンプルな画像はこの方法で手早く済ますとよいかも。参考:Android:xhdpiリソースしか持たないアプリが抱える問題3綺麗に拡大できる9patchを作成する。このあと説明します!shapeタグというものを利用することで、画像を使用しなくても角丸・グラデーションなどを取り入れたボタンを作ることもできます。TechBooster4.画像を綺麗に拡大できる9-patch9-patchというのは、画像を「拡大したい部分」と「拡大したくない部分」に分けることで、品質を保ったまま拡大できるというものです。ボタン部分の画像などに用いられます。「拡大したい部分」として指定した領域が内容量に応じて伸びてくれるので、いくつも画像を作る手間が省け、データ量も抑えることができます。データとしてはごく普通のPNGファイルですが、ルールに従ってちょこちょこ黒い点を書くという処理をします。作成方法は以下の通りです。色は黒:#000このように作成すると、上辺・左辺で指定した「伸ばす部分」が、下辺・右辺で指定した領域内でストレッチして表示されます。「拡大したい部分」さえ指定すればあとは伸びるので、下の右側の画像のようにマージンなどを最小限にして作成するとスマートです。最後に、この画像を9-patchのデータとして認識させるために、拡張子の前に「.9」を付けます。これで9-patchグラフィックの出来上がりです!こちらのサイトでいろいろな指定の仕方が試されています。採用強化と集客強化、まさにこの2つがここ1年の大命題な感じです。育った方と離脱した方の2つに別れました。BRISKでは、ECサイト構築の相談を多く頂いております。前回の記事で、google検索結果でのいろいろな見え方についてまとめました。Googleアナリティクスは無料で使用でき、アクセス解析機能も豊富なため、今やWEB制作には欠かせないツールになっています。