自社ホームページのデザインを作ろうと思った時に「何から手を付ければよいかわからない」「どのようにデザインを考えればよいかわからない」このようなお悩みをお持ちではありませんか？
デザインはいきなり作り始めると失敗する可能性が往々にしてあるため、事前の準備がとても重要です。

また、デザインだけを考えるのではなく、ホームページを制作する全体の流れに沿ってデザインを考えることが成功へ導くカギとなります。

そこで、デザインを作り始める前に知っておきたい、ホームページデザインを考える際の流れについて確認していきましょう。

この記事では

1. ホームページをデザインする手順
2. ホームページデザイン作成のコツ
3. ホームページを作るときの注意点
4. デザインの参考になるサイト

これらの項目について一つずつ解説。
記事を読むと、ホームページ制作のプロである知多印刷において、どのような流れでホームページを制作しているのか、デザイン制作におけるコツや注意点などが分かります。

デザインの参考になるホームページもいくつかご紹介しますので、ぜひ自社ホームページのデザイン制作の参考にしてみてくだい。

ホームページをデザインする手順

まずは、ホームページデザインのプロでもある制作会社では、どのような流れでホームページ制作をおこなっているか確認していきましょう。

ホームページは以下の流れで制作を行います。

◯ホームページを作る目的・ゴールを確認する
◯ホームページの全体像を作る
◯サイトマップを作る
◯ワイヤーフレームを作る
◯デザインをする

ホームページ制作における全体の流れを把握して、ホームページデザイン作成のヒントにしてください。

ホームページを作る目的・ゴールを確認する

まず最初に、たどり着きたいゴールを明確化させるため、ホームページを作る目的を確認します。
制作会社においては、まずはクライアントの会社について

◯どのような会社か
◯どんな事業を行っているか
◯なぜホームページを作りたいのか
◯ホームページを作るに至った背景
◯ホームページを作って何をしたいのか

などを確認し、ホームページ制作の目的を明確化させます。
例えば、集客を目的とするのか？単に古くなったから新しくしたいだけなのか？など、目指すゴールが変われば作り方も変わってきます。
まずは最終的に目指したいゴールを明確化させ、そこから逆算してヒアリングを積み重ねていくことから始めます。

ホームページの全体像を作る

目標とするゴールが設定できたら、次はゴールを目指すために必要となる項目をヒアリングしていきます。
ヒアリングでは、主に以下のような内容を確認します。

◯ホームページ制作の予算
◯ターゲットとするペルソナ像
◯ホームページ公開の希望時期
◯アピールしたい内容
◯コンテンツの内容
◯ホームページ上に盛り込みたいこと
◯ホームページ全体のページ構成
◯ホームページの規模感、ボリューム感

ヒアリングシートを元にこれらの内容を一つずつ確認していきます。
目指すゴールによりヒアリング内容は変わる場合がありますが、ホームページの全体像を作るためには細かいヒアリングが必要不可欠です。

サイトマップを作る

ヒアリングが完了したら、次にサイトマップの作成に入ります。
サイトマップとは、ホームページの全体像をツリー状の図で描き、各ページの繋がりを視覚的に確認しやすくしたもので、構成図とも呼ばれます。

サイトマップには

◯ページごとのボリューム
◯ページ構成
◯ページ遷移

など、ホームページ制作に必要となる情報を載せます。

そして、それぞれのページ導線などを確認しながらホームページ全体のボリューム感や、ページの導線などを細かくチェック。
同時に予算確認の見積もりも提示して、詳細内容のすり合わせを行います。
ページ内情報やページそのものの取捨選択をおこない、ホームページの全体像を確定させ、そこにかかる費用を具体的に詰めていきます。

WordPressを使うか、など具体的にどのような仕様で制作をおこなうのかも、このタイミングで決定することが多いです。

ワイヤーフレームを作る

その後、サイトマップをベースにワイヤーフレームを作成。
ワイヤーフレームは、ホームページに載せる写真や文章などのレイアウトが、視覚的に分かるように作られた骨組みとなります。

ワイヤーフレームを見ていただきながら、ページ内容のコンテンツやページ構成がクライアントの要望に沿っているかを確認しながら、必要であれば修正を繰り返します。
このワイヤーフレームは特に時間をかける部分だと言えるでしょう。
ここでしっかりと意思をすり合わせておかなければ、デザインに取り掛かった際に意見が食い違ってしまう場合があるので、慎重に細かく打ち合わせを繰り返す必要があります。

デザインに入ってからの大幅な修正は、ホームページそのもののあり方から変わってしまう可能性も。
そのような事態を避けるためにも、ワイヤーフレームをしっかりと作り込み、サイトが目指すゴールを確認しつつ、内容を固めていく作業を行うのがポイントとなります。

デザインをする

ワイヤーフレームで十分に内容のすり合わせを行い、クライアントからご納得がいただけたら、いよいよデザインの作成に取り掛かります。

デザイン作成の際にも

◯ゴールに沿った内容になっているか
◯クライアントの求める構成になっているか

これらのことに注視し、設計ありきでデザインを作り込むのが重要です。
ただ単に見た目がきれいなだけのホームページにならないよう、設計を意識した上で、クライアントの要望するデザインを反映していきます。

ホームページデザインのコツ

ここからは、デザインする際のコツについていくつかご紹介いたします。
コツを押さえ、魅力的なデザイン作成をするための参考にしてください。

目立たせたい部分を強調する

注目してほしい部分は文字サイズを大きくしたり、装飾などうまく利用したりして強調しましょう。
特に集客目的の場合などは、訪れたユーザーに見てもらいたい部分を、しっかりと強調したデザインにしましょう。

相性のいい色を選ぶ

デザインに使用するメインカラーは、企業のイメージやコーポレートカラーと統一させましょう。
自社のカタログや広告なども参考にし、カラーイメージを合わせることで、統一感のあるデザイン作成に繋がります。

相性のいいフォントを選ぶ

フォントの使い方でもデザインの印象は大幅に変わります。
企業イメージに沿い、作成したデザインに合うフォント選びを行いましょう。

導線を意識する

導線を意識したデザインも重要です。
集客目的であれば特に、問い合わせまでどうやって誘導していくかを考え、デザインに反映します。
見た目が良いだけではなく、適切な場所にお問い合わせボタンを配置するなど、ユーザーの導線を意識したデザインが望ましいです。

使いやすさを考える

UI・UXを意識したデザインも大切です。
訪れるユーザーが「使いやすい」「また訪れたい」と思ってもらえるデザインにしましょう。
実際に同僚などに確認してもらい、使用感をイメージしたりチェックしたりしながら仕上げられるとなお良いでしょう。

ホームページを作るときの注意点

続きましてホームページを作る際の注意点について確認していきましょう。
制作会社で制作を行う際も、以下の注意点を常に意識しながらホームページデザインを作り上げていきます。
これらの注意点に気をつけながら、理想的なホームページデザインを制作してみてください。

ゴールに沿った内容のホームページを作る

一番最初に確認したゴールに沿っているかを常に意識しながら制作を行います。
最初のゴール設定があやふやだと、最終的に「ただ作った」だけのホームページになる可能性も。
しっかりとゴールを明確化し、それを念頭に置いてホームページ制作を行います。

抽象的な話をしない

デザインについて話し合う際には、抽象的な言葉の使用を避けます。
「かっこよくしてほしい」「きれいな感じで」などと、抽象的な会話になりがちですが、そのような言葉はできるだけ使わないようにし、具体的な会話を心がけます。
デザインイメージにおいて具体的な話ができるように、参考サイトなどを用意し、ビジュアルとして見ながらイメージの方向性をしっかりとすり合わせます。

0から作ろうとしない

デザインを0から生み出すのは、かなり難易度が高いです。
参考になるようなホームページをいくつか参照しながら、良いと思う部分や真似したいと思う部分などを取り入れつつデザインを作っていきます。
あらかじめ思い描いているホームページがあれば、そのページを参考にしていきます。
逆に、真似したくないホームページをピックアップしておくのも良いでしょう。
自社のホームページに取り入れたいもの、取り入れたくないものを明確にするとデザインの方向性が定まりやすくなります。

デザインの参考になるサイト

デザインを考える際は、多くのホームページを参照するのがおすすめです。
制作会社の現場においても、普段のルーティンとして様々なデザインのホームページを訪問し、目を養う努力を日々行っています。
職種やカラーなど参考になりそうなホームページをまとめて、その時期の流行りや傾向も取り入れつつ、デザインアイディアのストックを蓄積。

参考にしたいホームページなどを参照しながら

◯アイディアのストックをピンタレストなどでまとめる
◯なぜ良いと思ったのか？使いやすいと思ったのか？を考える
◯良いと思ったデザインを、実際に手を動かして真似して作ってみる

このように日々の積み重ねで、デザインに関するアイディアの引き出しを増やしていきます。

デザインの参考にするホームページを見つけるには、色々なホームページをまとめているサイトが便利ですので、ここではいくつかのギャラリーサイトをご紹介します。

WebDesignClip

WebDesignClipは「国内」「海外」「ランディングページ」「スマホ」の4つのギャラリーをタブの切り替えで表示できます。
メニューからはカラーやレイアウト、カテゴリ、タグなどでフィルタをかけて検索もできますのでとても使いやすいギャラリーサイトです。
国内外の最新のホームページデザインを広く確認したい場合におすすめ。

MUUUUU.ORG

ギャラリーサイトとしては後発のMUUUUU.ORGですが、デザインを行う際に参考となるホームページが多数掲載されています。
厳選された多くのホームページは、業種やテーマカラーごとに分類されているため、検索がしやすく、このホームページ自体がUI/UXに優れた作りになっています。

81-web.com

81-web.comは日本国内のホームページだけに特化したギャラリーサイトです。
国内のホームページを厳選して掲載。
細かいところまでデザインにこだわったホームページが豊富に集められています。
今現在国内においての流行りや傾向などを見るのにおすすめ。

まとめ

この記事ではホームページのデザインをする際に重要となる手順について解説しました。
ホームページのデザインは以下の手順でおこないます。

◯ホームページを作る目的・ゴールを確認する
◯ホームページの全体像を作る
◯サイトマップを作る
◯ワイヤーフレームを作る
◯デザインをする

特に、ゴール設計とヒアリングの重要性がおわかりいただけたのではないでしょうか。
目標とするゴールを明確化し、ゴールを目指すために必要となる項目についてしっかりとヒアリングをおこなうことが、ホームページのデザイン作成を成功へと導きます。

ホームページ制作のプロである知多印刷において、どのような流れでホームページデザインを作成していくか、またデザイン制作においての考え方についてイメージがつかめたのではないかと思います。
ぜひこの記事に書かれている内容を参考にしていただき、ホームページのデザイン作成のヒントにしてください。