2014年、私はMOTEエージェンシーをRembrant Van der Mijnsbruggeと共に設立しました。私たちはECビジネスを専門としており、クライアントのブランドの旅のあらゆる段階でパートナーシップを結んでいます。初期の市場戦略やブランドアイデンティティからデザイン、開発、マーケティングに至るまで、常に持続可能な成長に焦点を当てています。15年間のECウェブデザインの経験を通じて、独立したブランドからFortune誌500企業まで、さまざまなクライアントの戦略を形作ってきました。私のキャリアを通じて集めたウェブデザインのヒントやアドバイスを共有できることを楽しみにしています。
既製のウェブサイトテーマを編集するのは簡単です。たとえば、1行に4つの製品を表示する場合と2つの製品を表示する場合のウェブサイトの見た目を数秒でプレビューできます。
しかし、完全カスタムのウェブサイトでは、コードの変更が時間とコストを要することがあります。だからこそ、デザイナーは開発段階に進む前にウェブサイトのモックアップを作成します。
この記事では、ウェブサイトのモックアップについて、また自分自身のウェブサイトモックアップを作成するためのツールやベストプラクティスについて詳しく学びます。
ウェブサイトのモックアップとは？
ウェブサイトモックアップは、ウェブサイトの見た目を静的に視覚化したものです。サイトの最終デザインやレイアウトの感覚を提供しますが、インタラクティブで公開準備が整ったバックエンドコードはまだ含まれていません。
ウェブデザイナーは、ウェブデザインを開発に移行する前に、さまざまなデザインオプションを探るためにウェブサイトモックアップを使用します。
ウェブサイトがコードで構築された後は調整が難しくなるため、忠実性の高いウェブサイトモックアップ（最終製品にできるだけ近いもの）は、時間とコストを節約できます。
ウェブサイトのモックアップとワイヤーフレームとプロトタイプの違い
ワイヤーフレーム、モックアップ、プロトタイプは、デザインアイデアを視覚化するための異なる方法です。それぞれの使用タイミングは以下の通りです。
ワイヤーフレーム
ワイヤーフレームは、デザイン要素なしでウェブサイトのレイアウトと構造を示す図です。ワイヤーフレームは、あなたのウェブサイトデザインの青写真のように考えることができます。
ワイヤーフレームはシンプルなペンと紙のスケッチであることもあり、ビジョンを伝えたい非デザイナーにとって有用なツールです。
また、ワイヤーフレームは新しいまたは非常にインタラクティブな要素を持つウェブサイトのデザイナーにも役立ちます。なぜなら、デザインやコードに取り込まれる前に、サイトの基本的なアウトラインと機能を決定できるからです。
シンプルなECサイトを構築している場合でも、ワイヤーフレームは全体のセールスファネルや顧客体験を固めるのに役立ちます。ワイヤーフレームは非常にシンプルであるため、デザインが始まる前に全員が同じ理解を持つための素晴らしい方法です。
モックアップ
モックアップは、詳細かつ静的な表現で、ブランドの決定が適用されたウェブサイトのレイアウトを示します。ワイヤーフレームとは異なり、モックアップにはアートディレクション、タイポグラフィ、色の使用が含まれます。
モックアップは、最終的なウェブサイトがユーザーにどのように見えるかのリアルなプレビューを提供しますが、まだインタラクティブではありません。カスタムウェブサイトを構築する際には、コーディングが始まる前にデザインを変更できるため、モックアップは不可欠です。
プロトタイプ
プロトタイプは、ウェブサイトをプレビューするための最も忠実性の高いオプションです。これは、プレビューリンクを使用してユーザー体験をシミュレートし、ウェブサイトデザインをより現実に近づけるインタラクティブなモデルです。
開発前に異なるインタラクティブ要素をテストする必要があるプロジェクトでは、プロトタイプが非常に有益です。シンプルなプロジェクトでは、モックアップから開発に直接進むこともあります。
ウェブサイトのモックアップ作成方法
自分でデザインする場合でも、デザイナーと協力する場合でも、デザインプロセスを進める際に考慮すべき基本的な要素は同じです。
1. ブランドの提示方法を決定する
ウェブサイトをデザインする最初のステップは、一歩引いてどのようにブランドを提示するかを考えることです。
デザイナーと協力している場合は、クリエイティブブリーフからプロセスを始めることができます。これにより、彼らはあなたのブランド、オーディエンス、インスピレーションについて学ぶことができます。
特定の機能に焦点を当てたくなるのは自然ですが、技術的な詳細に取り込まれる前に、まずは全体像を考えてみましょう。ウェブサイトのレイアウトで伝えたい全体のストーリーについて考えてみましょう。
たとえば、ユーザーがあなたのホームページでより多くの時間を過ごすよう促すことを目指すかもしれません。ホームページは、ブランドへの最初の接点であることが多く、通常は最も高い直帰率を持っています。
しかし、機能やコンバージョン最適化の観点から始めるのではなく、「ホームページ訪問者とのより深い接続をどのように確立するか？」と自問してみましょう。
その解決策は、ブランドの紹介文をファーストビューに一文書くことのようにシンプルかもしれません。もしあなたのブランドの価値がビジネスの中心にあるなら、これはその価値をホームページで直接示す素晴らしい機会です。
たとえば、持続可能性や包括性のような価値を示すことで、ターゲットオーディエンスに共鳴し、サイトに留まる時間を延ばすことができます。
2. 線形の物語を作成する
ウェブサイトは線形の物語に従うべきです。つまり、各セクションとページが論理的に流れ、次に進むにつれて構築されていく必要があります。
成功した物語は、誰かがあなたのホームページにアクセスしたときに、ブランドと製品の提供について明確な理解を持たせます。サイトを通じての旅の中で、彼らが自分に適した製品を見つけるのを助ける詳細や機能を提供する必要があります。
従来のECウェブサイトでは、線形の物語はセールスファネルです。ユーザーはホームページにアクセスし、ブランドを紹介します。そこから、製品コレクションページを見つけ、ホームページよりも詳細に情報を提供します。
最も重要な情報を最初に提示し、二次的および三次的な情報はすぐにアクセスできるようにします。成功した物語の流れでは、ユーザーは製品を選択し、カートページに進み、最終的にチェックアウトプロセスを完了します。
3. ブランド要素を集める
ウェブサイトの物語をどのように形作りたいかを考えたら、デザインで使用するブランド要素を集めます。
もしブランドガイドラインがあれば、それをデザイナーと共有することができます（または自分で参照できます）。そうでない場合は、モックアップを作成する前に、タイポグラフィ、グラフィックス、色などのブランド要素を決定する必要があります。
ウェブサイトのグリッドレイアウトは、ブランドフォントの行間や文字間隔に基づくため、ウェブサイトモックアップを作成する前にこれらのブランド要素を決定することが重要です。グリッドレイアウトが決まったら、デザイン資産とクリエイティブブリーフを使用してモックアップを作成できます。
4. 各ページタイプのテンプレートをデザインする
ウェブサイトモックアップをデザインする際、すべてのウェブページのモックアップを作成するわけではありません。代わりに、コレクションページテンプレートや商品ページテンプレートなど、異なるタイプのページのモックアップテンプレートを作成します。
各テンプレートをデザインする際には、一歩引いて「どのようにすれば体験が最も成功するか？」と自問しましょう。
たとえば、6つ以下の製品を厳選したアソートメントがある場合、コレクションページはそれぞれの製品を紹介し、詳細な製品ページに進む前に少しコンテキストを追加するべきです。
一方、数十、数百、あるいは数千の製品がある場合は、より高度な製品フィルタリングを備えたウェブサイトをデザインする必要があります。これにより、コレクションページにアクセスした人が、自分に最も関連性の高い製品に絞り込むことができるようになります。
5. 意味のあるプレースホルダーを追加する
モックアップは最終的にウェブサイトがどのように見えるかのプレビューであるため、モックアップが進行中の間にサイトのコンテンツを生成している可能性があります。その場合、意味のあるプレースホルダーを使用できます。
モックアップで使用される画像やテキストが一時的であっても、最終目標にできるだけ近いものであるべきです。そうすることで、モックアップをプレビューしたときに、サイトの意図した方向性を実感できます。
たとえば、「ロレム・イプサム」のプレースホルダーテキストを使用するのではなく、ブランドに沿ったサンプルコピーを作成することができます。
6. フィードバックを得る
モックアップが準備できたら、ステークホルダーに提示してフィードバックを得る時間です。ウェブサイトモックアップを作成する主な利点は、コードを変更せずに修正を行えることです。
この機会を利用して、すべてのステークホルダーがモックアップに自信を持てるようにし、本番投入前に確認を行いましょう。
ウェブサイトのモックアップツール
ウェブサイトモックアップを作成するために使用できるデザインツールは多数ありますが、最も人気のあるものには以下が含まれます。
Sketch
Sketchは、迅速な反復を可能にするウェブデザインアプリです。2010年にUIデザイン専用に作成されたSketchは、モックアップやインタラクティブなプロトタイプを作成できます。標準のサブスクリプションは月額12ドル（約1,879円）から始まります。
Figma
Figmaは、リアルタイムでのコラボレーションを可能にするデザインツールです。複数の人が同時にモックアップに取り組む場合、Figmaは良い選択肢です。Figmaには無料でサインアップできますが、すべての機能を使用したい場合は、プランが月額15ドル（約2,349円）から始まります。
Adobe XD
Adobeのデザインスイート（Photoshop、Illustrator、InDesign、Lightroomなど）を使用しているデザイナーは、他のAdobeアプリケーションとの円滑な統合のためにAdobe XDを好みます。
AdobeはXDを単体製品として販売していませんが、Adobe Creative Cloudのサブスクリプションを通じて月額9,080円でアクセスできます。
ウェブサイトのモックアップに関するよくある質問
ウェブサイトを無料でモックアップするにはどうすればよいですか？
ウェブサイトをモックアップするには、デザインツールが必要ですが、これには費用がかかります。幸いなことに、Figmaのような多くのデザインツールは、無料トライアル期間や機能が制限された無料版を提供しており、これを出発点として使用できます。
Canvaも、無料のウェブサイトモックアップを作成するために使用できるツールです。
ウェブサイトモックアップはいつ作成すべきですか？
ウェブサイトモックアップは、完全にカスタムのウェブサイトを構築する際に役立ちます。これは、開発に進む前にサイトがどのように見え、感じるかを把握できるからです。デザインを進める中で、共有、参照、反復できるものを提供します。
プロジェクトによっては、ワイヤーフレームをスケッチした後にウェブサイトモックアップを作成することもありますし、プロジェクト要件を決定した後にワイヤーフレームをスキップして直接モックアップに進むこともあります。
ウェブサイトのモックアップは必要ですか？
特定のプロジェクトによっては、ウェブサイトモックアップを作成する必要がない場合もあります。たとえば、Shopifyテーマを使用してサイトを作成する場合、モックアップをスキップしてテンプレートをインタラクティブなプロトタイプとして使用できます。
ただし、良いモックアップを作成するための多くの原則は、そのアプローチにも当てはまります。
