デザインのポイントと、Webデザインとは何か？

＠keita_kawamoto

Webデザインテクニック

趣旨“見た目”に関するポイント非デザイナー向けスライド。正しいコーディングや最新技術はまた今度。・企画から実際にWebサイトにするまでの工程・悪い例を作り直してベストに近い状態にする・マージンの取り方や配色、しっくりくる見た目にするポイント

何のためにわざわざデザインする？という事についての考え方。

今回はまず、一例の開始から完成までを追いながら、

・企画から実際にWebサイトにするまでの工程・悪い例を作り直してベストに近い状態にする

上記２つをセットで見て行きます。完成までに実際に右往左往している場面も載せているので、なぜこれじゃダメなのか？という点に注目してください。合わせて、その合間合間に

・マージンの取り方や配色、しっくりくる見た目にするポイント

を含めて解説して行きます。

ではさっそく始めましょう。

状況“写真中心の、部活動の活動記録ブログ”・目的は、存在のアピール・活動内容を知ってもらいたい・写真がない事はない（写真が主役と言ってもいい）・活動内容は登山・キャンプ・クライミング・釣り・その他

写真中心という事で、トップページではこのように写真が並ぶレイアウトにしてみた。まずは、ほかのサイトでもよくある形式を真似て用意してみる。※ロゴは阿部さんが作成した各記事のページは、通常のブログ同様、縦長に記事を読む事ができる事を想定した。トップと内部ページのレイアウトは別々。トップを見れば “最新の更新がすぐに一覧でわかるように” ということでこういうレイアウトにした。

しかしサイトのベースカラーや、背景はどうする？目的にある “存在のアピール” から、ワンゲル部のイメージをストレートに表現できるものがよかった。

まずは山の画像を背景に配置してみる。背景と画像類を合わせてみるため、トップキービジュアル部分に画像も配置してみた。

微妙。山の写真自体、あまりクオリティの高い写真ではないし、このクオリティのモノクロでは少しイメージを暗くしてしまう。

次に、山らしい「緑」を背景にしてみた。微妙。この状態では写真が生きていないし、山なので緑で間違いではないがワンゲル部っぽさはない。なので却下。どうもワンゲル部は特定の色で表現するのに向いていない。

合わせやすく白背景？しかし、ワンゲル部にはちょっと合っていない。妙な爽やかさがアウトドアというイメージではない。あと、ひとまず置いてみたキービジュアルの部分、ブログに必要だろうか？ワンゲル部の存在アピールにはなっているかもしれないが、古くささがあるしなにより変動しないでかい画像がここに鎮座するのは、うざったいかもしれない。

せっかく写真がメインのサイトなのだから、ということで背景に写真を配置した。一定時間で写真が切り替わるイメージ。キービジュアルを取払い、新着記事のサムネイルがずらりと並ぶようにしてみた。ずらりとならんだサムネイルはまあレイアウトとしては悪くはないが、背景が絶望的にアウトである。写真に写っているものがサムネイルで隠れる上、背景が内容を紛らわしくさせてしまっている。さらにロゴが背景と同化して文字が読めなくなってしまっている。

ならば、コンテンツ部背景に色を置いてみてはどうか？装飾次第では上手くまとまるかもしれないけど、これではそもそも背景に画像を配置する意味があまりない。写真類は基本的に中央に被写体がくるので、中央にコンテンツがあっては、背景に写真を置く意味があまりない。

そこで、

・ワンゲル部のイメージを伝える・トップで記事一覧を見れるようにする・新着記事は一発でわかるようにするということを念頭において、もう一度ゼロからレイアウトし直した。

「ワンゲル部のイメージを伝える」背景が単色等ではワンゲル部らしくない、写真をそのまま使う、という理由から先ほどと同じように背景には写真を配置した。今回は画面から新着記事一覧を思い切ってカット。こうすることで背景は背景でありながらキービジュアルと同じ効果を持った。また、背景写真はローテーションで様々な写真を表示するので、飽きられることは少なく、ワンゲル部の様々な風景を印象づける事ができる。

「トップで記事一覧を見れるようにする」背景の問題を解決するため、新着記事一覧はカットし、上部に新たにカテゴリーメニューを用意。メニューの項目にカーソルを合わせると、カテゴリ別の新着記事一覧を一目で見る事ができるようにした。これで一覧は収納され、背景と一覧の閲覧を同時に満たす事ができた。一覧では記事の画像も掲載。そうすることで視覚的にも内容がわかるようにした。

※カテゴリ名は本来日本語の方がわかりやすく良いが、サイトの目的が商売ではないため、わかりやすさよりアルファベットにしてアウトドアっぽい格好よさ（イメージ）を優先した。

「新着記事は一発でわかるようにする」トップを見て、「更新されてる！」と一目で分かるよう、一番新しい記事はカテゴリーに関係なく画面左下に表示するようにした。一つの記事だけならば、背景表示の邪魔にはならない。

「毎回毎回、新着記事の内容を見るまでに　ワンクリックが必要ってめんどくさい！」という常連ユーザーに対する対策は、右上にRSSを設置する事で解決する。こうすることによってわざわざサイトにこなくても、RSSリーダーで新着記事を直で見る事ができる。新規ユーザーに対する印象付けと、常連ユーザーへの配慮を両立できた。

画像以外の範囲の狭い背景色は、画像の邪魔になりにくく、アウトドアに良く合う黒を選択した。文字の基本色は白（記事単体のページは除く）。ロゴや記事タイトルなどの部分的な文字の色には先ほど出た「山らしさ」から緑を選択。黒背景なので明るい緑で、さらに最近のアウトドアウェアが非常にカラフルということもあり、蛍光色の緑にした。

ロゴの部分を社名とクラブ名を色分けし、アクセントをつけてみた。こうすることで「何の何なのか」をわかりやすくできた。必要性の低さ・RSSアイコンの有名度から、RSSをアイコンのみにした。メニューにもわかりやすさをプラスするため、ピクトグラム（内容を表したアイコン）を設置した。※メニューがアルファベットでも、ピクトグラムを追加する事で、サイトのイメージを維持したままわかりやすさを向上できた。左下の新着記事部分は、キービジュアルの邪魔にならないよう、淵をできるだけ小さくした。また、「続きを読む」部分をボタンにすることにより、新着記事への誘導をしやすくした。

ここで気になったのが、メニューの部分。なぜロゴの段とメニューの段、２段にしているのか？その必要性がない。ロゴとRSSの間に空白があるし、さらにメニューの段のスペースによってキービジュアルがその分狭くなっている。使いやすさ・わかりやすさに変わりがないならば、この場合キービジュアルは広い方が良い（画面全体に表示するタイプなので）よって、メニューの位置は移動する必要がある。

メニューの問題を解決し、キービジュアルのスペースも広くなった。ロゴやメニューの文字サイズやフォントをサイトデザインとマッチし違和感のないものに変更・調整。上手くまとまり、気になるところもなくなり、トップのデザイン完成！

内部ページはこのようにしたWebサイトを見るとき、人の視線は左から右へ移動するため、メインである記事部分を左に、サブ要素であるサイドメニューは右に配置した。記事とサイドメニュー間、ヘッダと記事・サイドメニュー間とのマージンは同じ値にし、バランスをとった。マージンは左右を同じにする等、関連する要素は同じ値にすると整いやすい。

内部ページはこのようにしたWebサイトを見るとき、人の視線は左から右へ移動するため、メインである記事部分を左に、サブ要素であるサイドメニューは左に配置した。記事とサイドメニュー間、ヘッダと記事・サイドメニュー間とのマージンは同じ値にし、バランスをとった。マージンは左右を同じにする等、関連する要素は同じ値にすると整いやすい。

記事の画像の表示サイズについて画像はすべて、記事部分の横幅いっぱいのサイズ。こうすることで画像が見やすくなる。また、画像自体の縦横比は黄金比にしてある。黄金比とは、最も美しいとされる比「1:(1+√5)/2」のことで、近似値は1:1.618、約5:8。なぜ黄金比にするかは、最も美しい比率なのでユーザーに好感を持たれやすく、そして特にそれ以外にする理由がないため。※黄金比はパルテノン神殿やピラミッドといった歴史的建造物、美術品の中に見出すことができるという。また、自然界にも現れ、植物の葉の並び方や巻き貝の中にも見付けることができるといった主張がある。これらの主張から、最も安定し美しい比率とされ、意図的に黄金比を意識して創作した芸術家も数多い。（Wikipediaより抜粋）

黄金比じゃなくても、画像は大きめに表示する事をおすすめ。下のようにサムネイルが並んでいるのは、見たいときにいちいちクリックしないといけない。それになにより、ダメな余白が多くイケてない。

何のためにわざわざデザインする？

Webサイトで果たしたい事を、より円滑に、より効果的にするため。

なぜそういうデザインなのか？という理由の根底には、必ずそのサイトの目的がなければなりません。

・何が目的のサイトか？・目的を果たすのにそれは本当に必要か？・どういうUI（ユーザーインターフェイス）＝見た目にするのが一番ユーザーはスムーズに動けるか

デザインがダメだと、ユーザーがコンテンツに触れる前にはなれていってしまいます。この上のサイト、凄くダメです。背景の黄色がものすごく目がチカチカするし、コンテンツもマージンがなく枠と内容がくっついていて読みにくいし、高さなども合わせられておらずバラバラで整頓されていません。ほかにもまだまだ突っ込みどころが満載です。

目的に合った適切なデザインは、ユーザーがコンテンツを理解しやすくなります。

「なにが適切か？」答えはありません。適切に近いものがいくつかあるというだけです。作ったデザインが目的に対し適切か適切ではないかは、ユーザーの立場に立ってみて、自身で判断しましょう。自分自身で使いにくい、わかりにくいと思うデザインは、目的を果たしにくい出来ということです。

（一応）Webデザインに関する一部用語Webデザインを始めるにあたって、よく聞く専門用語をざっと紹介します。

・UI（ユーザーインターフェイス）：使い手（ユーザー）の操作感

・UX（ユーザエクスペリエンス）：ユーザーの体験をもとにした考え方

・IA（情報アーキテクチャ）：「情報をわかりやすく伝える」　　　　　　　　　　　　　　「受け手が情報を探しやすくする」ための表現技術

・ユーザービリティ：ユーザーの使い勝手

・ファインダビリティ：見つけやすさ・操作しやすさ

でも！

用語なんか知らなくてもデザインはできる

実際に自分たちでまずやってみた後。段階を踏んで、興味がわいたら、調べてみてください。

デザインする際のポイント

Webデザインをするにあたって押さえておくと便利なポイントをいくつかご紹介。

文字、読みにくくないですか？

文字を置く背景には注意背景と同化して文字が見にくい場合、文字用に背景をつける。

基本的に文字は単色の上におくのが一番見やすい。透化やグラデーションにはOKでも、

背景が写真やイラストの場合読みにくくなりやすい。

文字自体にシャドウや淵をつけて、背景との区切りをつけるという手もある。

※それでも若干の読みにくさは残る

どちらがアクティブでしょう？

濃いものがアクティブ、薄いものが非アクティブアクティブなのは、右側の色のついた方です。

ユーザーは濃いものをアクティブ、薄いものを非アクティブと感じる。※押せる・押せない、対応・非対応などの判別　※それらが並んでいる場合

強弱を活かす強弱のパターンを駆使すると、

メリハリが付き、項目と本文という事が伝わりやすく、よりわかりやすくすることができる。

“大小”　“濃さ薄さ”　“文字自体の装飾の具合”

ユーザーは何をリンクなのだと判断するのか？“ボタンっぽい”　“文章と色が違うアンダーラインのテキスト”

さらに…

“ロールオーバー”（カーソルを上にのせると反応する）

“バナー的”などなど、リンクなのだと伝えるテクニックはいろいろあります。

逆にリンクっぽくないものをリンクにすると困惑させてしまいます。

「今日はいい天気ですね」上の文章の「天気」の部分だけが「カーソル合わせてみたらリンクだった！」となっても、カーソル合わせるまで気づかない。

背景色の違う２つのデザイン。右と左、どちらがしっくりきますか？

その配色は本当にそのサイトに合っているのか？邪魔をしていないか

しっくりきているのは、右。右には“アイコンのベースカラーに合わせて背景はオレンジ”

という理由がありますが、左にはパープルである理由がありません。さらに見た目に統一性がなく、アイコンのイメージの

邪魔をしてしまっています。

色がかぶって文字が読めない場合は淵をつける背景色と文字色がどうしてもかぶる場合は、淵をつけるなりシャドウをつけるなりする事で、だいぶ良くなり、読みやすくなります。

Webサイトには、“統一感”が大切サイトデザインのルールを決めましょう。

アイコンには立体的なものを使わず平面的なものに統一する、とかテーマカラーはオレンジで、目立たせるところにはオレンジを使う、など。

ドロップシャドウはほんの少しでいいドロップシャドウ（影）を使うと、立体的に表現する事ができ、

デザインをスマートにできるケースがよくあります。しかし、右の画像のように過剰にシャドウをつけてしまうと

逆に素人っぽさが出てしまいます。ほんの少しのアクセントといった具合で、シャドウをかけましょう。

立体的なアイコンなど、場合によってはシャドウを濃くした方が良いという場合もあります。

流行っている要素でも、ケースに適切でなければ使わないよくわからないところでアコーディオン（タブの一種）とか。不便になるようなら、流行っていても導入する必要はない。“何のために”という目的からブレないようにしましょう。

Webデザイン力を磨くための大切な７つのこと

1. 観察する事

とにかく見ましょう。内容だけでなく、デザインを含めた全体を。時には内容は無視してデザインを見るだけでもいい。

2.「なぜこうなっているのか？」と感じる事・分析する事

※一回一回深く掘り下げる必要はありません。苦にならない程度に、無意識に感じれるような癖を付けましょう。

3. 再現するためにはどうすればいいのか？

「ここはほんのちょっとシャドウをかければこういうふうに見えるのか」「1pxフォントに陰をつけて下から光が当たっているようにすれば、彫り込まれているような表現ができるのか」といった、分析からの再現を実際にやってみて、身につけましょう。

4. デザインセンス＝知識

専門学校時代の恩師から教わった事ですが、これは最もだと思っています。知識だからこそ、トレンドという言葉があるんです。生まれてから何も見ず触れずに、凄いサイトを作れる人なんかいません。観察し分析する事や、ネット上で関連記事を読む事が知識を増やす近道です。

5. デザインは組み合わせ

僕は全く新しい要素というものを今までたぶん見た事がありません。新しいトレンドもデザインも、過去どこかにある要素の組み合わせです。丸角、シャドウ、ストライプ、ドット、グラデーション…いろいろ工夫をしてみましょう。

6. オリジナルは真似から生まれる

2013年のトレンドだってgoogle mapアプリにそっくりなものがあります。それでも、それは“同じテクニックを使っている”だけであって、サイトはgoogle mapではなく別のものです。

トレンドとは誰かがやり始めたデザインをほかのデザイナーが追随して生まれるものです。オリジナルとは、真似から、組み合わせから生まれるのです。

7. Webデザイナー＝アーティストではない

Webデザイナーは、目的を果たすために「デザイン」することが仕事。ユーザーにコンテンツを伝えるため・使ってもらうため、ユーザーとコンテンツ双方のことをよく考えて動く必要がある。

アーティストは、自分を表現し自分が最高にイイ！と思う「アート」を作る事が仕事。ユーザーはそれを見て惹かれる人が寄ってくる。コンテンツを「作る」人がアーティスト。「活かす」人がデザイナー。と、僕は考えています。

アーティスト気分のWebデザイナーは、大切な事を見失いそう。

Webデザイン力を磨くのに助かるおすすめサイト・記事

Design Bombshttp://www.designbombs.com/

ズルいデザインテクニックhttps://speakerdeck.com/ken_c_lo/zurui-design

2013年のウェブデザインのトレンドを探るかっこいいUIデザインのまとめhttp://coliss.com/articles/build-websites/operation/design/showcase-ui-design-2013-jan-by-dribble.html

見やすい・使いやすいレイアウトの為に考えるべき事。http://basicdesign-note.com/easytoread-layout/?utm_source=rss&utm_medium=rss&utm_campaign=easytoread-layout

イケサイ - WEBデザインリンク集 いけてるサイトドットコムhttp://www.ikesai.com/

参考になるデザイン収集サイトや、参考記事一部※星の数ほどあるので、自分で検索して見つけ出しましょう！

Cart Crazehttp://cartcraze.com/

The Design Genehttp://thedesigngene.com/

リンク不要で商用サイトにも利用可能なフリーのアイコンセットいろいろhttp://kachibito.net/web-design/free-icon-seto-for-commercial-use.html

素人っぽいデザインから脱却するための12のデザインチップスhttp://blog.we-boxes.com/design/web-design-12-tips/

Dribbble http://dribbble.com/

世界中のプロのデザイナーが集うサイト。検索窓で“ui”と検索するだけでモダンなデザインがたらふく見れます。

まとめ

Webデザインとは目的を果たすための手段。

「デザインすること」が目的ではない。“目的を果たすのにどちらが最善か”を忘れないようにしましょう。

まとめ

理由なく好き放題デザインするより、目的に対した理由をもとにデザインした方が

デザインしやすいしイケてる

まとめ

“観察”　“分析”　“再現”Webデザインは、これの繰り返し。

これがクオリティの高いオリジナルへの近道。

お疲れさまでした。