デザインカンプが出来るまで

今回のサイトリニューアルを振り返り、Webサイトのデザイン工程について考えました。 まだまだ経験が浅いのでたいした事は書けませんが、少しでも参考になれば嬉しいです。

この記事もだいぶ古くなってしまったので、2016年版のデザインワークフロー記事を書きました。
「templaというWebサービスのデザインをしました」

コンセプトとルール

Webサイトに限った話ではありませんが、デザインをしていれば必ず迷う場面が出てきます。それは配置の事であったり、文字の事であったり、色の事であったりと様々です。

そんな時に何か基準が無ければ、たまたま置いた位置、たまたま選んだ大きさ、たまたま出来た余白、たまたま選んだ色など、作っていた時の気分次第で異なるデザインになってしまいます。

時にはその偶然がプラスに働く事もあるかもしれませんが、勘のような物に頼ってばかりいてはデザインのクオリティが安定しません。そこで必要になって来るのがコンセプトとルールです。

コンセプトを決める

何か一つ大事な物を掲げておけば、その時の気分に流されずに一作品を通してブレないデザインが出来ます。それがその物に対して最適なデザインかどうかはまた別の話になってしまいますが、一定以上のクオリティを保ち続ける事が出来るようになります。

今回はコンセプト(としてはまだ曖昧ですが)として「タイポグラフィをメインで見せる」という事を最初から意識していました。何度か修正を加える事にはなりましたが、最初に作ったこのロゴタイプが今回のデザインの指針となっています。

1

ルールを決める

例えば、1px右にずらした状態で異なる100色の見栄えをチェック、2px右にずらして100色チェック、1px右にずらして1px縮めて・・・なんて事をしていては完成するまでに何年も掛かってしまいます。組み合わせによっては何万パターンも何億パターンも存在し、想定しうる全てのパターンを試す事は困難です。

手早く的確にデザインをする為には、グリッドや黄金比、マンセルの表色系など昔から使われているルールを参考にします。長い間多くの人に使われて来たという事は、それだけ多くの人に受け入れられて来たという事です。そんな便利な物を使わない手はありません。

ちなみに、このサイトのトップページにある、ロゴやWorks等の背景の四角形も黄金比を参照して作成してあります。

コンテンツを決める(設計のデザイン)

ここからようやく実際の制作の話です。まず最初にサイトに載せる情報を決めます。サイトのロゴや説明、グローバルメニュー、ブログの記事、ポートフォリオなら制作物等々。全てのコンテンツを箇条書きで書き出して、それを更新頻度や情報量、重要度を考慮した上で配置します。

情報量が多い物は別ページに分けますし、その場合トップページではどこまで見せるかも決めなくてはいけません。この時にトップページばかりに力を入れてしまいがちですが、ページ遷移をしても整合性が取れているかどうかも意識しなければいけません。

とにかく紙に何枚も書く事が大事で、「めんどくさい」とか「後で直せばいいや」という気持ちでやると、結局カンプを作る段階でツケが回ってきます。設計の意味でのデザインはここで終わらせるつもりでやります。(とは言ってもカンプを作り始めるとやっぱり直しは出て来る物ですが)

カンプを作る(装飾のデザイン)

設計が出来たらPsやFwを使ってカンプを作るのですが、大まかなレイアウトが決まっていたとしてもそこから作れるパターンはたくさんあります。その派生したパターンの中でも細かい要素の違いで更にいくらでもパターンが存在します。

そんな中でブラッシュアップをしていくには、「なんとなく」のデザインを無くしていく事が大事です。なぜその大きさなのか?なぜその位置なのか?なぜその色なのか?全てのデザインに理由があるはずです。この時にコンセプトやルールが活きてきます。

3.jpg 4.jpg takashi178medio

見直す

何十時間もかけ、精根尽き果て、「これで完成!完璧!」となってからがようやく本番です。編集するのを止めて時間をおいたり、他サイトを見て回ったりしてから見直せば、完璧だと思っていたデザインも粗ばかり見えてきます。

あとは納期との兼ね合い・自分との戦いで、時間の許す限り、気力の持つ限り、ひたすら修正と見直しを繰り返します。

以上が今の自分の大まかなデザインワークフローです。

takashi178_old

デザインカンプが出来るまで」への3件のフィードバック

  1. ピンバック: サイトリニューアル手順をまとめ。各工程とその時に参考にしたいサイトご紹介!

コメントを残す

メールアドレスが公開されることはありません。