Webデザインのモックアップをクライアントに提示する方法は？

私はウェブサイトの再設計プロジェクトに取り組んでいます。レビューのために、クライアントにいくつかの異なるモックアップを提示する必要があります。クライアントがすべての状況を把握できるようにしたい。クライアントに適切なソフトウェアがあるとは思わないでください。設計の方向性について、コメント、質問、または背景を追加することもできます。

クライアントにモックアップを提示する典型的な方法は何ですか？私はウェブサイトのモックアップをメールで表示することが最善の方法ではなかったと思います。電子メールがモックアップを提示するための成功した手段である場合、答えでそれを説明してください。

さて、クライアントにモックアップを送信する方法はいくつかあります。ソフトウェアが心配な場合は、各デザインをとしてエクスポートし、Acrobatで.pdfマルチページを作成し、.pdf画像だけを送信したくない場合はプレゼンテーションに役立つコメントを追加できます。

もう1つのオプションは、ポスターボードに印刷された専門家を招き、会議でデモを行うことです。

スライドショーを作成して、インタビューに表示します。

ワイヤーフレームでウェブサイトをコード化するのは、私がこれを投稿した理由です。

このようなスケッチ用紙を安く購入したい場合は、定規を約36インチのワイヤーフレームでサイトに取り、色鉛筆を使用してワイヤーフレームを説明します。

あなたの質問は非常にあいまいで、いくつかのアイデアと解決策があります。この質問を読んでも、再設計のどの段階にいるかはわかりません。モックアップを参照するとき、私はあなたがワイヤーフレームの段階にいると思いました。

編集： しかし、実際には、クライアントがサイトの正しい感触を得ることが非常に心配な場合は、コードを記述し、CSSファイルが十分に編集可能であることを確認して、変更によって穴を掘らないようにしてください。このサイトは、CMSサイト、シンプルなHTMLサイト、eコマースサイトなどである必要がありますか。CSSワイヤーフレームでサイト全体を作成しないのはなぜですか。

私が正しく理解していれば、モックアップを共有する「標準」の方法があるかどうか疑問に思っています（たとえば、通常はプレゼンテーションガイドラインに従っているロゴのデザインを送信するときのように）。

私に関する限り、いいえ、ありません。

これは主に、クライアントとどのような通信手段を使用しているかによって異なります。電子メールはほとんどの場合完全に有効ですが、たとえば、より大きなチームと作業結果を共有する必要がある場合があります。その場合、人々がより動的な方法で対話できるようにするいくつかのアプリケーションを使用したい場合があります。

チームのフィードバックに使用したプロジェクト管理ツールには、BaseCampとTrelloがあります。しかし、非常に役立つと思われる同様のものがたくさんあります（Googleドキュメントでも- ここにも包括的なリストがあります）。彼らの利点は、さまざまなメンバーが開発についての入力を残すことができることであり、コメントで言及したように、すべてのフォローアップが可能です。

Balsamiqは、簡単にコメントを追加してモックアップをオンラインで変更するためのもう1つの優れたツールです（クライアントによる専門知識は必要なく、非常に直感的です）が、おそらく人々を招待できるように拡張ライセンスを取得する必要があります。以上。

テクノロジーの詳細ではなく、プレゼンテーションの物理的な行為について質問していると思います。

あなたはその文脈において正しいです。成功したプレゼンテーションの大部分です。あなたがいない状態で彼らが見るためにモックアップを送るのは理想的ではありません。通常起こることは、焦点が合わないフィードバックを得るということです...多くの場合、コメントは、重要な戦略的全体像の問題ではなく、重要ではない、主観的な美的詳細に焦点を合わせます。

私がお勧めするのは、彼らとの何らかの形式のウォークスルーです。直接会うのが理想的ですが、直接会わない場合でも、電話（通話の5分前にファイルを送信）またはSkypeなどの何らかの画面共有テクノロジーを使用して簡単に処理できます。

このようにして、ビジュアルを表示できるだけでなく、ビジュアルを説明することもできます。結論に至るために行った美的およびビジネス戦略の決定について話すことができます。重要な側面に注意を集中し、重要性の低い詳細から離れてプロジェクトを目標に保つのに役立ちます。

何を表示するかについては、Webサイトの静的な視覚的モックアップを表示することは理想的ではなく、それを実行するためのより良い方法がある可能性があるという他の多くのコメントに同意しますが、それはまったく別の質問です。

開発者やコミュニケーターとして、クライアントが見ているものは、予想されるサイト設計の静的で平らな絵であることをクライアントに知らせるようにしてください。クライアントにWebデザインを提示する方法のいくつかを次に示します。

Webデザインのモックアップを提示する方法

• 画像をWebページに配置してリンクを送信する

• 電子メールでJPEGまたはPNGを送信する

• ある種のWebベースのアプリケーションを使用する

• ウェブサイトのCodedPreviewを使用する

• クライアントスタジオを作成する

• モックアップをPDFにエクスポート

• JPEGまたはPNGを送信して印刷するように依頼する

私は次のことを勧めた私の友人に連絡しました：

• 画像だけで作業している場合は、mocku.psなどのアプリがあります。
• より充実した製品をお探しの場合は、コラボレーションに重点を置いたPixelapseがあります。バージョン管理、バックアップ、コメントなどが含まれます。

私の知る限り、標準的な手順はありません。ほとんどの場合と同様に、プロセスのビジネス側にさらに多くの情報が集まると、企業や個人によってプラクティスが異なります。

私は、クライアントとの継続的な仕事/マーケティングの面で少し多かった会社と仕事をしましたが、クライアントに彼らのウェブサイトへのログインを提供する賢いシステムを持っています。ダウンロード可能なリソースに関するリソース。これは、さまざまなカラーフォーマット、解像度、およびファイルフォーマットでのロゴおよびその他のその他の作品のコピーにより適合しているため、設計ジャンキーのない企業は、さまざまなバリエーションのバリエーション、または何らかの理由で必要な場合はベクターファイルを入手できます。あなたはこれに似た何かをすることができ、画像と進行中の作業に関するメモを表示するログを持っています。

ただし、これはかなり重い手順です。それが1つのギグよりも小さい場合は、画像をpdfファイルにコンパイルし、何が何で、どこにいるか、プロセスのどこにいるか、誰に何が必要か、次に何が必要かを説明したメモを含めることを検討してください。ロゴを上部にスラップして適切にフォーマットすると、単にメールに画像を添付するよりもプロフェッショナルに見えます。

数ヶ月前、私はInVisionというアプリに出くわしました。モックアップとそのリビジョンをアップロードする機能、インタラクティブなプロトタイプを作成する機能、およびモックアップの特定の領域にコメントを残す機能を提供します。このアプリにより、フィードバックをやり取りしたり、デザイナーやクライアントとやり取りしたりする方法が改善されました。

さて、あなたはコミュニケーションのためのモックアップを作成しています。だから、ライブワークショップのために行く時はいつでもすることができます。

そのようなワークショップで、モックアップについて話し合い、同時にその場でモックアップを微調整して注釈を付けます。あなたは一緒に何かを作成しています-これは彼らの赤ちゃんにもなります。

上記がいくつかのステップに進んだ場合に機能することに注意してください（詳細なプロトタイプをすでに完全に完了したときに1つの大きなプレゼンテーションを行うのとは対照的です）。ところで、まずメイン画面/ページをモックアップしたいと思います。その後、詳細に進み、一度に1つのシナリオを実行します。

私が提示しなければならない最後のプロジェクトでは、クライアントとのミーティングがあり、ストーリーボードのpngをブラウザで表示しました。特別なことは何もありませんが、「ネイティブ」環境でデザインを提示しました。

電子メールでクライアントに画像を送信する私の経験は悪いです-クライアントは通常、メールクライアントの画像比率とサイズに問題があります。これにより、ウェブデザインのプレビューの外観が少し異なる場合があります。

オンラインサービスを利用して作品を公開しています。画像をサードパーティのホスティングサービスにアップロードし、クライアントのURLを送信します。

以前は、2000年代にレイアウトをメールで送信することが効果的でした。現在、お客様へのデザインの提示には特別なサービスがあります。これのために特別に設計されていますか？

（m）maquetter.comサービスがどのように役立つかを見てみましょう。この目的のために特別に開発されたものです。

• 描画するサイトのレイアウトをすばやく追加します。
• Webサイトのセクションごとにレイアウトを配布します（メニューを繰り返すなど）。

また、次のことが可能です。

• クライアントによって承認されたレイアウトをマークする
• 同じレイアウトを更新して履歴を保存します。

このサービスはあなたに短いリンクを提供します。あなたはそれを（メール、テキストメッセージ、またはSkype経由で）送信します。顧客は任意のブラウザーでレイアウトを簡単に表示できます。あなたはあなたのクライアントがそれを見ることができるようにそれがどのように機能するかをすることができます。

サービスは無料です。ただし、有料の料金プランを使用して、より多くのレイアウトを提示することができます。

自分で試してください

詳細については、ブログを読むことができます

スクリーンショット/画像を使用してインタラクティブなデモを作成できます。これらのツールをご覧ください：http : //www.appdemostore.com/およびhttp://giveabrief.com/。

どちらも非常に使いやすいです。デバイスフレームを選択し、画像をアップロードして、必要な操作を追加します。ボタン、ピンチ、延長などのアイコンを含めることができます。:)