[Photoshop Plugin] FontAwesomePS – FontAwesomeのアイコンをフォトショップでも使えるようにする機能拡張

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

by on 1月.30, 2015, under Software

WebフォントライブラリであるFontAwesomeのアイコンを、Photoshop内でも使えるようにする機能拡張。FontAwesome、自分仕事でもよく使いますが、アイコンの種類が多いためすごい便利なんですよね。プラグインをインストールすると専用のパネルが表示され、一覧からアイコンを探してPhotoshopのキャンバス内にベクターデータで貼り付ける事ができます。FontAwesomeのサイト同様、キーワードを使ってアイコンを検索できる点もナイスです。これ使えば、アイコン素材探す時にWebから拾ってくるよりもずっと楽になります。

コメントを書く :, ,

[iOS App] Tailor – 複数のスクリーンショットを連続する1枚絵に結合してくれるアプリ

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

by on 1月.29, 2015, under Web Design

iPhoneで撮った複数のスクリーンショットを、連続する1枚の絵に結合してくれるiPhone App。スクリーンショットの撮影はiOS標準の「Homeボタン+スリープボタン」で撮影し、その後Tailorにてマージするという流れのようです。会話の一覧やGoogle Mapsの情報一式を画像として保存する用途に使えるとサイトでは説明されていますが、Web制作者にとっては、制作中のサイトをiPhoneで表示した際のスクリーンショット保存に使えると思います。顧客にデザインカンプを送る時なんかに使えそうです。App内課金があるようですが、基本機能は無料で使えるようです。スマホ対応の仕事をよくする人なんかにオススメ。

コメントを書く :,

[Web Design] Responsive Patterns – レスポンシブレイアウトのパターンをまとめたサイト

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

by on 1月.28, 2015, under Web Design

レスポンシブレイアウトのパターンというか、手法をまとめたサイト。レイアウト、ナビゲーション、画像、ビデオなどのメディア類、フォーム、テキスト、モジュール類に分けて、それぞれ「PCサイトではこういう表示、スマホではこんな感じ」という感じで複数の手法を紹介しています。例えばレイアウトの項目では、スマホ表示時にどのようにカラムを落とすのか。また落としたカラムを隠すのであれば、どういう再出現手法があるのかなど細かく紹介しています。レスポンシブレイアウトでスマホ対応する際に、表現手法について顧客と相談する際にめっちゃ役に立ちそう。とってもナイスです。

コメントを書く :, , ,

[Javascript] Flickity – レスポンシブレイアウトとフリック操作に対応したカルーセル

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

by on 1月.27, 2015, under Web Design

レスポンシブレイアウトとフリック操作に対応したカルーセルメニュー。いわゆるJavascriptを使ったイメージスライダーです。モバイル対応を前提としたサイト制作で使えそうです。フリック操作ですが、タッチデバイスではもちろん、PCブラウザ内でもドラッグにより似たような操作ができます。これはちょっと珍しいかも。導入も簡単で、CSSとJSファイルを読み込むだけ。jQueryなどのJSフレームワークは特に使っていないようです。またオプションも豊富にあるので、様々なカルーセル表現に対応できそうです。ナイスです。

コメントを書く :, , ,

[Freebie] The Ultimate Collection Of 500+ Free Mockup Templates PSD Designs – フリーのモックアップ素材まとめ

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

by on 1月.26, 2015, under Material

無料で配布されているモックアップ素材をまとめた記事。あらゆるモックアップ素材を1記事にまとめてるので、数がめっちゃ多いです。配布されている素材の種類を紹介すると、Mac、iPhone、iPadのApple製ガジェットのモックアップ。続いて名刺などの印刷物のテンプレート。AndroidやWindows Phoneのモックアップ。Tシャツ、ロゴデザイン、ビジネスブランディングツールのテンプレート、カタログ、ポスター、UIテンプレート、PCブラウザウィンドウの素材、プロダクトデザインテンプレート、誌面レイアウト、Facebookページのテンプレート、アイコン素材などがあります。いやぁ多い。最後まで見るだけでも結構なアレです。PSDやAIの素材探す時にはこういうまとめ記事って助かりますな。それにしてもiPhoneのモックアップ素材の多さにはビックリした。こんなにあるのね。

コメントを書く :,

[Freebie] Savethegraphics – デザイン素材の配布サイト

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

by on 1月.23, 2015, under Material

様々な種類のデザイン素材の配布サイト。UIテンプレート、Webテンプレート、印刷物テンプレート、アイコン、壁紙、ワイヤーフレームキット、デバイスモックアップ、テキストエフェクトなどのデザイン素材が紹介されてます。各詳細ページからダウンロードできるようです。種類は色々あるけど、UIとWebのテンプレートが多い印象。デザイン素材探す際に重宝しそうです。

コメントを書く :, , , , ,

[Web Design] OGP画像シミュレータ – og:imageで指定した画像の見え方をテストできるサイト

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

by on 1月.22, 2015, under Web Design

OGPでサイトのサムネール画像を指定した際に、実際にFacebook内で表示された時にどのように見えるのかをテストできるサイト。早い話がog:imageのシミュレーターです。og:imageで指定した画像がFacebook内で表示される時って、横長表示の時と正方形表示の時があるんですよね。なので1つの画像でどちらの比率でもそれなりにイイ感じに見えるよう作らなきゃいけない。このサイトに画像ファイルを放り込めば、OGP指定する前に見え方をテストする事ができます。ちなみにOGPの情報はFacebook内にキャッシュされるので、og:imageに限らず何か情報を更新した後はOpen Graph Object DebuggerにサイトURLを突っ込んで「Fetch new scrape information」すると、キャッシュが更新され幸せになれます。

コメントを書く :,

[UI Design] User Flow Patterns – よく出来たユーザーフローを動画で紹介するデザインギャラリー

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

by on 1月.21, 2015, under UI Design

Mobile App内において、よく出来たユーザーフローを動画で紹介するデザインギャラリー。ユーザーがアプリを使って、何かしらのゴールに至るまでのプロセスを考える際の参考になりそうです。各アプリはジャンルごとにカテゴリ分けされており、見た感じユーザーが最初にアプリを使いはじめる際のチュートリアルものが多い印象。動きも含めた確認って、普通アプリをインストールしないと見れないんですが、ここなら動画で紹介してくれるので便利です。

コメントを書く :,

[Sketch] An index of the most useful resources for Sketch – Sketchに関するリソースのまとめサイト

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

by on 1月.20, 2015, under UI Design

Sketchに関する様々なリソースのまとめサイト。多くはGithubにリンクされており、プラグインやチュートリアル、Tipsなどが紹介されています。「PhotoshopユーザーがどうやってSketchに移行するか」なんて記事もあったりします。Adobe系ソフトに比べるとSketchのリソースはまだまだ少ないですが、最近急激にこの手のサイト増えてきましたね。自分もUI系のデザインはこっちに移行しようと思ってます。

コメントを書く :, , , ,

[CSS] MocKit – HTML & CSSで描画されたiPhone 6

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

by on 1月.20, 2015, under Material

HTML & CSSで作られたiPhone 6のモックアップ。画像ではないので、コードをコピペするだけでサイト内に使えます。試しにダウンロードしてみましたが、ソースコード内に「Put your screenshot here」とコメントアウトしてあるので、iPhoneのスクリーンショットのハメコミもomgタグでサクっとできそうです。カラバリは黒と白が用意されています。フラットに描画されているので、最近のデザインにも合いそうです。

コメントを書く :, , ,

Web Services

My Profile by iddy

Twitter Status