コーポレートサイトのデザインをゼロからラフまでやる

どうも、一般主婦です。
今日は夫が作った会社のコーポレートサイトデザインを設計からラフまでやっていこうと思います。せっかくなので忘備録も兼ねて記事にしておきますね。

はじめに

起業した夫にウキウキしながら、WEBサイトの企業理念ってなに書くの？と聞いたところ 「特にない」 と言われ、危機感を覚えて家事の合間にfigmaを立ち上げました。食っていくんだよ、お前の業（なりわい）で。

コーポレートサイトの目的は何か

会社のWEBサイトはさまざまな役割があります。
採用のために社内の雰囲気を伝えるものだったり、取引先に向けた情報が多く掲載されたもの、自社の商品をアピールするためのもの…。その中でも「社会的信用」のウェイトはかなり大きなものといえるでしょう。
今回の目的は「わたしたち、ちゃんとしてるんですというアピール」に設定します。

どのデザインが適しているか

デザインと言いましてもいろいろありまして、たとえばTPOによって服装を変えるようなことが多くあります。シャープな理念にはかっこいいシュッとしたデザインを、やわらかくてやさしい雰囲気の理念にはふわっと丸みを帯びたデザインを…などなど。なぜそうするかといいますと、ユーザーは思っているよりもはるかにテキストを読んでくれません。雰囲気で判断します。そうなんです、全然読んでくれないんです。 エラーメッセージだって反射でOKを押してしまうんです。
よって今回は雰囲気作りを重要視しまして、よりメッセージが伝わりやすいようにタイポグラフィを主役にしたデザインにしていきたいと思います。

シンプルに、シンプルに！

さて、タイポグラフィを主役にすると決めましたが、中には「文字だけなら簡単じゃん」と思う方もいらっしゃるかもしれません。装飾ってね、多ければ多いほど簡単で、少ければ少ないほどむずかしいの。「無印良品みたいなシンプルなサイトでいいからさ」と言われてキレ散らかしたデザイナーは星の数だけいると思って間違い無いです。

そんなわけでまずはテキスト要素を決めるため、手帳にキーワードを書き出しつつキャッチコピーを練っていきます。

毎日とか生活というキーワードが出てきました。社会を変える！とか貢献する！という壮大な目標ではなく、目の前の課題をひとつひとつほぐすようにやっていくのが我々らしいなと思い採用。

そんなわけで掲載する情報を精査しながら、こんなふうにしたいな〜というものをふわっと可視化させました。ロゴとコーポレートロゴだけは起業の時に作っておきました。（ラフの段階なので色や一切の装飾はありません）

なんかいい感じですね。細かい文字詰めや余白のことは一旦置いておいて、この段階で要素をどんどん盛り込みます。

情報に優先度をつける

いっぱい書けましたね。 それではここから優先度が低い情報を消していきます。
人間のやることじゃねえ…！こんなに頑張って考えて書いたものを消すなんてよぉ…！と若い頃は思っておりましたが、それはデザイナー側の事情であって、ユーザーに必要なことでは無いんですね。サクッと景気良くやりましょう！

Before After

というわけで

ラフができました。
次回も家事の合間をすりぬけつつ、文字を詰めたりレイアウトの調整をやっていきたいと思います。