●HOME
●カテゴリ  

●WEBサービス

●WEBデã‚イン

●WEBåˆä½œ

●ツール

●フォント／タイポグラフィ

●便利サイト

●情報収集

●留学

●考察

●英語
 

●留学相談
●その他  

●海外就職相談
 ●このブログについて
 ●お問い合わせ
  




バンクーバーのうぇぶ屋








画像のRetina対応に便利なツールやアプリ、ライブラリ色々


ツール
 










相変わらずWEB屋にとっては面倒くさいRetina対応…。@2x、@3x、解像度に合わせて毎回画像を作るのも、正直面倒くさいですよね。個人的には何か根本から解決してくれるような仕組みや対策が出てこないかなと、相変わらず他力本願でお待ちしています。
とはいっても、現時点で出来る限りの対応はしなくてはならないので、今日は僕が知っている画像作成時のRetina対応を少し便利にするツールやアプリ（一部使い方？）等をご紹介させて頂ければと思います。

Retini


スクリーンショット 2015 10 11 17 04 11
@3xサイズの画像をドラックするだけで、@2x、通常サイズと一瞬でコンバートしてくれるシンプルなアプリケーション。こっちのWEBメディアの運å–してる会社で働いてる人が教えてくれました。意外と知ってれば使えるタイミングがありそうなので共有。

Retinaize it


スクリーンショット 2015 10 11 19 47 49
ツールというわけじゃ無いかもですが、PhotoshopでRetina解像度の画像をワンボタンで書き出すためのアクションライブラリです。今だとPhotoshopでRetina対応の画像を書き出す時はアセット機能を使う人も増えているかと思いますが、ああいう畏まったタイミングじゃなく、気軽にとりあえずこの画像をパパっと書き出したいみたいな時あったら便利ってアクションです。

Photoshopのアセットの抽出


スクリーンショット 2015 10 11 20 06 40
まぁ、話のついでに出たのでこれも共有。最近はデã‚インする時はSketchの方が便利なプラグインが多いので、正直使いやすさで言えばSketchに軍配が上がってしまう印象はあるんですが、Photoshopのアセットの抽出については、Retina画像を書き出す時にめちゃめちゃ便利だなと思うのでご紹介。

Sketchのレイヤーエクスポート


スクリーンショット 2015 10 11 20 04 36
Photoshopのアセットの抽出は便利なんですが、僕はSketchの画像エクスポートの方が正直良く使います…。

Retina.js


スクリーンショット 2015 10 11 20 31 53
いきなりJSライブラリになって申し訳ないんですが、これもRetina画像対応の一つだとは思うので共有。高解像度の画像ファイルを勝手に探してくれるタイプのJSですね。

Retina Images


スクリーンショット 2015 10 11 20 33 38
Retina.jsの方が有名かとは思いますが、一応似たような物もご紹介。

srcsetを使ったRetina対応


スクリーンショット 2015 10 11 20 22 59
レスポンシブ化やRetina対応が色々論じられてはいますが、個人的に今年の8月にWeb Designer Depotで書かれていたRESPONSIVE IMAGE BEST-PRACTICE (2015)を参考にして僕は対応しています。Retina対応はもちろんのこと、ブラウã‚間の交互性までちゃんと意識しています。JS系も色々紹介してますし、ケースバイケースかなと思いますが。
以上、いかがでしたでしょうか。
ちょっと雑多なご紹介になってしまいましたが、Retinaと聞いて思いつくサイトやらツールやらをまとめてご紹介させて頂きましたー。参考までに何かのお役に立てれば幸いです！

関連する記事

今だからこそ安定を求めるべきなんじゃないかっていう考えについて今だからこそ安定を求めるべきなんじゃないかっていう考えについて
 WEB屋の“メンドクサイ”は多事多難！今年遭遇したメンドクサイの数々、そして対処法色々！WEB屋の“メンドクサイ”は多事多難！今年遭遇したメンドクサイの数々、そして対処法色々！
 2016年は情報収集力が鍵！IT業界の人がチェックするべき海外ブログやメディア25選！2016年は情報収集力が鍵！IT業界の人がチェックするべき海外ブログやメディア25選！
 2011年度版「これは金払って使う価値有り！」と思ったWEBサービス色々2011年度版「これは金払って使う価値有り！」と思ったWEBサービス色々
 WEB屋にありがちな発狂寸前のイラつきを軽減するツールと参考にしたサイト色々WEB屋にありがちな発狂寸前のイラつきを軽減するツールと参考にしたサイト色々
 「WEBデザイナー」ってなんぞや？至極当然かもしれないけど何万回と伝えてきた絶対の5ヶ条「WEBデã‚イナー」ってなんぞや？至極当ç„かもしれないけど何万回と伝えてきたçµå¯¾ã®5ãƒæ¡
 目指せ爆速WEB屋！過去2年間かけて知ったリソースを駆使して作るサイトの制作手順！目指せ爆速WEB屋！過去2年間かけて知ったリソースを駆使して作るサイトのåˆä½œæ‰‹é †ï¼
 あなたの作業を音速にするかもしれないWEB屋の作業スピードを上げるチートシート大量紹介あなたの作業を音速にするかもしれないWEB屋の作業スピードを上げるチートシート大量紹介
  









人気記事  ã‚ªã‚¹ã‚¹ãƒ¡è¨˜äº‹  


高卒でバカなのに最高に楽しい僕の生き方と守りぬいてきたこと 199.9kä»ã®ãƒ“ュー
 è‡ªåˆ†ã®ã‚„りたい事を仕事にしてる僕らに見られる10個の特徴 125.5kä»ã®ãƒ“ュー
 ä»Šæ›´èžã‘ない？！WEBデã‚イナーなら最低限知っておきたい有名フォントの数々 108.5kä»ã®ãƒ“ュー
 ç¾ä»£ã«ãŠã‘る留学が無意味だと思う5つの理由と、目標とすべき5つのこと 83.5kä»ã®ãƒ“ュー
 ã€Žæµ·å¤–に住めば英語は出来るように成る』は本当か？５年間カナダに居座った僕が体感したTOEICとかの意味 82kä»ã®ãƒ“ュー
 è‹±ä½œæ–‡ã«æ™‚間をかけるな！英語圏のWEBåˆä½œç¾å ´ã§ã‚ˆãä½¿ã‚ã‚Œã‚‹è‹±èªžè¡¨ç¾ãƒ†ãƒ³ãƒ—レート集！【メール編】 60.4kä»ã®ãƒ“ュー
 è…かっこいいタイポグラフィを駆使した映像の数々！息をのむ程魅入った映像総まとめ 48kä»ã®ãƒ“ュー
 ãƒãƒ¼ãƒ é–“のコミュニケーションを円滑にしたい時に試してみるべきツールやWEBサービス色々 46.2kä»ã®ãƒ“ュー
 èª°ã§ã‚‚簡単にかっこいいロゴが作れる『Squarespace Logo』 43.6kä»ã®ãƒ“ュー
 ã‚·ãƒ³ã‚°ãƒ«ãƒšãƒ¼ã‚¸ãªã‚µã‚¤ãƒˆã‚’デã‚インする上で、知っておいて損は無いかもしれないプラグインとか色々！ 43.5kä»ã®ãƒ“ュー
  
  • 日本の人材不足が深刻で世界ワースト2位なのは、それが日本の良い所だからという話2017.10.29
  • 『学び続ける』という事は『つらい』事なのか？僕が自由を手に入れるまでに見てきた学びのステージングの話2017.09.02
  • 英語学習者の強い味方、英文チェックツールの「grammarly」が超優秀でオススメ！2016.06.07
  • 2016年は情報収集力が鍵！IT業界の人がチェックするべき海外ブログやメディア25選！2016.03.17
  • 現代における留学が無意味だと思う5つの理由と、目標とすべき5つのこと2016.03.15
  • 今だからこそ安定を求めるべきなんじゃないかっていう考えについて2016.03.05
  • 海外就職に成功した日本人WEBデベロッパー達が使ってるオンライン学習サイトのまとめ2015.11.10
  • やりたいことを実現する為に、頭磨り減るくらい考える事の大切さについて2015.01.18
  • グローバル時代に備えて！IT業界の英語レジュメ（履歴書）とカバーレターの書き方！（テンプレート付き）2014.05.12


    •
    Pagetop




    ●クリエイター留学の『Frog』
    ●このブログについて
    ●お問い合わせ
    ●海外就職相談
     







    © 2015 Frog Creator Production Inc. All Rights Reserved.