— web design

ウェブデザイン

ウェブサイト、いわゆるホームページのウェブデザインは見た目としてのビジュアルデザイン、情報設計としてのデザイン、システムや運用の仕組みとしてのデザインからなります。

ビジュアルデザインがインパクトとしては大きいですがこれはできて当たり前。芸術家としてデザインを提案するのでなくクライアントの要望、イメージを形にすることが大切です。

またビジュアルデザインだけでなく目に見えにくい残り2つのウェブデザインも兼ね備えたサイトが優れたウェブデザインと考えます。時代の変化に合わせたデバイスへの対応も当然のことです。

ワサビは創業以来、マーケッター、グラフィックデザイナー、ウェブデザイナー、コピーライター、フォトグラファー、システムエンジニア等がチームを組みご提案することにより三位一体となったハイクオリティなウェブデザインをご提供しております。

— Purpose

新型コロナウイルス感染症によるビジネスモデル変革への対応が必要

ワサビが10期目を迎えた2020年。新型コロナウイルス感染症により非対面、オンライン、テレワーク等とビジネスモデルの変革が求められ消費者の価値観も変わってきています。

従来モデルに囚われたままだとピンチに陥ります。
新たな販売戦略、消費者とのつながりを結びつけることが出来ればピンチがチャンスとなりえます。

ウェブデザインとウェブマーケティングを別々に考え、別々の企業に依頼していると柔軟な対応ができず、変革にも対応できません。

ウェブデザインとウェブマーケティング。その両輪をONE　TEAM、ワンストップでクライアントに提供できるワサビのウェブデザインこそ新時代のビジネスに生き残る道だと考えます。

プランニングについて

ウェブデザインを制作するにおいてプランニングは重要です。
何事も行き当たりばったりでは迷走して失敗してしまいます。
まずはウェブサイトの目的とターゲットを明確化します。
会社案内としての情報発信が最低限出来れば良いのか、営業マンの代わりとして収益をあげるサイトにするのか、人材難の昨今、理想により近い求職者を多く集めるための求人サイトにするのか。
目的の違いによってその後のサイト設計やコンテンツ内容は大きく異なります。
また、目標を定め制作後の運用の指針とすることも重要です。

サイト設計について

目的やターゲットといったプランが固まればサイトマップやワイヤーフレームを用意してサイト設計に入ります。

サイトマップとはウェブサイトの骨組みのようなものでウェブサイトに必要なページを洗い出し、グループ毎にまとめて階層構造にしたり、優先順位をつけて表示順番を決めます。
サイトマップを見るだけでウェブサイト全体の内容が把握できるようになります。
ワイヤフレームは各ページにおけるコンテンツのレイアウトをラフとして起こすものです。
部屋でいう間取り図です。
ワイヤーフレームも大きく2種類ありますが、ページ内レイアウトを含めたものとページ内レイアウトは含めない概略のもの。
特にデザインを作り込んだ後にレイアウト変更は大変なので重点的に確認しますがページ内レイアウトはページコンテンツ内容によっても変化するため、省略することもあります。

ユーザビリティ、アクセシビリティの重要性

ウェブサイトの情報設計においてはビジュアル面でのインパクトよりもサイトの使いやすさ（ユーザビリティ）や高齢者や障碍者どんな方でも利用しやすいアクセシビリティを重視する方が良いケースが多いです。

特に特別なことではなくパソコンでは見れるけどスマートフォンではみれない、またその逆やボタンがクリックできない、クリックしずらい、問い合わせが分かりずらい意図せずにクリックしてしまう等設計面での確認も重要です。

コンテンツ内容について

ウェブサイトに使用するコンテンツは容量も種類も基本的には自由です。
枠が決められた平面の紙のデザインでは決められた文量のテキストと画像しか使用できませんが、ウェブサイトの場合はテキスト、画像はもちろんのこと動画や、スライドといった動きのあるプログラムも容量無制限に組み込むことができます。

ウェブサイトの目的やターゲットによって必要なコンテンツは異なりますが代表的なものをご紹介します。

ロゴマーク

ウェブサイトにはよくロゴマーク（以下、ロゴ）が使用されます。

ロゴが無い場合でも少なくとも何処のサイトか分かるようにテキストで社名は記載しますが、テキストよりもロゴを利用した方がブランディングとして訪問者の印象に残りやすいサイトになります。
ウェブサイトに使われるロゴはサイト全体にとっては小さな画像です。
主な企業のロゴは縦24px～70px、横24px～200pxの小さな画像です。
しかし、企業の理念や想いなどを具現化したロゴは会社の顔でもあります。
ロゴが一人歩きし社名を聞いてもイメージが湧かないけれどロゴを見るとピンと来るケースも珍しくありません。
起業すると同時にウェブサイトもオープンする時などはまだロゴが無いという状態のこともあります。
ツールや素材を駆使して自作することも可能ですが、ロゴは会社の顔といえるものですし、今後何年も使用しウェブサイト以外にも利用することが考えられるのでプロに依頼することがおススメです。
ワサビではブランディング構築の一環としてロゴデザインをご提供します。

ヘッダー画像

ピンポイントで御社サイトを探している場合を除き、検索エンジンからキーワード検索をしてサイトに訪れたユーザーはわずかの時間の間に自分にとって関係のあるサイトか、求めているサイトかを判断します。
その際にサイトの一番目立つ場所にあるトップページのヘッダー画像は重要な判断材料となるためビジネスがイメージできる画像を配置することが大切です。
最近は静止画像だけでなく動画をバックで流すということもよく行います。
ヘッダー画像デザイン6つのポイントご紹介します。

商品やサービスの画像をつかう

フォトリア、ピクスタといった有料の画像素材集を利用すれば何万種類の画像が簡単に手に入ります。
ただこういった素材は写真自体は綺麗なもののコンテンツの魅力として欠けてしまいます。
出来れば実際のスタッフや商品、サービスシーンを写真に収めて使いましょう。

セールスポイントなど、キャッチコピーを配置

インパクトのある写真だけを贅沢に使うのも良いですが、画像を加工して他社に比べて優位性や独自性のあるセールスポイントや理念、キャッチコピーなども掲載しましょう。
但し、テキストを詰め込み過ぎると文字が小さくなるのでスマートフォンでの閲覧を考慮することも大切です。

スマートフォンを意識し、文字サイズを決定

スマートフォンでも文字がちゃんと見えるように、ヘッダー画像に文字を重ねる場合は文字の大きさに注意が必要です。

キャンペーン情報や新製品情報などを掲載する

街中の看板や広告と異なり、ウェブサイトのヘッダー画像は変更がしやすいです。
ずっと同じヘッダー画像を使い続けるのでなく、キャンペーンや新製品の販売に合わせて定期的に変更することも効果的です。
但し、ヘッダー画像のデザインを頻繁に変更し過ぎるとリピーターが別のサイトに来たのではと混乱してしまうので注意が必要です。

スライドすることも可能

多くの情報を伝えたい場合や、キャンペーンの告知、求人募集など一時的に伝えたい時には一つのヘッダー画像に詰め込むのでなく、複数のヘッダー画像を用意してスライドを活用しましょう。
スライド毎にリンクを設定して該当するページへ誘導することもできます。
但しクリックが出来ることを示唆するデザインや他にもスライドがあることを示唆するデザインを考慮することが大切です。

横長の大きな画像を用意します

最近では解像度の高いモニターやスマートフォンでもRetinaディスプレイといった高画質モニタなどもでてきています。
途中で切れたり、画像やテキストがボケてしまわないように2000px～4000px程の横長の画像を用意しましょう。