パソコン版からモバイル版へテンプレートから

パソコン版のスクリーンショットからサイトのモバイル版を

通常15 分で完成修正対応込み品質チェック
プラン
安心決済詳しく
  • プランの範囲内の修正は無料です。
  • 納品から3日以内にご対応がない場合、自動的に承認されます。

代金はお支払い時にお預かりし、納品を承認した時点ではじめて支払われます。

パソコン版のスクリーンショットからサイトのモバイル版を

成果物の例

スタンダードパッケージの例

PC版のスクリーンショットから作るベーカリーサイトのスマホ版

ビフォー:PC版のトップページ

PC版のスクリーンショット

アフター:スマートフォンの画面

スマホ版トップページのモックアップ

ファイル: PNGのモックアップ、約1.5メガピクセル。クライアントの開発担当者に渡すデザインの画像で、HTMLコードやFigmaファイルではありません。

クライアント: 地元のベーカリー、Crumb & Kettle。 ご依頼: PC版サイトのフォント、色、ボタン、写真をそのまま生かし、トップページがスマートフォンでどう見えるべきかを示す。

お客様とすべての情報は架空のものです。

このサービスについて

3カラム、横に広いメニュー、横並びのブロックがあるパソコン版のページは、そのまま縮めてもスマートフォンには収まりません。カラムは縦に積み、メニューはメニューボタンにまとめ、ボタンは親指でタップできる大きさにする必要があります。パソコン版のページのスクリーンショットをアップロードしていただければ、色、フォント、ブロックの順番はそのままに、同じページがスマートフォンでどう見えるかを描くので、開発担当者はコードに手をつける前に目指す形を確認できます。各画像はスクリーンショット1枚から作り、アップロードした画像の形にかかわらず常に縦長の2:3、約150万画素(約1024 x 1536ピクセル)のPNGモックアップになるので、横長のパソコン版のスクリーンショットからもスマートフォンの画面になります。お届けするのは画像で、コードやFigmaのファイルではありません。

含まれる内容

  • 納品内容パソコン版のページをスマートフォン向けに描き直した縦長のPNGモックアップを1点、3点、または5点、それぞれ約150万画素でお届けします。プランの枚数より少ないスクリーンショットを送った場合、残りの画像では下のほうのブロックや開いたメニューなど、同じページの別の部分をお見せします。
  • スマートフォン向けの1カラム横並びのブロックを、わかりやすい順番で上から下へ並べ替え
  • メニューボタン横に広いナビゲーションを、ヘッダーのメニューアイコンにまとめて
  • 親指サイズのボタンパソコン版の小さなリンクではなく、タップしやすい大きさのボタンとリンク
  • お客様の見た目はそのままパソコン版のスクリーンショットから色、フォント、余白を
  • 開発担当者の目標にレスポンシブ版を作るための、わかりやすいスマートフォンのレイアウト

ご利用の流れ

  1. 1
    パソコン版のスクリーンショットページをアップロードし、スマートフォンで特に大切なブロックをお知らせいただきます
  2. 2
    スマートフォンのレイアウトお客様の色とフォントで、ページを1カラムに並べ替えます
  3. 3
    PNGと修正パソコン版と見比べ、プランの範囲内で修正をご依頼いただけます

ご用意いただくもの

使用する権利をお持ちのサイトの、パソコン版ページのくっきりしたスクリーンショットをPNG、JPEG、WebP形式で最大5枚(PDFは不可)、1ファイルに1ページ。それぞれについて、スマートフォンで最初に表示するブロック、省いたり折りたたんだりしてよいブロック、そして表示どおりの見出しとボタンのラベルをお知らせください。長いページの場合は、必要な部分を送るか、複数のモックアップに分けてください。

お伺いする内容:

  • どのパソコン版のページをスマートフォン画面にしますか?
  • スマートフォンで上部に残すブロックはどれですか?
  • モバイル版で非表示や短縮にしてよいものは?
  • どんな見出しとボタンを表示しますか?

プランを比較

プランベーシックモバイル画面1点¥1,550スタンダードモバイル画面3点¥3,400プレミアムモバイル画面5点¥6,030
納期1日1日2日
修正回数123
モックアップ数135
形式PNGPNGPNG
画面ご希望に合わせてご希望に合わせてご希望に合わせて
注文する ベーシック注文する スタンダード注文する プレミアム

安心決済

お支払いは注文時ですが、代金が支払われるのは承認された納品に対してのみです。

  • 固定料金お支払い後にプランの料金が変わることはありません。
  • 代金はお預かりお支払い時、代金はお預かりするだけです。納品を承認した時点でサービス側に支払われます。
  • 納品前にチェックすべての成果物はお手元に届く前に品質チェックを受けます。承認前に注文ページで内容を確認できます。
  • 無料の修正依頼内容の範囲内で、プランで定められた回数まで修正を依頼できます。
  • 3日後に自動承認納品から3日以内に承認も修正依頼もない場合、自動的に承認されます。納品後に注文チャットでメッセージを送った場合、注文は保留されます。こちらから回答した後、3日間のカウントを再開することがあり、その際はチャットでお知らせします。
  • やり直しまたは全額返金結果が依頼内容と合わず修正でも解決しなかった場合、または作業に納期の2倍を超える時間がかかった場合は、注文チャットでご連絡ください。作業をやり直すか、代金を全額返金いたします。
詳しい仕組み →

質問と回答

スクリーンショットが横長です。仕上がりも横長になりますか?

いいえ。このサービスでは、アップロードした画像の形にかかわらず、どの画像も約1024 x 1536ピクセルの縦長の2:3のスマートフォン画面になるので、横長のパソコン版のスクリーンショットは縦長のモバイル版ページとして描き直します。とても長いページは1画面に細かく収まらないため簡略化して表示します。各部分を見たい場合は複数のモックアップに分けてください。

サイトがレスポンシブになりますか?

それだけではなりません。お届けするのはスマートフォンのレイアウトのPNG画像で、HTMLやCSSのコード、FigmaやXDのファイル、テーマの設定ではありません。画像をもとに開発担当者またはお客様がページを作り直してください。Shopify、WordPress、Wix、Squarespace、Webflowでは、テーマのモバイル設定で現在できることをご確認ください。お客様のサイトには一切手を加えません。

文章はパソコン版のページと同じになりますか?

いただいた見出しとボタンのラベルは画像に描き入れるので、短めにしてください。本文は仮の行で表示します。画像は描き直すため、小さな文字、アイコン、フォント、ロゴがわずかに変わったり正確に仕上がらなかったりする場合があり、ラテン文字の言語が最もきれいに仕上がります。すべての言葉をご確認のうえ、修正をご依頼ください。

自分のサイトではなく、気に入ったサイトを送ってもよいですか?

ご自身のサイトか、気に入った見本と依頼内容に書いたご自身の内容を送っていただけます。他社が作った見本はスタイルの参考にするだけで、ロゴ、文章、画像は使わず、画面に他社ブランドのロゴも入れません。書類、証明書、公的な書式は再現せず、偽のレビュー、評価、受賞歴も加えません。

答えが見つかりませんか?

プラン