WEBCRE8.jp > 考える > デザインが苦手な人も分かる「デザインは全て意味がある」6つの要素

デザインが苦手な人も分かる「デザインは全て意味がある」6つの要素

この記事は約40分ぐらいで読めます

よく「全てのデザインには意味がある」と言いますよね。でも非デザイナや初心者の人はそうは言われてもピンとこないんじゃないでしょうか…。これ、説明しようと思います。

元々これはwebcre8が人にデザインを教えるとき、「細部まで考えて考えて決定するからこそデザイナなんだよ」と言う事を伝えたいが為に書こうと思ったものです。熟練者の方も、読んで同様に思われましたら是非教育に使ってみてくださいｗ

はじめに：デザインとは

webcre8は「webデザイン」の門扉を叩いてから3年程。まだまだこの世界ではwebの先輩方から学ばせてもらうばかりですが、曲がりなりにも「デザイン」というもの自体とは長く向き合ってきたつもりです。

webcre8の考えでは、例えばゲームのキャラクタの服の飾りであろうと、安売りの札の配色であろうと、webデザインのレイアウトであろうと、とにかく「デザイン」という作業は「なぜそれをそうするのか」という思考の戦いであると、今はそうなっています。

だから今webcre8自身が向き合っているのはたまたまwebデザインですが、このこと自体は建築デザインでもファッションデザインでも、キャラクタデザインでもプロダクトデザインでも同じだと思います。

「全てのデザインには意味がある」とは

よく「全てのデザインには意味がある」なんて言葉を有名なデザイナさんの言葉で聞いたりしませんか？なんだか凄そうですよね。だって全てですよ全て。むしろもしかしてなんか凄そうに言ってるだけなんじゃないですかねｗ

例えば隣で働いてるデザイナさんが提出してきた手書き風のサイトデザイン。なるほどサイトのテーマがこうだから手書き風、文字もかわいらしくまる文字のフォントで。これは分かりやすいですね。サイトの全体的な雰囲気はデザインを知らなくてもぱっと見どう見えると言う印象があります。なるほど「デザインには意味がある」のだろうなとすんなり納得できます。

でも、では先輩のwebデザイナの方々がひょいひょいと配置して行く色やテクスチャ。そしてすごく考えてたと思ったら「それどこを変えたんですか？」と思ってしまうような微妙な幅や配色を変えていたり。こういうのも「デザインには意味がある」ということなんでしょうか。だとしたらデザイナは一つのものを作るとき、一体どこまで考えなきゃいけない、またどこまでなら考えなくても構わないんでしょうか。

「全てのデザインには意味がある」 ― デザインを勉強しだしてこの言葉を聞き、「つまりそれってどういうことなの？」って思ったことはないでしょうか。webcre8はありますｗそしてwebデザインを学びだしてこの言葉に躓いている人も見かけます。今回はこれについて、特にwebデザインの実作業に焦点を絞って、主に重要だと思う6つの要素について、webデザイナの我々がどんなことを考え選択、決定しているか、これについて書いてみたいと思います。

webデザインの重要な要素…例えばテキスト。

見出し、普通の文章、リスト等

よく「普通の文書」の例としてwebcre8はwikipediaを引き合いに出すのですが、今回ブログでもご登場頂きましょう。

wikipediaの通常とスタイルシートを切った状態

Wikipedia

最低限のレイアウトや装飾以外は非常にプレーンで、実際のところwebの情報は全てこれでいいんじゃないかと思わされるくらいですｗでもまあ、それは味気ないですけどねｗ (個人的にはwebは「図書館」であり、「遊園地」であり、「公園」…つまり、様々なものであって欲しいのです)

スタイルシートを切ってみても見出し、段落見出し、情報、目次、内容、出典と非常に理に適った順番でコンテンツが並んでいるのが分かるでしょうか。

見出し、小見出し、段落などのデザイン

デザイナは、制作するサイトで作りたい雰囲気にそぐうようなサイトの特徴を提案もしくはディレクタから受け取ります。そして本文、コンテンツ内はそれを実現する範囲内で見出しを見出しとして目立たせたり、見出しと段落をグルーピングして内容を整理し、読む人がストレスなく閲覧し、頭に入りやすいようにします。

可視性と可読性

可視性とはそれがあることが見えやすいかどうか、可読性とはその名の通り文字が読めるかどうかです。

例えば文字を太字にすると基本的に目立ちますが、それは同じ太さで書かれた文章の中だからこそ、見出しらしく目立ちます(可視性が高い)。強調を表すemタグや重要性を現わすstrongタグもデフォルトでは太字になりますね。

この見出しや強調部分が太くなかったりすると(他にも色も変えず間隔も空けてなかったり)普通の文章と違う「見出し」や「強調」等を見た目では見つけにくいですね(可視性が低い)。

可読性の高い見出し、可視性の高い見出し

ですが同時に太字にすることによって特に漢字などは黒くつぶれてしまい、読みにくくなってしまいます(可読性が低い)。太字にしなければ当然普通の文字と同じようには読めます(可読性が高い)。

見出しについて言うのであれば、もし太字にした事によって漢字などが読みにくくすることを防ぎたいなら前述の見出しのデザイン、または後述する配色やフォントの違い、ホワイトスペース等で、太さを変えることなく見出しらしさを持たせることは可能です。

十分な読みやすさと見やすさが確保できていると言うのであれば他に余計な装飾や差別化は必要ないかも知れません。

ジャンプ率

まずジャンプ率とは、文書内の文字なら文字、画像なら画像の大きいものと小さいものを比較した時の差の比率です。これが大きいほど、よく言えばダイナミック、悪く言えばアンバランスになります。意図してやるならいいんですが、どのくらいが注意を引きつつまとまりなく見えないかの比率の限界と戦わないといけません。無難な比率は普通に有名なブログやニュースサイトをなんか見ていれば参考に出来るでしょう。

webcre8の良く見るブログで文字のジャンプ率が高めなのはwebディレクタ、@masa_toneさんのMaka-Veli.comでしょうか。記事を開いたとき、タイトルの見た目で何の記事かがガツンと来ます。

見出しのインパクトでまず目を引くmaka-veli.com

HTML5、CSS3、シングルページ・スクロール・パララックス、色々騒がれておりますが、まだまだFLASHの可能性もあるんじゃないっすか？ / Maka-Veli .com

他にもこれによって特に見て欲しい部分を強調したりするわけですね。

あと海外のデザインの方がジャンプ率は高めなイメージです。

ジャンプ率が低いと、よく言えば落ち着きがあり信頼感を与えますが、悪く言えば平坦で地味です。いかにもつまらない文章が書いてありそう(でも勉強になりそう、詳しそう)に見えます。もちろんこれは色やアイコン、画像等でも変わってきます。これも他の要素とのバランスです。

webデザインの重要な要素…例えばエレメント。

これも適当な言葉がなかったので微妙ですけど、ここで言うエレメントは見出しなんかも含めたコンテンツ全体の「囲み」とか、カラムとか、記事やサイドバーのウィジェットなど、サイト上のパーツ一つ一つのことです。

輪郭の有無や形、シャドウやグロウ

エレメントの角

角丸は特にソーシャルサービス等で多用された気がします

Twitter / ホーム

エレメントの輪郭はカドカドしたものより角丸の方が垢抜けた感じがしてカッコいいですよね。なんか親しみのある感じもしますし。あとデザインをやっている人から見ればひと手間作業かけてる印象もあるんじゃないかなーと思います。画像とかIE対応とかめんどいですしｗ

でも毎回毎回角丸にするのも芸がないように思えてしまいます。だからと言う訳ではないですが、webcre8は最近どっちかと言うとカドカドしたデザインでキレイにまとめているサイトが好きです。

Mach3.laBlog

Unformed Building

上記2つのサイトにはWEBCRE8.jpを作る上で参考にさせて頂きました。どこを反映できてるのかは置いといてくださいｗカッコいいですよねー★

当然適材適所です！まあ角丸の方が今風に見せられる感は否めないかなーと思ってます。

角丸について詳しい記事を書きましたので御覧ください。
[デザイン]角丸を使う理由、不自然な角丸について徹底的に分析した – WEBCRE8.jp

輪郭

あんまりブロックごとに輪郭でぐるぐる囲う必要はないんですが、コンテンツやセクションを視覚的に分ける為にはうっすらとでも輪郭をつけておけば分かりやすさの保険になります。

分割されていることさえ分かれば十分

FRAMED*

レイアウトのホワイトスペースの項でも述べますが、十分な感覚をとっておけばこれは少しも必要なかったりします。いちいちあるのは目障りだったりする場合もありますしｗ

輪郭のエフェクト

シャドウやグロウなどが質感を出す

グロウやシャドウもかっこ良さ気な演出になります。~~アフォーダンス~~シグニファイアの項で触れる物質感を出すのに使ったり、見出しのインパクトを強めたり。普通のフォトショップワークと同じですが、やり過ぎはよくないです。これに関しては過去記事の[Photoshop]レイヤースタイルの重なり方を研究するが参考になるかも。これと同じことがCSS3で作ったエレメントにも言えますよね。

あとはすっごい複雑な輪郭のエレメントとかもあります。画像のボーダーとか。コーディングした事ないデザイナが無茶なレイアウトしてコーダに怒られるって笑い話(じゃない人もいますね＞＜)はよく聞きます。

ただまあそれだって適正な理由があって作られたものなら、コーディングと言う制作上のルールに、デザインや内容が制約を受ける謂われはないと思います。ちゃんとした理由があるならコーダさんも頑張ってIE対応してくれることでしょうｗ

友人の@kojika17、こじかちんはこういうすっごいやりづらい、コーダがキレそうなデザインを考えて自分でコーディングすると言う実験をしてましたｗ作るの嫌ですけど、実際やってみればこれは修行になると思いますｗ

コーディングしにくいデザインをHTMLとCSSのみで組んでみた(前編) : Web Design KOJIKA17

ちなみに表現が媒体の制約を受けるべきでないと言う事については[HTML]素朴な疑問：空白の行は内容か装飾か ― 文章とHTMLでもちょこっと触れました。

シグニファイア

ドアノブの持つ「見た目から推測できる意味」

他に適当な言葉が思いつかないので~~アフォーダンス~~シグニファイアと言う言葉を使いますが、これは分かりやすく言うと「人が何かを使う事が出来るか」と言う意味の言葉らしいです。転じて「もの自体が持つ使い方の見た目での分かり易さ」と言う意味で使われてます。~~誤用らしいんですけど、後者の方が意味は伝わるんじゃないですかねｗ~~

アフォーダンスという言葉が誤用であるのは間違いなく、引用先のドナルド・A・ノーマンさんも後に誤用であることを認め、そのままアフォーダンスと表現していた部分をシグニファイアと言い換えるようにしているようです。

アフォーダンスからシグニファイアへ – A Successful Failure

アフォーダンスシグニファイアをwebサイトに採り入れる

引っ込んだボタンと飛び出たボタン

webサイトに物質世界の~~アフォーダンス~~シグニファイアを採り入れるという話題で一番分かりやすいのはボタンじゃないでしょうか。webサイトは殆どのコンテンツが「読む」「見る」ものなんですが、同時に必要なコンテンツを引き出す部分については「使う」と言う言葉が相応しいと思うので、こういう「見たまんま感」は重要なんです。

押せそうなのに押せない、紛らわしいエレメント

これは盛り上がっているから押す(クリックする)のではないかと判断できますし、へこんでいるとそこに書かれた機能がオンになっているのではないかと直感的に分かります。見出し等を目立たせる為に盛りあがった表現を使う事もありますが、サイト内のボタンも同じような表現を使っている場合、ユーザを混乱させてしまいます。同じサイト内で違う役割のエレメントに同じ表現を使うのは避けた方がいいでしょう。

他にも「タブパーツが現在表示しているコンテンツを伝える見せ方」や「音量、不透明度等を示すスライダ」等、様々なものに物質の~~アフォーダンス~~シグニファイアを採り入れたデザインが使われています。特にスマートフォンサイトは手で触れる感覚が強いため、こういった面での工夫がユーザエクスペリエンス(ユーザの感じる使いやすい、楽しいと言った感情を引き起こすものと理解してます)を向上させるのに一役買うのではないでしょうか。

アフォーダンスの話題についてはweb制作者の@___shiro_さんのブログに書かれています。

なぜコップはコップのデザインなのか – I’m just another scarecrow.

ちなみに誤用であることはこの記事で知りましたｗ

「webサイト」というもの自体が持つアフォーダンスシグニファイア

ちょっと正しいのか分かりませんけど近い話題なのでここにカテゴライズしました。webも既に「こういう見た目なんだからこういう機能だろ」みたいな「当然こう使うべきと思われる見た目」があると思います。

リンクの色は青。たまに下線が引いてある
左上のロゴをクリックするとトップページに行く
下向き矢印のアイコンを押すとトグルが開閉する
白い四角のエリアにはユーザが何か入力できる

上記のものは必ずしもユーザ全てが備えている共通認識ではありませんが(むしろ知らない人の方が多かったりｗ)、それなりにネットに触れていれば知らず知らずそういうものだと思われるものです。これら「当然そうだろうと思う」ユーザの認識を、デザイン上の理由や意外性を持たせ印象付けるなどの目的で裏切るのはほとんどの場合マイナスにしかなりません。

リンクしていない青いテキスト、左上のロゴ

ターゲットにもよるのでしょうが、「クリックできそうなのに出来ない」のは前項にも書いたようにユーザのストレスにもなりえます。リンクでない強調等に青色や下線を使うのは相応しくないでしょう。「ロゴをクリック」は誰もがそうするわけではありませんが、今や目にするブログサービスのタイトルやヘッダ画像は目にするもの全てトップへのリンクが張られています。むしろあえて張っていないサイトが何故張っていないか気になったりしますｗ

これらは常にそうしろと言う話ではありませんし、単に予想される挙動が起きない程度の差ならさほど問題ありません。例えばリンクの色がサイトのキーカラーだったり、そう言うサイトもあります。

でも例えばトップのロゴをクリックしたら急にPDFのダウンロードが始まったり、コメントエリアの四角がただの飾りだったり、予想される挙動に反した別の挙動が起きるのはまずいですよね。絶対まずいですｗ

webサイト利用者の持つ共通認識を利用する事や意外性の使い方に関しては[web制作]「このサイトについて」を設置しよう ― 情報の伝え方に出る「伝えること」に対する姿勢で書いています。気になる人は目を通してみてください。

あと、もっとこの話題の詳しいこと、さっきのブログのこちらに書かれています。

ユーザーの期待通りの配置 – I’m just another scarecrow.

他にもこのブログにはweb、デザインについて示唆に富んだ内容が書かれているので、興味ある方は是非他の記事も。デザインには多面的な見方が必要、というようなことが主に書いてあると思います。

webデザインの重要な要素…例えばレイアウト。

ファーストビュー、縦の順番

基本的にエレメントは必要な順番に並んでいる

基本的に、webサイトと言うものは一番初めから読まれます。スクロールしやすいとか、環境によって違う部分はありますし、昔ほどファーストビューって言葉は聞かなくなりましたが、物理的にもファーストビューは必ず目に入り、フッタはスクロールしなければ見えません。自ずと重要な順番から上に置き、頻繁には使わないものは下に置きます。

パーツの順番までデザイナがコントロールすることは出来ない場合もあるかも知れませんが、その場合でもこの配置がベストか疑ってみるのは勉強になる筈です。

例えばブログにおいて、サイト内の記事を検索できる検索窓はわりと重要です。でも、適切に記事にタグ付けされていれば検索はそのサイトにとってはさほど重要ではないかもしれません。タグで探して欲しいのなら検索窓より上にタグクラウドを置くのもアリな訳です。

WEBCRE8.jpでは現在タグクラウドが上にある

「サイト内検索」と言う行為自体、望んだ情報が得られなければ繰り返し行うものであり、そのたびにスクロールを強いられるのはユーザにとってストレスです。特に情報サイトであれば極力上の方に検索窓を置くのが望ましいと思います。

大きなフッタに色々な情報を配置するのが一部で流行っていますが、フッタまで見るのはサイト自体を気に入り、最後まで見たいと思った人のみです。あなたが自分の情報を「既に興味を持ってくれた人」に見せたいならプロフィールをフッタに置くのは適切ですが、「まだあまり興味を持ってない人」にも見せたい、むしろプロフィールで興味を持って欲しいのなら、それはサイトの上の方に置かないとそもそもユーザの目に触れられません。

挙げればきりがないですが、このようにあなたの想定するユーザがサイトに訪れた場合、どういう行動を取るかを考えてみる事で理想的なコンテンツの順番は見えてきます。

検索ワードでヒットし、記事ページにランディング→読む→理解が不十分なので検索窓やカテゴリを探す→記事を読む→解決→ソーシャルメディアにシェアしたいと思いボタンを探す→シェア→離脱
記事のツイートを見かけ、記事ページにランディング→面白かったのでサイト自体のことが知りたくなりトップページに向かう→提供するサービスのバナーに目が行く→離脱

と言った感じです。あなたがユーザにいちばんして欲しいことをしやすいように配置を考えるとよいと思います。

カラムレイアウト、横の順番

縦の順番の他に横の順番も重要です。一般にサイトは左から見られると言われ、これはwebが横書きなことからもわかりやすい話だと思います。セオリーとしては

ブログは文章がメインの為(ランディングも記事ページであることが多い)一番左に記事があり、更によく知りたい人のために右サイドバーに検索やカテゴリ一覧がある
ECサイトはサイト内で欲しいものを探して欲しいため、検索やカテゴリが左にある。商品を見るのはその後
写真を見せたいサイト、一覧させたいサイトは全部をぱっと見せたいためにグリッドレイアウトにする

と言った形になるのだと考えられます。

ブログでも強くサイト内を回遊して欲しいと考えるサイトは最新記事を見せる為にサイドバーを左にしたりしていますね。マガジン系のサイトに多いと思います。記事ヘッダのサムネイルに自信があるならブログでも一覧ページにはグリッドレイアウトを使うでしょう。

ホワイトスペース

テキストの項の見出しの部分でグルーピングや可読性については書いていますが、レイアウトの場合のホワイトスペースとはそれと同様に文章やコンテンツを見やすくする事やグルーピングの為に文字と文字、ブロックとブロックの間に空ける間隔であり、仕切り線などと同じ役割を果たすものです。

要は仕切り線やボックスを囲むボーダーがなくても、十分なエレメントごとの間隔がとられていることによって読み手にコンテンツが分離されていることを認識してもらえると言う事です。

このブログを見て、それぞれ見出し、小見出しと段落、段落と段落の間、画像、ボックスと内容の間等、適正な間隔が空いているのか考えてみてください。ちなみに今のこのサイトの状態を悪い例として、修正を加えていく記事を書く予定ですｗツッコミはリニューアル後に！ｗ

見出しと段落はセットな訳ですから(見出しと分かる範囲で)近い方がいいですよね。次に続く段落は前の段落とは別の段落ですが、二番目の段落も最初の見出しに対応した段落なので、最初の段落から始まっているセクションに含まれていることが分かる程度の間隔にしておくのが望ましいです。

段落が複雑化してもアウトラインを意識すれば分かりやすい

この話題、ちょっとHTML5の見出しとアウトラインに似てますよね。HTML5がアウトラインでやろうとしていることは、まさにこういうコンテンツの意味的な階層関係の構築だからです。文章のアウトラインが理解できない場合はこちらの記事、[HTML5]アウトラインで迷わない！ sectionと見出しについてでちょっと確認してみてください。と言ってもこの記事も長いので一旦置いといてもいいですけどｗ

一応、写真やアートワークでもこの言葉が使われることがありますが、ここでは置いておきます。

ホワイトスペースに関してはweb制作者の@vanillateさんの以下の記事が詳しいです。分かりやすい画像で説明してくれてます★

ホワイトスペースを使ったウェブデザインの考え方 – バニデザノート

黄金比

黄金比と白銀比

黄金比は個人的にはあんまりピンとこないことも多いですｗ特に長方形を作るときはどうも横長に見えるんですよね…。例に出して言うなら名刺のサイズが55mm×90mm(1:1.636のほぼ黄金比の長細さ)ですが、写真のL版が88mm×127mm(1:1.443で黄金比より短い。白銀比に近いか)で、L版の方がwebcre8には美しく見えます。

まあとはいえ、先人たちの生み出した比率がそんな悪いわけないし、実際長方形以外の配置では参考になってます。勿論本当にこの間隔で良いのか、疑ってかかるのもありです。

黄金比は1.618です。まあこれについても@kojika17さんががっつり記事を書いてますのでそちらを参考に！

デザインの基礎、黄金比から大和比、第2黄金比まで : Web Design KOJIKA17

整列

テキストの項で触れたかったんですが、基本的にエレメントにもなんにでも言えることなので。

基本的にテキストは頭を揃えます。見出し等を目立たせるときに少し本文の整列したラインからはみ出させたりしますけど、これもはみ出した見出し同士が揃っている必要があると思います。CSSで指定すれば普通は揃いますけど、画像見出しなんか結構でこぼこな見出しも見かけるんですよね。

で、頭を揃えない場合は中心で揃えたりもします。昔は中央揃えの見出しって多かった気がしますが、今は携帯サイトでしかあまり見かけませんね。PCで見ると画面が広いため横の視線移動が多くなるからか、普通に左揃えにするのが無難なようです。

中央揃えの見出しと端揃えの見出しの飾り

よく見出しの頭にボーダーやアイコンをつけたりします。これは中央揃えはシンメトリー(左右対称)、端揃えはアシンメトリー(左右非対称)。という事を意識するといい感じになると思います。

シンメトリー、アシンメトリーに逆らう。不自然ですよね

例えば左側にアイコンをつけたのに中央揃えの見出しはなんかちょっと変です。反対に両側に飾りがついている場合は中央揃えのほうがしっくりくる気がします。

整列に関しては@WebDesignRecipeさんの記事が詳しかったので知りたい人はそちらへ。

デザインの基礎力をワンランクアップしたい私（Webデザイナー）の注意書き

と言うかこの辺の記事で、当記事で触れてない要素は全部フォローできると思いますｗ版面率と図版率等、完璧な説明がされていて特に言う事がないので、ここでは書きません。レシピさんの記事はマジですごい…。

webデザインの重要な要素…例えば配色。

メインカラー、ベースカラー、アクセントカラー

こういう言葉、デザインの世界ではよく聞きます。

WEBCRE8.jpの配色

メインカラー…サイトのイメージを作る主な色
ベースカラー…サイトの背景の色
アクセントカラー…メインとベースの中で目立つ色

この辺のことに関してはもう何も言う必要がないくらい以下のスライドが語ってくれています。

色彩センスのいらない配色講座

もっと具体的な話しなら@webcreatorboxさんのブログWebクリエイターボックスのコチラの記事を。

配色パターンからWebデザインを考える | Webクリエイターボックス

色彩検定の参考書でも読むぐらいでもかなり知識を得られると思います。

こういった知識やセオリーも織り込み、例えばロゴ、背景、リンクの色、強調した時の文字の色や目立たせたい登録ボタン等の色を決めます。

まあでも色に関してはまた別途自分の言葉で語りたくもありますｗいつか書くかもしれません…。

リンクの色

前述の通り、リンク色は青系の方が安心です。細かいブラウザ間の差はあるものの基本的にリンクは

未閲覧のリンク…青または明るい青
既閲覧のリンク(:visited)…紫
マウスオーバー(:hover)したリンク…赤
アクティブ(:active)なリンク…赤

といった共通点があると思います。

未閲覧のリンクの色はリンクの量によってはぱっと見のサイトの色合いを結構変えてしまうので、これをメインカラーに合わせたりするサイトが目立ちました。その場合も、例えばリンク色を黒にしている場合はアンダーバーを残す等のバランスがとられています。

WIRED.jpのタイトル。マウスオーバーでメインカラーに

WIRED.jp 世界最強の「テクノ」ジャーナリズム

そうでない場合もある程度セオリーのようなものがあり、未閲覧のリンクのカラーを基準に

既閲覧のリンク(:visited)…もとより暗く
マウスオーバー(:hover)したリンク…元の色の補色や元の色より明るい色
アクティブ(:active)なリンク…元の色の補色や元の色より明るい色

と言った挙動に対応した色の選び方がされていると思います。

色は1667万色あると言う事

例えば完全な白は#ffffffですが、あんまり白いと明るくて目にキツイと言う人もいます。反対に完全な黒、#000000を安易に置いてしまうと、そのエリアではもうそれ以上濃い色の表現はなくなってしまいます。特に黒に関しては、完全な黒はここぞと言う時にしか使われないようです。

WEBCRE8.jpの黒い部分の色

その色は本当にベストなのか

「ここを赤で作ってください」と言う指定があったとします。その場合どの色を置くでしょう。#ff0000でしょうか。これは完全に純粋な、彩度のが最大に高い赤です。ですが、もしサイトが「大人の雰囲気を出したいスタイリッシュなサイト」であった場合、純粋な赤は果たして本当に使うべき赤でしょうか。渋い赤の方が似合ってる気がします。216色内で決めるなら、#990000でしょうか。

モノトーンに純粋な赤は映えますが、暗い赤は大人な雰囲気を出せます

もちろんそれで終わりじゃありません…突き詰めていけば色は1667万色あります。

急に1しか数値の違わない色2つを並べてもまあ、分からないでしょう。でもさっきの例で言うなら#990000と#aa0000は、どちらかと言えば#aa0000の方が鮮やかなわけです。#990000よりもちょっと鮮やかな方がいいんじゃないか？と考えれば#a40000の方が若干似合っているかもしれません。極端に言えばこうして、突き詰めようと思えば最後の1色まで考えることは出来るというわけです。

微妙な色の違い

サイトを作るとき、既に作ったサイトのソースコードをベースに作ることがあるとします。それを、そのCSSで指定されていた文字の色を「まあそのままでいいや」と使ったりはしません。ピッカーに入っている前に使った色をそのまま置いたりもしません。時間さえ許すなら、そのサイトに一番合った色を探すんです。

webデザインの重要な要素…例えばタイポグラフィ。

フォントの持つ雰囲気

文字にサイトの持つ雰囲気を委ねることがあります。内容ではなく、文字の見た目の部分ですね。大雑把に言ってしまうと明朝、セリフは文にアカデミックで知的な印象を与え、ゴシック、サンセリフ体はクールな雰囲気を持たせます。

文字の持つ背景も大事です。例えばMS Pゴシックは良くも悪くもパソコン自体と同じ年月を歩んで来ており、文章に「昔ながら」と言った印象を持たせてしまう可能性があります。以下の記事ではフォントの作られた国等の背景がフォントの運用に影響を与える例を語っています。

欧文フォントにお国柄はあるのか？: tonan’s blog

この文では眉唾ものとされていますが、フォントを知ってそれをデザインに活かすことは素晴らしいと思います。日本語にローカライズされたゲームの感じに中国語フォントがあたっているいることを気にする人がいるように、全く関係ないと言う事はないんじゃないかなーと思います。

一つ一つのフォントを全て知るのは難しいと思いますが、以前当ブログで行った「ブロガーの皆さんが好きなフォント一つについて語る」#LOVEFONTという企画では、フォントの来歴、相応しいシーンなどをデザイナさん、フォント好きな人達が解説してくれています。自分の好きなフォントからでも良いので、フォントのことを知ってみてはいかがでしょうか。そしてもし特定の好きなフォントがある人はこういう記事を書いてみては、と軽く宣伝をしておきますｗ

シンプルで重厚。webcre8の愛するフォント「Impact」 #LOVEFONT

もちろん好きだからと言って特定のフォントに固執するのはよくないです。とにかく色んなフォントを見て、実用例も見て、ある程度「このデザインではコレ」と言った自分の中でのセオリーを探すのです。そしてときにはそれを疑ってみるのも忘れずに。

フリーフォント、有料フォント

有料フォントの中には、さすが有料フォントと頷かせてくれるものがたくさんあります。または、そのフォントの個性が強すぎるあまり、そのフォントを使う事自体が意味を持つ場合もあるようです。作るサイトの予算にもよりますが、数あるフォントの中の、サイトのイメージに一番マッチしたものを探そうと思えば、即決で決められてしまうものでないと言う事は間違いないと思います。

一世風靡したfont「丸明オールド」 #LOVEFONT – miencoblog

かっこよすぎるイケメンフォント「AXIS（アクシス）」#LOVEFONT | Backless -バックレス-

ミゾレの愛するフォント「ミウラFONT」 #LOVEFONT | ウェビメモ

以上三つの記事はわざわざ何故この有料フォントを使うか、その意義について書かれた記事です。#LOVEFONTの中からピックアップしてみました。

文字組み

文字組みについては正直なところそうたいした知識も持ってないので語ることがないのですが…ｗ日々勉強中です。ですが「文字組みについて考えている人がどういう事を考えているのか」と言う事に関してはうwebデザイナの@Stocker_jpさんの以下の記事に詳しいです。

[Webデザイン] 文字組みについて本気出して考えてみた | Stocker.jp / diary

もちろん詰めた方が見やすい、見にくいと言うのはやはり使われる場によりますが、詰めないなら詰めないで、詰めない理由がありますよね、と言うことでもあります。

webデザインの重要な要素…例えばグラフィック。

グラフィックやクリップアートの配置

過度な装飾はときに「デザインとアートを勘違いしている」等と揶揄されます。これは確かにその通りだったりします。

ですがそれは当然やりたいデザインを重視するあまり、ユーザビリティであったり、アクセシビリティであったり、ページ表示速度であったり、目標の達成であったり、webサイトが意味あるものになるための何かしらの要素をないがしろにした結果生まれる悲劇であると思っています。

デザイン自体が悪いわけじゃない。そのデザインのバランスが悪いんです。

華美な装飾が醸成する、ユーザのブランドへの憧れがあります。

ダイナミックな表現が生み出すサービスへの期待があります。

美しいレイアウトがお店のイメージに清潔感をもたらします。

極端に言ってしまえば、サイトに訪れた人に「ここは美しくて雰囲気があって料理も美味しいお店なんだろうな」と思わせることが出来るなら、後は場所さえ伝えられれば説明が読めなくてもお店のブランディングと集客が出来ていることになりますよね。全く読めない外国語のサイトを見るときのことを考えてみましょう。

ユーザが「サイトがキレイだから見るのやめる」なんてことはないです、多分ｗでも、「キレイなサイトが表示されるまでが遅い」とか「キレイだけど何のサイトかわからなかった」はめちゃめちゃあります。その差を考えて作るということです。

写真

写真選びも重要ですし、その後の加工も重要です。用意された写真をそのまま使うなんてことはありません。写真を軸にサイト作る場合は別ですけどね。

それは何故か。その用意された写真はほとんどの場合他の目的の為に撮られたものか、またはまだ何のために使う写真なのか決まっていないまま撮られたものだからです。素材集の写真だと特に、撮った時点でどんなサイトに使われるか分かりませんよね。

webで交流させて頂いている@susipakuさんのPAKUTASOは写真を予め加工した状態で公開されています。こちらの写真はそのまま使ってもいい高品質ですが、やはりサイトの雰囲気に合わせた何かしらの加工は突き詰めれば必要だということになるでしょう。

加工により写真の訴える意味も変わる

写真のコントラストや色合いによって写真の持つ意味や雰囲気はがらりと変わります。サイト自体が暗いカラーリングなら調和させる為にコントラストも落とす(濃さがはっきりしないようにする)かもしれないですし、アーティスティックな雰囲気を出したければコントラストは強くする(暗い部分と明るい部分の差を強くする)ことが多いです。

写真を加工することの是非については[デザイン]なぜレタッチするのか。記憶色とか写真とか心象風景の話で触れています。結構重要な事を書いているつもりなので、ECサイトのデザイナさんや、特に写真加工に携わりたい人に押さえておいて欲しい内容です。

アイコン

アイコンについても[デザイン]アイコンを作りたい人へ。作るべきキーワードを集めましたという記事でアイコンの作り方や使い方を書いてます。なんかこうして書いていると、わりとWEBCRE8.jpにはちゃんとデザインの記事がありますね…ｗこの記事を書いている時点で45記事目なのですが、こうして自分の記事に言及出来るのはなんか嬉しいですねｗ

わりとこの記事でアイコンについて言いたいことは言いきっているんですが、もう一度特に言うとすれば、「アイコンに頼らない」と言う事でしょうか。と言いつつWEBCRE8.jpのヘッダのカテゴリアイコンには文字が添えられていませんがｗこっちはまあ、装飾みたいなもんなのです。サイドバーでもカテゴリが選べますしね。一応PCで見る人にはホバーでツールチップも出しています。このように、情報がデザイン上の理由で何か不足してしまう場合は他の要素でフォローすることが必要なんじゃないかなと思ってます。「時と場合による」と言うやつですねｗ

グラデーション、テクスチャ

サイトの高級感や雰囲気などを盛り上げる為、コントラストの低いディスプレイでは見えなかったりするほどの薄いグラデーションやテクスチャを乗せたりします。あんまり濃いとコンテンツが見づらくなるので、あくまで雰囲気づくりに。もちろんガッツリ濃く壁紙を張ってインパクトを出すのもアリです。最近はCSS3によって画像を使わずグラデーションが作れたりするので一概に画像とは言えないですが、色を置くだけでは出来ない演出と言う意味でグラデーションも立派なグラフィック表現です。

背景画像が強いと主張が強くなる

365 awesome designers

ただ画像を作ってポン、と置く訳ではなく、不透明度をいじったりして最適な背景画像の主張の度合いを加減します。

終わりに：デザインとは

デザインのセンス

いかがでしたでしょうか。「プロにはセンスが備わっている、だからカッコいいデザインをすいすい作っていく」と思われがちですが、作っているもののうちのほとんどは、その人が沢山のデザインを見、制作してきた経験から導き出された最適解を引き出しから出して来ているのであり、その選択は極めて論理的なものであると思います。

デザイナの仕事は、分からない人からすれば分からないだけに、まるで1や2の企画発案段階から急に10が出来あがってくる、まさに魔法のように見えることと思います。そして同時にこれまた途中の段階が分からないが故に、「プロならぱぱっと出来るんでしょ」という風に考えてしまう場合もあるのではないかと考えます。この記事はそのデザイン制作の、6から10くらいの間(ディレクタが全体を設計後から最後のディティールの詰めの部分まで)を中心に説明したつもりです。

小手先とも言える要素もありますが、以上の要素は全て人がそのサイト、コンテンツ、記事、販売物などについて「どう見えるか」に関わってくるものです。

そしてそのデザインに対する細部までの拘りは、一つ一つは誰も気付かないような工夫であったとしても、それが全体と調和し、デザインに詳しくない人にすら「何となくいいな」と思わせます。

デザイナはこういったことを無意識に、出来ないなら意識して考えて、一つ一つのパーツを作り、全体の完成度を上げて行くのです。