あなたのところに来て、あなたにウェブサイトのデザインを依頼するクライアントを想像するか、考えてみてください。 使用するテーマをデザインする必要があるかもしれませんし、それを訪れる何千、何百万もの人々にそれが残す第一印象になるかもしれません。 どのように彼にそれを提示しますか？ デザインに取り組んだウェブサイトのスクリーンショットを撮り、それを見せてくれませんか？ Webモックアップを使用したほうがいいのではないでしょうか。
えっ、ウェブサイトのモックアップがあるって知らなかったんですか？それなら、これはまさにあなたにぴったりです。プレゼンテーションをより洗練された印象にすることができ、まるでウェブサイトが既に稼働しているかのような画像を見せることで、クライアントの満足度も格段に上がります。しかも、それほど費用もかかりません。
ウェブサイトのモックアップとは
まず最初に、ウェブサイトのモックアップとは何かについて少し説明しましょう。ご存知のとおり、モックアップとは、最終的な成果物がどのようなものになるかを示す、通常は「リアルな画像」である表現のことです。
ウェブサイトの場合、それはそのウェブページの表示結果の画像になります。
この種のコラージュは、作品にリアリティを与えるために用いられます。というのも、コラージュだけでは、作品が空虚に見えたり、制作内容を十分に表現できていないと感じられる場合があるからです。さらに、クライアントに最終製品のイメージをより視覚的に伝える手段にもなります。
では、制作中のウェブサイトを見せてみてはどうでしょうか？確かにそうすることもできますが、作品のプレゼンテーションとしては適切ではありません。クライアントにウェブサイトを実際に操作してもらい、隅々まで理解してもらう必要がありますが、多くの場合、クライアントにはそんな時間はありません。そのため、クライアントがすべてを見てくれたかどうかは確信が持てません。
一方、Webモックアップを使用すると、それらの画像で見たいものすべてを強調表示するため、それを実現できます。
作り方
さて、これらのWebモックアップはどのように作成されますか？ それらを作成するプログラムはありますか？ 彼らはインターネットから取られたコラージュですか？
実は、これらを作成するのに役立つ無料ツールがいくつかあり、後ほどご紹介する例以外にも様々な選択肢を提供してくれます。
これを使用すると、そのクライアント用にそれらのコレクションを作成して、最終結果をはるかに見栄えよくするさまざまな順序でデザインを配置することもできます。
これらのツールは次のとおりです。
グリフィ
このツールはオンラインで無料で利用できます。豊富なテンプレートとAPIを備えているため、数分でウェブサイトのモックアップを作成できます。
実際、これは最もよく使われているものの1つであり、多くの選択肢を提供してくれます。
カクー
この場合、無料部分に焦点を当てて説明しますが、このツールは有料版もあり、その分できることが制限されることを警告しておきます。
参考までに申し上げると、エクスポートできる形式はPNGのみです（つまり、他のクライアントで使用したい場合は、カスタマイズの自由度がかなり低くなります）。
良いことは、チームで作業する場合、同時に（つまりリアルタイムで）一緒に作業できることです。
ワイリファイ
Wirefyは、ウェブサイトをワイヤーフレームに変換できるツールの1つで、クライアントと協力して、クライアントの希望に沿ったウェブサイトを提示することができます。ただし、ワイヤーフレームを作成するには、コンピューター、タブレット、またはモバイルデバイスで撮影した写真を選択する必要があります。
ご想像のとおり、すべてのツールでWebデザインのイメージが得られますが、実際に実際のイメージに組み立てる必要があります。 このためには、コンピューター、携帯電話、タブレットが表示されている写真にアクセスして、デザインを上に挿入し、両方を結合する（そして見栄えのする）写真を取得する必要があります。
これを行うには、既製のモックアップを使用するか、画像編集プログラムを使用して自分でモックアップを作成します。
ダウンロードできるWebモックアップ
作品のプレゼンテーションでストレスを溜めたくないなら、ダウンロードして使えるウェブサイトのモックアップ例をいくつかご紹介します。時間を節約できますよ。
現実的なウェブサイトのモックアップ
まず、誰もが持つことができるシーンから始めます。 机とコンピューター画面（下はキーボードとマウス）です。 背景には本が入った本棚。 ただし、この本棚は白黒で、机の装飾要素（より多くの本とランプ）と灰色の壁があります。
なぜでしょうか？それは、視聴者の注意をモニターに表示されているページに集中させるためです。あなたの場合、それはホームページであったり、クライアントに見せたい代表的なセクションであったりするでしょう。
こちらからダウンロードしてください。
シンプルなウェブサイトのモックアップ
灰色の背景（カスタマイズは可能ですが）では、Webページを挿入する画面が表示されない、より単純な表現。
画面を見ると、光が当たっていることをシミュレートしているため、明るい部分と暗い部分があります。
これは、顧客にその部分だけに注目してもらいたい場合に興味深い方法です。
こちらからダウンロードしてください。
サムスンギャラクシーS5モックアップ
これは特にSamsungGalaxyS5のモックアップですが、作成したWebデザインのXNUMXつの部分を同じ画像で表示して、クライアントがモバイルでどのように見えるかを理解できるようにするのに最適です。
Googleは現在、レスポンシブウェブサイト（パソコン、タブレット、モバイル端末など、どのデバイスで閲覧しても見栄えの良いウェブサイト）を使用している企業をより積極的にサポートしていることを覚えておいてください。したがって、ウェブサイトがパソコンで見栄えが良いだけでは不十分です。他のすべてのプラットフォームでも見栄えが良いことを確認する必要があります。
こちらからダウンロードできます。
タブレットとモバイルのモックアップ
この場合、タブレットでWebを100％表示することはできませんが、モバイルで表示することはできます。 そして、これらXNUMXつのデバイスでデザインを表示したい場合は、それも実行できるので、クライアントはそれがどのように見えるかを知ることができます。
タブレットでは横向きに表示され、スマートフォンでは縦向きに表示されることに注意してください。これは、ユーザーが両方のデバイスに合わせてデザインがどのように変化するかを確認するための方法です。
ここにあります。
Webモックアップの例はありますか？ コメントで共有できます。