ワイヤーフレームの概要
ワイヤーは「線」、フレームは「枠」を意味します。
ワイヤーフレームは通常、UXデザイナーやUIデザイナー、プロジェクトマネージャー、webディレクターなどが作成します。
手描きや、専用のツール（Figma、Photoshop、Adobe XDなど）を使って作成します。
ワイヤーフレームはページを構成する画像やテキストなどを「どこに」「どのように」配置するか、レイアウトと構造を可視化して、具体的なデザインとして形にするための指針となる設計図のようなものなので、色やフォントなどの要素に意味を持たせずに作成します。
ワイヤーフレームの目的と役割
ワイヤーフレームはデザイナー、開発者、プロジェクトマネージャーなど、チーム内のメンバーが共通の理解を持つためにアイデアや意図を共有したり、クライアントに機能やレイアウトについてのフィードバックを得るために作成します。
- レイアウトの設計：ワイヤーフレームは、ページや画面の構造を視覚的に示すことで、コンテンツや機能の配置を明確にします。これにより、デザインの初期段階でレイアウトのバランス、どのような優先順位で配置するか、使いやすさ、ページに必要な情報や機能に抜け漏れはないか、などを確認できます。
- コミュニケーションの効率化：デザイナー、コーダー、クライアントなど、プロジェクトに関わるすべての関係者との意図の共有やフィードバックを円滑にするための手段です。具体的なビジュアルデザインが決まる前に、基本的なアイデアや機能の確認を行うのに役立ちます。
- 変更の迅速化：ワイヤーフレームは、詳細なデザインを作成する前に構造や機能の変更を迅速に行うための便利なツールです。デザインやコーディングの段階で要素の追加や変更などが発生すると、修正に多くの工数がかかってしまいますが、ワイヤーフレームの段階なら簡単に修正できます。
- 仕様の定義：プロジェクトの要件や仕様を文書化し、どのような要素や機能が必要かを明確にするための基盤となります。これにより、開発やデザインのプロセスがスムーズに進むことが期待されます。
ワイヤーフレーム作成のプロセス
ワイヤーフレームを作成するプロセスは、デザインの初期段階で重要なステップです。
以下のステップを踏むことで、効果的なワイヤーフレームを作成し、デザインや開発をスムーズに進められます。
- 目的と要件の理解
- プロジェクトの目標を明確にする：何を解決しようとしているのか、ターゲットユーザーは誰か、どのような機能が必要かを理解します。
- 要件収集：クライアントやステークホルダーと話し合い、必要な機能やコンテンツを収集します。
- 情報設計
- サイトマップを作成：サイトやアプリケーションの全体構造を示すマップを作成し、ページや画面の階層関係を明確にします。
- ユーザーフローを設計：ユーザーがどのようにアプリやサイトをナビゲートするかを示すフロー図を作成します。
- スケッチやラフ案の作成（省略可）
- 手描きのスケッチ：まずは紙やホワイトボードで簡単なスケッチを行い、アイデアを試してみます。この段階では詳細にこだわらず、全体のレイアウトや構造をざっくりと把握します。
- デジタルワイヤーフレームの作成
- ツールの選定：デジタルで作成する場合、Figma、Adobe XD、Photoshop、miro、Sketchなどのツールを選びます。
- レイアウトの作成：ツールを使って、ページや画面のレイアウトを作成します。ここでは、ページの主要な要素（ナビゲーションバー、コンテンツエリア、ボタンなど）を配置します。
- グリッドとガイドの使用：整然としたレイアウトを作るために、グリッドやガイドを使用します。
- 詳細の追加
- コンテンツの配置：テキストブロックや画像のプレースホルダーを配置し、実際にどのようにコンテンツが表示されるかを示します。
- フィードバックと修正
- レビューとフィードバック：チームメンバーやクライアントにワイヤーフレームを見せてフィードバックをもらいます。
- 修正と改善：受け取ったフィードバックを基に、ワイヤーフレームを修正し、最終的なバージョンを作成します。
- ドキュメントと共有
- ドキュメント化：ワイヤーフレームを適切にドキュメント化し、どのようにデザインや機能が実装されるべきかを明記します。
- 共有：関係者と共有し、次のステップ（例えば、ビジュアルデザインやプロトタイピング）に進む準備をします。
PhotoshopでWFやカンプを作成する手順
デザインカンプの概要
デザインカンプは通常、PhotoshopやSketch、Figmaなどのデザインツールを使用して作成され、最終的なビジュアルデザインがどのように見えるかを明確に示すものです。ワイヤーフレームが機能や構造を示すのに対して、デザインカンプは最終的な見た目やスタイルに焦点を当てています。
英語では「Design Comprehensive Layout（デザイン・カンプリヘンシブ・レイアウト）」の略で、単に「カンプ」と略す現場も多々あります。
デザインカンプはワイヤーフレームを元に、デザインを具体的に表現したものです。
デザインカンプとともに確認ツールとして「プロトタイプ」があります。
デザインカンプが静止画でデザインの完成形を見せるものであるものに対し、プロトタイプは動的な要素を取り入れて実際に操作できるような状態にしたもので、アプリ開発の現場などでよく使用されます。
デザインカンプの目的と役割
デザインカンプはビジュアル面を具体化し、最終的な明確なビジョンを提供する重要な役割を果たします。
- ビジュアルデザインの具体化：デザインカンプは、レイアウト、色、フォント、コンテンツなど、視覚的な要素が全て含まれているため、最終的な見た目をプロジェクトメンバーやクライアントに共有することが出来ます。
- レイアウト：文字、画像、ボタンなどの配置、各要素の大きさ、余白など
- 色：背景色、文字色、アクセントカラーなど
- フォント：見出し、本文、ボタンなどのフォントの種類、サイズなど
- コンテンツ：各ページに表示されるテキストや画像の内容
- デザインの確認と承認：複数のデザイナーやエンジニアでプロジェクトを進める場合、デザインカンプを共有することで、全員が同じイメージを持ち、効率的に作業を進めることができます。また、完成イメージを共有することで、クライアントとの間でデザインに対する認識のズレを防ぎ、スムーズなコミュニケーションを図ることができます。
- コーディングのビジュアルガイドライン：デザインカンプは、コーディングを行う際のビジュアルガイドラインとして機能します。具体的なデザイン要素やスタイルが示されているため、コーダーはそれを基に正確にデザインを再現できます。
- 画像素材の書き出し：デザインカンプは、実寸で作成するため、ページ内に表示する画像をそのまま書き出して使用することができます。
デザインカンプ作成のプロセス
デザインカンプを作成するプロセスは、デザインのアイデアを具体的に視覚化し、関係者とコミュニケーションを取るための重要なステップです。
クライアントやチームメンバーとイメージを共有し、完成度の高いデザインを実現するために、デザインカンプを作成します。
- 要件の収集と理解
- プロジェクトブリーフの確認: クライアントや関係者から提供された要件や目標を確認します。
- ユーザーリサーチ: ターゲットユーザーのニーズや行動を理解するためにリサーチを行います。
- 競合分析: 競合他社のデザインや機能を調査し、ベンチマークとする場合があります。
- ワイヤーフレームの作成
- 基本レイアウトの設計: ページや画面の構造を設計し、主要な要素の配置を決定します。
- ユーザー体験（UX）の検討: ユーザーフローやナビゲーションの効率性を確認します。
- フィードバックの収集: ワイヤーフレームを関係者と共有し、フィードバックを反映します。
- ビジュアルデザインの作成
- スタイルガイドの準備: 色、フォント、アイコン、画像など、ブランドに合ったスタイルガイドを作成します。
- デザインカンプの作成: ワイヤーフレームに基づいて、具体的なデザインを作成します。デザインツール（Photoshop、Figma、XDなど）を使用して、色、フォント、画像などを適用します。
- 詳細なデザインの追加: ボタン、アイコン、テキストスタイルなど、細部までデザインを整えます。
- デザインの検証と修正
- 内部レビュー: デザインカンプをチーム内でレビューし、改善点や修正点を洗い出します。
- クライアントとのレビュー: クライアントにデザインカンプを提示し、フィードバックを受けます。
- フィードバックの反映: クライアントやチームからのフィードバックをもとにデザインを修正します。
- 最終確認と承認
- 最終デザインの調整: 最終的なデザインを調整し、すべての要件が満たされていることを確認します。
- 承認の取得: クライアントから最終承認を得て、デザインカンプを確定させます。
- コーディングへの移行
- デザインの提供：デザインカンプを開発チームに渡し、実装に向けた詳細な指示や仕様を提供します。
※デザインカンプを作成するにあたり、良いとこ取りをするつもりで多くのサイトを参考にしてください。
検索するとともに、LinkページのDesign databaseも活用してください。
デザインカンプの作成ツール
- Figma：ブラウザ上で動作するデザインツール。プロトタイプの作成やリアルタイムでの共同編集が可能です。現在国内では最も高いシェアになっています。
但し、広島の求人に限定するとAdobe XDの方が多いようです。 - Adobe Photoshop：画像編集ソフトとして有名ですが、webの現場ではデザインカンプの制作ツールとして昔から使用され続けています。共同編集やプロトタイプの作成が必要ない場合など、今もPhotoshopが多く使用されています。
- Adobe XD：プロトタイプ作成に強いデザインツール。デザインや共同編集も可能です。AdobeがFigmaを買収する際に開発を終了させたためシェアがFigmaに流れました。昨年末にFigmaの買収は失敗しましたが、開発は止まったままになっています。
- Adobe illustrator：昔からデザインカンプの制作ツールとして使用されています。しかし、photoshopがwebデザインとの親和性が高くなるに従いシェアが下がってきていますが、現在も根強い人気があります。
- その他（Affinity）など：Adobeがサブスクリプション契約になった事もあり、脱Adobeを行う制作会社も増えてきています。それに伴い、PSDやAIファイルと互換性があり高性能の代替えソフトを使用するデザイナーも増えています。
デザインカンプの作成のポイント
- 実寸で作成する：細部まで確認できるように、実寸で作成します。
- ブラウザで表示確認する：JPGやPGで全体を書き出し、ブラウザで表示して確認します。
- コメント機能を活用する：デザインに修正点やコメントを書き込み、コーダーなどプロジェクトメンバーに指示を出す事もあります。
- コーディングを意識する：コーディングが難しいから諦めるのはあまり良いことではありませんが、コーダーに負担をかけるような無理なレスポンシブデザインをしたり、フォントサイズが小数点になったり、ブロック毎の余白がバラバラになったりしないなど、丁寧に作成します。
- ユーザービリティやアクセシビリティを意識する：Webクリエイター能力認定試験（知識編2）でユーザービリティとアクセシビリティについて説明しています。
ユーザービリティとアクセシビリティを理解するとデザインも変わってきます。