サイト作るよ3.5-デザインについて

ワイヤーからデザインへの途中段階が抜けてる、と言われたのでちょっと書きます。
正直このジャンルで私ごときがデザインについて言えることなど何もないのであんまり参考にはならなさそうです。

webのデザインとは

デザイナー=絵が描ける人、ではないです。絵が描けなくてもデザイナーとしてやっていけます。

以前そういう業界にいた時にロゴとか挿絵を依頼されることがちょいちょいあったのですが、その時上司から
「絵を描く能力は先天的なものであるためあなたにできて私にできないのは仕方がないことだが、webデザインはセンスや画力の問題ではない。あなたの頭は全くロジカルではないのであなたのデザインは絶対的にクソです(意訳)」と言われたことがあります。

正直何言ってるんだこの人…と思ったりしましたが、とりあえず自分は絵のセンスないから無理だ~なんて思わなくても大丈夫です。私だってロジカルな頭も絵のセンスも欲しいやい。

配色は3色前後で

キャラデザとかでも大体の方がそうしていると思うのですが、使う色は絞ります。濃い色・薄い色・差し色、みたいに選ぶと後で構成しやすいです。

リクたんページはあまり良い例ではなかったですねすみません…
ざっくりですが6・3・1?くらいの割合で配色決めます。
色が足りないと思ったら、3の部分辺りを2色に割ります。
決めたら極力他の色は出しません。

配色が分からない~という場合は「配色 パターン」とかでググるとわんさか出てきます。お好みの色を選んだら論理的に合う候補色を提案してくれるオンラインサービスとかも結構あります。

キャラクターなんかは、単色イメージというより2色・3色の組み合わせでキャライメージが固定されているところが大きいんじゃないだろうか。ツァイトは…十数年前になんかアレな配色にしたままずっとこれで来てます。君はもうそのままでいいよ(さじ投げ
五邦の色全部入れたかったんだ……

色の置き方

ほんとに自由ですが、迷ったら「薄い色」を背景に敷いてタイトルとかボックスを「濃い色」で塗ります。逆でも可。

最後にアイコンやライン、あと「ここぞ!」というボタンとかにアクセントカラーを使っておしまいです。通販してるなら「本をかごに入れる」、漫画連載してるなら「本編を読む」とかの部分です。コンバージョンと呼ばれるやつです。

1つ前の記事でも書きましたが、各セクションの背景を分けると「ここから違う項目!」と分かりやすいです。ベースカラー(薄い色)と写真背景を交互に並べるLPを多く見かけます。

色付けたらデザインの7割くらい完成なんじゃないですかね。

揃える

なにかにつけて揃えます。
コンテンツ幅(ピンクの部分)が1000pxだったらすべてのセクションの横はピッタリそこで揃える。

各セクションの上端からタイトル文字までの余白は例えば48pxで統一する。コンテンツ終わりからセクションの下端までの余白は80pxで統一する。とか、ひとつルールを決めたら同様箇所全部に適応させます。

らくがきをまとめて置くページでも、サイズがバラバラのイラストを100%表示でただ並べるのではなく同じサイズのボックスをキチッと並べてその中にサムネイル表示する。そしたら見た目のサイズは揃う。とか。

えーめんどくさい…という時はこんなの使ってみるとか、いかがでしょう。

ブロック分けしやすいように作る

ブロックとは~

簡単ですがこんな感じです。基本的に、横幅100%のブロックを縦に積み重ねるように配置します。横に要素を並べたい時には、小さいブロックたちを大きい横100%の透明ブロックでひとまとめにします。

このブロックの並べ方がデザインの段階で大体見えているとhtmlがとても書きやすいです。テーブルはね、使わずにコーディングしますよ。

キャラシのように凝って複雑な配置にするとあとで泣きます。大抵面倒になって全部画像にされたりしますが、メンテナンス性がアレなので現場の人はめっちゃ嫌がります。

そんなところです

別に個人の趣味サイトだし、流行りとか気にしないでいいと思いますが…今の旬はマテリアルデザインといって、ペラいベタ塗りオブジェクトにドロップシャドウだけ落としたような装飾です。
シンプルなのでセンスがどうのこうのと言われにくく、何より画像を作る術がないエンジニアでもコードだけで簡単に実装できるのが利点です。興味があったら検索してみてください。

長くなりましたが、次はスマホのデザイン決めますよ~。