トップページへ戻る

Webデザインの進め方と考え方

この記事を書いた人 :

Webデザインの進め方と考え方

Webデザインといっても、人によって捉え方は様々ですよね。Webにおけるコミュニケーションのデザインを「Webデザイン」と考える人もいますが、ここでは一般的に考え、最終的な装飾やテイスト、フォント等における視覚的表現の仕方をWebデザインとします。
Webデザインの参考となるページを見たい時、よく「Webデザイン△参考」とか「Webデザイン△トレンド」とか「Webデザイン△まとめ」とか、そういう検索をして、様々なWebサイトのまとめ紹介サイトページを見たり、画像検索結果から参考となるデザインを探したりしますよね。でも考え無しに「このデザイン良いから真似てみよう」と思って実装したところで、実際には上手くいかないケースがほとんどです。

なぜならWebデザインのコンセプトは情報設計のコンセプトに基づいてデザインされるべきだからです。

どんなに格好良いデザインでも、そのデザインコンセプトと情報コンセプト(伝えたい内容やメニュー、サービス等)が合致しなければ、コンセプトが崩れてしまうわけで…結果、閲覧ユーザーに対してチグハグなWebコミュニケーションや一貫した印象を与えない伝達をすることになってしまいます。まるで身の丈に合わないような…流行に合わせただけのデザインになってしまったり、閲覧ユーザーに伝えたい内容が伝わらなかったりしてしまうのです。

本当に優れたWebデザインというのは、見た目が良いだけでなく、「誰が」「誰に」「何を」「どう」伝えたいのかが一気通貫で戦略立てられているものです。デザインから伝わってくる印象とサイトページ内に記載されている情報や文章が一致し、それはユーザーに一定のイメージを植え付け、“ブランド”というテイストを演出することにも繋がるのです。つまり、情報コンセプト抜きにWebデザインは作れないはずなのです。

このことをご理解いただくために、Webデザインとして見た目を練る前に、まずは進め方と考え方についてご説明します。

関連タグ:
今すぐ最新の業界データを手に入れよう!

data maisonは、圧倒的な
低価格で同業サイトを徹底分析

かんたん登録で、登録したその月から最新のデータが手に入る!
簡単3ステップ

Webサイト調査を手軽に簡単に

※ ご契約にあたり初回契約期間は3ヶ月から。
以降月次更新となります。

※ 対象となる業界やWebサイトによって月額が異なります。

※ 価格は全て税込です。

  • ビッグデータ
  • 業界データ
  • 個別データ
  • 最新データ
  • 過去データ

Webデザインを考えるのは最後!?

冒頭でもお伝えした通り、優れたWebデザインは「誰が」「誰に」「何を」「どう」伝えたいのかが一気通貫で戦略立てられています。戦略順序を間違えて、最初に(本来装飾業務に値するような)デザインやUIを決めつけて考えてしまうと、本来そのWebサイトにあるべきWebコミュニケーション戦略を後付けで考えることになってしまうのです。そして、その最初に決めてしまったデザインに合わせてコンテンツを入れ込んでいくものだから、バラバラなWebサイトになってしまうというわけです。

さらに厄介なことに、デザインイメージの決定権や発言権は意外と立場の強い人(マネージャーや経営者)にあり、そういう立場の人が、いきなりデザインイメージを指示・指定することもあります。デザインは分かりやすく、誰でも口を挟みやすいがゆえに、予め与件にデザインイメージが含まれていることもしばしば。その与件を踏まえた結果、どうしても情報設計のコンセプトとは合致しないデザインテイストであるにも関わらずWebサイトを構築することになり、思うようなWebコミュニケーションが実現できなくなるというケースに陥ってしまいます。

そんな状態にならないためにも、Webデザインは最初にイメージすることなく、誰に対しても最後に考えるよう促すことをお勧めします。Webデザインを考える地点がどこにあって、そこまでにはどういう手順が生じるべきなのか。そしてその作成手順に合わせてWebデザインに対する姿勢を変えてみてはいかがでしょうか。

情報設計のコンセプトからしっかり固めたWebデザインになっていれば、周りの誰に何を言われても理屈通り客観的に共有・対処・解決できるはずです。

Webデザインはロードマップ上、どこにある?

Webサイトの構築において、実際にデザイン着手するまでには多くの業務工程があります。主要な工程だけでもWebデザインまで6つはあります。

  • 対象者(閲覧ユーザー)を設定する
  • サイト全体の情報設計(Gナビ等含んだ落とし込み方)を考える
  • サイトマップ(ディレクトリ構造)を作成する
  • ページ単位の情報設計(落とし込み方)を考える
  • ページ遷移促進のクリック導線(リンク設計)を設計する
  • UI案(カラムや全体の見た目)を作成する
  • デザイン案を作成する

1.対象者(閲覧ユーザー)を設定する。

まずはターゲットとして捉える訪問ユーザーを細かく設定しましょう。マーケティング戦略上、3C分析等でターゲットは明確になっているかと思いますが、対象の年齢層によって表示するフォントサイズを変えたり、趣味嗜好やITリテラシーに合わせて使いやすいデザインにしたりする等、対象者の設定はデザインに影響します。また、ターゲットがよく閲覧しているWebサイトがどういうものか分かれば、同じようなデザインにすることで違和感なく利用してもらえるかもしれません。ターゲットが男性だったら?女性だったら?どんなシチュエーションでWebサイトを閲覧するなら?等によってデザインテイストはかなり異なります。

2.サイト全体の情報設計(Gナビ等含んだ落とし込み方)を考える。

「誰に」伝えたいかを明確にしたら、次に「何を」伝えるかです。サイト全体を通して、どうやって伝えたい情報を組み立てていくか設計していきます。例えば、自分達のサービスを訴求する場合、色々な切り口のページが必要になりますよね? そのサービスの特徴や価格、利用者の声、利用手順等を説明するページ等、サービスの良さを訴求するために、色々な角度からコミュニケーションを取ろうとするでしょう。どういう人に利用してもらいたいか啓蒙するページだって必要ですし、店舗情報、会社概要、個人情報取り扱いポリシー、コンバージョンに繋がる情報入力ページ等、必要なページは数多く挙がると思います。競合他社のWebサイトと比較検証し、まずは必要となる訴求情報を列挙しながら自分達の付加価値を考え、それらをどういう落とし込みしていくのかを考えていきましょう。

そして、列挙したそれぞれの情報群を縦割りに考えた時、グローバルナビゲーション(Gナビ)として中心となる情報メニューが浮かび上がってくると思います。それが、サイト全体の情報設計を考えることになります。Webサイトというものは大体演繹的に設計されます。TOPページに普遍的且つ大きなテーマを掲載し、そこからページのすそ野尾を広げるように情報を細分化して訴求していく形式がほとんどです。シャンパンタワー構造とも呼んだりしますが、様々なページ間で行き来できるようなリンク構造(クロスリンク構造)も心掛けておくことが大事です。

3.サイトマップ(ディレクトリ構造)を作成する

サイト全体の情報設計が出来たら、次にそれらをディレクトリ別にマップ化します(下絵参照)。ページタイトルを入れ込んでみて、カテゴリをディレクトリ単位で落とし込みます。つまり、サイト構造を組み立てることになるわけですが、ここで初めてしっかりとした表を作成することになるわけです。第1階層から第2階層、第3階層…と、情報カテゴリ単位で階層構造を作ることにより、ディレクトリ毎のテーマ性やグルーピングのしかた、あるべきページ情報の抜け漏れを確認します。

ちなみに、ここでいうサイトマップとは一般的に使用するようなWeb上のHTMLサイトマップや検索エンジンクローラーに伝えるXMLサイトマップではありません。飽くまでも業務上において、Webサイト構築に向けたサイト構造をページ単位で一覧化することを指しています。予めこういった表を作ることで、サイトページのテンプレート作成やコンテンツの入れ込みを業務上管理しやすくなるメリットがあります。これを完成することが出来れば、Webサイトの骨組みが完成です。

4.ページ単位の情報設計(落とし込み方)を考える

骨組みが出来たら、今度はサイト単位ではなく、ページ単位までブレイクダウンして情報設計します。各ページでどんな情報を掲載するのか、それぞれ見出しレベルで考察すると良いでしょう。例えば、HTMLコーディングを想定した時の見出しタグやmeta descriptionを暫定で作成することもひとつのやり方です。H1タグとなる大見出し、H2タグとなる中見出し、H3タグとなる小見出しを任意に記載しておきながら、meta descriptionに入れるべき文章を作成しておくと、ページ単位で何を書いていけば良いのか覚えておきやすいです。それらを前項のサイトマップ表記に合わせて項目として記載しておけば俯瞰的にマスター管理できます。このように記載していくことで、「あれ?あのページとこのページで同じことを掲載してしまいそうだな。情報の無駄だな」と思うことがあるかもしれません。また、「伝えたい内容の方向性を考えたら、ディレクトリ構造を一部作り直したほうが良さそうだな」と思うことだってあるでしょう。

こういった細かな設計をしていくことで、より実践的なWebサイトが構築できていきます。

5. ページ遷移促進のクリック導線(リンク設計)を設計する

いよいよWebサイトの全体像が見えてきましたよね。ここまできたらあと一息です。それぞれ情報設計したページ群を、訪問ユーザーにどう辿ってもらいたいか戦略付ける必要があります。俗にいう「期待するユーザー導線」というものです。訪問ユーザーにどのページを辿って、どこに進んでもらいたいか、是非とも読んでもらいたいページや通過してほしいページはどこか、等を考えましょう。それらを考えることで、ディレクトリ構造だけでなく、リンク先ページへクリックする促進方法やページ別の情報の強弱が判別できるようになります。こういった設計は最終的なWebデザインに確実に影響しますよね。コンバージョンに向けたリンクボタンやバナーはスクロールに合わせて常に追従するような形式にしておきたいでしょうし、ページ間を動的に推薦するようなページレコメンド機能を実装しておけば、回遊性は高まるかもしれません。期待するユーザー導線によっては、スマートデバイス向けに設計したハンバーガーメニューが重要なページを訴求する大きな役割を担うかもしれません。

このように、どういうページにどういうページからリンクさせるのか、クリック導線を予め戦略立てておきましょう。

6. UI案(カラムや全体の見た目)を作成する

Webデザインに向けた最後の工程になります。もう自ずとUI(User Interface:ユーザーインターフェース)としてどういうテンプレートが適切か見えてきたのではないでしょうか。トップページや各ディレクトリ(カテゴリ)トップのページ、記事情報のページやサービス紹介ページ等、それぞれどういうテンプレートの形が好ましいか策定し、ワイヤーフレームを作成します。ワイヤーフレームとは、大ラフのようなもので、どこにどんな要素が入るかのレイアウト図のようなものです。ワイヤーフレームを考える上で、情報量やそのクリック導線の複雑さ次第で、カラム数やコンテンツ配置方法、ヘッダー要素やフッター要素等が決まってくることでしょう。より複雑な情報設計になっているのであればサイドバーを使って情報の切り口を多面的に見せなければならないでしょうし、情報設計が下層ページ中心で均等な情報価値を紹介していく形式なのであれば、ワンカラムでワイヤーフレームを設計したり、グリッドデザイン(ページを格子状に分割しブロック単位でコンテンツ設計していく)でワイヤーフレームを設計したりしても良いかもしれません。

今までの1.~5.までの手順通りに思考すればUIとして考えるワイヤーフレームは比較的作成しやすいのではないでしょうか。

7.デザイン案を作成する

Webデザインとは文字や写真、イラスト、各種アイコンといった――いわゆるコンテンツを、どういう世界観で演出するかということです。従って、様々に入り組んだ要素を基に作らなければならず、Webデザインは最後に決定するものなのです。ですから、他のWebサイトのデザインを参考にしたければ、ワイヤーフレームや情報設計、方向性が合致するものを参考にしなければ意味がないのです。情報設計に関しては、種類によりますが、それは決して業界別とは限りません。例えば人材と不動産、ECは最終的に個別の案件ページを紹介するという点では近い設計方法になると思いますし、B2B商材のように一定のサービスをひとつ売るのは、買い取りサービスや水道トラブル、ハウスクリーニング等のような一定のサービス促進と同じ設計方法が好ましいこともあるでしょう。自分の構築しようとしているWebサイトがどういった種類のもので、他にどういった業界や種別のWebサイトが参考になるか熟考すれば、単純に「Webデザイン 参考」等と検索する必要もないですし、より自分の目的に合致した参考Webサイトに出会えるのではないでしょうか。

「Webデザイン△かっこいい」とか「Webデザイン△おしゃれ」等と検索する人は多く、Webデザイナーはテキストひとつとっても文字間や行間まで追求します。使用している画像もデザイン全体に与える影響は強く、素材選定や素材撮影のこだわりも強いです。でも、そういったひとつひとつのWebサイトを調べ、それらをまとめてから検証して…なんてやっていたら、かなり時間がかかります。調べるサイト数にもよりますが、きっと何日もかかるでしょう。その何日間を人件費として算出したら…時給2,000円でも数万円以上はかかります。

一方で、そのような、何万円、何十万円も発生する工数や情報が月間数百円で手に入るなら…絶対にお得です!
data maisonなら他のWebサイト状況や業界のライバルサイト状況を統計的に調査できます。

月額数百円(165円~)で業界データを一括入手!

自分のWebデザインの目的を考えてみよう

そして、もうひとつWebデザインについての考え方をご紹介します。

それはWebサイトの目的です。最初に記載したように、最終的な装飾やテイスト、フォント等における視覚的表現の仕方をWebデザインとするのであれば、なぜその視覚的表現にするのか目的を明確にしておくと良いです。Webデザインにも目的があります。ブランドイメージや登場感を演出したければ、それを如実に表す写真を使用すると共に、掲載サイズを大きくし、文字情報は極力抑えた形で印象付けると効果的です。一方で、とにかく販売促進したければ、売りとなる情報量を多く掲載しながらも、それら情報を的確に伝えるべく文字の大きさを調整する必要があります。チラシ等のように、言葉が目立つ演出をすると効果的になるでしょう。また、同じWebサイト内でもカテゴリ単位で世界観に変化を持たせることで、色々なターゲット像を取り込むことができるかもしれません。写真を見せることが重要になるサービスサイトの場合は、極力シックな背景にすることで写真素材が映えるデザインが求められます。
このように、Webデザインに関する目的を明確化することで、様々な選択肢から最適な演出ができるのです。

data maisonを活用しよう!

参考にしたいWebサイトを見る時、Webサイトを見つけるだけでなく、そのWebサイトのページ数やフォントサイズ、色味、メニュー展開等をいちいち確認しなければなりません。それは、参考にしたいWebサイトを形成する要素をひとつひとつ紐解き、どういう点を自分のWebサイトに活かしていこうかと考えながら調べるからです。でも、それらの要素をひとつずつ紐解くのに一体どれくらいの時間がかかると思いますか?

そのWebサイトページのCSSを確認してフォントや色カラーを見て、JavaScriptの挙動を見ながらどの部分が良いかまとめて…等、やるべきことは沢山あります。しかも、Webデザインの意図を誰かに伝えたり、報告したり、提案したり、コンペに参加したりする立場にある人は、なおのこと客観的に「他のWebサイトは○○でして…」と言えるための調査をしなければなりません。

そんな時にはdata maisonです。data maisonは以下4つの機能が備わっているので、調査の時間と手間を大幅に削減できます。

  • 探す:検索エンジンを使い、特定のキーワードで検索したジャンルの上位100サイトを抽出。
  • 見る:それぞれのWebサイト形成要素を独自のクロールで分析。
  • まとめる:統計処理して、全体の傾向値を一括算出。
  • 細かく見る:人気のWebサイトは個別に診断して算出。

もちろん、人間の手で行っても同じことができます。data maisonは飽くまでもそれを自動化するサービスです。しかし人間の手で行った場合、そしてそれを自分で行った場合、その時間はどれくらいですか? 自分がやりたかった仕事は時間をかけて調査することですか?

その調査結果をもとに何をするかが大事なんです! それがスキルアップする人の仕事内容なんです!
時間が解決するだけの仕事なら、そんなのdata maisonにやらせましょう。data maisonはマーケティングに関わる人の時間を捻出するサービスです。月額数百円で時間を手に入れてみませんか?

どんな人に便利か確認してみる

今すぐ最新の業界データを手に入れよう!

data maisonは、圧倒的な
低価格で同業サイトを徹底分析

かんたん登録で、登録したその月から最新のデータが手に入る!
簡単3ステップ

Webサイト調査を手軽に簡単に

※ ご契約にあたり初回契約期間は3ヶ月から。
以降月次更新となります。

※ 対象となる業界やWebサイトによって月額が異なります。

※ 価格は全て税込です。

  • ビッグデータ
  • 業界データ
  • 個別データ
  • 最新データ
  • 過去データ