より良いWebデザインを作るためには、1つでも多くのWebサイトを見て、どこが優れているのか、また流行などを調べることが大切になると思います。
今回はより良いWebデザインのポイント、参考にしたい2018年度にトレンドとなるギャラリーサイトをご紹介します。もくじ
◆デザインの良し悪しとは
はじめに、Webサイトのデザインの良し悪しとはどのようなことを指すのでしょうか。
多くの人に共通するであろうことは「良いデザイン＝分かりやすい」「悪いデザイン＝分かりづらい」ということです。
Webサイトを見ている人にとって分かりやすく使いやすいサイトであれば「良いデザイン」と言えるでしょう。
革新的技術をどれだけ使っていたとしても、分かりづらく使い勝手も悪いサイトであれば良いデザインとは言えません。
◆「良いWebデザイン」のポイント
「良いデザイン」のWebサイトを作る上で、どのようなことに気をつける必要があるのでしょうか。
一般的な良いデザインとされるWebサイトに共通する５つのポイントについて記していきます。
・文字の読みやすさ
閲覧者にしっかりと情報が伝わらなければ「良いデザイン」とは言えません。
文字の読みやすさはとても重要な要素になります。
文字のフォントや色、行間、レイアウトなどがしっかりと考慮されたものであれば、自然と文字は読みやすいものとなります。
「しっかりと情報が伝わるサイトであるか」という基本的な意味でも文字の読みやすさは大きなポイントになります。
・効果的なアニメーション
多くのWebサイトにアニメーションが搭載されています。
アニメーションがあるとことで目線を向けたり、サイト訪問者へ対して重点的に伝えたい情報を訴求することができます。
しかし、アニメーションが多すぎると何を伝えていたいのかわかりづらくなるので注意が必要です。
適度で効果的なアニメーションでなければ良いデザインとは言えません。
・画質が良い
情報量が充実しているWebサイトであっても画質が悪ければ、訪問者はサイトからすぐに離れてしまいます。
ほとんどのWebサイトの画質は非常に良いため、少しでも画質に問題があるとそこで差をつけられてしまうでしょう。
多くの人に見てもらうサイトであるためにも情報としての画質が良いということは最低条件と言えます。
・デザインの統一感
デザインにおいて統一感を持たせることはサイトデザインを向上するうえで非常に重要になります。
訴求したい情報・テーマ・イメージに基づいた一貫性のあるデザインであることが、見やすく分かりやすいWebサイトと言えます。
・情報やページメニューが分かりやすい
Webサイトを見ていて「どこに何があるか分かりづらい」「探している情報にすぐに辿り着けない」など、情報やページメニューが分かりやすくないと、良いデザインとは言えません。
どの情報がどこにあるのか、ひと目で分かるサイト作り、分かりやすいページにして、情報の伝達やユーザーのページ誘導を効率よくすることがポイントです。
◆2018年度Webデザインのトレンド
2018年度、Webデザインに取り入れたいトレンドのデザインについて紹介します。
・文字を画像からずらして配置する
整然としているデザインの枠を超えていくような不規則に配置されたデザインがトレンド感を増しています。
文字を画像からずらした配置にすることで動きや勢いが生まれます。
【アソビュー】https://www.asoview.co.jp
【Zoomanity】http://zoomanity.land/en/
・斜めにレイヤーや線を重ねる
上でご紹介した「文字を写真からずらして配置する」と同様、きっちりと決まりきったデザインから斜めにレイヤーや線を重ね、遊びごころを持たせることで新たな価値を生み出しています。
またサイト全体にに躍動感やわくわく感を出すことができます。
【ベイク チーズタルト】https://cheesetart.com
【クロッカンシュー ザクザク】https://zakuzaku.co.jp
・カラフルなグラデーション
フラットデザインなどデザインがシンプルな方向性になっていたことから色もシンプルにベタ塗りで、という傾向がありましたが、近年グラデーションが再び注目されるようになってきています。
なかでもカラフルで複数の色を使った鮮やかなグラデーションをよく見かけます。
画像の上からグラデーションを重ねていたり、文字をグラデーションにしたりという例が見られます。
【久米島インスタTRIP】http://kumejima-instatrip.com
【南福岡自動車学校新卒サイト】https://www.mfds.co.jp/recruit/new-graduate/
【成安造形大学】http://www.illustration.seian.ac.jp/
・デュオトーン
デュオトーンとは、２色（Duo）の色合い（Tone）という意味でベースとなるミドルトーンとハイライトカラーから構成されるデザインです。
デュオトーンを使うことでアーティスティックな雰囲気を持たせたり、インパクトを与えることができます。
ファーストビューやアイキャッチとして使用すると効果的です。
【情報科学芸術大学院大学】http://www.iamas.ac.jp
【ADISON PARTNERS】http://www.adisonpartners.com
【Chris Redshaw】http://chrisredshaw.co.uk
・スプリットスクリーンレイアウト
画面を大きく2つに分割したり、大胆に複数に分割するレイアウトです。
一度に複数面の情報を見る事ができたりスマートフォンでは分割部分を上下に分けることでレスポンシブデザインとも相性が良いなど様々な利点があります。
【黒川温泉 旅館 山河】http://www.sanga-ryokan.com
【Fanny Myard】http://fannymyard-design.com
【Plantation】http://www.plantation1982.com
◆まとめ
良いWebデザイン、2018年度のトレンドとされるWebデザインをまとめました。
文字が読みやすく適度で効果的なアニメーションが使用されており、画質も良くデザインの統一感があるホームページは「良いデザインである」といえます。
2018年度のトレンドとされるデザインを取り入れながら、より自由に大胆で楽しい方向へ向かうような、わくわくするデザインを目指してみてください。