webデザインシンキングセミナーに参加してきました
こんにちは。つかもと.comです。
結構前になってしまうのですが、5/26に行われたYAT（@yat8823jp）さんManaさん（@chibimana）主催のwebデザインシンキングセミナーに参加してきました！
今回は参加レポです。
目次
・参加の目的
・Webサイトをデザインする前に考える事（YATさん）
・「素人っぽい」を脱するデザインテクニック（manaさん）
・ 最後に
◆参加の目的
このセミナーを申し込んだのはずいぶん前の話だったのですが、そのときは"面白そう"、"勉強になりそう！"、それとmanaさんとYATさんに会える！という理由（笑）から参加しようと思いました。
しかし、その後実際にwebデザイナーとして働き始めて、今回のセミナーに参加する目的がよりぐっと具体的になったなぁ、と感じました。
先輩たちの知見を少しでも自分のものにするぞ！と意気込んで参加しました。
◆Webサイトをデザインする前に考える事（YATさん）
こちらはタイトルの通り、webサイトを実際にデザインする前段階、サイトの目的やサイトのゴールを考えるために必要なことを教えていただきました。
このセクションの目次
・情報の整理について
・ワイヤーフレームに落とし込む
・ディレクトリマップ、サイトマップに対する考え方
・SEOについて
・UIやUXってよく聞くけど、それってなんだろう
情報の整理について
webサイトを作るためには情報を整理することが大切です。
情報を整理するにあたり、サイトの目的とゴールを設定することが大切です。webサイトには以下のようなタイプのサイトがあり、それぞれに目的が異なります。
コーポレートサイト → 知ってもらう
ECサイト → 買ってもらう
ポータルサイト → 情報を探す
お問い合わせフォーム → 情報を入力する
ユーザー同士の交流サイト → 使ってもらう
ブログ → 読んでもらう
各タイプのサイトの目的を達成するために用いられるサイト構造を教えていただきました。
コーポレートサイト
コーポレートサイトは自社のことを知ってもらうことがサイトの目的です。
そのため、サイト構成はツリー構造タイプを取ることが多いです。
ツリー構造タイプは親子関係の構造になっていて、目的のページを親階層と紐付ける際に関連性を持たせる事が大事です。縦方向への一貫性がポイントです。
ECサイト
ECサイトの目的は商品を買ってもらうことです。
サイト構成はファセット型構造タイプを取ることが多いです。
ECサイトは一つの商品に対して、複数カテゴリに分類される場合があります。その際、一つのカテゴリに商品を紐づけるのではなく、全てのカテゴリに商品を紐づけておくことでユーザーの要望に対してコンテンツを提供できるようにしておきます。ファセット型構造タイプは様々な探し方をするユーザーに対して、どの要求にも同じ商品を紹介できるのが特徴です。
ポータルサイト
ポータルサイトはWikipediaのようなキーワードに対する玄関口のような役割を果たすサイトを指します。サイトの目的も情報を探すことです。
ポータルサイトは、web型構造を取ることが多く、見ていただくとわかるかと思いますが、コンテンツ同士がリンクされていて、網状になっているのが特徴です。
お問い合わせフォーム
お問い合わせフォームの目的は情報を入力することです。
直線型構造を取ることが多く、スタートからゴールまで一貫した目的があるので、別ページに遷移したりするナビゲーションのようなムダな情報を載せないことがポイントです。
直線型構造はLPなどでも採用されこともあるみたいですね。
（写真、撮り忘れましたので手作り・・・すいません。）
ユーザー同士の交流サイト
FACEBOOKなどのようなユーザー同士の交流サイトはハブ＆スポーク型構造を取ります。ひとつのページを起点に放射線状に広がる構造を取るのが特徴です。ゴールのページにたどり着いたら最初のページに戻る・・・といった反復可能な構造なのが特徴です。
なぜ競合を調査するのか
webサイトごとの目的や特徴はおさえました！
次に、webサイトを実際に作るにあたって、必ず行うと言っても過言ではないのは競合の調査ではないでしょうか。では、なぜ競合を調査するのでしょう？
競合サイトももちろんですが、ユーザーの利便性を考えて作られています。その競合サイトをユーザーとして利用することで、自分の考えだけでなく、作り手の思想も理解することができますし、実際に触ってみてのユーザー体験を活用することができます。
この時に上記に記載したようなサイト構造のどれに分類されるのかも見ると良いそうです。
また、競合サイトが採用しているサイト構造に基本的には乗っかることが良いそうです。
ワイヤーフレームに落とし込む
次にワイヤーフレームを起こします。
WFの目的は情報の設計です。
この時に運用者の利便性を考えた設計を心がけることが大事です。
例えば、アイキャッチの下にキャンペーン期間中はバナーを貼りたいな〜、と言った時にそもそも掲載場所が設計されていないと、もちろんバナーは貼れません。
このような売り上げをあげるような工夫にシステムが追いついていない状況は運用者にとって使いづらくストレスに感じてしまいます。
このような状況を解決するために、あらかじめフリースペースを作っておくと良いそうです。
フリースペースの形式はある程度HTMLがかけるのであればHTML形式、そうでなければ画像が貼れる箇所など運用者のスキルに合わせたものがいいそうです。
そのほかにもワイヤーフレームを起こす時のポイントとして、以下のような点があります。
・ページ内に掲載すべき情報を全て載せる
・決まったフレームを採用する
・未確定要素はダミーとして領域を確保する
・短い文章、長い文章を想定しておく
・共通のパーツはワイヤーフレームの段階で共通であるとわかるようにしておく
ディレクトリマップ、サイトマップに対する考え方
ディレクトリマップはファイルの置き場所やファイルの命名規則を一覧化したものです。チームによって事前に決まっている場合もあるため、事前にすり合わせを行っておくと良いそうです。
サイトマップはwebページの内容や構成を一覧化したもので、ユーザーの行動を元に分類します。
SEOについて
例えばECサイトだと、買いたい人をターゲットに売るためのSEO対策をしがちです。しかし、ECサイトを訪れる人の目的は
・商品を調べたい人
・商品の使い方を知りたい人
etc...
人によって目的はそれぞれです。
検索エンジンはみんなにとって使いやすいサイトが上位に表示されます。そのため、検索してきた人が満足できる、欲しい情報をどれだけ提供できるかをユーザー目線で考えることが大事です。
UIやUXってよく聞くけど、それってなんだろう
「皆さんはUI/UXという言葉を知っていますか？」という質問に対して、多くのデザイナーは手をあげることができると思います。わたしも勢いよく手をあげました。
しかし、「では、UI/UXという言葉を説明することができますか？」という質問に対しては上がる手がグッと下がってしまうのではないでしょうか？
わたしもあげた手をそっと下げてしまいました・・・笑
では、UI/UXとは一体なんのでしょう。
UI
UIとはユーザーの目に触れるもの全てがUIです。
ナビゲーション、グラフィック、テキストetc... その全てが対象です。
優れたUIのポイントは見つけやすく、使いやすいことです。
UX
UXとはユーザー体験を考えることです。
このユーザー体験は、以下全てのシーンでのユーザーの心理を考えることが大切です。カスタマージャーニマップで動きを予測したり、プロトタイプを作り使用感を確かめるなど様々な手段を使い考えていきます。
・認知
・利用前
・利用中
・利用後
ZOZOスーツが話題ですが、あのスーツはwebで服を買う人が気にするポイント「サイズ感がわからない」という経験を改善したUXの良い例でないでしょうか。
まとめ
デザイナーのお仕事はたくさんあります。
見た目をよくすることも確かに大切です。
しかし、ユーザにとって使いやすいものは何か？何が求められているのか？を考えることが大切で、見た目をきれいにすることが大事なのではなく、問題をどれだけ解決するか？が重要です。
手を動かす前に、モノを作る前に考えることはたくさんあります。
◆「素人っぽい」を脱するデザインテクニック（manaさん）
こちらはわたしのような初心者さんを対象にしたお話でした。
デザインをしているとき、"なんか素人っぽいな…"と思うことがありませんか？わたしにはありすぎます（笑）
そんな"素人"感は何が原因で起こるのか、どういった点に気をつけると良くなるのかを教えていただきました。
このセクションの目次
・レイアウトの基本ルール
・配色の基本ルール
・文字・文章の基本ルール
・実例で学ぶデザイン
・模写をしよう
・まとめ
レイアウトの基本ルール
レイアウトの基本ルールは以下3つのポイントがあります。
1.優先順位
2.グループ化
3.整列
1.優先順位
伝えたいものの優先順位をつけましょう。
色や吹き出しをつけたり、要素の大きさを変えたりして一番伝えたいことが伝わるような工夫をしましょう。ポイントは、大胆にやること！
2.グループ化
人は隣り合っていたり、近づいているものを見ると関連性があるように認知します。関連性のあるものは近づけたり、逆に関連のない要素は離したり。
マージンを確保する、薄めの線や枠をつけたりして情報をまとめてグループ化しましょう。
ただし多用は注意！です。
3.整列
見えない線を意識して要素のスタートラインを合わせましょう。
綺麗に整列されているデザインは、見えない線で整列されています。
配色の基本ルール
配色の基本ルールは以下3つのポイントがあります。
1.色数
2.配色の割合
3.配色の決め方
1.色数
使う色は3~5色。
これは（初心者向け）の絶対ルールだそうです！
（ついついカラフルにしがち or 2色でなんかシンプルになりがち・・・）
2.配色の割合
配色は、
ベースカラー:70% メインカラー:25% アクセントカラー:5%
3色以上使う場合は配分すると良いそうです。
（例:4色だと70%:25%:2.5%:2.5%みたいな感じ）
3.配色の決め方
12色色相環を使います。
基準にする色を決め、その色に隣接する2色で配色を決めます。
明度や彩度を調整するとまた印象が変わります。
ベースカラーは灰色は万能な子！基準色の薄い色をベースカラーにするのも良いそうです。
文字・文章の基本ルール
文字・文章の基本ルールは以下3つのポイントがあります。
1.フォントの種類
2.余白
3.揃え
1.フォントの種類
フォントには大きく分けて明朝体、ゴシック体、装飾系フォントに分けられます。それぞれのフォントには特徴があり、使いどころのポイントは、
明朝体
→長い文章には細い明朝体。ゴシック体だと真っ黒になって読みづらい
ゴシック体
→短い文にはゴシック体。箇条書きもゴシック体の方が見やすいです
装飾系フォント
→見せるためのフォント。デザインの一部として使います。本文には使いません
2.余白
余白には以下３つの余白があります。それぞれのポイントを紹介します。
文字間や行間によって文章の読みやすさが変わってきますので、押さえておきたいポイントです。
2−1.文字間
2−2.行間
2-3.枠と文字の間
2−1.文字間
文字間は詰めすぎも開きすぎも読みづらいです。
基本的にはPSなどの設定で。
2−2.行間
行間は文字に対し、1.5~1.9くらい取りましょう。
Manaさんは1.7を採用しているそうですよ。
2−3.枠と文字の間
文章を枠で囲む時、余白は文字サイズの1~1.5倍取ると良いそうです。
文字サイズが16pxの場合、20pxくらいのpaddingを取るようなイメージでしょうか。
3.揃え
最後は文字の揃えです。
文字揃えは左揃えが基本です。
3行くらいであれば中央揃えでも良いそうです。
実例で学ぶデザイン
ここからは実例を見ながらデザインのポイントをおさらいしていきました。
（写真があまりキレイでないのはお許しください…！）
1.子供向けの動物園
Before
After
見違えるように変わりましたね・・・！
こちらのページの修正ポイントは、
配色
→ 彩度の高い色の組み合わせになっているので、目がチカチカする・・・
謎の装飾
→ 謎の装飾が多い。散りばめられた星々・・・
見出し
→ とりあえず文字を打っただけだと少し寂しいので、もっと工夫したい！
↓↓こんな感じで修正していきます↓↓
配色
→明度や彩度を調整し、色を並べた時の印象を重視する
謎の装飾
→ 無駄な装飾はしない！
画像の形を工夫したり、背景にパターンを引いて見るのも◎
見出し
→吹き出しをつけてみたり、装飾フォントを使ってみる
（前述の通り本文に装飾フォントを使うのはNG）
2.大人かわいいネイルサロン
Before
After
うーん、こちらもすごい。
修正ポイントは、
配色
→「大人かわいい」なのに彩度が高く、
ポップなイメージになってしまっている
文字装飾
→も、文字が歪んでいる・・・！？
縁取りや強いシャドウも気になる。。
揃え
→枠や文字がバラバラ
↓↓修正ポイント↓↓
配色
→類似色相でまとめて落ち着いた印象に
文字装飾
→背景色や文字色を調整しましょう。
こちらも背景にパターンを引いてみるのも◎
単位（円や％など）を数字よりも小さくするのもメリハリがついてgood
揃え
→要素の端を揃える
3.開放感のあるリゾート地
最後はリゾート！いいなあ、沖縄。
こちらは"開放感"がポイントですね。
Before
After
修正ポイントは、
フォント
→使用フォントの種類が多い余白
→"開放感"がポイントなのに余白が少ない
画像
→せっかくのリゾートの写真が活かせていない
↓↓修正ポイントは↓↓
フォント
→使用フォントは1~3種類に！
余白
→余白をたっぷり！
行間は文字に対して1.5〜1.9くらい取りましょう
画像
→背景画像にしてみましょう
模写をしよう
ポイントはわかりました！
だけどわかっただけではやっぱり上手くはなりません。そこでManaさんもデザイン力を磨くには「webサイトの模写」をおすすめしていました。webサイトの模写は↓のような手順でするといいそうです。ポイントをひとつずつまとめます。
1.模写するサイトを探す
2.デザインのポイントを考える
3.ワイヤーフレームを書き出す
4.模写
5.デザインをカスタマイズ
1.模写するサイトを探す
模写するサイトは好きなwebサイトでもいいですが、
・きっちりしたお固いイメージのサイト
・女性向け
・男性向け
・子供向け
などなど。色々な印象のサイトを模写するといいそうです。
デザインの引き出しも増えますもんね。
2.デザインのポイントを考える
模写するサイトを見つけたら、早速模写！
・・・の前にデザインのポイントを考えましょう。
考察のポイントは、以下のような点に気をつけて考えるといいそうです。
・なんのサイトか
・ターゲットのユーザー層を予想
・配色
・書体
・レイアウト
3.ワイヤーフレームを書き出す
次にワイヤーフレームを書き出して情報の整理をしましょう。
情報の整理、大事ですよね。
4.模写
いよいよ模写です！
模写をするときのポイントは、レイアウト、背景パターン、装飾（ライン、シャドウなど、細かいところまで）など、完全に再現することです！画像は気になるポイントですが、そこまで気にしなくて良いそうです。細かなディティールの作り込みを徹底的にこだわりましょう。
5.デザインをカスタマイズ
模写をした後はデザインのカスタマイズをしてみましょう。
例えば、
・英語サイト⇄日本語サイト にしてた時にどうなるか
・写真を変えたらどうなるか
・色を変えたらどうなるか etc...
など、色々なパターンを試して引き出しを増やしていきましょう。
ひとつのサイトを模写するだけで、すごく勉強になりますね！
ちなみに、このフローを10サイトもするとデザインの引き出しがすごく増えるそうです。ゴールが見えてるとやる気がさらにUPしますね。
まとめ
Manaさんの講義のまとめです。
・読みやすさを重視して伝える
・デザインの基本ルールが大切
・常にアンテナを張ろう
◆最後に
とても長くなってしまいましたが、最後まで読んでいただいてありがとうございました！
今回のセミナーは本当に内容が濃く、あっという間の時間でした。
参加してみて、webデザインをひとつ作るのにもたくさん考えることがあり、その全てが「ユーザーの満足」にも「ユーザーの不満」にも繋がり得るなあと改めて感じました。
まだまだ見た目の作りこみに熱中してしまうことが多く、全体を広く観れていないと感じることもありますが、普段の何気ない物事から観る解像度をあげていきたいなと思いました。
ここは違うよ〜などご意見、ご感想あればコメントや、Twitter（@tsukamo_com）もやってますので、ぜひぜひ教えてください*^^*
ではではノシ
この記事が気に入ったらサポートをしてみませんか？