弊社フルスクラッチ制作のネットショップで、サイトオーナーの希望により、デザイン変更をしています。

デザインはオーナーさんの知り合いの印刷デザインを手がけるデザイナーさんです。
ちらし等を拝見させていただきましたが、柔らかい、センスのいいデザイナーさんです。

しかし、指示通りにデザイン変更をしていると、すぐにデザインの着眼点の違いに気づく事になりました。

WEBデザインでは、印刷デザインと大きく違い優先すべき要素が入ってきます。

それはデザインが見る人にどうゆう影響を与えるのかという事です。

印刷デザインの場合、目に入る情報は全紙です。全体として良いイメージ、インパクト、正確な情報を認識させて、望むべき行動へと導きます。

全体のバランスを考えて要素を配置、全体としてちらしの役割を達成させます。

WEBの場合は、もっとたくさんの条件に配慮したデザインでなければなりません。

＜正確な情報を伝えるには＞

・可変の画面幅で情報を提供している

WEBの場合は、正確な情報を伝える為に決してユーザーを迷わせてはいけません。
特に画面の幅はスマートフォンのような横幅が狭く縦が長い画面になりますし、パソコンの場合は横幅が広く見えている縦幅は短い可能性があるわけです。

様々なサイズで情報を提供しているという事をデザインの面からも意識しなくてはいけません。

・ネットショップの商品リスト

例えば、商品をリストにして並べている場合、スマートフォンならば横に２商品、縦は上下に長く続きます。PCで見た際は、横に４〜６商品、縦に続くという感じです。

（※弊社では、画面幅に合わせてデザインを変えるレスポンシブウェブデザインを採用しています。）

写真に付随する商品名や値段、情報等は、どの商品のものか、迷わずに一目でわかる事は最低条件となります。

・商品情報を区別させるデザイン

例えば細い罫で囲う、背景色と区別できる地色をつける…など、デザインで１つの商品情報をまとめて伝達させるという役割を持つ事になります。

ネットショップでは、ちょっと迷ったとか、わかりにくかったなど、たとえ小さなストレスでも大きな損失に繋がります。ユーザーのマイナス体験となり、再訪してもらえなくなるからです。

・様々なユーザーを決して迷わせないデザインが大切

これは商品リストの例ですが、一時が万事で、デザインは、ユーザーが迷わずに情報を取得できるという役割を手伝う必要があります。

若い人からお年寄り、視力の弱い方、インターネットに慣れていない方、様々なユーザーの方を想定し、可能な限り誰もが迷わず、一目でわかりやすい情報を取得させる事を第一としたデザインであるべきと考えます。

＜アクションが伴う＞

・ハイパーリンクの認識

WEBの場合、印刷物と異なる点の大きな特徴に画面上で何らかのアクションを起こさせる必要があるという事です。

よく誘導するアクションはクリックです。そのテキストがクリックできて、さらなる情報ページへと続くハイパーリンクである事を一目でわからせないといけないのです。

デフォルトで定番のリンク色は青で下線です。また多くの人はその事に慣れています。ですから大手ポータルサイトでは青色をリンク色として採用しています。
デザインの雰囲気を統一させる為にリンク色や装飾を変更する際は、そのテキストがリンクがかかっている、もしくは当然リンクであるとわからせる必要があります。

新着情報などの欄で使うテキストならば、コーナー内の記事タイトルなので比較的容易に認識できるでしょうが、文章内のリンクテキストなど、サイト内でリンク色を統一しわからせてくる体験を踏ませる…など工夫が必要となるでしょう。

そして、注意すべきはそのサイズです。スマートフォンでは、行間に配慮しないと指で正確にタップする事ができません。押しにくいリンクは大きなストレスとなります。

・ボタンなど

印刷物に無いものとして、ボタンなどがあります。購買を起こさせるボタン、読んで欲しい記事に導くボタンなどは、ユーザー心理として押しやすく、目立つ、横長なボタンが有効です。

印刷デザインからすると、なんか派手だなと感じるかもしれませんが、やはり押してみたくなる…という心理はデザインによってあるのです。多くのランディングページでは、頻繁に横長で大きな赤いボタンが出てきますよね。

ボタンを多く設置して実際の行動をせまる機会が必要という事です。

店員さんが「お似合いですよ〜！」「お買い得なんですよ〜」と何度も商品をお薦めして決断を促すような意味合いです。

PCサイトならばどこかに購買できるボタンを、スマホ画面で閲覧の際は、スクロールした際に購買に結びつくタイミングでのボタン設置やしかけが必要という事です。

他にも…

今回は印刷デザイナーさんとやりとりする中で、特に２つの大きな違いを感じましたが、他にもCMYKとRGBによる色の違いから来るユーザーへ与える心理的な影響の違いなどもあるように思います。

弊社は印刷物のデザインもやりますが、WEBデザインが主流なので上記のような要素等はごく自然に考えてきた事でしたが、今回は一緒に作業してみて、自分自身もその違いを再認識する事となりました。

また気づいた事などがあれば、書いていきたいと思います。

Tweet