Webデザイン発注の流れとコツは?良いデザインのためのロジックを理解しよう

企業において、通常デザイン発注をするのは商品開発や宣伝、広報、マーケティングなどの専門部署です。しかし、人事やIT、営業部門など一見デザインとは無関係に見える部署でも、印刷物やWebサイトなどのデザインを発注する機会は意外とあるものです。とくに近年では、社内向けのポータルサイトを各部門で構築するケースが増えています。

私たちソフィアは、お客様企業のインターナルコミュニケーション支援を行う中で、Webサイトや社内報、動画やグッズなどさまざまなデザイン制作を請け負っています。そして、デザインを発注する側のお客様から「依頼の仕方がわからない」「デザインの良し悪しがわからない」「デザインの修正をしてほしいがうまく説明できない」「どのデザインを採用するか、意見をまとめられない」といった悩みをよく聞きます。
そこで、この記事では、イントラポータルサイトのデザインを例に、「デザインは専門外」の方が知っておきたい、Webデザイン発注の流れとコツについて解説していきます。

Webデザインを発注する前に知っておきたいデザインの考え方

「デザイン」という言葉にはさまざまな意味があり、言葉が使われる場面や時代によっても意味は少しずつ変わります。たとえば、「グッドデザイン賞」を主宰する公益財団法人日本デザイン振興会はデザインを次のように定義しています。

「常にヒトを中心に考え、目的を見出し、その目的を達成する計画を行い実現化する。」この一連のプロセスが我々の考えるデザインであり、その結果、実現化されたものを我々は「ひとつのデザイン解」と考えます。
(公益財団法人日本デザイン振興会Webサイト「デザインとは?」より)

デザインといえば、装飾や意匠というイメージを思い浮かべる方も多いかもしれませんが、デザインという言葉には設計や計画という意味も含まれています。そして、デザインの受け手は常に人や社会であり、なんらかの目的達成や課題解決の手段としてデザインがあります。そういった意味で、創造そのものが目的となり得るアートとは全く性質が異なるものです。

「デザインは専門外」の方がデザインの発注をする際に苦労する要因の一つとして、「デザイン」という言葉に対する、企業とデザイナーとの間の認識ギャップが挙げられます。ここでは、認識ギャップを避けるために知っておきたい、デザインの基本的な考え方について解説します。

デザインは課題解決の手段

前述のとおり、デザインは目的達成や課題解決のための手段です。見た目を良くすることや、目立たせること、使いやすくすることそれ自体が目的ではありません。そうすることによって誰に対してどのような影響を与えたいのかが重要なのです。

そのため、企業側はデザイナーに依頼する前に、現状の課題や目指すゴールを明確にすることが必要です。「何のためにWebサイトを作成するのか」「ユーザーはどのような人で、どのような状態にあるのか」「なぜ現状のデザインを変えたいのか」などを明確にし、事前にデザイナーに伝えることで、デザイナー側と企業側の認識のズレが起こりにくくなります。

良いデザインは目的やユーザーによって異なる

デザインを発注する際「おしゃれでカッコいい見た目にしてほしい」ということを期待する人も多いでしょう。確かに見た目が整っていることは重要なポイントですが、何を持って良いデザインとするかは、目的や対象者によって異なります。

たとえば、どんなにスタイリッシュな見た目のWebサイトでも、「内容とデザインが合っていなくて違和感がある」「文字が小さすぎて読みにくい」「ユーザーが読みたいコンテンツになかなかたどり着けない」「発信者が読んでほしいコンテンツがユーザーに認識されない」などの問題があれば、良いデザインとは言えません。

表面的な見栄えだけではなく、その見た目がサイトの内容や機能、ユーザーの好みやニーズに合っていることが大切です。

デザインの良し悪しはロジックで判断できる

デザインの良し悪しを理解するには「センス」が必要だと思われがちですが、実はそうとも限りません。デザインが目的達成や課題解決の手段である限り、その良し悪しの判断基準は「そのデザインが目的達成や課題解決に寄与するかどうか」です。Webサイトであればそのサイトによって達成したいゴール(ユーザーに与えたい印象や、ユーザーにとってほしい行動)に寄与するものが良いデザインです。

後ほど「これだけは押さえておこう!Web デザインの原則」で説明しますが、ユーザーの見やすさや、情報の伝わりやすさという観点から、デザインにはいくつかの原則が存在します。最低限のデザイン品質はこれらの原則をもとに判断することができます。しかし、これらの原則が守られたうえでのデザインテイストやディテールの違いについては、Webサイトの目的やゴールが明確でなければ判断することができません。そのため、デザインを発注する前に、目的やゴールを明確にすることが必要なのです。

また、デザインを届けるべきユーザーについて深く知ることも不可欠です。ユーザーと同じ目線で同じ体験をしたり、インタビューをしたり、潜在的に抱えている課題やニーズを汲み取るようしっかり観察するのが重要です。

ご担当者がこれらの点を押さえていれば、デザイナーから上がってきたデザインに対して、「デザインの原則が守られているか」「サイトの目的・ゴールに寄与するか」「ユーザーの好みやニーズに合っているか」という点から、ロジックで良し悪しを判断することができるようになるでしょう。

Webデザイン発注の出発点はユーザー。 UXとUIについて知ろう

Webサイトには必ずユーザーが存在します。そのため、Webデザインの質を高めるためには、ユーザーにとっての使いやすさを知ることが重要です。たとえば既存のサイトのリニューアルであれば、使う側の利益を考えることでこれまでの課題が浮き彫りになり、デザインの方針が定まりやすくなります。

近年、Webデザインやプロダクトデザインの世界では、使う人を中心に置いた「UX」や「UI」という考え方が取り入れられています。ここでは、Webデザインの良し悪しを判断するために知っておきたい、UXとUIについて解説します。

UXとは

UXとはユーザーエクスペリエンス(User Experience)の略称で、ユーザーが製品やサービスを通じて得られる体験のことです。
たとえばWebサイトを見て「必要な情報をすぐに得られた」、スマホアプリを利用して「使いやすい」「便利だ」と思うなど、どのような体験をしてどのような印象を持ったかを指しています。また、商品やサービスそのものだけでなく、「サイトの読み込み速度」「サイトの更新頻度(再訪問した際に新しい情報があるか)」「問い合わせに対するレスポンス」「会員登録をした後に送られてくるメール」など、商品やサービスを利用する前後の体験もすべてUXにつながる要素です。

UIとは

UIとはユーザーインターフェイス(User Interface)の略称で、利用者であるユーザーと製品やサービスなどの接点(インターフェイス)すべてのことを意味しています。
Webサイトやアプリでいうと「見た目」や「使いやすさ」のことです。ページレイアウトや画像、フォント、ボタンの操作性など、ユーザーが見たり触れたりするものすべてがUIであると言えます。
また、UIはUXの一部であると考えられています。その理由は、ユーザーが快適な体験(UX)をするためには、目的に沿った見た目や操作性(UI)が必要になるからです。UIはUXを高めるための重要な要素の1つなのです。


これだけは押さえておこう!Web デザインの原則

ここまで、デザインの基本的な考え方と、ユーザーを中心にデザインを考える上で大切な「UX」と「UI」について解説してきました。前述のとおり、デザインの良し悪しは目的や対象者によって変化します。ただし、読みやすい文章を書くためにはルールやセオリーがあるのと同様に、Webデザインにも、相手にわかりやすく情報を伝えるための基本原則があります。

この基本原則は、どのようなユーザーに向けた、どのような目的のWebサイトであっても大きくは変わりません。これらを知っておくと、デザイナーに対する依頼や打ち合わせ、修正のやりとりがスムーズになるだけでなく、日常業務の中でドキュメントやプレゼン資料を作成する際にも役立ちます。以下に説明する原則を、ぜひ覚えてください。

シンプルにする

使いやすいWebサイトにするためには、できるだけ要素を絞り込んでシンプルにします。
トップページにメニューや情報が多すぎると、自分の求める情報がどこにあるのかユーザーが迷ってしまうためです。

また、色数やフォントの種類が多すぎると、まとまりのないデザインになりがちです。色数は不必要に増やさず3~4色程度、フォントも、読みやすいベーシックなものを1~2種類程度に抑えるのがよいでしょう。

位置や大きさを揃える

見た目にまとまりを持たせるには、ページを構成する要素の大きさや位置を揃えることも大切です。

例えば同じページの文章の中で、不規則に文字の大小があったり、左揃えで配置されている文章やメニューの中に、1つだけ飛び出しているものがあったりするのは不自然です。色やフォントについても同様で、基本的には全体でテーマを決めて一貫性のあるデザインにしましょう。必要のない部分に変化を持たせると、ユーザーの気が散る要因となるだけでなく、「サイトに不備がある→プロの仕事ではない、信頼できない」という印象を与えてしまかもしれません。

同じ機能を持つ要素は同じ大きさ、同じような見た目で揃えて配置し、例外をつくるのはとくに目立たせたい場合のみにしましょう。

関連するものをまとめる

ユーザーにわかりやすく情報を伝えるためには、関連する情報を1か所にまとめることも大切です。たとえば、ナビゲーションは左上に、最新情報はページの上方に、古い情報のアーカイブはページの最後に、など、機能や性質の似た要素はまとめて掲載するようにしましょう。

そうすることで、ユーザーはページ内やサイト内のあちこちを探す必要がなくなり、目的の情報にスムーズにたどり着けるようになります。

重要なものを目立たせる

重要な情報や頻繁に使用される機能は、ユーザーが見つけやすくなるように強調しましょう。具体的な方法としては

  • ページのトップに掲載する
  • 他の要素よりも大きくする
  • 目立つ色やフォントを使う

などがあります。

ただし、1ページ内で強調する要素がいくつもあると、どれも目立たなくなってしまいます。全体の中での優先順位を考え、本当に必要なものだけを強調するようにしましょう。

ビジュアルで世界観を表す

文字情報だけではなく画像を使用することで、ユーザーに対してサイトの世界観を伝えたり、コンテンツへの興味を喚起したり、内容の理解を助けたりすることができます。サイトのテーマや内容、ユーザーの好みに合わせた写真やイラストを効果的に使いましょう。

また、ボタンにイラストアイコンを使用することで直感的に理解できるようにしたり、個別のコンテンツへのリンクにサムネイル画像を付けることでクリック率を高めたりすることも可能です。

多様なデバイスに対応させる

ユーザーの閲覧環境によって、使用されるデバイスはさまざまです。PCでは見やすいレイアウトも、タブレットやスマートフォンでは見づらくなってしまう場合があります。また、OSの種類やWebブラウザのバージョンによって見え方が変わってしまう場合もあります。

Webデザインを発注する際は、ユーザーの閲覧環境についての情報もデザイナーに提供し、さまざまなデバイスに対応できるデザインを提案してもらいましょう。

Webデザイン発注の流れとコツ

作成するWebサイトの目的やユーザー像が明確になり、デザインの考え方や基本原則も理解できたら、いよいよ発注です。ここからは、基本的なデザイン発注の流れと、スムーズに進めるためのコツを紹介します。

Webサイトに求める要件を整理

Webサイトのデザインを発注する前にまず、Webサイトの目的と対象者を明確にしましょう。また、サイトに掲載したい情報や、必要な機能なども可能な範囲で整理しておきます。このとき、以下のように5W1Hで整理すると抜け漏れを防ぐことができます。

  • Why 何のために(目的とゴール)
  • Who 誰に向けて(対象者)
  • When Where いつ・どこで(ユーザーがWebサイトを利用する場面)
  • What 何を伝えるのか (Webサイトの内容)
  • How どのように伝えるのか(Webサイトの機能や構造)

Webサイトのコンセプトや、希望するデザインの方向性(色合いやキービジュアル)、ページ構成なども、すでにイメージしているものがあればドキュメントにまとめておきましょう。
また、決まっていない部分がある場合は、別途社内で検討するのか、デザイナーに提案を依頼するのか考えておく必要があります。概算予算や、スケジュール(希望のリリース時期)も決めておきましょう。

依頼先の選定

デザイナーへの依頼事項が明確になったら、依頼候補先を探しましょう。
候補先の探し方としては、Web検索や比較サイトで探す、知り合いに紹介してもらう、人材エージェントを利用する、クラウドソーシングを利用する、などの方法があります。

制作会社やデザイナーを選定する際には、依頼事項に応えられるだけの技術を持っているか、きちんと期日通りに納品してくれるか、予算感に合うかどうかを見極める必要があります。これまでの制作実績を確認し、概算見積もりを出してもらったうえで、面談して決めるのがよいでしょう。

初めてデザインを依頼する場合は、相手が必要な技術を持っているかどうかや、見積もりが妥当な金額かどうかの見極めが難しいものです。そのため、社内でWebデザインの発注実績のある部署からデザイナーを紹介してもらう、人材エージェントを利用するなどで探すのが安全かもしれません。

発注(オリエンテーション)

依頼先が決まったらオリエンテーションを行い、イメージのすり合わせをします。企業の基本情報や、Webサイトの目的とゴール、Webサイトに求める要件、デザインに関する希望などを伝えましょう。オリエンシートにまとめておくと情報が整理しやすくなります。

このとき、どこからどこまでが依頼する企業側のタスクで、どこからどこまでがデザイナー側のタスクなのか、役割分担と責任範囲をあらためて確認しておきましょう。納期を明確に伝え、詳細なスケジュールのすり合わせを行うのも忘れないように気を付けましょう。

デザインの確認とフィードバック

デザイナーからデザイン案が上がってきたら、イメージに合っているか、Webサイトの目的に敵うものであるかどうかを確認しましょう。フィードバックを行う際には、どのような理由でどこを直してほしいのか、できるだけ細かく丁寧に伝えるとやり取りがスムーズになります。また、「このサイトのようなナビゲーションにしたい」など具体的なイメージがある場合は、実物を提示して伝えましょう。「かっこよく」や「いい感じに」といった抽象的な言葉は禁物です。

実装・運用

デザインがFIXしたら、いよいよ実装です。Webサイトの場合は、実装まで含めてデザイナーや制作会社に依頼する場合と、デザインを買い取って社内で実装する場合が考えられます。

実装する際に、機能との兼ね合いでデザイン修正が必要になったり、サイトリリース後の運用フェーズにデザインを調整したりする場合も考えられます。デザインを納品してもらう際には、デザイン修正の際には同じデザイナーに依頼するべきか、納品されたデータを改変しても問題ないかなど、権利関係を明確にしておきましょう。

まとめ

これまでデザインに関わってこなかった人にとって、Webデザインの発注は難しそうに見えるかもしれません。しかし、目的とゴール、対象者を明確にし、必要なリソースを揃えて実行し、成果物をチェックして検収するという流れは、通常のプロジェクトと変わりません。大切なのは、誰のための、何のためデザインなのかを理解し、デザインの基本原則と進め方のコツを押さえておくことです。
ちょっとした知識があれば、Webデザインの良し悪しはロジカルに判断することが可能です。「デザインのことはよくわからない」「自分にはセンスがないから」と思っている方も、この記事を参考にすることで、きっとスムーズにデザインの発注ができるはずです。

株式会社ソフィア

ウェブコンサルタント

玉山 和則

主にWEBコンテンツの制作と、それに関連する制作ディレクションなどを担当しています。Photoshopでのデザイン制作から、HTMLマークアップ、ユーザーエクスペリエンスまで対応可能です。

株式会社ソフィア

ウェブコンサルタント

玉山 和則

主にWEBコンテンツの制作と、それに関連する制作ディレクションなどを担当しています。Photoshopでのデザイン制作から、HTMLマークアップ、ユーザーエクスペリエンスまで対応可能です。

BLOG

おすすめの記事

コラム

あらためて聞きたい、暮らすってなんだ 「ソフィアの子育てと仕事の両立」

2024.11.12

#コミュニケーション#ビジネススキル#働き方

インターナルコミュニケーション

ビジネスコミュニケーションに必要な力とは?実際に使えるテクニックをご紹介

2024.10.21

#コミュニケーション#ビジネススキル

人材育成

コミュニケーション能力とは?仕事で重要なスキルの特徴と鍛え方を解説

2024.10.21

#コミュニケーション#ビジネススキル

人材育成

コミュニケーション能力を向上させる方法とは?高い人の特徴についても解説!

2024.10.18

#コミュニケーション#ビジネススキル

インターナルコミュニケーション

社内報とは?社員に読まれる社内報の作り方と定番ネタや事例紹介

2024.10.07

#WEB社内報#インナーブランディング#メディア&コンテンツ#社内報

コーポレートメディア

社内報記事の書き方 社員の共感を引き出し、読まれる社内報を作るには?

2024.10.07

#WEB社内報#メディア&コンテンツ#社内報

インターナルコミュニケーション

サンクスカードの導入企業から学ぶその効果!Microsoft365を活用して社内で簡単に実装してみよう

2024.10.07

#コミュニケーション#メディア&コンテンツ

インターナルコミュニケーション

トランスペアレンシーとは?メリットや企業で情報の透明性を担保するにはどうしたらいいかまで解説!​

2024.09.26

#イノベーション#コミュニケーション#チームビルディング#ビジネススキル

インターナルコミュニケーション

エンパワーメントとは?会社に取り入れる方法やメリットデメリットを確認しよう

2024.09.26

#イノベーション#コミュニケーション#チームビルディング#ビジネススキル

インターナルコミュニケーション

コミュニケーションスキルとは?ビジネスで重要とされる11の理由と人事がおさえておくべきメディア選択について解説

2024.09.25

#コミュニケーション#ビジネススキル

インターナルコミュニケーション

社内コミュニケーションツールのおすすめ17選!利用時の注意点も解説

2024.08.29

#ICTシステム活用支援#WEB社内報#イントラポータル#コミュニケーション#メディア&コンテンツ#動画活用#社内報

インターナルコミュニケーション

【事例で解説】社内コミュニケーションを活性化するメリットや施策とは?

2024.08.19

#イノベーション#イベント企画運営#インナーブランディング#コミュニケーション#ビジョン浸透#メディア&コンテンツ#研修・ワークショップ#社内イベント#組織開発

コラム

あらためて聞きたい、暮らすってなんだ 「ソフィアの子育てと仕事の両立」

2024.11.12

#コミュニケーション#ビジネススキル#働き方

インターナルコミュニケーション

ビジネスコミュニケーションに必要な力とは?実際に使えるテクニックをご紹介

2024.10.21

#コミュニケーション#ビジネススキル

人材育成

コミュニケーション能力とは?仕事で重要なスキルの特徴と鍛え方を解説

2024.10.21

#コミュニケーション#ビジネススキル

人材育成

コミュニケーション能力を向上させる方法とは?高い人の特徴についても解説!

2024.10.18

#コミュニケーション#ビジネススキル

インターナルコミュニケーション

社内報とは?社員に読まれる社内報の作り方と定番ネタや事例紹介

2024.10.07

#WEB社内報#インナーブランディング#メディア&コンテンツ#社内報

コーポレートメディア

社内報記事の書き方 社員の共感を引き出し、読まれる社内報を作るには?

2024.10.07

#WEB社内報#メディア&コンテンツ#社内報

インターナルコミュニケーション

サンクスカードの導入企業から学ぶその効果!Microsoft365を活用して社内で簡単に実装してみよう

2024.10.07

#コミュニケーション#メディア&コンテンツ

インターナルコミュニケーション

トランスペアレンシーとは?メリットや企業で情報の透明性を担保するにはどうしたらいいかまで解説!​

2024.09.26

#イノベーション#コミュニケーション#チームビルディング#ビジネススキル

インターナルコミュニケーション

エンパワーメントとは?会社に取り入れる方法やメリットデメリットを確認しよう

2024.09.26

#イノベーション#コミュニケーション#チームビルディング#ビジネススキル

インターナルコミュニケーション

コミュニケーションスキルとは?ビジネスで重要とされる11の理由と人事がおさえておくべきメディア選択について解説

2024.09.25

#コミュニケーション#ビジネススキル

インターナルコミュニケーション

社内コミュニケーションツールのおすすめ17選!利用時の注意点も解説

2024.08.29

#ICTシステム活用支援#WEB社内報#イントラポータル#コミュニケーション#メディア&コンテンツ#動画活用#社内報

インターナルコミュニケーション

【事例で解説】社内コミュニケーションを活性化するメリットや施策とは?

2024.08.19

#イノベーション#イベント企画運営#インナーブランディング#コミュニケーション#ビジョン浸透#メディア&コンテンツ#研修・ワークショップ#社内イベント#組織開発