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

Browse By

Monthly Archives: 7月 2015

[Web Design] Unsplash It – Unsplashの画像を使ったイメージプレースホルダー

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

Unsplashというオシャレなストックフォトサイトの写真を利用したイメージプレースホルダー。「https://unsplash.it/200/300」といった感じでサイズ指定するだけで画像を呼び出す事ができます。ちなみにこの記事のサムネール画像も動的に呼び出してるので、リロードすると画像が変わります。イメージを呼び出す上でいくつかオプションがあり、例えば「?random」を付ける事でランダムイメージに、「g」を付ける事でグレースケールの写真限定に、「?blur」を付ける事でボカしフィルタをかける事ができます。元々のUnsplashの写真がクールなものが多いだけに、見た目にオシャレなダミー画像をサクっと置ける点が便利です。

[Web Design] CodeMyUI.com – Web制作に便利なコードスニペットを集めたサイト

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

Webデザインで使える様々なコードスニペットを集めたサイト。チェックボックス装飾やModalウィンドウ、マウスオーバーアニメーション、イメージスライダー、グリッドレイアウト、CSSボタン、イメージギャラリーなど、色々な場面で使えるコードが紹介されています。各作例はアニメーションGifを使って一覧されているので、動きの確認まで確認できる点がとってもナイスです。

[Print Design] Addictive ads, 1894-1954 – 酒とタバコに関する日本の昔のポスター

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

酒とタバコに関する、日本の昔の印象的なポスターを集めたエントリー。1894年〜1954年のものが集められているようです。サクラビールとかカブトビールとか初めて聞いたんだけど、調べてみたら前者はアサヒやサッポロの前身、後者は愛知県にあったビールメーカーらしいです。昔のポスターって趣深いものが多いけど、酒やタバコのような嗜好品となるとそれに輪をかけてアレゲなデザインが多いですな。時代背景的に兵隊さんとか戦闘機がモチーフとなっている点も興味深い。

[Photoshop Plugin] Ditto: Use variables in Photoshop – 複数のレイヤーを一括で操作できるようになるプラグイン

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

レイヤーに属性付けをする事で、1つのパネルから複数レイヤーを一括で操作する事ができるようになるPhotoshopプラグイン。言葉で説明してもよく分からないかもしれませんが、リンク先にあるアニメーションGifを見ればなんとなくどういうものか分かると思います。これよく見ると、レイヤー名の末尾に「#btnText」といった感じでCSSみたくIDが付いてるんですね。で、パネル内から色やテキストを変更すると、このIDが付いたレイヤーがまとめて変更されるという仕組み。ボタンなどの要素が重複するUIパーツに使うと一括編集できるようになるので、生産性上がりそうですね。

[Misc] JS Character Count – シンプルな文字数カウンター

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

画面の右側にテキストをペーストするだけで、文字数を教えてくれるシンプルなカウンター。文字数以外にもワード数(英語の場合)、段落数もカウントしてくれます。まぁ文字数カウントなんて普通はエディタでやると思いますが、いつも使ってるエディタがない場合や、セキュリティガチガチの会社PCでメモ帳しかない場合なんかに使えそうです。

[Game] Other Places – 美しいビデオゲームの世界を動画で紹介するブログ

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

美しいビデオゲームの世界を動画で紹介するブログ。いわゆるゲームのプレイ動画ではなく、淡々とゲーム内で描画される風景を写した動画が紹介されています。メジャータイトルからマイナーなものまで色々あり、例えばMetro 2033、GTAV、Metal Gear Solid V : Ground Zeros、Far Cry4など。ゲーム大好き野郎的な見方をすれば、それぞれのゲームエンジンごとの描画の違いを比較する事もでき、なかなか楽しめるサイトだと思います。美しい事が前提であるため、日本のゲームはほとんど出てきません(メタルギアくらいかな)。洋ゲー好きにオススメ。風景だけを淡々と見る事ができる点がイイですねこれ。ゲームがここまで綺麗になると、もうひとつの現実って気がしてきます。

[Sketch] Sketch Repo – Sketch関連のリソース紹介サイト

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

Sketchに関するリソースの紹介サイト。UI作例やWebデザイン作例、アイコン、各種デバイスモックアップなどへのリンクが紹介されています。各リソースはタグ付けされているので、目的の素材も探しやすそうです。ちなみに同じコンセプトのPSD版サイトであるPSD Repoというのもあるようです。素材探しの際に重宝しそうです。

[Web Design] PlaceCage – ニコラス・ケイジ専門のイメージプレースホルダー

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

ニコラス・ケイジしか出てこないイメージプレースホルダー。http://www.placecage.com/200/300といった感じでURL記述する事で、その大きさのニコラス画像を呼び出す事ができます。上記の場合横200px縦300pxの画像って意味ですね。またオプションも用意されていて、http://www.placecage.com/g/200/300というようにgを付ける事でグレースケールの画像を、http://www.placecage.com/c/200/300のようにcを付ける事でクレイジーな画像を、http://www.placecage.com/gif/200/300のようにgifを付ける事でアニメーションGifにする事ができます。無駄に多機能。制作中のサイトをどうしてもニコラス・ケイジで埋めたいという場合などに重宝しそうです。ニコラスにまみれたいというごく一部のWeb制作者の方々にオススメです。