面倒なレスポンシブイメージの画像作成を自動化してくれる神ツールとブレイクポイントの考え方
レスポンシブイメージ、使ってますか？ ウェブサイトの表示パフォーマンスの最適化をする際に、一番手っ取り早いのが画像の最適化です。そこで、イメージオプティム とかMac Automatorとpngquantなどのツールを駆使して一生懸命に画像自体を最適化したりレスポンシブイメージを使って画像を出し分けたりするわけですけども、特にレスポンシブイメージは手動でやるのは正直言ってかなり面倒です。 そ・こ・で！ 本日ご紹介したいのが「Responsive Image Breakpoints Generator 」です。このツールを使えばレスポンシブイメージの複数画像の作成やHTMLの記述を自動化できて、しかも！アートディレクションまで自動化できるんです。 ということで、今回はレスポンシブイメージについての簡単なおさらいと、画像作成の基本的な考え方、それから自動化について書いてみます。 では、行ってみ
【解決編】Retina対応のPhotoshopとかで画像が1/2サイズで表示されて困ってたらこうした方がいいよってみんなに教えてもらった話 - akuyan to
みんなのやさしさで目から汁があふれて画面が見えない…。 今朝方、ここ半年ぐらいずっと困ってたことを改めてブログにして吐き出したのがこちら。 それが世間の皆様の心あたたかいご助言により、めでたく解決したので感謝と感謝と感謝の意をこめて、他の困ってる方々にもお伝えするべく、教えてもらった内容以下にすべてまとめます。 第1希望の「AdobeだけRetina切る方法」 困ってますエントリーの希望としてあげさせてもらった第1希望「AdobeだけRetina切る方法」を、そのものズバリ教えてくださったのはこちらの方。 高橋としゆき（@gautt） Finderの［情報を見る］で［低解像度で開く］にチェックを入れておけばいいのでは https://twitter.com/gautt/statuses/449434490176143360 はてなダイアリーだとツイート埋め込めないんだね… 高橋としゆき (
レスポンシブデザインを制作するなら頭に入れておくべき基本事項7つ | 株式会社LIG
どうも〜こんにちはぁ！ 最近レスポンシブなサイトを作ることが多いライターの、のび太です。 モバイル、タブレットユーザーが最近どんどん増えてきているので、Web制作者にとってレスポンシブなサイトが作れるってことが必須になるんじゃないかなぁ〜って感じますね。 レスポンシブデザインを制作するときに意識しなきゃいけないことはいろいろありますが、今回は「これはぜったいに知っておきたいよね！」って感じた基本的なことを7つご紹介させていただきたいと思います。 レスポンシブデザインを制作するときに意識しておきたい基本項目7つ 1. 画像の代わりになるべくCSSで表現すべし レスポンシブデザインで画像を使うと、モバイル端末ではPCに比べて回線速度が遅いため、読み込み時間が余計にかかってしまいます。 そのため、画像ではなくCSSで表現可能なものはどんどん代替していったほうがいいと思います。 立体ボタンや矢印だ
完璧に分かる！コーディング一連の流れと知識(HTML5+レスポンシブ+WordPress)
作成：2014/01/27 更新：2015/08/07 Web制作 > 前回、Web制作の一連の流れを書きましたが、今回は少し掘り下げて「コーディング」についてのフローをまとめます(HTML5+レスポンシブ+WordPress)。会社によって違うと思いますが、ざっくりとしたコーディングの流れと気をつけておきたいことをメモしています。 エンジニア速報は Twitter の@commteで配信しています。 もくじ コーディング前の準備 １．仕様書の確認 ２．入稿データの確認・スケジューリング HTML5 マークアップ ３．テンプレート作成 ４．条件付きコメント ５．GCF＋キャッシュクリア ６．OGP記述 ７．ファビコン ８．アウトライン作成 ９．バリデーターをチェック CSS の設定 １０．ノーマライズスタイル レスポンシブデザイン設計 １１．モバイルファーストを基準に設計 １２．プログレッ
WebページをRetina対応させるテクニック～基礎知識編
WebページをRetina対応させるテクニック～基礎知識編：jQuery×HTML5×CSS3を真面目に勉強（4）（1/2 ページ） iPhoneのRetinaディスプレイは、Webページの制作フローにも大きな変化をもたらした。WebページをRetina対応させるにはどうすればいいのだろうか。 はじめに 2010年6月に登場したアップルのiPhone 4には「Retinaディスプレイ」と呼ばれる、それまでの常識を覆した高精細なディスプレイが搭載されました。それ以降、スマートフォンやタブレットといったモバイル端末のディスプレイはより解像度の高いものへと進化していき、2013年の初めにはサムスン電子のGALAXY S4やソニーモバイルのXperia Zなど、フルHD画質対応（1920×1080ピクセル）のディスプレイを搭載したスマートフォンが登場するまでになりました。 高精細ディスプレイの登場
月3000円くらいでスマホ2台とルーターを持つまとめ 2013年6月版 ｜ Abi-Station
もしすでにキャリアのiPhoneを持ってたら解約してsimロック解除。 SIMロック解除アダプタを使います。 Smartkingという名のSIMトレイを差し替えるだけのイメージ。激烈簡単。 —追記— この方法はいわゆる「ゲタをはかせる」と言うのですが、OSのアップデートに対応できませんので自己責任でよろしくお願いします。 アップデートされたら、新しいゲタが出るまで待たないといけません。 —追記終わり— 左がSmartking。ここにsimを乗せます。 ちなみにiPhone5のsimロック解除はSIM7+を使うようです。買ってみます。 キャリアの契約解約前にもロック解除試せるのかな？そこは試してないので分かりませんが、simを変えるだけなので行けると思います。 ピンキリですが、中古のiPhone4ならヤフオクで5000円くらい。それで全然OKだと思います。 ※すみません。最初4Sと書いてまし
Apple、5月1日からアプリ申請時に、RetinaディスプレイとiPhone 5対応が必要に、またUDIDアクセスするアプリは拒否されると説明 | Apple | Mac OTAKARA
※本サイトは、アフィリエイト広告および広告による収益を得て運営しています。購入により売上の一部が本サイトに還元されることがあります。 Appleが、デベロッパー向けに「Make Your Apps Look Great on the Retina Display and iPhone 5」を公開し、5月1日からアプリの新規またはアップデート申請時に、Retinaディスプレイに対応している必要があり、iPhoneアプリの場合、iPhone 5への対応が必要になると説明しています。 また「Using Identifiers in Your Apps」も公開し、5月1日から、アプリの新規またはアップデート申請時に、UDIDアクセスするアプリは拒否すると説明しています。 iOS 6から導入されたAdvertising Identifier（広告識別子）を利用するように説明されています。
アップル、MacBook Pro Retinaディスプレイモデルをアップデート
アップル、MacBook Pro Retinaディスプレイモデルをアップデート：Airはひっそり値上げ アップルは2月13日、MacBook Pro Retinaディスプレイモデルのアップデートを発表した（ただし執筆時点でApple Storeはメンテ中の「We'll be back」となっている）。 2560×1600ドット表示対応の13.3型ワイド液晶を搭載する「13インチMacBook Pro Retinaディスプレイモデル」は、2.5GHz（最大3.1GHz）のCore i5と128GバイトSSDを搭載する下位モデルが13万8800円、2.6GHz（最大3.2GHz）のCore i5と256GバイトSSDを搭載する上位モデルが15万8800円となる。従来機種に比べて、下位モデルが6000円、上位モデルが1万円ほど値下げされたほか、上位モデルはCPUが2.5GHzから2.6GHzに高
コーダー必見、SCSS・Compassで開発効率アップ｜Retina Display対応CSS Sprite編 | DevelopersIO
コーダー必見、SCSS・Compassで開発効率アップ｜Retina Display対応CSS Sprite編 はじめに 特に寒い今日この頃ですが読者の皆様は元気にお過ごしでしょうか？ 2月のリア充イベントといえばバレンタインですね（企業戦略）。バレンタイン用のチョコを販売するお店も増えてきました。 弊社は秋葉原という立地ですが意外なことに既婚者が多いので「リア充爆発しろ」と嘆く男性は少数のようです。 ちなみにビターチョコが好きです。 本題 今回は少し前に執筆した「コーダー必見、SCSS・Compassで開発効率アップ｜便利なCSS Sprite実装編」を発展させてSCSS・CompassでRetina Displayに対応する方法を紹介します。 事前に必要な知識 この記事では、以下の事前知識が必要になります。 記事中でも解説を挟みますが、詳しくは解説で案内しているページを参考にしてくださ
ゼロからゲームアプリつくった後の大事なメモ
こんにちは、ゲームチームのキノです。 先週、カジュアルゲームアプリ「なぞダン -なぞるだけダンジョン-」がApp storeで公開されました！！！！ ひとさしゆびだけの超シンプルな（でもムズイ）ダンジョンゲームです！ 過去にキャンペーンの一環などでゲームは何度かつくってきましたが、 今回が初の企画段階からのモック含めた参加になるので、学んだことや役立ったを書いておきます。 あとは地味にデザイナー向けにアプリ制作のtipsなど。 意外と長くなってしまったので、週末にじっくりお読みください〜 アプリは無料！！こちらからダウンロードできます。 それでは記事の続きをどうぞ〜！！ 素材の話 いつも数字忘れるので アイコン （なにか見覚えのある階段的なアイコン） アイコンはかなり肝いりです。 気をつけている点は １キーワードで言い表せるか フレームと世界観はあってるか 類似アプリより突出しているか 画
メインブラウザをChromeからSafariに変えた8つの理由 – 和洋風KAI
和洋風KAIは、Apple・水樹奈々・食べ歩きが三本柱のブログです。モットーは「楽しく」「便利で」「端的に」。 ⇒ アバウト ⇒ 免責事項 理由その1: キッカケはMacBook Pro with Retina display。 キッカケは、MacBook Pro with Retina displayを買ってからです。 そう、6月12日の発売から8月1日までは、Chromeが正式にRetinaディスプレイに対応してなかったのです。 一応、Google Chrome CanaryというRetinaディスプレイ対応版をすぐさま投入されたのですが、いかんせんβ版前のものなので、拡張機能が動かなかったり、YouTubeがフルスクリーン表示できなかったりと不具合が多かったのです。（現在ChromeはRetinaディスプレイに正式対応） 1ヶ月もの間、正式対応版がでないということで、さすがにMacを
パララックスでレスポンシブでjQuery Mobileな企業サイトを開発・公開しました（株式会社シーエー・モバイル公式サイト） - IT-Walker on hatena
http://www.camobile.com 昨日オープンしたのですが、こちらでも宣伝しておきます。 この2ヶ月弱というもの、こちらのサイトを開発してました。 ぼくが現在お世話になっている、株式会社シーエー・モバイルさんの企業サイトです。 死にそうなほど忙しかったけど、なかなかインパクトのあるサイトができたんじゃないかと自負してます。 自由にやらせていただき、締め切りの延長にも応じて下さった、シーエー・モバイルさんの懐の深さに感謝。 マウスホイールのない方は、方向キーでもお楽しみいただけます。 もちろんぼく一人で作ったわけではなく、作業のほんの一部をお手伝いしただけです。 一緒に制作したメンバーである稲田真帆さん、金井健一さん、桑田美由喜さん、柴田麻衣さん、ほかシーエー・モバイル デザイン室の皆様には、深く感謝を申し上げます。 今回、かなり自由にやらせていただけたので、技術的なチャレンジ
[CSS]Retinaディスプレイを考慮したCSSスプライトの実装方法
新しいiPad, iPhone4, MacBook Proなどに採用されているRetinaディスプレイを考慮したCSSスプライトの実装方法を紹介します。 Using CSS Sprites to optimize your website for Retina Displays CSSスプライトとは複数のアイテムを一枚の画像に配置し、background-imageで表示する範囲を指定するテクニックです。複数の画像を一枚にまとめることで、トラフィックの軽減につながり、Googleをはじめ多くのサイトで利用されています。 Retinaディスプレイは通常のディスプレイの倍の解像度があり、最適化するためには倍の解像度をもった画像を使用する必要があります。 使用する画像をJavaScriptで記述するのも一つの手ですが、ここではスタイルシートのみで実装する方法を紹介します。 実装例は、4つのそれぞ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Retinaディスプレイ対応！手描きのゆる～いデザインのアイコンフォント素材 -Handy Icons