ポートフォリオでスマホサイトやレスポンシブ対応を見せる デバイス・モックアップ
スマートフォン・サイトを作った場合、キャプチャをそのまま載せるよりも、iPhoneなどの実機を模した枠をつけると、「これはスマホのサイトなんだな」と一目でわかります。
自分で作ってもよいですが、ネットで素材をダウンロードして使うと簡単です。
Free Apple devices mockup
https://www.behance.net/gallery/Free-Apple-devices-mockup/13809759
リアルなiPhoneのモックアップ。
色違いや、ipadや、macなど揃っているので、レスポンシブ対応をアピールすることができます。
Flat Apple Devices MockUp
http://graphicburger.com/flat-apple-devices-mockup/
フラットデザインにピッタリの、フラットタイプのモックアップ。
アングルもパターンがあるので、ちょっと凝った演出もできそう。
↓ Free Apple devices mockupの使用例
ちなみに、ページのキャプチャはいくつか方法がありますが、主にこの3通りでしょうか。
■ PrintScreenキーを押した後、Photoshopなどの画像編集ソフトで編集
■ スタートメニュー → アクセサリ → Snipping Tool
■ ブラウザのシミュレーションを使う
Firefox:ページ上で右クリック → Web Developer → リサイズ
(またはツールバーのリサイズタブ)
ショートカット:Ctrl + Shift + m(これが一番簡単)
↓ 右上のカメラボタンを押すと画像保存できます。
Chrome:Chromeの拡張機能 Window Resizer がマルウェアを含んでいたとのこと。私は元々使っていませんでしたが…。
Safari:ResizeMe