先日公開した岡山交通さんの新卒採用サイトは、斜めのオブジェクトを効かせたスタイリッシュなデザインに仕上げました。今日はその裏側、「斜めのデザインって、実は作るのがけっこう大変なんです」という話を書きます。
なぜ斜めを使ったか
新卒の学生に向けたサイトだったので、「新しさ」「動きのある印象」を出したかった。まっすぐな四角を積み重ねたレイアウトは、きちんとして見える反面、どうしても真面目で静かな印象になりがちです。そこに斜めのラインを入れると、一気にスピード感とスタイリッシュさが出る。若い世代に「フレッシュな会社だ」と感じてもらうのに、斜めは相性がいいんです。
見た目としては、ここは狙い通りにいきました。問題は、その”狙い通り”を成立させる裏側です。
斜めは、放っておくと崩れる
斜めのデザインで一番大事にしたのは、全体で角度を揃えて、規則性を持たせることでした。
これ、当たり前に聞こえるかもしれませんが、実はここが最初の落とし穴です。斜めの要素をあちこちに置いていくと、気づかないうちに角度が微妙にバラバラになる。ここは15度、あそこは18度、みたいに。一つひとつを見ると気づかないのに、ページ全体で見ると「なんか落ち着かない」「雑然として見える」。人の目は、揃っていないことに無意識に違和感を覚えるんです。
だから、斜めの角度は最初にルールを決めて、サイト全体で徹底して揃える。この地味な規律が、”スタイリッシュに見える”か”ただ散らかって見える”かの分かれ目になります。オシャレな斜めデザインほど、裏では角度がきっちり管理されている、というわけです。
斜めにすると、余計な隙間が生まれる
もう一つ苦労したのが、余分な余白や高さが生まれないようにする配置です。
四角い要素はぴったり隣に並びますが、斜めに切ると、その斜めの分だけ上や下に三角形の隙間ができます。これを何も考えずに配置すると、要素と要素の間に妙な空白ができたり、ページ全体が間延びして見えたりする。斜めのデザインは、この”切ったことで生まれる隙間”をどう処理するかが、仕上がりを大きく左右します。
隣り合う要素の斜めをうまく噛み合わせたり、重なりを計算したり。表面上はスッと流れているように見えて、裏ではパズルのように、隙間が出ないよう配置を調整しています。
いちばん難しいのは、文字とのバランス
そして、最後まで一番気を使ったのが、斜めの要素とテキストのバランスです。
背景や写真を斜めにすると勢いは出るのですが、その上に載る文字は当然まっすぐ読みたい。斜めの勢いと、まっすぐで読みやすい文字。この2つが喧嘩すると、途端に読みにくくなったり、逆に窮屈に見えたりします。斜めを効かせすぎると文字が居心地悪くなり、抑えすぎると今度は斜めの良さが死ぬ。このさじ加減が、斜めデザインの一番の勝負どころでした。
傾きや角度をどのくらいにするか。文字をどこに、どう置けば、斜めの勢いを活かしながら読みやすさも保てるか。ここは正解が一つに決まらないので、何度も調整しながら、ちょうどいいバランスを探していきました。
見た目の派手さは、地味な調整でできている
斜めのデザインは、完成すると「オシャレだね」「動きがあっていいね」と、パッと華やかに見えます。でもその裏側は、角度を1度単位で揃えたり、隙間が出ないよう配置をずらしたり、文字との相性を何度も見比べたり——という、かなり地味な調整の積み重ねです。
派手に見えるデザインほど、裏は地道。これは斜めに限らず、いいデザインに共通することかもしれません。
岡山で採用サイトやホームページの制作をお考えでしたら、こういう細かいところまで含めて、一緒に作らせてもらいます。