ウェブサイトのモックアップ:探索する4つの一般的なアプローチ

ウェブサイトのモックアップ

Webサイトのモックアップは、さまざまな方法で作成できます。 「最善の」アプローチがないのは事実ですが、特定のUIおよびUXデザイナーのスタイルと好み(およびデザインプロセス)によっては、他のアプローチよりもうまく機能するものもあります。

この記事では、最も人気のある4つのオプションの長所と短所を見ていきます。エンドツーエンドのUXツール、モックアップツール、グラフィックデザインツール、およびウェブサイトのモックアップ間の境界線を曖昧にし始めるコード化されたデザインです。とプロトタイプ。

特にワイヤーフレーミングツールをお探しの場合は、 最高のワイヤーフレームツール 、またはより幅広いコレクションについては、のメガラウンドアップをチェックしてください 最高のウェブデザインツール



GenerateJSバナー

画像をクリックして詳細を確認し、チケットを受け取ります(画像クレジット:Future / Toa Heftiba、Unsplash)

すべてのウェブサイトのモックアップが同じであると誤解しないでください。プラットフォーム、忠実度、およびコーディングに関する単純な決定はすべて、大幅に異なる結果を生み出します。設計プロセスを開始する前に、必要なものと目標を把握してください。3つのフェーズすべてをサポートするツールが必要な場合は、途中で切り替えるよりも、使用を開始することをお勧めします。同様に、恒星の完全にリアルなモックアップが必要な場合は、ある時点でグラフィックデザインエディタを使用することに注意してください。

01.エンドツーエンドのUXツール

最上位層には、ワークフロー全体を満たすことを目的としたエンドツーエンドのツールがあります。モックアップ、プロトタイピング、ドキュメント、開発者の引き継ぎ、設計システムです。 UXPin 2010年代初頭からこのニーズに応えてきましたが、AdobeやInVisionなどの他の多くのブランドも、「すべてを統治する1つのツール」を作成しようとしています。

UXPin

Photoshopでスマートオブジェクトの色を変更する
UXPinは、堅牢なプロトタイピング、モックアップ、ドキュメント、および開発者の引き継ぎを誇っています

では、これらのツールは、モックアップを作成するためにどのように積み重ねられるのでしょうか。彼らは問題なくそれらに取り組むことができます–そしていくつか。たとえば、UXPinを使用すると、複数の状態と相互作用を持つモックアップを作成できます。ペンツールを含めることで、PhotoshopやSketchの一部の機能を模倣することもできます。

一方、 InVisionによるスタジオ 、かなり気の利いたアニメーション編集が可能です。一方 Adobe XD XDデザイン内でPhotoshopファイルとSketchファイルを開き、色、記号、線形グラデーション、文字スタイルを適用できます。

スタジオInVision

Studio by InVisionは、エンドツーエンドのワークフローを作成することを目的としています

最も重要なことは、エンドツーエンドのツールが、プロジェクト間でモックアップの一貫性を確保するための設計システムを提供していることです。設計システムは、ツール全体の資産と設計原則に関する信頼できる唯一の情報源をすべての人に提供します。多数のモックアップを作成する予定の場合、この機能はほぼ必須になります。

ウェブサイトのモックアップを作成するためのエンドツーエンドのツールを選択するときは、次の側面を考慮する価値があります。

  • 忠実度 :ビジュアルおよびインタラクションデザインのツールはどれほど強力ですか?
  • 一貫性 :どの機能があなたの仕事のデザインの一貫性を保証しますか?
  • 正確さ :使用している要素は、組織の「信頼できる唯一の情報源」を反映していますか?
  • コラボレーション :利害関係者や他のデザイナーとコラボレーションできますか?
  • 開発者の引き継ぎ :ツールはどのようにして開発者向けの仕様とアセットを生成しますか?

02.専用のモックアップツール

次のような堅牢性の低いソリューション 原理フレーマMoqups または Balsamiq モックアップを作成するために必要なすべてのものを引き続き提供できます。追加のワークフローと設計の一貫性機能が失われるだけです。これらのツールは、作成プロセスを可能な限り簡単にするように設計されているため、プログラムの操作方法ではなく、文体の決定に集中できます。

専用のモックアップツールには明らかな利点があります。初心者は使いやすさのメリットがありますが、専門家は高度なニーズに合わせて特別に調整されたデザインを高く評価しています。より高度な目的では、FramerやPrincipleなどのツールは、モックアップのアニメーションとインタラクションを専門としています。

フレーマ

ニューヨークタイムズのロゴは何フォントですか
Framerのようなツールはインタラクションを専門としています

ローエンドでは、MoqupsとBalsamiqは、ワイヤーフレームやモックアップに使用されることがある非設計ツールよりも多くの機能を提供します( 基調 )、ただし、忠実度の低い設計のみに制限されています。ただし、目標が忠実度の低いワイヤーフレームを非常に迅速に作成することである場合、これらは非常に役立ちます。

モックアップツールに関しては、単純なワイヤーフレーミングソリューションで十分かどうか、またはより高度な画面デザインが必要かどうかを判断する必要があります。どのモックアップツールを選択する場合でも、コラボレーションワークフローの損失と、エンドツーエンドツールによって提供される設計の一貫性の低下を受け入れる意思があることを確認してください。

03.グラフィックデザインソフトウェア

一部のデザイナーは、次のようなソフトウェアを誓います Photoshop CC 、スケッチまたは Illustrator CC 特に、ピクセルまでの制御を提供するツールに特に熟練した、または精通している人。グラフィックデザインプラットフォームは、最高レベルのリアリズムと視覚的忠実度を目指している場合に最適に機能します。そして私達が私達のガイドで説明するように PhotoshopCCを使用したラピッドプロトタイピング 、思ったより簡単かもしれません。

Photoshop CC

Photoshopはきめ細かい制御を提供しますが、単純なモックアップにはやり過ぎかもしれません

グラフィックデザインソフトウェアで作業すると、高度に定義された色のほぼ無限の選択肢にアクセスできるため、たとえば特定のブランディングルールの下で、厳格で事前設定された配色の制限内で作業している場合は、これらのプログラムが最適です。オプション。これらのプログラムは、色のオプションだけでなく、はるかに多くの視覚的なツールを提供し、細部の細部に取り組むことができます。

ただし、このタイプのソフトウェアを使用することの欠点は、デザインのコーディングを開始するときに翻訳が困難になる可能性があることです。 Photoshopで機能したものは、コード(フォント、シャドウ、グラデーション効果などの要素)で常に機能するとは限りません。これは、プロトタイピングフェーズのソリューションを見つけるのに時間の浪費につながる可能性があります。

スタイルが多いページの場合、モックアップフェーズで特定の視覚的な詳細を打ち出すと役立つ場合があります。その場合、PhotoshopまたはSketchがほとんどのオプションを提供します。同様に、気難しいクライアントや気に入らないクライアントを扱っている場合は、ゴージャスで印象的なモックアップを提示すると、より簡単に勝つことができます。

キヤノンPowerShotに最適なSDカード

モックアップはUXPinにドラッグできます

PhotoshopまたはSketchで作成されたモックアップは、UXPinにドラッグアンドドロップできます。

PhotoshopまたはSketchで作成されたモックアップは、UXPinを使用してプロトタイピングフェーズにドラッグアンドドロップできることにも言及する価値があります。これにより、数回クリックするだけですべてのレイヤーを簡単にアニメーション化でき(平坦化なし)、プロトタイプを作成するときに最初からやり直す必要がなくなります。

ビジュアルだけが優先事項ではない場合は、ワイヤーフレーミング、モックアップ、およびプロトタイピングをすべて1か所で実行できるツールを使用する方が効率的かもしれません。グラフィックデザインソフトウェアは、最適な視覚化を求めていない限り、モックアップの価値よりも厄介な場合があります。これらのツールはコラボレーション用に設計されていないため、開発者と定期的に連絡を取る必要があります。

04.コード化されたモックアップ

あなたが主にデザイナーであり、コーディングに慣れていない場合、これは明らかにオプションではありません。で説明したように モックアップのガイド 、コード化されたモックアップはデフォルトの選択ではありません。

ほとんどのコーディングは、プロトタイピング段階(HTML / JavaScriptプロトタイプを作成している場合)まで、またはそれ以降(プロトタイピングツールを使用している場合)に延期できます。しかし、複雑さと潜在的な障害にもかかわらず、モックアップフェーズにコードを導入することを提唱する多くの立派な設計者がいます。

ツールとテクノロジーの改善は、レイアウト設計にますます多くの可能性が開かれていることを意味しますが、コードですべてを簡単に(または可能にさえ)再作成できるわけではありません。コードから始めると、できることとできないことをすぐに知ることができます。コードに慣れている場合は、これから始める方が無駄が少ないと主張することもできます。とにかく、モックアップは最終的にHTML / CSSになります。

しかし、前述したように、コーディングの難しさよりも多くの理由から、コーディングを使用したモックアップは一般的な戦略ではありません。コーディングを開始するのが早すぎると、アイデアがどれほどエキサイティングに見えるかではなく、コードでのアイデアの実現可能性について心配しやすいため、創造性と実験の準備が制限される可能性があります。

いつコーディングを導入するかはあなた次第です。設計の目的を理解していることを確認し、機能の優先順位付けについて開発者に最新の情報を提供してください。

続きを読む: