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

Browse By

Monthly Archives: 10月 2015

[Star Wars] Watch Star Wars Evolve Through Its Spectacular History Of Posters – スターウォーズの歴代ポスター

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

Star Warsの歴代ポスターをまとめた記事。Ep.4から3まで(ややこしいなー)の各種ポスターがまとめられています。いわゆる公開時の作品を代表する1枚だけでなく、公開前のティザーや後になって発売されたリマスター版やボックスセットのためのアートワーク類も併せて紹介されています。Drew Struzanの作品が主体で、彼のアートワークが好きな人にはタマらないまとめ記事だと思います。昨日最新のトレーラーも公開されましたしね。もうあと2ヶ月で新作が見れると分かると、俺の体内のミディクロリアンも沸騰しそうです。フォース出す練習しなきゃ。

[Icon] Iconsfeed – iOS Appアイコンのデザインギャラリー

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

iOSアプリのアイコンデザインをまとめたサイト。こうしてズラっと並んでいるを見ると、iOS 7以前のスキューモーフィックデザインの頃に比べてデザインの流行も様変わりしたなー、なんて風に思います。このサイト便利なのが、アプリのカテゴリ分け以外にも色ごとに抽出して閲覧できる点。ズラっと並んでるカラーパレットをクリックすると、例えば赤系のアイコンだけを抽出する事ができます。カラーテーマ優先でデザイン作例を探したい時なんかに便利です。

[Freebie] iOS 9 GUI iPad for Sketch – Sketch用のiPad GUIテンプレート

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

Sketch用のiPad GUIテンプレート。最新のiOS 9ベースで、かつベクターデータで制作されています。またもうすぐ発売となるiPad Pro用のUI制作にも対応しているそうです。UI Elementsを見る限り、Apple純正の一般的なiPad用UIパーツは一通り揃っている印象。iPad App制作の際に役立ちそうです。

[Icon] Simple Icons – メジャーなWebブランドのSVGロゴデータ

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

メジャーなWebブランドのSVGロゴデータをまとめたサイト。各企業やサービスごとのイメージカラーも併せて紹介されていて、色順でソートされているようです。個別にダウンロードするのが面倒な時はGitHubからまとめてダウンロードできます。こうして見ると青系多いっすね。SVGフォーマットなので汎用的に使える点が便利です。

[Typography] FontReach – フォント名から、それらが使われているサイトをリストアップしてくれるオンラインツール

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

フォント名を入力する事で、それらがどんなサイトで使われているのかを調べてくれるサイト。例えばHelvetica Neueと入力すると、FacebookやYahoo、Twitter、eBay、Redditなどで使われている事が分かります。使われているフォントのランキングなどもあり、それを見るとArial、Verdana、Helvetica Neueなどがよく使われている事が分かります。サイト内で使うフォントチョイスに役立つかも。ちなみに自分はMonacoとかMyrad Proあたりが好きです。

[Software] Ravioli app – Imgurにサクっと画像アップできるMac用App

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

Imgurにサクっと画像をアップできるMac用アプリケーション。いやこれイイですね。メニューバーに常駐する形で、画像ファイルをドラッグ&ドロップするだけで簡単にアップできます。アップロード後はクリップボードにURLがコピーされるようで、どこかに貼り付けるのも楽ちん。Imgurよく使う人にオススメです。ちなみにまだ準備期間のようで、メアド入れておくと公開された時にアナウンスされるようです。アップロード制限もないようです。

[Generator] Blend – 任意の2色からCSSのグラデーションコードを生成するツール

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

左右にあるパレットから任意の2色を選んで、CSSのグラデーションコードを生成するツール。色を選んだ後で矢印のボタンを押すだけでオッケー。カレーパレットは一般的なFlat UIとMaterial Designの他に、青や黄色など固有のパレットもいくつか用意されています。Material Designなどの固定されたカラー規格におけるグラデーション生成などに使えそうです。パレットもうちょい増えてくれるとイイんだけどなぁ。

[CSS3] CSS Image Effects #3: Vignettes 3 Ways – CSSで写真にビネット効果を追加する方法

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

CSSを使って写真にビネット効果(トンネル効果、ケラレ)を追加する方法が紹介されています。トイカメラなどで起こる、写真の四隅が光量が足らず暗くなる現象を写真に追加する事ができます。画像に直接ではなくCSSで追加すれば、一斉に追加したり削除したりが効率よく行えそうです。円形グラデを使う点がポイントっすね。写真を印象的に見せたい場合に使えそうなテクニック。