【mac + Safari】実機を使わずにレスポンシブデザインのデモ画面を取得する方法

最近、作業環境を Safari へ移したのですが、概ね、Firefox でやれていたことを Safari でもできるようになりました。

ここでは、以下のような画像を作成するときに必要な、

2015-12-24 at 19.36.jpg

ワイド画面、iPad、iPhone での表示画面の模擬画像の、Safari での取得方法について覚え書きしたいと思います。百聞は一見にしかずで、実際に作業しているようすは以下の通りです。

一言で言えば、「開発 → レスポンシブ・デザイン・モードにする」を使えば OK でした。

2015-12-24 at 19.43.jpg

ちなみに Omnigraffle の元画像に画面の模擬画像を貼り付けているようすは以下の通りです。

参考

【mac + Firefox】実機を使わずにレスポンシブデザインのデモ画面を取得する方法

最終更新日:2015-12-24

実機を使わずに WordPress.com テーマ等の iPhone 等での表示画像を取得する方法についての覚え書きです。作業環境は mac の Yosemite + Firefox 35.0.1 1 です。

2015-03-14 at 10.55

続きを読む

#2015

画像を使った複雑な説明書を作成するのに便利そうな「Omnigraffle」

最終更新日:2015-12-24

ここでは、以下のような画像を作成する方法についての覚え書きです。mac の Omnigraffle を使います。

batch_a0001_015668_m

続きを読む

#2015