非デザイナー向けwebデザインテクニック 13.02.13
TRANSCRIPT
趣旨“見た目”に関するポイント非デザイナー向けスライド。正しいコーディングや最新技術はまた今度。・企画から実際にWebサイトにするまでの工程・悪い例を作り直してベストに近い状態にする・マージンの取り方や配色、しっくりくる見た目にするポイント
何のためにわざわざデザインする?という事についての考え方。
今回はまず、一例の開始から完成までを追いながら、
・企画から実際にWebサイトにするまでの工程・悪い例を作り直してベストに近い状態にする
上記2つをセットで見て行きます。完成までに実際に右往左往している場面も載せているので、なぜこれじゃダメなのか?という点に注目してください。合わせて、その合間合間に
・マージンの取り方や配色、しっくりくる見た目にするポイント
を含めて解説して行きます。
写真中心という事で、トップページではこのように写真が並ぶレイアウトにしてみた。まずは、ほかのサイトでもよくある形式を真似て用意してみる。※ロゴは阿部さんが作成した各記事のページは、通常のブログ同様、縦長に記事を読む事ができる事を想定した。トップと内部ページのレイアウトは別々。トップを見れば “最新の更新がすぐに一覧でわかるように” ということでこういうレイアウトにした。
まずは山の画像を背景に配置してみる。背景と画像類を合わせてみるため、トップキービジュアル部分に画像も配置してみた。
微妙。山の写真自体、あまりクオリティの高い写真ではないし、このクオリティのモノクロでは少しイメージを暗くしてしまう。
合わせやすく白背景?しかし、ワンゲル部にはちょっと合っていない。妙な爽やかさがアウトドアというイメージではない。あと、ひとまず置いてみたキービジュアルの部分、ブログに必要だろうか?ワンゲル部の存在アピールにはなっているかもしれないが、古くささがあるしなにより変動しないでかい画像がここに鎮座するのは、うざったいかもしれない。
せっかく写真がメインのサイトなのだから、ということで背景に写真を配置した。一定時間で写真が切り替わるイメージ。キービジュアルを取払い、新着記事のサムネイルがずらりと並ぶようにしてみた。ずらりとならんだサムネイルはまあレイアウトとしては悪くはないが、背景が絶望的にアウトである。写真に写っているものがサムネイルで隠れる上、背景が内容を紛らわしくさせてしまっている。さらにロゴが背景と同化して文字が読めなくなってしまっている。
ならば、コンテンツ部背景に色を置いてみてはどうか?装飾次第では上手くまとまるかもしれないけど、これではそもそも背景に画像を配置する意味があまりない。写真類は基本的に中央に被写体がくるので、中央にコンテンツがあっては、背景に写真を置く意味があまりない。
「ワンゲル部のイメージを伝える」背景が単色等ではワンゲル部らしくない、写真をそのまま使う、という理由から先ほどと同じように背景には写真を配置した。今回は画面から新着記事一覧を思い切ってカット。こうすることで背景は背景でありながらキービジュアルと同じ効果を持った。また、背景写真はローテーションで様々な写真を表示するので、飽きられることは少なく、ワンゲル部の様々な風景を印象づける事ができる。
「トップで記事一覧を見れるようにする」背景の問題を解決するため、新着記事一覧はカットし、上部に新たにカテゴリーメニューを用意。メニューの項目にカーソルを合わせると、カテゴリ別の新着記事一覧を一目で見る事ができるようにした。これで一覧は収納され、背景と一覧の閲覧を同時に満たす事ができた。一覧では記事の画像も掲載。そうすることで視覚的にも内容がわかるようにした。
※カテゴリ名は本来日本語の方がわかりやすく良いが、サイトの目的が商売ではないため、わかりやすさよりアルファベットにしてアウトドアっぽい格好よさ(イメージ)を優先した。
「新着記事は一発でわかるようにする」トップを見て、「更新されてる!」と一目で分かるよう、一番新しい記事はカテゴリーに関係なく画面左下に表示するようにした。一つの記事だけならば、背景表示の邪魔にはならない。
「毎回毎回、新着記事の内容を見るまでに ワンクリックが必要ってめんどくさい!」という常連ユーザーに対する対策は、右上にRSSを設置する事で解決する。こうすることによってわざわざサイトにこなくても、RSSリーダーで新着記事を直で見る事ができる。新規ユーザーに対する印象付けと、常連ユーザーへの配慮を両立できた。
画像以外の範囲の狭い背景色は、画像の邪魔になりにくく、アウトドアに良く合う黒を選択した。文字の基本色は白(記事単体のページは除く)。ロゴや記事タイトルなどの部分的な文字の色には先ほど出た「山らしさ」から緑を選択。黒背景なので明るい緑で、さらに最近のアウトドアウェアが非常にカラフルということもあり、蛍光色の緑にした。
ロゴの部分を社名とクラブ名を色分けし、アクセントをつけてみた。こうすることで「何の何なのか」をわかりやすくできた。必要性の低さ・RSSアイコンの有名度から、RSSをアイコンのみにした。メニューにもわかりやすさをプラスするため、ピクトグラム(内容を表したアイコン)を設置した。※メニューがアルファベットでも、ピクトグラムを追加する事で、サイトのイメージを維持したままわかりやすさを向上できた。左下の新着記事部分は、キービジュアルの邪魔にならないよう、淵をできるだけ小さくした。また、「続きを読む」部分をボタンにすることにより、新着記事への誘導をしやすくした。
ここで気になったのが、メニューの部分。なぜロゴの段とメニューの段、2段にしているのか?その必要性がない。ロゴとRSSの間に空白があるし、さらにメニューの段のスペースによってキービジュアルがその分狭くなっている。使いやすさ・わかりやすさに変わりがないならば、この場合キービジュアルは広い方が良い(画面全体に表示するタイプなので)よって、メニューの位置は移動する必要がある。
メニューの問題を解決し、キービジュアルのスペースも広くなった。ロゴやメニューの文字サイズやフォントをサイトデザインとマッチし違和感のないものに変更・調整。上手くまとまり、気になるところもなくなり、トップのデザイン完成!
内部ページはこのようにしたWebサイトを見るとき、人の視線は左から右へ移動するため、メインである記事部分を左に、サブ要素であるサイドメニューは右に配置した。記事とサイドメニュー間、ヘッダと記事・サイドメニュー間とのマージンは同じ値にし、バランスをとった。マージンは左右を同じにする等、関連する要素は同じ値にすると整いやすい。
内部ページはこのようにしたWebサイトを見るとき、人の視線は左から右へ移動するため、メインである記事部分を左に、サブ要素であるサイドメニューは左に配置した。記事とサイドメニュー間、ヘッダと記事・サイドメニュー間とのマージンは同じ値にし、バランスをとった。マージンは左右を同じにする等、関連する要素は同じ値にすると整いやすい。
記事の画像の表示サイズについて画像はすべて、記事部分の横幅いっぱいのサイズ。こうすることで画像が見やすくなる。また、画像自体の縦横比は黄金比にしてある。黄金比とは、最も美しいとされる比「1:(1+√5)/2」のことで、近似値は1:1.618、約5:8。なぜ黄金比にするかは、最も美しい比率なのでユーザーに好感を持たれやすく、そして特にそれ以外にする理由がないため。※黄金比はパルテノン神殿やピラミッドといった歴史的建造物、美術品の中に見出すことができるという。また、自然界にも現れ、植物の葉の並び方や巻き貝の中にも見付けることができるといった主張がある。これらの主張から、最も安定し美しい比率とされ、意図的に黄金比を意識して創作した芸術家も数多い。(Wikipediaより抜粋)
なぜそういうデザインなのか?という理由の根底には、必ずそのサイトの目的がなければなりません。
・何が目的のサイトか?・目的を果たすのにそれは本当に必要か?・どういうUI(ユーザーインターフェイス)=見た目にするのが一番ユーザーはスムーズに動けるか
デザインがダメだと、ユーザーがコンテンツに触れる前にはなれていってしまいます。この上のサイト、凄くダメです。背景の黄色がものすごく目がチカチカするし、コンテンツもマージンがなく枠と内容がくっついていて読みにくいし、高さなども合わせられておらずバラバラで整頓されていません。ほかにもまだまだ突っ込みどころが満載です。
目的に合った適切なデザインは、ユーザーがコンテンツを理解しやすくなります。
「なにが適切か?」答えはありません。適切に近いものがいくつかあるというだけです。作ったデザインが目的に対し適切か適切ではないかは、ユーザーの立場に立ってみて、自身で判断しましょう。自分自身で使いにくい、わかりにくいと思うデザインは、目的を果たしにくい出来ということです。
(一応)Webデザインに関する一部用語Webデザインを始めるにあたって、よく聞く専門用語をざっと紹介します。
・UI(ユーザーインターフェイス):使い手(ユーザー)の操作感
・UX(ユーザエクスペリエンス):ユーザーの体験をもとにした考え方
・IA(情報アーキテクチャ):「情報をわかりやすく伝える」 「受け手が情報を探しやすくする」ための表現技術
・ユーザービリティ:ユーザーの使い勝手
・ファインダビリティ:見つけやすさ・操作しやすさ
でも!
文字を置く背景には注意背景と同化して文字が見にくい場合、文字用に背景をつける。
基本的に文字は単色の上におくのが一番見やすい。透化やグラデーションにはOKでも、
背景が写真やイラストの場合読みにくくなりやすい。
濃いものがアクティブ、薄いものが非アクティブアクティブなのは、右側の色のついた方です。
ユーザーは濃いものをアクティブ、薄いものを非アクティブと感じる。※押せる・押せない、対応・非対応などの判別 ※それらが並んでいる場合
“バナー的”などなど、リンクなのだと伝えるテクニックはいろいろあります。
逆にリンクっぽくないものをリンクにすると困惑させてしまいます。
「今日はいい天気ですね」上の文章の「天気」の部分だけが「カーソル合わせてみたらリンクだった!」となっても、カーソル合わせるまで気づかない。
その配色は本当にそのサイトに合っているのか?邪魔をしていないか
しっくりきているのは、右。右には“アイコンのベースカラーに合わせて背景はオレンジ”
という理由がありますが、左にはパープルである理由がありません。さらに見た目に統一性がなく、アイコンのイメージの
邪魔をしてしまっています。
Webサイトには、“統一感”が大切サイトデザインのルールを決めましょう。
アイコンには立体的なものを使わず平面的なものに統一する、とかテーマカラーはオレンジで、目立たせるところにはオレンジを使う、など。
ドロップシャドウはほんの少しでいいドロップシャドウ(影)を使うと、立体的に表現する事ができ、
デザインをスマートにできるケースがよくあります。しかし、右の画像のように過剰にシャドウをつけてしまうと
逆に素人っぽさが出てしまいます。ほんの少しのアクセントといった具合で、シャドウをかけましょう。
流行っている要素でも、ケースに適切でなければ使わないよくわからないところでアコーディオン(タブの一種)とか。不便になるようなら、流行っていても導入する必要はない。“何のために”という目的からブレないようにしましょう。
1. 観察する事
とにかく見ましょう。内容だけでなく、デザインを含めた全体を。時には内容は無視してデザインを見るだけでもいい。
2.「なぜこうなっているのか?」と感じる事・分析する事
※一回一回深く掘り下げる必要はありません。苦にならない程度に、無意識に感じれるような癖を付けましょう。
3. 再現するためにはどうすればいいのか?
「ここはほんのちょっとシャドウをかければこういうふうに見えるのか」「1pxフォントに陰をつけて下から光が当たっているようにすれば、彫り込まれているような表現ができるのか」といった、分析からの再現を実際にやってみて、身につけましょう。
4. デザインセンス=知識
専門学校時代の恩師から教わった事ですが、これは最もだと思っています。知識だからこそ、トレンドという言葉があるんです。生まれてから何も見ず触れずに、凄いサイトを作れる人なんかいません。観察し分析する事や、ネット上で関連記事を読む事が知識を増やす近道です。
5. デザインは組み合わせ
僕は全く新しい要素というものを今までたぶん見た事がありません。新しいトレンドもデザインも、過去どこかにある要素の組み合わせです。丸角、シャドウ、ストライプ、ドット、グラデーション…いろいろ工夫をしてみましょう。
6. オリジナルは真似から生まれる
2013年のトレンドだってgoogle mapアプリにそっくりなものがあります。それでも、それは“同じテクニックを使っている”だけであって、サイトはgoogle mapではなく別のものです。
トレンドとは誰かがやり始めたデザインをほかのデザイナーが追随して生まれるものです。オリジナルとは、真似から、組み合わせから生まれるのです。
7. 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”と検索するだけでモダンなデザインがたらふく見れます。