デザインって難しいですよね。プログラマーだと、なかなか勉強する時間もモチベーションも本買う金もとれないので技術的にもセンス的にもモチベーション的にも技術的にも意識的にも向上させる機会があんまないです。
とはいうものの、個人的なプロジェクトや、プロトタイプの作成など、自分でデザインまでやらねばならないーみたいな機会は結構あります。
なので、最近試行錯誤している中で会得したTipsを残しておこうと思います。なおタイトルにもあるように、「かっこいいデザインを作る」んじゃなくて「ダサくならないようにする」という、逃げ腰なエントリになります。あとなるべく大変そうなこととかはしないという方向性にします。
心構え
お手本をみつける
パクるわけじゃないよ！
シンプル イズ ベスト
なお、シンプルにはシンプルの難しさがあるんだよ！！ という意見もあるでしょう。
ただ、派手な配色や奇抜なレイアウトよりかは、ミニマルなデザインを指向したほうが失敗する確率は確実に減ります。素人がやると第二第三の愛生会病院がこの世に誕生するだけです。配色に奥ゆかしさ
原色の青とかは申し訳ないがNG。
CSSは真面目に勉強する
プログラマーならさほど難しいもんでもないです。当然メタCSSを導入します。
作業効率をあげることで、時間当たりのトライアンドエラーの回数を増やせます。また、唯一デザイナーに勝てる可能性がある部分です。TwitterBootstrapとからへんは、見た目が嫌いだし覚えても得るものなさそうなので使ったことないですごめんなさい。
手前味噌ですが以下のエントリとか見て、ちゃんとCSSでのレイアウトが出来るようになりましょう。
Windowsは諦める
あからさまなレイアウト崩れは流石にNGですけど、Windows向けに調整するのは時間がいくらあっても足りないので諦めます。その時間使って試行錯誤したり本読んだ方がいいです多分。
どうせユーザの9割はクソみたいなモニターのラップトップ（偏見）だし、フォント変えたところで気がつかないだろうし、テキストが問題なく読めればそれで良くないですか？（甘え）
はじめに
とりあえず、レイアウトと配色さえミスらなければおおむねいい感じになります。
どんなにイラレとかフォトショを駆使して、いっぱい画像を使っても、この二つがダメなだけであっという間にWeb1.0感溢れるウェブサイトになる気がします。
コンセプト
まずコンセプトを決めます。
持ち玉のない人間が適当にやって良い物を作るのは無理です。
僕が以前にSphinxのテーマを作ったときだと、
- フォーマル寄りにする（白をベースに、水色〜青系でまとめる）
- コンピューター慣れしていない人も触るので、リンクテキストなどの配色は変えすぎない（未読は青、既読は紫って感じの）
- テキストを中央寄せにして、解像度が高いモニターでもストレスなく読めるようにする
- レスポンシブに対応させる
みたいな感じのことを思い描いてました、確か。
何を伝えたいのか
コンセプトとちょっと重複します。
クソダサデザインが犯しがちな間違いの中でも一番破壊力があるのが「あれもこれも全部目立たせる」みたいなやつです。
デザインに一ミリも興味がないエンジニアと、デザインに一ミリも理解がないマーケティング部門の人間のケミストリーで生まれる「そこらじゅうに虹色の創英角ポップ体が溢れた」デザインなんかがこれにあたりますね。アレもコレも目立たせようとすると、目が滑って結局何も頭に入ってこないデザインになってしまいます。
スペースごとに、組み込める情報量というのは限界が出てくるので優先順位と、重要度の低い要素は潔く切り捨てる姿勢が必要になってきます。配置の優先順位の決め方は、視線の動き方がどうだとか色々あって難しいので本買って読んでください。
配色
コンセプト決めることで、自然と配色のイメージも固まってくるかと思います。
色を選んでいきたいところですが、その前に気をつけねばならないことがあります。まず color: blue; みたいな組み込みの色を使うのはやめましょう。
無論、#000000とかみたいな真っ黒、真っ白もNGです。
美術の授業で習ったと思いますが、この手の色はまず自然界に存在しない色なので、非常に使いにくいです。
玄人ならいざ知らず、ペーペーの僕らは黙って適当にカラーバーをいじって原色すぎない感じの今風っぽい色をチョイスしたりパクったりしましょう。
ノンデザイナーのための配色理論 こことかを参考に、彩度や明度を抑えた配色の雰囲気を感じ取りましょう。
では配色を決めます。
なお、筆者を含めて「配色の作りかたなんてわからねーよ！」 という向きがあるでしょうが、以下のサイトを使ったり、かっこいいと思ったサイトの色をパクったりして決めましょう。
あとアニメのアートボードとか、うまいイラストレーターの絵とかからスポイトするのもいいとおもいます。
色の数ですが、僕的にはモノトーン系 + テーマカラー一色が適当にやってもダサくならなくて良い感じだと思います。
なお僕は、adobe kulerで適当に良さそうなRGB達を収集した後、GoogleChromeでCSSのRGBをグリグリ動かして色を調整してます。多分すげー効率悪いやり方だと思います。なんかいい方法知ってたら教えてください。
https://kuler.adobe.com/create/color-wheel/
http://www.colourlovers.com/
レイアウト
まず 余白をちょっと大げさなくらいとる ことを心がけた方がいいです。ここら辺は好き嫌いがあるのかもしんないですけど、僕の感性は余白を使いまくった方がオシャレっぽくなりやすいと告げています。
次にお手本を探します。個人用ホームページであればミュージシャンのサイトとか、ブログならそこらへんにゴロゴロしてたりとか、そういう感じです。今までにないもんを作りたいとか、そういうことであれば本職のデザイナーに頼みます。
レイアウトは、見栄えもそうですが、ユーザビリティにも大きく影響する部分です。頑張りましょう。
僕がSphinxのテーマを作った時は、既存のテーマと色んなブログサイトを参考にしました。
大抵の言語圏の人間は、左上から順に右下へとなめるように視線を移動させていきます。
なので、優先度の高い順に左から右へと配置していけばだいたい間違いないです。
なお、僕が組み込みのSphinxテーマが気に食わない理由は山ほどあるのですが、そのうちの最たるものがサイドメニューが左にあるという部分です。
Sphinxはドキュメントツールであり、最も重要なコンテンツは中身のテキストです。しかし、重要性で劣るサイドバーが左に居座ることで視覚に入り込み、集中力を妨げやがるわけです。また、レイアウトが全て左詰めであることもそれを助長しています。
とか、まぁそういったことを考えながら自分の感性に従って作ります。
画像
難しいので使いません。だって難しいんだもん。
アイコンの類には、Webフォントを利用します。http://fortawesome.github.io/Font-Awesome/とかそこらへんを使いましょう。
これには良い副作用があって、当然のようにイラレが使いこなせない僕らであっても、CSSだけで簡単にアイコンの色やサイズを変えられるわけです。
CSS周りの細かいテクニック
フォントを指定する
基本的ですが。
大半のWebサイトにとっての顔なので、ちゃんと調整するとかなり印象がかわります。
逆になんもしないとダサくなります。MSゴシックとかは悲しくなるからダメです。
大別すると、明朝体とゴシック体の二つがある感じがしますね。フォントのタイプでサイトの印象や読みやすさは大きく変わるので「文字なんて何使っても中身は変わらないでしょ」みたいなクソダサいこといってないでちゃんと意識するといいとおもいます。
何を指定するかというと、とりあえずヒラギノとか、そこらへんを指定しておけばいいんじゃないすかねよくわかんないし。あとAvenirとかもいいなって最近おもいました。Helveticaは個人的にLightがあんま好きじゃないんで却下です。
遊書体系が、Mervericks以上のMacと8以上のWindows両方に入っているのでいい感じなんじゃあないかと思ったのですが、MacはまだしもWindows側だとガッタガタで分けわからん感じになってイライラしたので僕は結局、プレーンなテキストの指定はメイリオにしてます。Webフォントはよくわかんないです。
ぶっちゃけ、印刷物と違ってWebは使えるフォントが限られる（特に日本語）んである程度定番な指定を作って使い回す感じになると思います。
あとあんまり色んな種類のフォントを使うとわけわかんなくなるので、1~2種類(webフォントはのぞく)くらいにしておいたほうがいいです。
総英角ポップ体を使うのはやめてさしあげろ（良心）
borderはあまり使わない
例えばカラムレイアウトだとすると、各カラムの区切りをわかりやすくするためにborderを入れまくりたくなるでしょうが、高確率で野暮ったくなるのでやめます。
余白を多めにとって、エリアごとの分離を意識してレイアウトすれば精神的な区切り線が現れてくるのでそれでなんとかしましょう。
どうしても入れたくなった場合、box-shadowをグラデーション気味にうすーく入れるとかするだけに留めておくとあまりダサくならずに済む気がします。
borderをうまく使うのって難しいですよね、どうすればいいんでしょうか？
フォント周りのCSSプロパティを調整する
font-size: x;
とりあえず大きめな方が僕は好きです。
line-height: x; （行間）
キチっと設定します。
line-height以外でも色々と調整がいるとおもいますが、レイアウトの項でも述べた通り、広めにしておいたほうがクールな感じがして良いです。
ただし、タイトルのheading要素とかは、若干つめ気味にしたほうが改行された際にもひとまとまりとして視野に入ってくるので、そこんところはうまく調整しましょう。
letter-spacing: x; （文字間隔）
後述するtext-rendering: optimizeLegibility;も関わってくるのですが、頑張ってイカした感じに調整します。
text-rendering: optimizeLegibility;
フォントが対応していれば、カーニングと合字が有効になったりとかします。とりあえず入れておいていいんじゃないすかね。
text-align: justify;
あまり馴染みのない指定ですが、justifyを指定することで文字を両端揃えにしてくれます。
この指定が生きるレイアウトはある程度限られてきますが、borderはあまり使わないの項で述べた、「精神的な区切り線っぽいもの」を実現する上で大きな助けになってくれます。
飛び道具系
gradientをかけたくなったらなるべく薄くする
クッキリハッキリなグラデーションは難易度が高く、失敗の元ですが、うすーくかける分にはダサくなりにくいです。
border-radiusは控えめに
なんでもかんにでもかけまくるとアレな感じになりますが、全体的に弱めにかけておくと上品な感じになる気がします。角っこのシャギーも心なしか減りますし。僕はシャギーをみるとお尻がかゆくなるタイプなのでシャギーがないほうが嬉しいです。
ただ、アイコン画像とかに強くかけて真ん丸にしたりするのはおしゃれ感が上がるのでアリだと思います。
box-shadow, text-shadowは控えめに
かけまくると野暮ったくなりますし、ノンデザイナーが光源とかを意識した影配置なんて出来る訳がないです。要所要所にうすーくやっておけば、適当におしゃれっぽくなるんでそんな感じで。
飛び道具的な使い方はその限りではないです。
まとめ
とりあえず、
- モノトーンベース + 一色
- ミニマル、シンプル
- プロのレイアウトを真似る
- 沢山余白をとる
- 区切り線は多用しない
- テキストの調整は結構細かく頑張る
- 飛び道具は奥ゆかしく
をすれば、そんなにダサくはならず、かつ見やすいデザインになるんじゃないかなーというのがここ数ヶ月で得た知見です。
なお、「お前の言ってることは間違いだらけで話になんねーよ」みたいな感想を抱いた方。僕は薄給が故に勉強の書籍が全く買えない哀れな男です。乞食リストは公開しているので、いつでも恵んでやってくれていいですよ。
