webをつくる人になる

スクールでwebサイト制作を学んだことをきっかけに、webやパソコンなどについて記録していく たまにCG たまにおやつ・・・

ポートフォリオでスマホサイトやレスポンシブ対応を見せる デバイス・モックアップ

スマートフォン・サイトを作った場合、キャプチャをそのまま載せるよりも、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の使用例
f:id:weble:20140907041807p:plain

ちなみに、ページのキャプチャはいくつか方法がありますが、主にこの3通りでしょうか。

■ PrintScreenキーを押した後、Photoshopなどの画像編集ソフトで編集

■ スタートメニュー → アクセサリ → Snipping Tool

■ ブラウザのシミュレーションを使う

 Firefox:ページ上で右クリック → Web Developer → リサイズ

     (またはツールバーのリサイズタブ)

     ショートカット:Ctrl + Shift + m(これが一番簡単)

     ↓ 右上のカメラボタンを押すと画像保存できます。

 

    f:id:weble:20140907045657p:plain


 ChromeChrome拡張機能 Window Resizerマルウェアを含んでいたとのこと。私は元々使っていませんでしたが…。

 SafariResizeMe

     http://aaronholla.webs.com/