リアル・オンラインにて場所も時間も関係なく学べるデザインの学校をつくる会社です。Webサイトのローンチまで裏話や活動報告をこちらにてお届けいたします。 https://twitter.com/marsknowledge
今回は日本デザインストアさんのレビューをさせていただきます。
以前、運営に参加していたコワーキングスペースにて、店番をしていた「あゆちゃん」。
いまは名古屋でお仕事をしています。そんな彼女が、このサイトのデザインをしているところを掴まえて、簡単なレビューをさせていただきました。今回はSkype。リモートでのレビューです。
記事掲載の許可をいただき、ありがとうございます。
トーンがしっかり決まっていて、とても丁寧に作られた印象です。内容も充実していますし、ほぼ問題なしですね。
ですので、今回のレビュー結果はこうなりました。
商品紹介ページの見出し。h2とh3の見出しをたった2行。左から右へと変更しただけです。
レビューを見る必要はありませんか？
いえいえ、そんなことはありません。なぜこのデザインは、こちらの方が良いか。デザイン4原則に基いて解説をしてみてください。
このデザインは、どの原則に基いて変更されたかが分かるでしょうか？
デザインの基礎編「4原則の使い方」
4原則自体は、有名な話です。デザインに興味のある方であれば、そういった記事を読んだことがあると思います。
しかし、実践や解説をするとなると「???」となってしまいませんか？
わたしも、数年前までそうでした。しかし、他の人にデザインの基本を伝えていくうちに、普段の作業でも「あ! この作業って、そうか。4原則でいうと、この部分なのか。」
と目の前がひらけた瞬間がきたのです。
この記事では、4原則をちゃんと使ったときの効果が、どうなるのかを、日本デザインストアさんの、商品紹介ページから見ていきます。
商品紹介ページの一部
あれ？ でも、この商品のページ、ところどころ見出しの見た目が違うね。なんでかしら。
見出しの装飾はなぜ？
まずは、デザインの考えを聞いてみましょう。
名古屋でひとりデザイナーとして頑張ってるカワイイ系女子。たまたまコワーキングスペースでデザインの仕事をしていたところを、イシジマにナンパされてレビューされることに。
商品を、写真と一緒に解説するブロックと、文章のみで解説するブロックというのは意識しました。
h2とh3でどっちも見出しなので、目立つようにとしたのですが…。
文字の大きさや余白はそれほど差がないんだね。装飾だけ違う。
それが問題かな。このままだと、読んだ人はそれぞれが独立した見出しだと思うよね。
うん、そうなんだ。実際、h2とh3は関連性があるよね？
h2は写真と一緒に商品を表示させて、アイキャッチの役割も担ってる。h3は文章のみ。
h2以下の文章見出しとして置かれることが多いんじゃないかな。
親子関係。
文字サイズを小さくして、装飾を抜いてみました。
こうすれば、文章をちゃんと読まなくても、見た人は、どれが重要で、どれが付随しているのかが分かりやすいよね。
親と子の関係が分かりやすくなった気がします。
デザインは引き算で考えた方がいいんだ。
だから、最初に装飾を足しちゃダメ。文字と商品写真しかない状態で、キレイに見えるようにデザインするの。
で、最後、全体を見たときに「差が分かりづらい」ときにだけ、非常手段として飾りを入れる。
文字だけでデザインするフェーズと、装飾を施すフェーズをちゃんと分けるの。
デザインは引き算で考えよう。
情報をデザインする、装飾を施す。というのは似ているようで全く別の事柄です。
いま、自分がどっちの作業をしているか。作っている途中に考えるようにしてみると、しっかり区別ができると思います。
情報をデザインする
これには、デザインの4原則を活用できます。デザインの4原則は整列、反復、近接、対比です。
実際の作業でちゃんと使えているのは、整列と反復だけだったりしていませんか？
近接、対比をしっかり行うことで、情報を構造を見た目で分かりやすくすることができます。
情報を流しこんだだけの状態
文字が大きいのと小さいの、まざってるのにおかしくないですね。
幅は狭くなったけど、文字の折り返しが丁度いいのでこっちの方が読み易い。
そうか、いっさい装飾入ってないけど、これだけでも全然違うって分かります。
装飾を付けるのと、情報をデザインするのは別なんだ。
そうなの。例は、Illustratorで作ったけれどコーディングでも同じだよ。ちゃんと大きい情報、小さい情報を細かく分けるの。これが、対比ね。
見てみると、簡単でしょう？ 普段もデザインするときにやってたりしない？
デザインの原則って知らずのうちにやっていることが多いんですね。
で、次だ。この対比をするのに、目立たせたいから順に大きくしていったら、最後の方、どんどん小さくなっちゃうでしょ？
だから、情報を役割ごとに考えるの。それを担うのが、近接。
ん？ んーーーっと。ちょっと位置がズレましたね。
「その場で〜」という文字が少し上。文章が下にズレました。
でも、日付のところ、なんで上と下で違うんですか？
ちゃんと合わせた方が「反復」しててキレイじゃないですか？
いい質問だね。それは、近接のルールにのっとってるんだよ。
キャッチコピーの情報ループ。
文章が、イベントの概要の情報グループ。
日付は、どっちに近いと思う？
概要は、イベントを説明しているのに対して、キャッチコピーは「イベントそのものの情報」ですから。
あ、なるほど、情報が近い方に余白も合わせてるんだ。
元のサイトで、さっきの話を振り返ってみよう。
確かに、文字が小さくなって親子関係は分かりやすくなりましたけど、空白がかなり空いていますね。
これは、関連した情報だから、もう少し近くに…。
でも、こうした方が、より「読み易くなる」。
読んでいるユーザーにとっては気付かないことかもしれないけど、気付かれなくて初めて「良い情報デザイン」ができたコトになるんだよ。
普段おいしく食べてるごはんもさ。鉄のお箸になると、違和感を感じたりしない？
確かに使い慣れてるお箸だと、何も考えずにおいしくご飯食べてるけど、焼き肉屋さんでお箸使うとき「重いな」とちょっと感じるときがあります。
まずは、「違和感なく読めるように」を意識しよう。
あんなに長く話したのに、文字サイズと余白を調整しただけだね。
でもね、なんとなくやると、冒頭みたいに「なんで？」て聞かれたときに答えられないでしょ？
でも今なら、これは親子関係だから文字の大きさも変える(対比)。で、さらに近しい情報だから、余白を狭める(近接)。
「なんで、こんなに文字小さいの？」って人に聞かれたら、理由を答えられそうじゃない？
原則を意識することは、デザインの「なぜ？」を言語化する第一歩
Webデザインはコーディングも占める割合が大きいから、ビジュアルデザインが苦手な人もいるんだけど、それでもデザインの専門職なのよね。
他の人たちにデザインのクオリティを任せていたら、デザイナーとしてのお仕事ができない。
理由をちゃんと話して、議論して。で、結果的にお互い納得できるようにして、質を保ちたいね。
と、言う訳で、いかがでしたでしょうか。今回のレビュー。かなり地味だっとは自負しておりますが、しかし、デザイナーにとってはないがしろにできない部分です。
また、他の職種の人たちにも、デザインの考えは浸透してきているので、4原則をもとに話すと通じやすい。そんな「共通言語」としても活用できるのではないでしょうか。
今回の重要なポイント
- 情報の親子関係を考える
- デザインは引き算
- 装飾とデザインは別
- 原則にそってデザインできれば、人に説明しやすい!
前回のレビュー記事でも、「文脈に関係ないデザイン、していませんか？」としめましたが。
「今回は文脈に関係あるデザイン」の話をしてみました。いかがでしたでしょうか？興味のある方は、こちらの記事も読んでみてください。
ソフトを使うだけじゃ絶対覚えられないデザインの重要ポイント4つ！
マーズ・トレーニングでは、実例をもとに、このようなレッスンをしています。
デザインの4原則の使い方。実際に見てみると具体的にどういうコトをするのか。分かりやすかったと思います。こういった、「書籍では得ずらい情報」がマーズ・トレーニングの得意なところです。
今回、レビューに参加してくれたあゆちゃんは、会社の中で、ひとりでデザインの仕事をしています。自分が迷ったときに、道を示してくれる先輩が欲しい！そんなアナタにピッタリのトレーニングです。
マーズナレッジ・トレーニングサービスでは生徒さんを随時受付ております。ヒアリングは無料！ぜひお申し込みを〜。