サイトを構成していくことにあたって、考えなければいけないこと、デザインをする上での手順などを順序だててご紹介いたします。

ますはじめに、

～何の為のデザインなのか～

まず、WEBサイトを制作するに当たって、そのWEBサイトが誰に何を伝えたいかを踏まえてデザインを行わないといけません。お客様の要望・WEBサイトの目的・そして、そのサイトを利用する人がいます。それを考慮せずにデザインをしてしまうと、ただ美しいだけのWEBサイトが出来上がり、お客様はもちろんのこと、自社ディレクターのチェックも通らないでしょう。今デザインしているものが、何のためにあるか考えながらデザインする習慣をつけていきましょう。

～いろいろなWEBサイトを見ること～

クラシックデザイン、流行りのデザイン、国内外の広告サイトから地方の企業サイトまで幅広く閲覧してみましょう。国内でも、海外でもWEBデザインギャラリーやアワードサイトが沢山あります。SNSを活用して、普段から最新のWEBサイトが目に入ってくるようにしていきましょう。いろいろなWEBサイトを見ておかないと、定番のレイアウトも流行のスタイルも体感できず表現方法が思いつかなくなります。また、最初の頃は、解像度に目を慣れさせる目的もあります。どのぐらいの文字サイズだと読みやすいか、大きく見せたい写真の適切なサイズ感など、数値も大事ですが、実際に目でみて覚えることも重要です。

～WEBサイトの目的・目標を理解する～

WEBデザインを行うにあたって、お客様からの要望、お客様の目的・目標など出来るだけ多くの情報を聞き出しましょう。また、その目的をどう達成するかという戦略もあるはずです。それからデザインの方向性とメインカラーは抑えておきましょう。特にメインのカラーなどは初めから要望として挙げられてることが多いので、事前に把握しておくとスムーズに進めることが出来るでしょう。

～同業他社のWEBサイトを調べてみる～

要件を確認した後は、まず同業他社のWEBサイトを見てみましょう。有名WEBデザイナーの方で「他サイトは見ないことにいている」という意見をお持ちの方もいらっしゃいますが、そのような方たちは経験値が全然違います。他の企業のWEBサイトからの情報はとても役に立ちます。なので、出来るだけたくさん見て参考にしていきましょう。

ただ、全く同じことをしてしまうと、パクリになってしまうので、あくまで”考え方”を参考にしましょう。

～世界観とレイアウトを決める～

いざデザインする時に最も重要なのが、世界観とレイアウトです。
デザインの前に調査した内容をもとに、方向性を定めてデザインを行って下さい。流行りだからという理由だけで、「フラットデザイン」「１カラムレイアウト」「パララックス」などを取り入れるのはあまり好ましいことではありません。なぜこのデザインにしたのかという明確な説明が出来るように、目的に沿った世界観、コンテンツに合わせたレイアウトを検討していきましょう。

～文字・装飾・色彩・余白のルールを決める～

サイトの世界観やレイアウトの方向性が決定し、手作業を進めていくと、細かい余白や色の扱いに悩まされるなと思います。その都度考えて進めていってしまうと、纏まりがつきにくくなり、コーティングの時にも大変となります。なので、最初からある程度のルールを決めて、そのルールを修正していく、という形をおススメいたします。

・≫文字について

SEOやアクセシビリティ、レスポンシブデザインの影響で、画像文字を使用する機会は、少なくなってきています。画像文字を多様していた頃は「使用する書体は２つ３つ程度」というような習慣もありましたが、UIや見出しも本文も、デバイスフォントのままであることの多い日本のWEBサイト制作業界だと、そもそも書体を選ぶ機会が減少化してきていて、以前ほど気にする必要はなくなってきたのかもしれません。

webフォントが使用出来る場合には「１つの書体を使用してウェイトでバリエーションを持たせる＋必要であればワンポイントで、もう１書体」くらいが、程よいのではと思います。cssでアンチエイリアスをきかせたり、英数字だけwebフォントを使用するなど、細かいテクニックも必要となります。

・≫カラーについて

背景色・リンク色・文字色の最低３つが必要になってきます。実際には訪問済みリンク色や、少し弱い部分で使用する文字色、注意を引きたい時などに使用する色など。
細かく使用することになるかと思います。

・≫装飾について

主に、装飾具合は、サイトの世界観と合わせていきます。また、装飾具合自体も統一しましょう。同ページ内に、背景ベタ塗りのボタンと立体処理を施したボタンが混在しているデザインがダメだとは言い切れませんが、後々のデザインルールが破綻しやすくなってしまいます。

・≫余白について

最近では様々なデバイスを考慮して、余白や幅は８倍の数値がデザインしやすいといわれています。実際にその通りだと思いますが、黄金比にしろフィボナッチ数列にしろ、数値に捉われすぎると、デザインしにくくなってしまいます。
コンテンツの区切りが分かりやすく、UIが扱いやすいように余白のコントロールはしっかりしましょう。

～煮詰まったときは、目をリセットする～

デザイン作業中に良い悪いが分からなくなる時もあります、そんな時は、休憩を挟んだり、他の仕事をしてみるなり、目のリセットをさせましょう。時間のない時などはデザイン作業を中断して、インターネットを見てみましょう。その後デザインに戻った時に、違和感が浮かび上がります。「普段のサイトよりも本文が小さいかも」「ヘッダーが詰まって見える」などの問題点が見えてきます。

～デザインをどう見せるのかも重要となってくる～

デザインが完成して、お客様へ提出するさいには、なぜこのようなデザインになっているのかという説明文章も添えましょう。それだけで印象はがらりと変わってきます。

★まとめ

重要なのは、７０％の完成度で早急にデザインを作成する事、様々なデザインを考案しておくことです。そこを守っていれば、「納期に遅れる」「見当違いのデザイン」を避けることが出来ます。まずは、他サイトを見て、自身が、どういったサイトに魅力を感じるのかを試してみましょう。