PINGDOM_CANARY_STRING
ワイヤーフレームを作成する方法

Lucidchart でワイヤーフレームを作成する方法

読み取り時間 : 約1分

投稿者 : Lucid 編集部

ワイヤーフレームを使ったことがなくとも、ワイヤーフレームが必要になることはあります。ただ、考えていることを分かりやすくウェブ開発者に伝えたいときなどに、絵心がないと手描きでワイヤーフレームを描くのは難しいですし、複雑なワイヤーフレームソフトウェアを習得するには時間がかかります。

Lucidchart なら、デザインの経験がなくともワイヤーフレームやモックアップを手早く構築して共有できます。UX デザイナーにはより高度なワイヤーフレーム作成ツールが必要になることもありますが、Lucidchart はデザインが本業でない人にもぴったりのツールです。洗練されたワイヤーフレームやモックアップを作成し、ウェブ開発者や UX デザイナーにアイデアを正確に伝えましょう。

また、完全に無料で使えるのもうれしいポイントです。

Lucidchart でワイヤーフレームを作成する方法

Lucidchart では、ウェブサイトやモバイルデバイスのワイヤーフレームとモックアップの両方を構築できます。モックアップとは、構築したい内容をビジュアルでモデル化したもので、最終製品に見た目はよく似ていますが、機能的には同じではありません。他方、ワイヤーフレームでは、形を示すことではなく、機能のシミュレーションに重点が置かれています。

どちらも UI や UX の特性を検討する際に便利な図で、組み合わせて使うことが多いでしょう。このガイドでは、Lucidchart でテンプレートを使ってワイヤーフレームを作成する方法と、ゼロからワイヤーフレームを作成する方法を説明します。

ワイヤーフレームテンプレートで時間を節約

ワイヤーフレームを作るのが初めての場合や時間を節約したい場合にはテンプレートを活用するのがベストです。テンプレートには単純な図形がすでに配置されており、基本的な準備はできているので、あとはコンテンツを追加するだけです。Lucidchart には、ウェブサイトのトップページからモバイルアプリまで、さまざまなワイヤーフレームのテンプレートが揃っています。

Lucidchart のテンプレートライブラリを開くには、文書ライブラリで [+ 文書] の横の矢印をクリックし、左側のカテゴリーを下方へスクロールしてワイヤーフレームのセクションを見つけます。

テンプレートをクリックして内容を確認し、ニーズに合ったものが見つかったら [文書を作成] をクリックします (テンプレートをダブルクリックして新しい文書を開くこともできます)。テンプレートを選択したら次のステップ3へ進みます。

Lucidchart のワイヤーフレームテンプレートの詳しい使い方についてはチュートリアル動画を参照してください。

ホームページの基本的なワイヤーフレームの例
ホームページのワイヤーフレームテンプレート (Lucidchart で拡大版を見るには画像をクリック)

Lucidchart でゼロから作図を始めたい場合には、以下の手順でワイヤーフレームを作成できます。

1. 図形ライブラリを選択

ワイヤーフレームの作成を始める前に、必要な図形ライブラリをツールバーに固定してワークスペースの準備をします。Lucidchart エディターで空白の文書を開いた状態で「M」キーを押して図形ライブラリを開き、使いたいライブラリを選択して [保存] をクリックします。

プロジェクトにより、以下を始め、いくつかの異なるライブラリを利用することもできます。

  • フローチャート図形 : ツールバーに固定されている標準の幾何学的なフローチャート図形で、いろいろと役に立ちます。長方形を使用してウェブサイトをセクション別に分けたり、矢印を使用して、ある UI 要素から別の要素への流れを説明することもできます。
  • UI モックアップ : 標準的な UI コンテナーとウィジェットが揃った図形ライブラリで、ウェブサイト向けの空白の図形や、動画、マップ、グラフ、写真、カレンダーなどのプレースホルダーも用意されています。
  • Android モックアップ : Android スマートフォンやタブレットなど、Android に特化したダイアログやアイコンが揃い、Android デバイス向けのアプリやページを作成する場合に便利です。
  • iOS モックアップ : iOS 図形ライブラリには iPhone や iPad、iOS に特化した UI コンポーネントが揃っています。
  • 画像 : 画像ギャラリーもお忘れなく。上品な背景や特定のロゴが必要な場合でも、Lucidchart から直接検索して追加できます。

このモックアップには、基本的なフローチャートの図形と画像、そして UI モックアップ図形ライブラリを組み合わせて使用しています。

モックアップの作り方

2. ワイヤーフレーム図に図形を追加

最も基本的な図形であり、他のすべての要素を格納するコンテナーからワイヤーフレーム作りを始めます。デザインの内容にもよりますが、これはおそらくモバイルデバイスのシルエットか、ブラウザーのウィンドウとなるでしょう。モバイルデバイスは [iOS デバイス] と [Android デバイス] の図形ライブラリ、ブラウザーのウィンドウは [UI コンテナー] 図形ライブラリでそれぞれ見つかります。

要素を追加する際は、全般的なものから具体的なものへと作業を進め、大きなデザイン要素を配置してから小さい要素へと移っていきます。コンテナーを使って、図の中にツールバーやサイドメニューなどのセクションを作ることができます。

大きな要素を配置したら、ボタンやテキストブロックを追加していきます。フォント、色、写真やロゴなど、デザインの細部は最後に編集します。

3. リンク、レイヤーやホットスポットで機能を追加

ワイヤーフレームのレイアウトが終わったら、リンク、レイヤーやホットスポットを使ってウェブサイトの機能をシミュレーションします。この3つの機能を使うことで、実際に機能するボタンの作成、ポップアップの構築、外部コンテンツへのリンク、ワイヤーフレームのあるページから別のページへの移動などが可能になります。以下のインタラクティブな図で試してみてください!

リンク、レイヤーやホットスポットの詳細はこちらから。

4. モックアップでユーザージャーニーフローを作成

ユーザージャーニーフローは、ユーザーがアプリケーションを操作する際の進行状況を示すもので、ユーザーが体験するフロントエンドのインターフェイスや開発者が構築するバックエンドのインフラに焦点を当てることができます。フローチャート図形だけでユーザーフローを作成するよりも、モックアップを入れた方がアプリケーションをイメージしやすくなります。

銀行アプリのワイヤーフローの例
銀行アプリのワイヤーフローテンプレート (Lucidchart で拡大版を見るには画像をクリック)

5. 公開、共有、またはプレゼン

モックアップやワイヤーフレームの作成には時間がかかります。完成したら、さまざまな方法で作成した図を披露しましょう。

  • Lucidchart のプレゼンテーションモードで公開中のウェブサイトのシミュレーションができます。ホットスポットやリンクが本物のボタンやポップアップのように見え、動作もします。
  • 動的な図をウェブサイトに埋め込むと、元の Lucidchart 文書の更新に合わせて、埋め込まれた文書にも変更がすべて反映されます。
  • ワイヤーフレームを PDF やウェブサイトとして公開すれば、URL を共有するだけで誰でも図を表示したり、操作できるようになります。
  • 共同編集者と文書へのリンクを共有して、デザインに対するフィードバックを集めたり、コメントとして質問を残してもらうこともできます。

ワイヤーフレームの達人の方は、以下のコメント欄でぜひヒントやアドバイスを聞かせてください!

著者について

株式会社  Lucid Softwareのロゴ

Lucidの編集部ではフローチャートやUMLなど行動な図や資料に関する情報から、プロジェクト管理や働き方の改善ノウハウ等の情報を発信しています。

Lucidchart で今すぐ作図を初めましょう。無料で使えます!

無料ではじめる

今人気

The 4 Phases of the Project Management Life Cycle

プロジェクト管理ライフサイクルの4つのフェーズ

Lucidchart について

Lucidchart は、チームが複雑な内容を理解し、共通の認識を得て、スピーディに未来を作り出すうえで役立つインテリジェントな作図アプリケーションです。直感的なクラウドベースのソリューションで、フローチャート、モックアップ、UML 図などを作成しながら、視覚的に作業を進め、全員でリアルタイムでのコラボレーションが実現できます。

Visio に代わるオンラインソフトウェアとして最も人気が高い Lucidchart は、180か国以上で数百万人のユーザーに活用されています。成約を目指す企業をマッピングする営業部門のマネージャーからネットワークインフラを視覚化する IT 部門のディレクターに至るまで、その用途は多彩です。

利用開始

  • 料金プラン
  • 個人向けプラン
  • チームプラン

  • 企業向けプラン
  • 営業担当担当に問い合わせる
日本語
プライバシー法的事項
Apple App Store でダウンロードGoogle Play Store でダウンロード
© 2022 Lucid Software Inc.