Webやアプリのデザイントレンドを紹介。たまに雑談。

Browse By

Monthly Archives: 11月 2015

[Stock Photo] Awesome Stock Resources – 画像素材のリソースまとめ

  • Pocket
  • このエントリーをはてなブックマークに追加

画像素材サイトのまとめ。GitHubを使って一覧がまとめられており、随時アップデートされているようです。素材はそれぞれ写真、イラスト、ベクター画像、ビデオ、パターン、フォント、アイコン、カラーパレットといった感じでカテゴリごとに紹介されており、各サイトごとのライセンスの取り扱いまで言及されている点がとってもナイスです。特にCC0(Public Domain)の写真素材はまとめて紹介されており、素材探しの際に重宝しそうです。

[Freebie] Free Vector iOS9 GUI template for illustrator – イラストレーターフォーマットの、iOS 9 GUIテンプレート

  • Pocket
  • このエントリーをはてなブックマークに追加

iOS 9のGUIテンプレート。これ系のテンプレートって多くの場合PSDかSketchの場合が多いんだけど、これはIllustratorベースで制作されています。画面サイズはiPhone 5ベースのようだけど、ベクターデータなので拡大に関しては問題なさそうです。イラレでUIデザインする場合に役立ちそうです。

[iPad] Use iPad keyboard shortcuts in iOS 9 and work more efficiently (Cheat Sheet) – キーボード接続のiPadで使えるショートカット一覧

  • Pocket
  • このエントリーをはてなブックマークに追加

いやーiPad Pro、欲しいですな。アップルの犬的にはとっても欲しいのですが、いかんせん高い・・・。Smart Keyboard使いたいなぁ・・・。というわけでこちらではiPadにキーボードを接続した際の使えるショートカットが一覧で紹介されています。主なiPad Appごとに分けて紹介されています。これ見てるとMacでのショートカットにある程度似てるので、Mac使い慣れてる人はいつもの感じで操作できそう。もちろんSmart Keyboardでなくても使えます。家に余ってるMacの無線キーボードとかでもイケるので、据え置きでiPad使う時なんかに役立ちそうです。

[Star Wars] 内なるフォースの覚醒 – Googleのスターウォーズ関連コンテンツ

  • Pocket
  • このエントリーをはてなブックマークに追加

公開日が迫るにつれていろんなメーカーが便乗・・・いや販促キャンペーンとかしてますが、Googleもこの手のコンテンツを制作したようです。Googleアカウントにログインした状態でアクセスすると、ダークサイドかライトサイドの選択を迫られ、選んだサイドによってGoogleの各種コンテンツの見た目が変わるという仕組み。とりあえずライトサイドを選んでみましたが、Gmailの背景とかが変わりました。多分他にも色々変わるとは思うんだけど、そもそも俺Googleのサービスってそれほど使ってないからなぁ・・・。Googleのサービスに魂まで売り渡したシス寄りの人なら、サイドを変更する事で何がどう変化するのかもうちょい分かるかもしれません。May the force be with you.

[Screen Saver]  WATCH Screensaver for OSX – Apple Watch風のMac用スクリーンセーバー

  • Pocket
  • このエントリーをはてなブックマークに追加

いやーこれは素晴らしい。Apple Watch風のMac用スクリーンセーバーが無料で配布されています。Macの画面にWatch Faceがっ! いやこれとてもオシャレですよ奥さん。欲を言えばもうちょいオプションを用意してもらえるとホットなんですが(秒針の色指定とか文字盤の種類とか)。Apple Watchを実際にお持ちの「よく訓練されたアップルの犬」のみなさん、Macでもこんな感じでより犬っぽさを演出するのも悪くないですよね。

[UI Design] Simple Nine-patch Generator – 9パッチ(9スライス)のジェネレーター

  • Pocket
  • このエントリーをはてなブックマークに追加

Nine-Patch、もしくはNine-Sliceと呼ばれる、主にAndroid Appなどの開発現場などで使われるボタン画像フォーマットのジェネレーター。主に上下左右に大きさが可変する角丸ボタンに使われるアレを、簡単にWebから生成できるというものです。Nine-Patchがどういうものであるかはこのあたりを参照してください。画像の作り方は簡単で、まずは「Select Image」ボタンからNine-Patch化したいPNG画像を選択。ロードされると右側に表示されるので、あとは拡大に応じて伸長するエリアとコンテンツパディングを指定するだけ。またこの際「Trim」のプルダウンメニューから「Stretch Region」を選ぶ事で、必要な画像部位だけにトリミングしてくれます。なのでPhotoshopを使ってUIデザインをしている場合、いつも通りに画像をアセット保存して出力されたフルサイズのボタンPNGを放り込むだけでオッケー。画像を最小サイズにするのはジェネーレーター側に任せる事ができます。いちいち制作サイドで最小サイズにトリミングする手間が省けます。
またこのジェネレーターでさらに便利なのが、画面中央にある「Interactive Preview」という機能。これをクリックすると、現在のNine-Patch指定で画像がどのように伸縮するのかを、実際にドラッグして挙動を確認する事ができます。これがもう死ぬほど便利で、指定ミスによる想定外の挙動を防ぐ事ができます。あとプログラマーに渡す直前に「この動きでオッケーだよね?」的な確認をするのにも便利です。Nine-Patch画像はPhotoshopだけでも作れるといえば作れるんだけど、こういう便利なツールはどんどん使っていきたいですな。

[UI Design] App Animations – Mobile Appのアニメーションにフォーカスしたデザインギャラリー

  • Pocket
  • このエントリーをはてなブックマークに追加

モバイルアプリのクールなトランジションやアニメーションを、動画で紹介するサイト。アプリケーションごとに紹介され、また各エントリーは場面ごとにタグ付けされているので、例えばボタンとかナビゲーションといった感じで、異なるアプリの同一場面だけを抽出して見る事もできます。UIデザインでアニメーションについて考える際の参考になりそうです。

[UI Design] Designing for iOS 9 – iOS 9 Appデザインのための分かりやすいガイドライン

  • Pocket
  • このエントリーをはてなブックマークに追加

iOS 9向けにアプリをデザインする際に役立つ、UIガイドラインを分かりやすくまとめた記事。まぁApple純正のガイドライン読めば分かるっていえば分かるんですが、ここではその中でも特に重要な点を画像を使って分かりやすくまとめられているのがナイス。レイアウト、フォント、ディスプレイ解像度、スプリットビュー、アイコンのサイズやグリッド、カラー、ボタンやフォントのサイズについて、スペーシングやアライン、マージン、各種純正パーツのサイズ、キーボードなどについて端的に仕様を紹介しています。また記事最下部にはiPhoneやiPad、Apple WatchなどのGUIテンプレートへのリンクなども紹介されており、なかなか気の利いた記事だと思います。UIデザイナーの方にひとつ。