【Web制作】デザインカンプの大切さがしみじみ…

デザインカンプ

私は、ホームページを制作する際に、figmaというツールを使って、デザインカンプをしていきます。めちゃくちゃ使いやすく重宝していますが、デザインにしか使っていない感じですかね。一応デザインをHTML化・CSS化してそのまま実装できるらしいんですが、試したことがないので、いずれやってみようかなと思います。

私の場合はデザインを参考にできるところはCSSで、CSS表現が難しいところは画像で置き換えている感じです。(ボタンとか)

STUDIOにはその機能がありましたね。(使ったことないけど)

きむらぼのHP作った際には要件定義やデザインカンプの工程すっ飛ばして作り始めたので、その分工数は少なかったのですが、後から構成とかデザイン的なところ修正しまくってるので、やっぱり具体的な全体図をアウトプットするというのはかなり重要だと感じました…。

全体作ってからの修正って割と大変なんですよね…というのもデザインバランス崩れたりとか、どこをどう直したら色彩調和するっていうのが分かりづらくなるんですよ。

なので、企業さまのホームページ制作をする際にはしっかり、デザインに落としてから実装していく感じですね。

目次

一般的なWeb制作会社の作業工程

STEP

Webディレクション

営業(ヒアリング)⇒企画提案⇒要件定義書の作成

STEP

ワイヤーフレーム

要件定義を元に全体的な構成をざっくり決定(PC版/スマホ版/タブレット版)

STEP

文章構成(ライティング)

ワイヤーフレームを元に文章の構成を考える

STEP

デザインカンプ

ワイヤーフレームと文章構成を元に装飾や全体デザイン図(ほぼ完成形に近いデザイン)を考える

STEP

ネット環境に模写(コーディング)

デザインカンプを元に実装していきます。(元からホームページがある場合などはテストサーバーにて実装)

STEP

完成

本サーバーに実装、もしくはインデックス。

大体の場合これが王道かと思います。

でもってWeb制作会社だとこの工程に2~4人くらいいるんですよね。

WebディレクターWebデザイナーWebライターサーバー担当(?)

なのでその分人件費がかかる訳です。大手だと扱っているホームぺージも大手の事が多い為、その分ページ数がえぐいことになってくるのでこのくらいの人数は必要かもですね。

私の場合はですが、企画提案と要件定義書をジョイント、ワイヤーフレーム・ライティング・デザインカンプをジョイントしてfigmaで同時にやっているので工数かなり最適化しています。

実際クライアントさんもデザインに落としてみないと想像が付きづらいので、ワイヤーフレームやライティングの途中経過は特段必要がないのかなと思います。

デザインカンプに落として、デザインや文章の修正などあればそこで修正してしまえば大丈夫です。(実装してからでも修正できますしね)

話がそれましたが…デザインや文章のバランス考えるのって思いの他大変なんです。

まずディレクション時点でクライアントさんとの擦り合わせ(ご要望に対する構成や機能性、イメージ)が一致していないと、その後のデザインイメージが全て崩れていくのです。

デザイナーやライターはディレクションの指示で動きますからね。。。それがディレクションの擦り合わせミスでデザイナーやライターが責任追ってるみたな話はよく聞きます。

私の友達のデザイナーも同じこと言ってて。「デザイナーなのになんでで文章構成までワシがやっとんねん!!!」ってオコでした。調和できない文章投げられても困りますよそりゃ。

最悪の場合、かなり工数が進んだ時点で作り直しということもあり得ます。

営業職って喋るだけって思われてるかもしれないですが、かなりのコミュ力(相手の言葉の意図を理解する力とヒアリング、説明力、説得力)とそれに関する知識(技術的に何がどこまでできるのか)を明確する実力がないと結構難しい職業です。

個人的には一番難しいと感じています。

ちなみに、ChatGPTなどのAIが進化している今…でワイヤーフレームやライティングあたりはもはやAIに任せた方がUI/UXが優れている場合もあり得ます。

Web制作はもはやディレクションの提案力、コミュ力、模写(コーディング)、サーバー実装とAIへのプロンプトが適切であれば怖いものなしです。

デザインカンプの重要性とWebディレクションの重要性…伝わりましたでしょうか?

何事もそうですが、反映する前のテストはとても重要ですね。

アーカイブ

カテゴリー

よかったらシェアしてね!
  • URLをコピーしました!

頑張る個人事業・中小企業さまを応援しています!Web集客のサポートはきむらぼにお任せください♪

※現在、すべての枠が埋まっております為、新規案件はお受けしておりません。再開まで今しばらくお待ちください。

木村 水癸のアバター 木村 水癸 きむらぼ代表

―― AI Marketing Creator
京都府木津川市を拠点に『AI・補助金活用Webコンサルティング事業』を展開。
地域の価値が伝わる仕組みを設計。
AIを活用し、「効率よく“作る”そして“伝える”」を実現するため、AI Marketing Creatorという役職を命名。オーケストレーション(連携・統括)を目指す。
Web戦略の中でも、キーワード/コンテンツ設計・ SEO・E-E-A-T・LLMOに注力。
地域・伝統や歴史、京都南部を始め、その土地に息づく魅力を未来へ価値として残す。がモットー。
デジタル推進委員としてDX推進支援活動にも取り組む。

INTJ-T|AB型|水瓶座

目次