Webサイトやバナーなどのデザインを『Webサイトデザイン』といいます。
スマートフォンの普及で、Webサイトデザインの需要は今後も増していくと考えられ、Webデザインにチャレンジしてみたいと考えている方は多いはず。
そこで、この記事では、覚えるべきデザインの原則や活用できる参考サイトの紹介をしていきます。
目次
Webサイトデザインとは？
世界中のどこからでも Web サイトにアクセスできるように、ホームページ（以下HP）のコンテンツデザインを設計し、制作することを「Webサイトデザイン」といいます。
一口にHPといっても、自分の作品をアピールするためのポートフォリオサイト、商品の売買を行うネットショップ、ビジネスを周知させるためのコーポレートサイト、個々の意見を発信・共有するためのブログなどといった様々なものがあります。
Webサイトデザインで大事なこと
クライアントや訪問者のニーズの高まりに合わせ、Webデザイナーに求められるセンスやスキルは常に進化を続けており、視認性や回遊性といった「ユーザービリティー」も含めてデザインすることが重要になってきました。この部分が印刷物(DTP)デザインと大きく異なる点です。近年ではモバイルを含めたレスポンシブデザインが主流になるなど、絶えず変化するトレンドを追い続け、デザインに反映していかなくてはなりません。
コミュニケーション能力も大事！
打ち合わせにWebデザイナーが同席することも多く、その際にクライアントから要望やデザインの方向性などをうまく聞き出す事ができるかどうかがとても重要です。
デザインに関して素人であるクライアントに、色は？フォントは？と専門的なことを聞いても、理解するのに時間も掛かりますし、「不親切」といった印象を持たれかねません。相手の立場に立って、分かりやすい言葉で説明する必要があります。
また、制作を分担して行うことも多いため、チームワークも必要不可欠になってきます。
Webサイトデザイン制作の流れ
Webサイトデザインにおける制作の流れをざっくり説明すると「企画」→「デザイン」→「コーディング」→「公開」の順で進めます。
最初にWebサイトの構成（企画）をまとめ、その次にデザインでイメージを見える化（ワイヤーフレーム）していく作業に入ります。この作業は制作会社とクライアント側との認識の相違を無くしていく為にとても重要です。
レイアウトの構築が完了したら、デザインカンプを作ります。デザインカンプとはより具体的なカラーや画像の指定をしたもので、主にPhotoshopやIllustratorで作成していくものです。
カンプ作成後は、公開に向けてのHTMLやCSSでのコーディング作業が始まります。
Webサイトを美しく見せるレイアウト４つの基本原則
良いデザインの作品には必ずと言っていいほど、見られる基本原則の概念というものがあります。この原則を押さえてデザインすれば、ユーザーにインパクトを与えることができます。
それでは、その4大原則とは具体的にどういったものなのか、分かりやすく解説します。
・コントラスト
コントラストとは対比・対照の意味で、ページ上の要素同士が意味もなく類似するのを避けるため、情報に強弱を付けてわかりやすく表現する考え方です。
「ここは絶対に読んでほしい！」というポイントは、文字を他より大きくするテクニックなどがこれにあたります。コントラストは視覚を引きつけるもっとも重要な要素になります。
・反復
デザインの視覚的な要素を作品全体で繰り返すことを反復といいます。
色・形・フォント・線の太さなど、視覚的なデザインをあらゆる状況で同じように用いることで、統一感を表現できます。
・整列
整列とは、動画やテキストなどを規則正しく配置することを意味します。
あらゆる要素が、ほかの要素と視覚的な関連を持つ必要があります。整列はすっきりと洗練された印象を生み出します。
・近接
お互いに関連性のある項目は、距離を近づけて配置すると、一つの大きな要素としてユーザーに認識されやすくなる効果があり、これを「近接」といいます。
近接は、情報の統一性に役立ち、ユーザーの混乱を減らし、明確な情報を相手に与える働きをします。
以上の４つです。
これらの要素をきちんと生かすことで、Webデザインだけでなく、あらゆる制作業務に幅広く活用できる技法であり、基本原則に従うことで、より洗練されたオリジナリティの高いWebサイトの制作が可能になります。
レイアウトデザインの引き出しを増やす
知識を詰め込むことも大事ですが、様々なインスピレーションを与えてくれる国内外のWebデザインに触れることで、新しい発見や色々な学びを得られます。今回は、そんな参考になる最新Webデザインが掲載されているサイトを５つご紹介します。
WebDesignClip
出典：https://www.Webdesignclip.com/
国内、海外、LP、スマホの4つのカテゴリーからWebデザインのギャラリーを見ることができるHPです。
更にキーワード、メインカラー、サブカラー、レイアウト、カテゴリー、タグなどでフィルタをかけてさらに絞り込んでの検索も可能。更新頻度が高く、最新のWebデザインをいち早くチェックしたい方にもおすすめです。
SANKOU!
検索設定の細かさが特徴のギャラリーサイト。
「漫画風・アメコミ風」「イラストが動く」「奇抜･めずらしい･派手な配色」など色んなカテゴリーがあって、ただ眺めているだけで楽しいHPです。
bookma!
HPのPC版とスマホ版を並べて見ることが可能なので、レスポンシブデザインを採用したい時にとても参考になるギャラリーサイトです。
株式会社山陽
兵庫県姫路市で革製品の製造・販売を行っている会社のHPです。
一見、革製品を作っている会社とは思えないインパクトある色彩が目を引きます。
同業他社の皮革製品メーカーとはひと味もふた味も違い、印象に残るデザインというものはこういうものだというのが分かります。
黒木テック工業株式会社
遊園地の乗物を半世紀に渡り作り続けている会社のホームページです。
遊園地の乗り物とスタッフの写真がたくさん使われており、製造業のWebサイトといえばなんとなく無骨なデザインになりそうなイメージがありますが、アクセントカラーの使い方が上手で、楽しそう、且つワクワクするようなホームページに仕上がっており、勉強になります。
常にアンテナを張って新しいアイディアを取り入れる
Webデザインは流行り廃りが1年で変化すると言われており、最新のトレンドを常にキャッチし続けないとあっという間に置いていかれてしまいます。
日常で目にするものを、なぜこうなのか？と考えてみるだけで、デザインの引き出しの量は増えていきます。
常にアンテナを張り、周囲を見渡すという事を意識しましょう。
マーケティングでお悩みでしたら、
Bigmacにお任せください。
