ウェブサイトのワイヤフレームは、ウェブページ上の要素の配置を示す単純な線画です。 後で複雑なデザインではなく、デザインプロセスの開始時に簡単なワイヤフレームのレイアウトを編集することで、時間を大幅に節約できます。
ワイヤフレームを使用することは、あなたとあなたのクライアントが色、タイプ、およびその他のデザイン要素を邪魔することなくレイアウトに集中できるようにするため、ウェブサイトプロジェクトを開始するのに最適です。 あなたのウェブページ上のどこに行き、各要素が占めるスペースの割合に集中します。これは顧客のニーズによって決まります。
01/03
ウェブサイトのワイヤフレームに含めるもの
ウェブページの重要な要素は、すべてあなたのウェブサイトのワイヤフレームで表現されるべきです。 実際のグラフィックの代わりにシンプルな図形を使用し、それらにラベルを付けます。 これらの要素には、
- ナビゲーション：ユーザーがサイトのメインセクションにアクセスするためのボタン。
- 会社のロゴ：ボックスで表現できます。
- コンテンツ領域：コンテンツの異なるセクションはどこに表示されますか？
- 検索ボックス
- ユーザーログインエリア
02/03
ウェブサイトのワイヤフレームを作成する方法
ウェブサイトのワイヤフレームを作成するには、さまざまな方法があります。 彼らは以下を含む：
紙に手で描く
このメソッドは、クライアントと対面するときに便利です。 どの要素をどこに置くべきかに焦点を当て、レイアウトのアイデアを紙に描きましょう。
Adobe Photoshop、Illustrator、その他のソフトウェアの使用
ほとんどのグラフィックスソフトウェアパッケージには、ワイヤフレームを作成するために必要なすべての基本ツールが装備されています。 あなたの要素にラベルを付けるためのシンプルな線、形、テキストは、プレゼン可能なワイヤフレームを作成するために必要なものです。
このタイプのタスク用に作成されたソフトウェアの使用
PhotoshopとIllustratorはこのトリックを行うことができますが、このタイプの作業用に特別に開発されたソフトウェアパッケージもあります。 OmniGraffleは、空のキャンバス上で使用するための形状、線、矢印、およびテキストツールを提供することにより、ワイヤフレームの作成を簡素化するソフトウェアです。 Graffletopiaではカスタムグラフィックスセット（無料）をダウンロードすることもできます。Graffletopiaは一般的なWebボタンなどのより多くの要素を扱うことができます。
03/03
メリット
ウェブサイトのワイヤフレームを使用すると、希望のレイアウトを実現するための簡単な線図を微調整することができます。 複雑な要素をページの周りに移動するのではなく、2つのボックスを新しい位置にドラッグするのにはほとんど時間がかかりません。 あなたやあなたのクライアントが最初にレイアウトに集中することは、はるかに生産的です...あなたは「私はその色が好きではありません！」といったようなコメントで始めることはありません。代わりに、完成したレイアウトと構造で開始します。あなたのデザインの基礎となるものです。