会社のウェブサイトをデザインするのは、簡単な仕事ではありません。たくさんの利害関係者の期待に応えなければならないだけでなく、浮かんでくる新しいアイディアには何かしらの問題がつきものです。
私はこれまで約6年間、大企業のウェブサイトのデザインマネージャーを務めてきました。そしてその間、ターゲットオーディエンスが何を本当に必要としているのか、全体像を見失っている自分に何度も気づきました。
これは視野が狭くなっている状態で「トンネル視」と呼ばれています。同じウェブサイトの作業を継続しているときは、一歩下がって新しいアプローチで全体を見ることが役立ちます。このブログ記事は、ウェブデザインに役立つさまざまな方法について説明しています。
ここではウェブサイトのデザインを素晴らしいものにするためのヒント、トリック、近道、一般的なアドバイスを提供しています。それらを活用して一段階上のウェブデザインにしてみませんか？
5ステップでパフォーマンスの高いウェブサイトを作成、管理する方法
HubSpotとCanvaは共同で、パフォーマンスが高く見栄えの良いウェブサイトを作成、管理する手順を詳しく説明する無料のガイドを作成しました。
- オーディエンスとそのニーズについて理解する
- オーディエンスに合ったコンテンツを作成する
- ウェブサイトを最適化し最大限の成果を上げる
- パフォーマンスレポートの作成、分析、継続的な改善
今すぐダウンロードする
全てのフィールドが必須です。
1）グレースケールでデザインし、色はあとから加える
担当のウェブデザイナーが、ビジュアルデザインの作成前にワイヤーフレームを作成しているとしたら、グレースケールで作業を開始することの大切さがわかると思います。まずはワイヤーフレームをグレースケールにしてください。次に写真を加えてから、デザイン要素ひとつひとつに慎重に色を加えていきます。
そうすることにより「やりすぎ」の印象のウェブサイトではなく、必要な部分だけを強調したデザインにできます。
2）Keynote（Macの場合）を使用し、ページのラピッドプロトタイプを作成する
Photoshopがなくても、ウェブページ、ランディングページ、CTA（コールトゥアクション）、その他のウェブインターフェース要素のラピッドプロトタイプは作成できます。アンダーグランドでは、Keynote（Apple版PowerPoint）を使用したモックアップ作成が拡がってきています。
Keynoteにはデザインテンプレートのオンラインデポジトリ用意されています。デポジトリ内には、ワイヤーフレーミング、プロトタイピング、モバイルやウェブアプリのテストが行えるユーザーインターフェースのデザインテンプレートが入っています。
3）コーポレートスタイルガイドにウェブフォントを追加する
今は2017年です。もしコーポレートスタイルガイドにウェブフォントが含まれていないなら、すぐにウェブフォントの使用を開始してください。それにより会社の書類や販促品とウェブサイトのガバナンスを統一することができます。
Google Fontsを知っていますか。初めてでも利用しやすいGoogle Fontsでお気に入りのウェブフォントを見つけて、コーポレートスタイルガイドで使用方法を指定しましょう。そうすればオンラインでも一貫性を保つことができます。
4）ソーシャル メディア アイコンを目立たない場所に移動する
サイトの訪問者が増えるように様々な努力をした最後に、ソーシャルメディアのアイコンをヘッダーなどの目立つ場所に配置することはやめましょう。訪問者をページのページの途中でわざわざ外部へ促しているようなものです。ソーシャルメディアのアイコンは、ぜひフッターに配置してください。
訪問者には会社で行ったピクニックやFacebookに上げた社内ボーリングの写真を見るのではなく、できればサービスについての質問などをしてもらいたいと思うでしょう。ソーシャルメディアは、ウェブサイトへの訪問者を増やすために使用するものであり、その逆ではないのです。
5）スライドショーやカルーセルはやめる
ホームページにスライドショーやイメージカルーセルを採用することが流行したのは、トップページでできるだけたくさんの情報を提供しようとしたことから始まりました。ただし問題は、サイト訪問者がトップページに長時間留まりすべての写真やメッセージを見ることはない、ということです。
また、トップページで表示されるメッセージや写真は、訪問者の目的とはほとんど無関係です。訪問者がウェブサイトから持ち帰るべきものは何でしょう。単純に、会社が提供しているサービスや商品の情報です。それらを強調し、その他のものは捨ててしまいましょう。
6）ナビゲーションを単純にする
訪問者にとっての選択肢を減らすことは、ウェブサイトを非直感的にするように感じるかもしれません。しかしそうすることにより実は、一番生産性の高いコンテンツのページへ訪問者を導きやすくすることができます。
ドロップダウンメニューを削除しましょう。特に、多層構造のドロップダウンナビゲーションは、マウスを上手に使いこなせるユーザーしか使用しません。さらにヘッダーやサイドバーに並べてあるリンクの数を減らしてください。
7）サイドバーは使用しない
サイドバーは、特にブログでは過去10年間は非常に流行していました。しかし多くの企業が、サイドバーをなくすことで、訪問者が記事自体や記事の最後にあるCTAに関心を向けることに気づきつつあります。
私たちの会社のブログでは、サイドバーをなくすことで、CTAのクリック数が35％以上も増加しました。
8）自然界の色からインスプレーションをもらう
ウェブサイトやCTAにぴったり合った色の組み合わせが、なかなか見つからないことはありませんか？そんな時は自然界の色からインスピレーションをもらいましょう。自分自身で自然の美しさを撮影するのも良いでしょう。またはウェブで風景の写真を見つけて、カラーピッカーでぴったりな色を見つけるのもよいでしょう。自然界のパレットは失敗知らずです。
9）コンピューターから一歩離れる
素晴らしいデザインは、きちんとした計画に基づいて作成してこそ実現します。紙やホワイトボードにアイデアを書き出すことで、繰り返し考えることができ、デザインの見直しと細かい追加を行うことができます。またホワイトボードに書くことで、個人のプロセスからチームでのプロセスになり、他のメンバーからの意見も得られるようになります。
さらには鉛筆やマーカーで書いた内容は簡単に消して変更することができます。デザインがほぼ決まったら、その内容をスマートフォンのカメラで撮影し、それから実際に画面上での作業を開始してください。
10）Pinterestを使用してムードボードを作成する
新しいウェブサイトのためのインスピレーションやアイデアをまとめているとき、またはウェブサイトの一部のデザインを変更しているとき、すぐに見られるようにインスピレーションをまとめておくことが重要です。
Pinterestを使用すると、お気に入りのイメージ、色、レイアウト、パターン、サンプルウェブサイト、コンセプト素材などを集めたムードボードを作成することができます。Pinterestの別の利点は、他のデザイナーもムードボードを作成し、それをシェアしており、すぐに使用できる大量のリソースがすでにキュレートされているということです。
11）フォントサイズを大きくする
ウェブデザインでは仕上がりのデザインが非常に重要です。テキストをコンピューターの画面で読むことは、それだけで大変です。ですから、重要な内容は目立つように表示しましょう。
目立たせるためのひとつの方法は、フォントサイズを大きくするということです。特に見出しや重要な内容のブロックのフォントは大きくしましょう。また全体的にフォントを大きくすることも検討してください。
12）余白を作る
意外に思われるかもしれませんが、余白の存在は非常に重要です。日々ウェブサイトの評価をしていますが、もっと余白を使ったほうが良いページが多くあります。すべてのスペースに何かを表示しなければならないと思うのは勘違いです。
余白の利用やシンプルなページはすでにスタイルとして浸透しています。しかしそれでもまだ多くの企業が、小さなスペースにすべてを表示しようとすることを止めません。ファーストビューにすべてを表示させようとする企業さえあります。デザインにゆとりをもたせましょう。そうすることによりサイトの訪問者は、希望のページをすぐに開けるようになります。
13）スクイントテストをする
ウェブサイト上でどの部分が最も強調されているかを確認する簡単な方法を知っていますか？コンピューターの画面から少し離れて、目を細めて画面を見てみてください。ほとんどのコンテンツがぼやける中、他より大きくカラフルで、強調された部分だけが目を引くと思います。
これはウェブサイトを初めて訪れた訪問者の目が、最初にどの部分に行くかということを確認するためにデザイナーが行う方法です。ウェブサイトで最も重要な部分に目が行きましたか？
細かいデザインハックをいろいろと紹介させてもらいました。ここで紹介していないデザインハックを、みなさんもたくさんお持ちだとと思います。みなさんのお気に入りのデザインハックはなんですか？コメント欄でぜひシェアしてください。
Whittington Consultingのウェブデザインに関する質問集を、こちらからダウンロードしていただけます。ウェブデザインをより良くするために知っておくべき情報が、豊富に含まれています。
編集メモ：この記事は、2015年8月に投稿した内容に加筆・訂正したものです。Rick Whittingtonによる元の記事はこちらからご覧いただけます。
