サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
パリ五輪
blog.excite.co.jp/spdesign
AdobeのCreative Cloudを使っている方でしたら、すぐにインストールすることができますよ。 Creative Cloudは少し荷が重い…という方でも、Photoshop + Lightroomが月々980円で使える「Photoshop 写真家向けプログラム 」というプランも用意されています!(2014/04/08現在)
スマホファーストが叫ばれる昨今、皆さんもHTML5やCSS3を使ってスマホサイト等を作成していると思います。 タッチデバイスに対応するために、jQueryなどのjsライブラリを使用する機会も増えているのではないでしょうか。 jQueryはプラグインなども豊富に配布されているため、 サイトに欲しい動きを実現してくれるプラグインを探して⇒CSSをカスタマイズ⇒いいかんじのが出来る! といったように、CSSとHTMLが解るwebデザイナーであれば割と気軽にサイトをリッチにすることが可能です。 が、ダウンロードしたプラグインにちょっと動きを追加したい、とか あのブラグインとこのプラグインのいいとこどりをしたい、となると、なかなか拾い集めでは上手いこといかず。 ブログラマーの方にお手伝いいただいたり、妥協してしまうこともあったりしないでしょうか。 今回はHTML5、CSS3までは解るけどjQuery
※新規3サイズのアイコンについては、命名規則を見つけられませんでした。 iOS 7 iPhone(Retina)用のアイコン:120x120 iOS 7 iPad用のアイコン:76x76 iOS 7 iPad(Retina)用のアイコン:152x152 以上の3つのサイズが増えました! ユニバーサル対応のアプリは、上の表にある7種類のアイコンが必要です。多い! リサイズのみでいける作業ならば、さくさく対応してしまいましょう。 角半径の変更 以前のものよりも丸みの強い形に変更されました。 端の方に文字を置いたり、キモになるオブジェクトを置いている場合、欠けてしまいます。 だいぶ丸っこいですよね。 純正のアイコンがフラットデザインに変わったこともあり、アイコン・アプリのデザインも変更する必要があるかもしれません。 全てのデザインを刷新するのは時間がかかる作業ですので、文字が欠けてしまったり影の
ここ数年、UXという用語をよく使うようになりましたね!今回は最近浮上した『UX』と以前から使われてた『UI』について話したいと思います。 (UI・UXは色んな分野で幅広く使われてる用語ですが、ここでは主にモバイル分野を前提に話します。) UI(User Interface)とは 広い意味で『Interface:インターフェイス』は人の世界と物の世界の接点・コミュニケーション空間を意味します。 人はインターフェイスを通じて目に見えない機能を視覚的にみて操作してコミュニケーションします。 『User Interface:ユーザインターフェイス』はこのようにユーザとデジタル機器とのコミュニケーションがうまくできるように手伝ってくれるOS・アプリ画面などを意味します。 iPhoneのアプリのリンクが今のようなアイコンではなくてテキストだと想像してみましょう。 色々なアプリの中から写真アプリを見つけ
アプリデザインに欠かせないアイコン。 iOS、Android、Windows Phoneで使われてるアイコンって...、似てるようで違いますね。 ユーザが混乱したり違和感を感じるのを防ぐ為、各プラットフォームに相応しいアイコンを使うことが大事です。 そのためには、まず各プラットフォームで提供するデフォルトアイコンを把握することが必要です。あとカスタムアイコンを作る時も出来ればそのプラットフォームのアイコンスタイルを守って作るといいですね。 今回はiOS/Android/Windows Phoneの 1. デフォルトアイコン 2. カスタムアイコンのスタイルガイド を紹介したいと思います。 (2013年3月最新Ver.基準) シンプルで無駄がない。細かすぎると粗雑で判別のできないアイコンになります。 システムに用意されているアイコンの1つと簡単に見間違えられない。ユーザは、カスタムアイコンを
iPhone・iPadアプリを制作する時、リソース画像は ① 従来のディスプレイ用 ② Retina ディスプレイ用 上記の2種類が必要ですね。 Androidアプリも同じようにdpiごとにリソース画像を用意する必要があります。 今回は 1. 必要となるリソース画像サイズの種類 2. デザインする時の画面サイズ 3. アイコンサイズのガイドライン などAndroidアプリのリソース画像を作る時に役に立つ情報をまとめてみました。 必要となるリソース画像サイズの種類 Androidアプリのリソース画像は対応するdpiによって用意する画像サイズが変わります。 まず、dpiって何でしょう。 dpiは『Dot Per Inch』、1インチ辺りのピクセル数を意味します。つまりdpi数値が高くなるとディスプレイが鮮明できれいになります。 dpiは主にldpi(低解像度)、mdpi(中解像度)、hdpi(
前回の記事に引き続き、色で見る昨今のアイコンのトレンドについてをまとめました。 アイコンのカテゴリ 2012年10月19日金曜日の21時ころのApp Storeのランキングのキャプチャをとりました。 エンターテインメント~フード/ドリンクまでの22カテゴリの1位から28位までのアプリアイコンが対象です。 22カテゴリ×28つ=1232 1232のアイコンから統計を出しました。 アイコンは以下の9色で分けました。 「赤/ピンク」 「青」 「黒」 「白」 「黄/オレンジ」 「緑」 「茶」 「灰」 「紫」 「その他」(どれにも属さない) 上図のように分別しました。 使われている色が多く分別不可能なものは「その他」として集計しました。 はたして、何色が一番使われているのでしょうか! 1位 青:262 2位 赤/ピンク:149 3位 黒:124 4位 緑:117 5位 黄/オレンジ:117 6位 茶
以前の記事で紹介したApple Inspires Me やiOS Icon Galleryを見ていると最近は本当にリアルなアイコンが多いですね~。 少し前にPhotoshop VipさんでもiOSアイコンのまとめ記事が取り上げられていました。 クオリティー抜群、素敵iOSアプリ用デザインアイコン45個まとめ このようにクオリティが高いことで注目されているiOSアイコンですが、実際App Storeで上位にいるアプリアイコンはどんなものが多いのでしょうか?わたし、気になります! というわけで調べてみました。 アイコンのカテゴリ 2012年10月19日金曜日の21時ころのApp Storeのランキングのキャプチャをとりました。 エンターテインメント~フード/ドリンクまでの22カテゴリの1位から28位までのアプリアイコンが対象です。 22カテゴリ×28つ=1232 1232のアイコンから統計を出
iOS6ではナビゲーションバーの色に応じて、ステータスバーの色を自動的に変更してくれます。 どういうルールで色を表示しているのか、検証してみました。 今回は大きい画像が多いです。 色の例 ご覧のように、ナビゲーションバーが赤ければステータスバーも赤。 青ければ青、というように連動しています。 画像の場合 チェックの画像とボーダーの画像を用意しました。 グリーンのチェック画像は、ステータスバーが緑ですね。 くすんだピンクの斜めボーダー画像は、くすんだピンクです。 色の平均値を取っている…?やはりそうなのか…? 1:下部1pxに青と黄色半々のラインのあるもの 2:下部1pxに赤のラインのあるもの 3:上部1pxに赤のラインのあるもの 4:下部1pxに白と黒半々のラインのあるもの 5:中心1pxに青と黄色半々のラインのあるもの 下部、上部、中心と、それぞれ1pxずつラインを入れてみましたが、あま
iPhoneのお話です。 デフォルトで作ることのできるタブバーについて簡単にまとめました。 タブバーとは 下図にあるとおり、アプリ内の下部にある「画面を切り替えるためのボタンが配置されている領域」です。 「App Store」や「ミュージック」などApple純正アプリでも使われていますよね。 今回はデフォルトで作ることのできるタブバーデザインの画像アイコンについて、いくつか実験をしてみました。 色違い 背景を透過している透過png、60px × 60px(Retinaサイズ)。 白、黒、赤、青、黄色の5種の家アイコン画像を用意しました。 それぞれのアイコンを取り込んで表示します。 全部一緒だ! 色がどうってよりアルファで判断してるんですね。 というわけで色の違いではグラデや見え方の違いはありませんでした。 アルファいろいろ 色は白一色で、アルファにグラデーションをかけたものを3種類用意しま
本日からデザイナーブログをはじめることにしました。どうぞよろしくお願いします。 記念すべき1つめの記事です。 まずはアプリデザインをする上で、覚えておくと便利なブックマークをまとめてみます。 デザインのヒントをもらったりインスパイアを受けたり、クリエイティブなアプリデザインは見ているだけで楽しいですよね。 他の方のブログやサイトでまとまってるものを良く見ますが、自分がアプリデザインをする際に参考にしているサイトさんだけをまとめました。 Android関連は最後の2つだけで、他はすべてiOSのアプリやアイコン紹介になります。 アイコンに関してはAndroidアプリ作成時にも参考になるかと思いますのでぜひ見てみてください! 1.アプリの顔~アイコン~ Apple Inspires Me http://www.appleinspires.me/ アイコンだけでなく、UI、WEBSITEも紹介して
このページを最初にブックマークしてみませんか?
『Excite Designer's Blog』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く