ワイヤーフレーム/コンポーネント作成

ダウンロードコンテンツに含まれるもの

• Figma プレゼントプロトタイプ
• デスクトップ ワイヤーフレーム
• モバイル ワイヤーフレーム

ワイヤーフレームを作成する重要性とメリット

いわゆる「Web デザイン」と呼ばれるフェーズで、見た目を確認しながら開発前に要件や仕様のすり合わせを行っていきます。

大きく、定義した要件や設計・仕様から情報構造と構成を大まかに設計するワイヤーフレーム作成のステップと、色や装飾をつけていくコンポーネント作成のステップに分かれます。

WordPress のダッシュボードから入力した項目をどこにどう出力させるかの詳細がここで決まるため、見た目そのものはもちろん、運用や掲載するコンテンツを考慮しながら検討していく必要があります。要件定義段階で見えていなかった仕様の詳細を検討することで、開発工程をよりスムーズに進めることが可能になります。

ワイヤーフレーム作成で行うこと

ワイヤーフレーム作成では以下の作業を行います。 お客様に合意を得たら次の開発（HTML/CSS/JS （静的 HTML）作成・WordPress テーマ開発）へと進みます。

• 共通パーツ（ヘッダー、フッター、メニュー）のワイヤーフレーム設計
• トップページのワイヤーフレーム設計
• 一覧・詳細ページ、その他、検索結果・404ページ等のワイヤーフレーム設計
• モックアップの作成
• 共通パーツ（ヘッダー、フッター、メニュー）のコンポーネント作成
• トップページのコンポーネント作成
• 一覧・詳細ページ、その他、検索結果・404ページ等のコンポーネント作成

ワイヤーフレーム作成を行う場合の注意点

1. 見た目の印象も重要だが、実現可能性や運用も考慮すること

WordPress 等の CMS を使う場合、ダッシュボードも想定してデザインを作成する必要があります。 可能であれば運用担当者や開発者に適宜確認を取りながら進めるのが良いでしょう。 どんなに格好よくても、運用しづらかったり、そもそも開発ができなかったりするデザインは NG です。

2. 感覚的・主観的なやり取りを避けること

「かっこいい・かわいい」「濃い・薄い」「大きい・小さい」といった言葉は人によって受け取る印象が異なります。要件定義フェーズで決めたプロジェクトゴールに沿っているか、想定したペルソナが期待通りに利用してくれそうか、といった視点でコミュニケーションしましょう。

レビューする場合は「ブランドガイドラインの観点で、色は #XXX を使いたい」「ユーザーは XX のように使うと想定しているため、YYY は ZZZ に置いてほしい」など、観点と要望がわかるようにすると良いでしょう。

3. 情報構造はトレードオフ。優先度を決めること

SNS でのシェア、他の記事への回遊、登録導線…など、ユーザーに期待するアクションが複数ある場合、すべてを優先することは不可能です。「何かの情報を上に持ってきたい場合は、ほかの情報を下にしなければいけない」ということを念頭に置き、情報の優先度を決めましょう。

ワイヤーフレームサンプルダウンロード

フォームの送信後、ワイヤーフレームのサンプルをダウンロードできます。