Webサイトをデザインする前に考えること

Webデザインを勉強しているSEです。

普段はオンラインで勉強しているんだけどこの前の土曜日に「Webデザインシンキングセミナー in 岡山」というイベントに参加してきた。

勉強会なんて今まで行ったことなかったのに前日に情報を知ってすぐに申し込んだのは、今友人のWebページを制作中で、セミナーの２つのテーマが両方とも今の自分が知りたい情報だったから。あとWebデザイナーの方々の雰囲気(空気感？)をつかみたかったから。

実際、Web上ではわからないWebデザイナーの方々の空気感をがっつり感じられたし、セミナーの内容もすごく勉強になった。

というわけで、セミナーの内容をメモ的にnoteに書く。

Webサイトをデザインする前に考えること

１人目の講師はYATのBLOGのYATさん。テーマは「Webサイトをデザインする前に考えること」。この講義で印象に残ったことを３つにまとめて書く。

ユーザーの心理を考えること

YATさんがこの講義を通して一番伝えたいことがユーザーの心理を考えることだと思った。

UXとはユーザー体験のこと。Webサイト利用者の認知、利用前、利用中、利用後、この全てがユーザー体験だということ。

考える範囲をWebページの外のことまで広げること。Webの中のことだけしか考えていない人にはZOZOスーツのような素晴らしいアイデアは出せない。大事なことはPCの前に座っているお客さんが何を求めているのかを想像すること。

Webサイトを運営する人のことも考える。管理画面が使いにくい＝効果的な運営がされない＝売り上げが下がる。ユーザーには見えない管理画面の使いやすさを考えることも結果的にはユーザーを考えることに繋がる。

ユーザーの学習コストを下げること

テレビのリモコンはボタンが多くて複雑だけど、どこのメーカーも基本的な配置の順番は同じ。複雑なものも他と合わせればユーザーは迷わずに使うことができる。

Webサイトも同じ。競合他社のサイト構造を見て分析すると良い。自分が他社のサイトを実際に使ってみることで擬似的にユーザー体験をすることができる。

「流行っているからやる」は危険。やるなら「なぜやるか」を考える。ユーザーが60歳だったらどうか？

常日頃から考えて人に説明できること

一番重要なことはサイトを使う人のことを考えること。日頃から何かを見たときになぜそうなっているかを考える。

作るだけ、では自分の単価は上がらない。Webサイトを作る前の、考える部分、情報を整理する部分に時間がかかるというのをきちんとお客さんに伝えられる人、プレゼンができる人は単価を上げていける。

頭を動かしながら手を動かすことが重要。

「素人っぽい」を脱するデザインテクニック

２人目の講師はWebクリエイターボックスのManaさん。テーマは「『素人っぽい』を脱するデザインテクニック」。この講義で印象に残ったことを3つにまとめて書く。

センス＝知識

センスは生まれ持った才能ではなく、知識を得ることで磨かれていくということ。

良いデザインとは
・メッセージを伝える
・人を動かす
・誰にでも使いやすい

わかりやすさを考えたデザイン

グループ化、整列、ルールに則った配色をすること。文字の量に合ったフォント、文字間、行間を選択すること。

すぐに真似できる具体的なテクニック

使う色は３色〜５色までに抑える。

配色の割合はベースカラー：メインカラー：アクセントカラーを70：25：5ぐらいに収めるのがおすすめ。

行間は文字に対して1.5〜1.9倍がおすすめ。

枠と文字の間に空けるスペースは1〜1.5倍がおすすめ。

トークセッション

最後は司会のCODE54の後藤さん、Webデザイナーの堀田さん、講師のYATさんとManaさんの４人でトーク。

最近YATさんとManaさんも使っているAdobe XDの話題や、海外での働き方について、講師のお二人のリアルな見積もりの話などとても興味深くて楽しかった。

YATさんはWeb制作に入る前にお客さんと議論したり一緒に競合他社のサイトを見たりしながら、６時間くらいかけて意識合わせをするのでデザインの直しがなく一発で通るという話がすごく印象的だった。まずはお客さんと同じ方向を向いて徹底的に情報共有することが大事なのだ。

まとめ

YATさんからもManaさんからも共通して伝わってきたメッセージは、とにかくユーザーのことを考えるということ。そして、常日頃から頭を動かすということ。

Manaさんの70：25：5の配色の法則でキューピーマヨネーズや伊右衛門のパッケージが紹介されていたのを見てから、最近日用品の配色の割合を気にしながらみるようになった。たしかに有名な商品のパッケージほどこの法則に則って配色されていることに気づく。

こんな感じで常日頃から頭を使って考えるということがレベルアップに繋がるんだなーと思う。

最後にYATさんが話していた言葉が強く残った。きれいなだけのデザインは今後は全部AIがやってくれる。お客さんがお金を払ってくれるのは人間の「考える」部分だということ。

考えて、考えて、考え抜いた人だけが、いいものを作れる。

#デザイン #Webデザイン #okaweb

撮影 : イメージフォト 田中 秀和