スマホでWEBサイトを見てるような画像の作り方

Question

単純な疑問で、以下の画像みたいなスマホにウェブサイトが移ってる画像を作るのって

どうやっているのでしょうか？？

引用：welovewebdesign

無料で簡単に作れるならやってみたいです。

宜しくお願いします。

Comments

[Yorrie]

えぇ…Photoshopかなんかの画像編集ソフトで合成して作ってんじゃないすか…？
いずれにせよ十中八九プログラミングには関係ないことなので、質問削除したほうがいいと思いますよ。

[kaoru_tujimiya]

何か簡単にできるツールとかあれば嬉しいなと思ってのですが、さすがにphotoshopですかね。
あ、タグにphotoshopとかのタグがあったのでつい質問しても大丈夫かと思い質問してしまいました。
貴重なご意見ありがとうございます。。

Answer 1

Chrome DevTools での Device Mode によるモバイル端末のシミュレート
Google Chromeのデベロッパーツールでスマホサイトの表示をチェックする方法 : ビジネスとIT活用に役立つ情報

この状態で、「Capture Screenshot」のメニューを選ぶと、デバイス枠つきでスクリーンショットがダウンロードされます。

Comments

[kaoru_tujimiya]

ありがとうございます！
デベロッパーツールの機能でどうにかなるんですね！
是非参考にさせて頂きます。

Answer 2

Photoshopでの作成の場合には、元ファイルの画面部分をパースしていき切り取り
フレーム状のレイヤーを作成し、画像をはめ込んでいくという作成方法になります。

またひと昔前に、CSSだけで作成するといった手法もお遊び程度に流行ったことがあり
以下は私自身がcssの勉強がてらに作成したコードとなります。
chromeブラウザ用で作成したものですが、再生できるかはわかりません。

CSSで描画:https://codepen.io/nto/pen/NWGegPV
追記：コード文字数が規定を超えていた為codepenに掲載にしました。
文字化けしていた様ですが、ご容赦ください。

Comments

[kaoru_tujimiya]

ありがとうございます！！
とても凄いです、、、これ自分のお遊びにも何か使いたいと思いました。
参考にさせていただきます！

[nto]

恐れ入ります。こういった手法もあるという事だけでも参考になればと存じます。
またハメ込みのGLSLの桜はこちらをサンプルしているだけで既存のものとなります。

https://codepen.io/at80/pen/tqdmv

[kaoru_tujimiya]

色々教えていただき有難いです。
色々参考にさせてもらいます！

Answer 3

エミュレータ（シミュレータ）でブラウザを開いて、スクリーンショットを撮るのが手っ取り早いかと思います。