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

Browse By

[Freebie] App Icon Template for Sketch – iOS, Android用のアイコンテンプレート

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

Sketch用の、iOS / Andoroidアイコンテンプレート。編集から各サイズへの書き出しまで行う事ができます。またアイコンのコアな部分はシンボル化されているので(Photoshopで言うスマートオブジェクトみたいなもの)、1つ変更すれば全部変わります(iOSとAndroidでは共有化されていないようです)。それぞれデバイスのホーム画面やAppStoreではどのように見えるかのプレビューもできるようになっているので、確認しながら作りこむ事ができます。アイコン制作する時に使えそうです。

[Javascript] Grade.js – 画像から最適なグラデーション背景を生成してくれるJS

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

1枚の画像から、その画像に合ったグラデーション背景を生成してくれるJSライブラリ。画像内に含まれる色情報の中から、多く使われている2色を抽出してグラデーションにしているようです。この手法最近Apple製アプリケーションでよく見ますよね。iTunesでアルバムを選択している時のヘッダ色とか。Webでもこの手法が使えるというのはナイスですな。

[Web Template] HTML5 UP! Responsive HTML5 and CSS3 Site Templates – HTML5のテンプレート配布サイト

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

HTML5形式のWebテンプレートを多数配布しているサイト。この手の配布サイトってベースが同じで、後はバリエーション違いってパターンが多いんだけど、ココのテンプレートは様々なレイアウトのものが用意されています。しかもどれもフリー(CC3.0)。モック作る時や、サクっとLP立てたい時なんかに使えそうです。

[Web Design] Scrollanim – スクロール芸のJSライブラリ

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

スクロールイベントをきっかけに、何かしらの動きとともにコンテンツが出現する、いわゆるスクロール芸を行うJSライブラリ。配布ページ自体がデモページになっていて、スクロールすると色々動きます。ライブラリはCSS3とJSからできているようで、サイズが9kbと軽いのが特徴。導入も適用したい要素に属性を追加するだけのようなので、簡単に使えそうです。詳細とソースコードはGithubで公開されています。

[Misc] Motion Periodic Table – モーショングラフィックの周期表

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

モーショングラフィックの要素を、元素の周期表のようにならべた作品。それぞれの動きはアニメーションGifを使って紹介されています。また各項目をクリックすると詳細説明の画面に行き、動きの説明や作例、関連項目などの説明があります。動画制作とかしてる人にとっては、アニメーションやトランジションの考察として使えそう。Webでもマウスオーバーアニメーションなんかの参考になりそうです。

[Music] Beautiful album art. Updated every day. – 美しいアルバムジャケットのデザインギャラリー

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

クールなアルバムジャケットを毎日紹介するブログ。まだ始めて日が浅いようで作例の数こそあまりありませんが、紹介してる作品の趣味がとっても良いので、今後紹介数が増えてくるといろんな場面でのネタ帳になりそうです。ジャケットのデザインする人ってあまりいないかもしんないけど、印刷物やタイポグラフィー、グラフィックデザインの場面でもこういう作例は参考になりますな。扱うジャンルはクラブミュージック系が多い印象です。俺もロック限定のこういうサイト作ってみよかな。プログレ系とかオシャレでかっこいいジャケ多いんすよね。

[Print Design] Coverjunkie – 雑誌の表紙のデザインギャラリー

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

世界中の雑誌の表紙ばかりを集めたデザインギャラリー。大衆的なものよりは、どちらかというと意識高い系の雑誌が多い印象なので、印刷物デザインの良いお手本というか、ネタ帳になる気がします。ちょっとエッチなのも混ざってます。掲載作例の数も結構多いです。ちなみにわたくしPenとかGQとかナショジオとか好きです。

[Freebie] adJelly – The ultimate social & digital ad size guide! – 各種SNSのデザインテンプレートと、サイズガイドをまとめたサイト

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

各種SNSのデザインテンプレートの配布と、それぞれのサイズガイドをまとめて紹介するサイト。テンプレートの配布だけでなく、SNSごとに細かくサイズ指定について紹介されている点が丁寧な印象です。またテンプレートはPSDとSketchの2つのフォーマットで配布されているので、Photoshop派の人もSketch派の人も使う事ができます。Facebook, Twitter, Instagram, Linkedin, Youtube, Google+, Tumblr, PInterestに対応しているので、メジャーどころは一通り押さえる事ができそうです。