ブレない設計は強いサイトをつくる
WIRE FRAME
WF作成
だけのご依頼
OK
ユーザー視点とビジネス視点をつなぎ、
成果につながるサイト設計を。
ワイヤーフレーム（以下、WF）作成はWebサイトの設計段階で用いられる簡略化された図面で クライアント、デザイナー、開発者間での共通理解を深めるために省けないものです。
Webディレクションにおいて、このパートは非常に重要です。
コンテンツの内容・構成をクライアントと共同して時間をかけて内容を固め作りこむことによって、度重なる修正や言った言わない問題、サイトのデザインや目的の方向性がブレるなどのトラブルが回避されます。
kim designでは、そういったブレやデザイン・コーディングなどの後続の修正を少しでも減らすため、内容を作り込み、あなたのクライアントがサイトのイメージが描きやすいWFのご提案を心がけております。
POINT
目指すのはクライアントの
意思決定を後押しする提案資料
ホームページをご依頼されるクライアントの多くは、初めての制作というケースがほとんどです。ホームページは決して安価な買い物ではなく、「自分の事業やサービスをどう見せればいいのか」「どんな表現が合っているのか」など、分からないことが多いのが実情です。
だからこそ、そうした不安や迷いを解消することが、私たちの提案の出発点。
クライアント自身も気づいていなかった強みや魅力を引き出し、それを“目に見える形”として丁寧に資料に落とし込みます。
目的はただの説明資料ではなく、クライアントが安心して意思決定できるよう後押しする、プロジェクトの軸となる提案資料をつくること。
そのための情報整理と表現の工夫に、最も力を入れています。
お力になれるのは
こんな方
- 結果の出るホームページを作りたい
- 他の業務に集中したい
- SEOも考慮したホームページを提供したい
- 専門的なスキルが不足している
- コンテンツの質を高めてお客様に貢献したい
- WF作成にかける時間が足りない
- サイト進行中に発生する修正を減らしたい
- 外部の視点が欲しい
FEATURE
WF作成の特徴
01
イメージしやすい
ビジュアル
クライアントがサイトのイメージをより鮮明にできるように、WFの段階でもある程度のビジュアルを担保することを心がけております。
後続の修正を減らすために大いに有効です。
02
システム設計も可能
フロントエンドエンジニアの経験も活かしながら、WPなどのシステム設計をしながら制作可能です。
また、チームで制作をされる場合はコーダーにマークアップ指示を記載することもできます。（別料金）
03
抽象的な表現も図として
展開
デザイナー出身のため、抽象的なイメージもWF段階で図として配置することが可能です。イメージが可視化するだけでもクライアントの満足度アップにつながるご提案ができるようになります。
WF作成に含まれる内容
競合サイトのリサーチ（検索）
サイト制作の目的に応じて、競合サイト（3～5件）のリサーチ・分析を行いデータをまとめます。
キーワード選定
リサーチ結果を元に必要に応じてキーワード選定をし、コンテンツを構成します。
ユーザを思い通り誘導する
コンテンツ設計
回遊導線まで考慮し、どのページから流入しても途絶えず回遊できるような導線設計をいたします。
作成ページ数のご提案
WFの作成段階で、コンテンツの種類によってはページを独立させた方がより効果的な場合もあります。そういった場合はページ数を増やすご提案をすることも可能です。
別料金
ライティング
コンテンツの内容を表現するための簡易ライティングは基本作業に含まれますが、クライアントご自身で資料やライティングを提供できないような場合などにライティングを代行いたします。
別料金
SEO強化コンテンツ
競合10社からリサーチした結果を元にコンテンツを配置します。1ページごとのボリュームが増え1ページでユーザが得たい情報を揃えられるようになります。
別料金
システム設計・
構造化マークアップ指示
WP等のシステム設計、コーダー向けにSEO強化用の構造化マークアップ指示の記載をいたします。
別料金
画像選定
デザイナーにコンテンツで表現したいイメージを正確に伝えるため、また誤ったイメージにつなげないため画像選定を行います。
WF作成に含まれない作業
サイトマップ制作
頂いたサイトマップを元にサイト設計を行いますので、0ベースからのサイトマップはヒヤリング内容からある程度お決めください。
アートディレクション
デザインに関わるものは参考イメージ程度のキャプチャを貼り付けることがありますが、全体的なデザインの方向性の決定はクライアントとご相談ください。
コピーライティング
提案ベースで対応することは可能ですが、最終はコピーライターやクライアントとご相談ください。
詳細なライティング
提案ベースでWFに記載はしますが、最終はWebライターやクライアントとご相談ください。
使用ツール
基本「Figma」でのご対応となります。
必要に応じて「adobe XD」のご対応も可能です。
WORKS
WF作成事例
介護事業 新卒採用に必要なページ作成
- ご依頼主
-
Webディレクターさま
既存サイトの新卒採用ページのリニューアル。3K「きつい・汚い・危険」といわれる介護業界でどのようなコンテンツが新卒者に魅力的にうつるかを重点的にリサーチしご提案いたしました。
- 作業内容
-
・競合リサーチ10社
・カスタマージャーマップの作成
・WF 8ページ作成
期間 : 約10営業日100,000円
（2024年6月当時の料金）
クリニックサイトのリニューアル
- ご依頼主
-
制作会社さま
診療科目や取扱サービスの多い医院さまのリニューアル。既存コンテンツの整理と同線設計、またサービスごとにターゲットも違うため各サービスの情報とターゲットを明確につたえるためのページ展開を行いました。
- 作業内容
-
・WF サービスページ6Pの作成
・全体35Pの作成
・競合リサーチ
・キーワード選定
・システム設計（WPのSWELL使用）
期間 : 約30営業日500,000円
（2024年12月当時の料金）
VOICE
パートナーさまの声
Webディレクター こんたホームページ製作所 今田さま
認識のズレが劇的に少なく、WF段階でここまで作り込んでくれるパートナーは貴重です！
毎回感動してしまうのが「なんとなく」で伝えた要望を、具体的で説得力のある形に落とし込んでくれる提案力です。「これなら安心してお任せできる」と思える制作者さんに出会えることはすごく貴重なので、本当にありがたく、私自身も納得感を持ってプロジェクトを進められるようになっています。
デザイナーならではの視覚的表現力と、エンジニア視点でのシステム設計まで対応していただけるので修正工数も本当に少なく助かっています！
SEO視点での競合リサーチやキーワード選定も含め戦略的に設計してくださるので、「5年、10年先も生き残るマーケティング」を大切にしている私のサービスコンセプトともぴったり合致しています。
QA
よくあるご質問
- ワイヤーフレームを作成する際、どの程度まで詳細に設計できますか？
-
サイト全体の構成やページごとのレイアウト設計を詳細に反映することが可能です。
基本的なUI要素の配置から、ユーザーの導線や動線まで考慮した設計ができます。必要に応じて、インタラクションの流れや、簡単なユーザーの操作感も組み込むことが可能です。
- 提供されるワイヤーフレームは、どの形式で納品されますか？
-
ワイヤーフレームは、Figmaで作成し、デザインデータとして納品いたします。
ご希望に合わせてXDやIllustratorなどでもご対応可能です。
- ワイヤーフレーム作成にかかる時間はどのくらいですか？
-
プロジェクトの規模や複雑さにもよりますが、一般的には1ページあたり2〜5営業日での納品を目安にしています。
詳細なヒアリングを行った後に、最適なスケジュールをご提案させていただきます。
WF作成に関する
お問い合わせはこちら
ご依頼・ご相談のお問い合わせは
メールフォームでのみ
受付しています
kim designは同業者さま専門のパートナーとして業務委託でのご依頼中心に一緒にサイト制作の納品・運用後のサポートをいたします。
その他のWebディレクション
メニューはこちら
ABOUT ME
kim designの中の人ってどんな人？
WEB制作歴15年以上の地元大好き滋賀県民。
デザイナー出身のディレクター兼フロントエンドエンジニアです。
