入社2年目で身につけたwebデザインの5つの習慣

池田 彩華のプロフィール画像
デザイナー 池田 彩華

3,048 view

ベイジに入社して、もうすぐで2年目が終わる。案件を重ねていく中で、トップページのデザインを作るときに、多くの失敗と学びがあった。その経験から、習慣化したことがいくつかあるので、まとめてみようと思う。

1. ラフを書いてから手を動かす

ベイジでは、デザイナーがwebサイトの各画面のワイヤーフレームを作成する。その際、ディレクターと認識を合わせるため、手書きのラフを書くことがある。

以前は、いきなりデザインを起こしていたのだが、1ページ作り終えた際に「全体のバランスが悪い、レイアウトが単調でメリハリがない」と指摘されることがあった。そこで、ワイヤーフレームを作成するときと同じように、デザイン着手前もラフを書くようにした。

すると、事前に全体像を俯瞰して見ることができるので、セクション間のバランスやレイアウトを確認できる。このときに違和感があると、絵に起こしても上手くまとまらないことが多い。慣れるまでは、ぼんやりとしたイメージを落とし込んでから進めるようにしたい。

2. デザインの骨格を先に作り込む

ある日、デザインの大枠ができていないにも関わらず、縦書き文字をどうやって綺麗に見せるかとか、テクスチャはどれにするかなど、細部に時間を使っていた。先輩から「それって極論、個人の好みでどっちでもいいよね。先に直すところがあるのでは?」と言われた。

webサイトのデザインは 「レイアウト」という情報設計の大きな骨格があり、そのあとに「色、写真、文字…」などの要素が登場する。さらに分解すると「色」は単色やグラデーションとか「写真」ならストックフォトや撮影写真とか、「文字」なら書体選定、横書きか縦書きかという具合に細分化されるだろう。

なので、縦書きがどうこうとかは、骨格となるレイアウトがきちんとできてないと、いくら整調してもぱっとしない1番の要因だ。骨格が緩いまま、デザインの表層を整えてもあまり意味がなく、逆に、骨格がきちんとできていれば色や写真とかをいれなくても、ばしっと決まるのかなと感じる。最後のひとさじ加減で、細部を詰める癖をつけていきたい。

3. モノクロで成立するデザインを

webサイトでは、写真や色は重要な要素のひとつだ。ただ、あくまでも装飾なので、それらがないとかっこよく見えないとか成立しないのは、よくないと聞いた。

たしかにいいなと思うデザインは、写真を当てはめず、グレーのボックスに置き換えても、かっこいいし、色をつけずモノクロにしても成立していると感じる。雰囲気に流されやすい私は、すぐ綺麗な写真や色に頼り、装飾がないとよく見えないデザインを作っていた。

まずは、モノクロで仕上げる。その段階でなんとなくいい匂いがしたら、写真を入れたり、色をつけてみる。このステップを踏むと、写真や色を変更したからといって、デザインが崩れるケースが減ったと感じる。

4. 大枠が完成したら、環境を変えて見てみる

私は、まだまだ納得するクオリティーに仕上げるまで時間がかかる。しかし、時間が経てば経つほど、そのデザインに見慣れてしまい、どこを変更すればよくなるのか迷うことがある。

そんなときは、時間を置いて見たり、画像書き出して別の場所で確認するようにしている。すると、作業中には気がつかなかった修正箇所や、別案がひらめくことがあるなと感じる。

ここで大事なのは、違和感を感じたら、一度作ったデザインでも壊して大胆に作り直すこと。「せっかく作ったのに…」と言って変更を小さく加えるだけでは、あまり印象は変わらないように思う。このサイクルを早めることで、より早く納得するところまでいけると教えてもらった。

5. 自分の中で100点を取ってからフィードバックをもらう

入社したての頃は、進捗70%でも、早い段階で先輩に見てもらい効率よく進めることが大事だと思っていた。この進め方は、根本的な方向性などの確認であれば問題はない。しかし、今振り返ると、受け身になっていて、そのフィードバックを頼りに待っていたようにも思う。

ある人が、後輩をレビューする際に「このデザインって自分の中で100点ってこと大丈夫?」と聞くと言っていた。私はまだフィードバックを受ける側だが、いつまでも誰かのフィードバックありきで作業を進めると、どこかで他人任せな気持ちが生まれてしまってよくないと思った。

せめて、自分の中では納得のいく状態まで作り切ってから見てもらうこと。その習慣を早い段階でつけると、今後、フィードバックを出す立場になったときにも役立ちそうだ。「もっとよくするには?」と常に問いかけて、仕事と向き合うようにしたい。

最後に

トップページなどのビジュアルデザインを作っていて、いただいたアドバイスから、いくつか指標ができたが、1番印象に残っているのは、理屈でデザインをしすぎないということ。

Webサイトの場合、9割くらいは理屈で作ることができても、ビジュアルまで落ちると、感覚的にモノを見て判断する部分が出てくる。なので、いくら論理武装がすごくても、最終的なデザインが魅力的ではないとよくないよねという話があった。

最近、クライアントにデザインを提案していて、ある程度の説明は必要だなと思う一方で、相手を納得させるための後付け説明は、したくないと思う。その説明がないと、提案が通らないのは、ただ単に自分のレベルが間に合っていないということだろう。頭で考えるだけではなく、目で見た感覚も考慮する。その両者を実現できるようなデザイナーになりたい。

関連する日報

    フリー素材のアイコン・イラストを流用する時のコツ

    2,486 view

    岡本 早樹のプロフィール画像
    岡本 早樹 デザイナー
    経験やスキルがなくても、デザインのフィードバックはできる

    2,159 view

    原浦 智佳のプロフィール画像
    原浦 智佳 デザイナー
    「壁打ち相談」をうまく使って、情報設計を効率よく進めよう!

    1,491 view

    高島 藍子のプロフィール画像
    高島 藍子 デザイナー
    BtoBサイトにおける「ファーストビュー攻略法」

    2,869 view

    池田 彩華のプロフィール画像
    池田 彩華 デザイナー
    デザインを複数案作る時の心得

    6,309 view

    岡本 早樹のプロフィール画像
    岡本 早樹 デザイナー
上に戻る