Webデザインが学べるコミュニティを作りました!

Webデザイナーに人気の「ベイク チーズタルト 」のWebデザインを解説

masaca(@masaca_dApps)です。

カッコいいWebサイトが作りたい!と思ってWebデザイナーを目指すみなさま、チーズタルトのBAKEのWebサイトってカッコいいですよね。

Webデザイナーが最も憧れるWebデザインNo.1(masaca調べ)の「ベイク チーズタルト」のデザインの解説をしたいと思います。
どうすればBAKEみたいなデザインをすることができるのか、重要なポイントについてもお伝えします。

masaca

BAKEみたいなWebサイトの作り方を教えます。

なぜBAKEのサイトはカッコいいと感じるのか

BAKEをパッと見てカッコいいと思いますよね。狙ってカッコ良さを作るためにはなぜカッコ良さを感じるのかを理解しなければなりません。

BAKEのデザインのカッコ良さを作っている要素は「写真」、「タイポグラフィ」、「配色」、「アニメーション」です。それぞれについて詳しく解説します。
参考 ベイク チーズタルト | BAKE CHEESE TARTベイク チーズタルト | BAKE CHEESE TART

サイト内に使用されている写真素材の良さ

いきなり身も蓋もない話なのですがBAKEのWebデザインのカッコ良さの半分以上は、プロのカメラマンによる写真素材です。

メインビジュアルの力が半端ではありません。この手のビジュアルを前面に押し出したWebサイトはそもそも使用している素材が良いのです。
カッコ悪くする方が難しいレベルのクオリティです。このメインビジュアルのレイアウトにする、と決めてから写真を撮っている可能性があります。

タイポグラフィの表現、文字の扱い方

印刷物のような表現方法

印刷物のデザインにあるような表現や、カーニング(文字間)を空けて雰囲気を演出していることがわかります。

タイトル部分などに繰り返し使われているフォントは「Rockwell」です。BAKE内で使用されるフォントは厳密にルールが定められています。

最小限に絞った配色

配色は「黄色」と「黒」「灰色」と限られた色しか使っていません。最小限の色に絞ることで「黄色」が強く印象に残ります。
強い配色ルールが存在することがわかります。

スクロール時の表示アニメーション

BAKEのWebサイトのアニメーションは「TweenMax」が使われています。
参考 アニメーションに便利なJavaScriptライブラリTweenMax株式会社LIG

BAKEみたいなWebサイトのデザインにする方法

カッコいいと感じるポイントさえ抑えれば、同様のデザインをすることが可能になります。
さらに具体的にどうすればよいか解説します。

レイアウトを先に決めて写真素材を用意する

先にレイアウトを決めて、それに合う写真素材を用意しましょう。そしてその写真素材のクオリティは高い必要があります。
せめてキービジュアルだけでもクオリティの高いものを使いましょう。
低画質の写真素材しかない場合は、再現は難しいです。

タイポグラフィや文字の扱い方を理解する

タイポグラフィやフォントについての知識は勉強して身につけた方が良いです。
Webデザインのスキルがグッと上がります。私がオススメの本は以下の通りです。

タイポグラフィの基本ルール -プロに学ぶ、一生枯れない永久不滅テクニック-
実践的な使い方が解説されていてわかりやすいです。ロゴデザインについても参考になります。

フォントのふしぎ ブランドのロゴはなぜ高そうに見えるのか?
フォントの知識を深めるために読んだ方が良いです。読み物としても面白くておすすめ。

ノンデザイナーズ・デザインブック
Webデザイナーを目指す人全員に読んでほしい一冊、もちろんフォントや文字の扱い方についても記載があります。

基礎知識を身につけたらたくさんの印刷物やグラフィックデザインを参考にして自分の中の引き出しを増やしましょう。

情報量を最小限に絞る

一画面内の情報量が極端に少ない

一画面内の情報量が極端に少ない

BAKEのサイトをよく見ると、ページの長さのわりに文字の情報量が極端に少ないことがわかると思います。
情報を表示できるエリアに対してとても贅沢な余白な使い方をしています。
BAKEのようなデザインにしたいのに、文字情報をびっしり掲載してはいけません。大事なポイントに絞って文章は最小限にしましょう。

BAKEが運営する他のWebサイトを見てみよう

BAKEはチーズタルトだけではなく、他のスイーツも展開しています。
以下BAKEが運営するサイトです。
参考 焼きたてカスタードアップルパイ専門店 RINGO焼きたてカスタードアップルパイ専門店 RINGO 参考 POGG | スイートポテトパイ専門店POGG | スイートポテトパイ専門店 参考 THE PARFAIT STAND | ザ・パフェスタンドTHE PARFAIT STAND | ザ・パフェスタンド 参考 Z クロッカンシュー ザクザク Z CROQUANTCHOU ZAKUZAKUZ クロッカンシュー ザクザク Z CROQUANTCHOU ZAKUZAKU 参考 バターサンド専門店 PRESS BUTTER SANDバターサンド専門店 PRESS BUTTER SAND 参考 写真ケーキで特別な日をもっと美味しく。北海道から全国にお届け - ピクトケーキ | ピクトケーキ写真ケーキで特別な日をもっと美味しく。北海道から全国にお届け - ピクトケーキ | ピクトケーキ

これまで解説してきた内容を踏まえた上でデザインを見ると、「写真素材のクオリティの高さ」、「タイポグラフィ」、「配色を限定する」、「文字情報を最低限にする」という点は共通していることがわかると思います。キーカラーとタイポグラフィのバリエーションで違いを出しています。

実際にWebデザイナーがBAKEのようなサイトをデザインする一般的な流れ

スクールに通ったり、独学している段階では全てのデザインをWebデザイナーがしていると思うかもしれませんが、実際はそうではありません。
一般的な仕事の流れでは全て素材は支給された段階からがWebデザイナーの仕事になります。

Webサイトデザインにあたり支給される素材

ロゴのaiデータ、写真素材、パンフレットなどの印刷物のaiデータが通常支給されます。
支給されたデータを元にWebデザイナーがデザインを考えます。

ブランディングが出来上がっている

BAKEはWebサイトを作る前段階である「ブランディング」に相当こだわっています。Webデザインとブランディングはまた違う能力が必要で、専門の人が存在しています。写真素材にしてもそうですが、多くのその道のプロが関わってBAKEというひとつのWebサイトが出来ているのです。

まとめ

「写真」、「タイポグラフィ」、「配色」、「アニメーション」のポイントと、情報量を最小限に絞るということを抑えておけば、表面上はBAKEのようなWebデザインを作ることは可能です。しかし実際は圧倒的な「ブランディング」によって成り立っていることを知っておいてくださいね。

masaca

こんな風にデザイン要素を分解して考えるとそれっぽいデザインならサッとできるようになるよ。
【職業・働き方・ツール】Webデザイナーに関するよくある質問と答え デザイン未経験の私が半年でWebデザイナーになるまでにやったこと

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA