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

Browse By

All posts by Quattro

[Web Application] Sketch Web Viewer – Sketch 43ファイルのビューアー

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

Sketch 43ファイルのオンラインビューアー。Sketchの現行バージョンは42だけど、次の43からはファイルの構成が大きく変わるそうです(この記事で詳しく解説されてます)。で、そのSketch 43のファイルをオンラインで簡単に確認できるサイトがこれ。サイト内に放り込むだけで見るする事ができます。とは言っても今手元にSketch 43ファイルがある人はそうそういないと思うので、サイト内に用意されているDemo fileを使う事でどういうものか試してみる事ができます。まだSketch 43 Betaを使ってない人や、手元にSketchがない状態で内容を確認したい時なんかに使えそうです。

[UI Design] Android Nougat Free GUI – Android 7.0 ヌガーのUIテンプレート

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

Android 7.0 NougatのUIテンプレートが配布されています。フォーマットはPhotoshop、Sketchというおなじみのものに加え、Craftのライブラリーという形でも用意されています。Android AppのUI制作や、Material Designに準拠したWebサイト作る時なんかに使えそうです。

[CSS] Animista – アニメーションに関するCSSのジェネレーター

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

CSSアニメーションのジェネレーター。CSSでできる様々なアニメーションのサンプルが用意されていて、CSSコードをコピペして使う事ができます。アニメーションはカテゴリに分けて紹介されています。ベーシックなもの、アニメーションイン(導入)、アウト(はけ)、テキスト関連、注意を引く動き、背景画像に関するアニメーションの6つ。どの項目にもオプションが用意されていて、動きを細かく調整する事ができます。気に入ったものができたら右上にあるコード生成のボタンからCSSコードをコピーできます。オプションの内容も含めるとかなり多機能で、プレビューしながらコード生成できる使い勝手の良さもとってもナイスです。

[Sketch Plugin] Egmont plugin – SketchでiOS角丸を描けるようになるプラグイン

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

iOS 7から変わったアイコンの角丸のカーブを、Sketch内でも描画できるようになるプラグイン。サイト内では「Squircle shapes」と言われていますが、どうやらこれ「Square Circle」の事みたいです。ただ角がラウンドした四角形ではなく、カーブの始まりは緩やかで徐々にキツくなっていくという、独特のシェイプの事を指しているようです。実際このカーブって簡単に描けないので、数値指定するだけで描画できるようになるこのプラグインは、iOS AppのUI制作には便利に使えそうです。ちなみに通常の角丸とSquircle角丸の違いはこのGif見ると分かりやすいかも。

[Web Design] BigPicture – 軽快に動作するModal画像ビューアー

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

サクサク動くLightbox亜種。他のJSライブラリなどは必要とせず、これ単独で動くようです。クリック or タップで画像だけがフレームレスで開いて、再度クリックで収納。とってもシンプル。スマホページではわりと敬遠されるModal表示も、こういうシンプルなものなら使いやすそうです。ロードに時間かかる場合はローディングスピナーが出て、リンク切れしてる場合にはダイアログ出してくれるあたりが新設。また画像以外にビデオもイケます。構成がシンプルなだけに導入も簡単そうです。

[CSS] 18 CSS Tabs – CSSで作るタブ作例まとめ

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

HTMLとCSS、あと作例によっては簡単なJSも使って作られた、タブデザインの作例まとめ。クリックすると隠しdivがアクティブになって、ページ遷移なしでコンテンツを切り替えるアレです。このまとめ記事では各作例をアニメGif使って紹介しているので、それぞれの挙動も含めて一覧で見ることができるので便利です。「DEMO AND CODE」をクリックするとCodePenで見る事ができるので、タブデザインのコードスニペットまとめみたいな風にも使えそうです。紹介されている作例もかっこイイの多いです。

[Logo Design] Logobook – ロゴやシンボル、トレードマークのデザインギャラリー

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

既存の企業ロゴや、シンボル、トレードマークの類を集めたデザインギャラリー。各ロゴは、文字ロゴ、シェイプによる属性分け、オブジェクト、自然物、ビジネスといったカテゴリで分けて紹介されており、それぞれの詳細画面に入ると、そのロゴが何のロゴであるのか、業種、デザイナー、作られた年といった情報を見る事ができます。掲載点数はかなり多く、また60年代〜80年代にかけて制作された比較的古いロゴが多いです。伝統的なロゴデザインのデータベースとしても有用なサイトといった印象。古めのロゴ大好きな人や、伝統的な手法を愛すデザイナーにオススメです。

[Web Design] 19 Mind-Blowing CodePen Experiments – CodePenのぶっ飛んだ作例まとめ

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

CodePenに上がっているぶっ飛んだ作例をまとめた記事。全部で19の作例が紹介されてるけど、どれもスゴいです。よくこんなの作るなーと感心するものばかり。各作例はEmbededされた形で掲載されているので、動くものをこの1ページで全部見る事ができます。BB-8超かわいい。