システムのからむ画面をうまく・速く・正しく・便利にデザイン・コーディングする方法
まずは何はともあれ、そのサービスの仕様を理解しなければならない。
ちなみに、私は新規立ち上げはしたことないので、ひたすらリニューアルの経験から語りますのでよろしく。
【まずは、ビジュアルデザインの傾向は、以下を参考にする】
・どんなサービスなの？何ができるの？ウリはなんなの？
・（リニューアルの場合）今、何が問題となっている？
・ユーザー層の傾向は？（性別・年齢・地域・職業等）
・ユーザーのリテラシーは？（低いほうに合わせるのがベスト。サポートブラウザも含め）
・どこでコンバージョンするの？
・どこで売上が発生してるの？
・ユーザーアクションは、どこにたどり着けば目標が達成される？そのための最短のアクションはどれ？
→これをもとに、ＣＶが発生する部分、誘導させたいところを中心にコントラストを強く。読まれればいい情報は上品に飽きないようなデザインにする。
バナーとか、リコメンドとか、副菜になるものはカラムきってどっかに追いやる。その際、テイストを損なわず、メンテしやすくしておくこと。
※インクルードファイルの使い方は覚えよう。
フッタはインクルードなのか、SEOのために自動生成するのか把握する。
・SEO担当とは仲良くしておこう。
・最終的に、SEOフッター、パンくずの設計もできるようになると重宝される。
【DBとコーディングとレイアウトを結び付けて考えて行く】
・どんなデータが入ってる？数字なの？日本語なの？英語もあるの？画像も扱ってる？
・画像の最大の大きさは？画像取得ロジックはどうなってる？自由にリサイズさせてもらえる？
・画像のaltはどうしてる？キャプションは必ずつくの？DBのどこかからとれる？
・最大文字数（これ必須）数字も桁数。よく言われるのが、英語か数字かなんかが続くと折り返さないやつね
・必須のデータはどれ？必須じゃないけど「持ってるデータ」はどれ？両方入るようにデザインしないといけない。
・右寄せと左寄せ、交互にくればかぶらないかっていうとかぶったりするので、テキストが終わったあと、必ずマージンをつけて、その次が右寄せ、という考え方をする。
・あと箱の中に、色々情報入ってるけど、どれが抜けても最終的に余白が均等になってればかっこいいコーディング。
・フロートしまくったリストタグはページ内でセンタリングができません。※リストタグの幅が決まってるなら別。 だからページングは、実はリストタグは理想的ではない。
【トラブルを未然に防ぐ】
・ページの幅全部とる要素には全てclear:both;をいれる、必要なくても、かなりたくさんのトラブルが防げる
・高さの同じ箱が続く場合、データで上下しないように、JSで高さをそろえる魔法をかけておく。
・共通事項を先に全部コーディングして、ブラウザチェックまでやっておく。
・全ての要素がマークアップで個別に指定さえできれば、デザイナーにできないことはあまりない。とりあえず「必要なくても全部何かクラスかidふっておく」。もしくは、特定のIDの中にユニークなタグでマークアップしておく。
・「CSSでたて真ん中揃えはできません」を会議でなんども口すっぱく言っておく。最悪テーブルタグで対応することになるがかっこ悪いから避けたい。
【SEOってデザイナーもやるの？】
・できたほうがいい。一番大事なのは、「デザイナー兼コーダーの人」が、マークアップを最適にできるかどうかだ。キーワード選定・メタタグはSEO担当に任せておけばいい。※キーワード選定は企画段階で決まってないと意味ないけどね
たとえば、altを忘れないとか、隠しテキストを使わないとか、Hタグで重要な部分をマークアップする、プレーンテキストはPタグで囲むなどなど。
文書構造を正しく理解していることがとても大事。タグの知識は必須。
「ここは見出しです」「これはその中の更に下の見出しです」「これは説明文なのでテキストです。パラグラフのPでマークアップしました」「この単語は重要なのでstrongタグでマークアップしました」「これは、項目を並べているのでリストタグでマークアップしました」
と理論的に説明することができ、構造が正しいと、グーグルは「正しく書かれている、ユーザーに実益のあるページ」とみなすようだ。
CSSはあとからついてくるので、それほど頑張らなくてもいいが、実は時間かかるのはCSSの実装だったりするんだけどね。CSSはデザイナーしかわからない、っていう会社はすごく多いが、その分、プロフェッショナルとしてDWを酷使して頑張ろう。
経験したバグは、エヴァーノートやブログにまとめておこう。あとで参照できる。
【ここまでやっても、まだ求められる美しさ。】
こんなに色々やってあげてるのに、上司はそれでも見た目をすっごく気にしてる。SEOもやって、コーディングも正しくやって、自分でリンクもチェックした。上司は見た目だけ気にしてる。すごい腹立つ時があると思う。でもこれが、デザイナーの腕の見せどころなのだ。
凝ろう。
何に凝るか？それは、１ピクセルにだ。
くだらない話と思わないでくれたまえ。たとえば、罫線の薄さ。罫線は薄くないといけないが、視認はぎりぎりできないといけない。でもそのギリギリ感が上品なのだ。
ボタンのクリエイティブ。
今、１ピクセルの枠で囲むのが流行ってる。なぜか？トレンドもあるが、メリハリがつく割に上品だからだ。もうグラデーションやリフレクションの時代は終わろうとしている。
１ピクセルの枠に、１ピクセルのハイライト。１ピクセルの反射に、１ピクセルのシャドウ。これがかっこいいとみなされるし、私もそう思う。
そして次に凝るのが、色だ。
最近はコントラストが薄いのが流行りだ。でも薄ければいいものではない。CVが発生する部分は強調しよう。あくまで上品にだ。そして、文字色も、違和感のない色相内で、「割と補足的な情報」を色を薄くし、フォントサイズを下げるとすごくかっこよくなる。
色でコントラストをつけることもできる。全体的にピンクな画面に、ボタンだけ明るい青っていうのもありだ。ボタンの色がどれがいいかなんて議論は、絶対にあってはならない。
ボタンの正しい色は、コントラストが他と違う、「目立つ色」なのだ。目立たなければ、気づいてもらえない、押してもらえないのだ。
全体で配色を考えなければならない。理論的になろう。色彩学をがんばらなくてもいいが、明度、彩度、色相の意味を知ろう。
コントラストをつけるためには明度を下げるのか？彩度を上げるのか？色相で補色をあえてとるのか？少しずらすのか？そういう考え方だ。
ラフ案をモノクロでつくることをオススメする。先にコントラストを全部グレースケールで見せる。その後、色をつけていけばとても簡単だ。
＞上司＆プログラマーへ
こんなにデザイナーちゃんたちはがんばってるので、たまにはほめてください。
すごい仕事してると思います。プログラマーは確かに分岐ばっかりで嫌になってると思いますが、マイク●ソフトに振り回されてるのはおいらたちです。
ブラウザなんて一個になればいいのに(ﾟдﾟ)