新人デザイナーが陥った！参考サイトにまつわる落とし穴

こんにちは、新人デザイナーのnaoです

今回は、私が参考サイトを探して→分析して→デザインする過程にて、それぞれの段階で陥ってしまった落とし穴を紹介します。
新人は嵌りがちだと思うので、教訓になれば幸いです。

先輩デザイナーより「ワイヤーフレームを作るから参考サイトを探して欲しい」という指示を受けました。
その際陥ったミスがこちらです。

 

1、内容より見た目のオシャレさで選びがち

新人あるあるだと思います。
まず参考を探そう！とサイトギャラリーを開いて目を引くのは、ユニークなもの、かっこいいもの、インパクトのあるものです。でも実際に参考になるサイトは必ずしもそうとは言えません。
デザインとは問題解決だと散々学んできたというのに、「デザインはお洒落で、かっこいいもの」という概念が体に染み付いていて、まだ取れていませんでした。
後ほど説明するのですが、デザインの「設計」部分を見ておらず、「出力」しか見ていなかったのです。

 

2、コーポレートサイトを作るのにサービスサイトを探してしまった

参考サイトを探す際、私は案件と同じ業種、ターゲットで絞って探しました。
しかし、同じ業種でもコーポレートサイトとサービスサイトではテザインやコンテンツの見せ方などが全く違ってきます。
それを理解しておらず、今回の案件ではコーポレートサイトを制作するというのに、ユニークなものが多いサービスサイトばかり見ていました。

これでは、次に行うサイト分析であまり役には立ちません。結局、分析する際に採用されたのは先輩が集めたサイトになってしまいました。

次の参考サイト分析では、サイトのコンテンツ内容や雰囲気などをそれぞれ分類分けし、どうしてこのデザインなのか等を分析していきます。
分析した結果、どこを反映させるか、させないかを決めていくのです。

 

3、コンテンツ内容ではなく見た目のデザインばかり見ていた

サイト分析の際に、先輩から同業種の昔と今のサイトを比べるように、と参考サイトのキャプチャをいただいたため、まずはそれを分析することに。

私は
「昔はリッチデザインだけど今はフラットデザインが多いのは流行か」
「レスポンシブを意識したデザインになってるのはスマホ普及によるものだろう」
こういった分析をしていました。

しかし、違ったのです。
今する分析はあくまで「ワイヤーフレーム」を作るためのものであり、つまりはコンテンツの内容をどう配置するか、現状の内容でいいのか？などを考える場面。「見た目」はその後の話なのです。

なので、このとき分析すべきは
「以前はわずかなコンテンツ以外、ナビゲーションでしか下層ページに行けなかったが、改修後はトップページに下層へのリンクがほぼ出ており、トップから回遊しやすくなっている」
「昔は一緒くたにまとめられていたコンテンツが、今は見やすいよう分割されている」
等でした。

先ほども述べたことですが、デザインは「設計」＋「出力」だとこの会社に入って教わりました。
わかりやすい、いわゆる一般の人が思い描く「デザイン」は「出力」ですが、「設計」も大事なデザインです。デザインの第一歩は「設計」であり、設計図なくしては家を立てることも、壁紙を貼ることもできないのです。

ワイヤーフレームは設計図。設計図を作るには、壁紙の柄を見るのではなく柱の位置や窓の数を分析しなけらばならないのです。

 

4、会社の規模感や方向性を考えていなかった

そんなミスをしながらも、今度は同じ業種でターゲットのコーポレートサイトを探し、設計を分析しました。
その際私は「トップ企業ならばデザイナーも力を入れているだろう」と業績ランキングを参考に上から順に見ていきました。
するとページにもよりますが、下層ページなどでは概ね統一した傾向が見えてきました。
私は「なるほど、これが正解なんだ！」とその傾向に合わせてデザインを作成しました。
そして出来上がったのは、普遍的で面白みのないデザイン。
それが悪いのではありません。むしろ大衆に受け入れられている、わかりやすいデザインだからこそ普遍的なのです。
しかし、今回の場合は違っていました。

今回の案件は従業員が何千人もいる大企業ではなく、世界を広げたいと考えているベンチャーよりの企業です。
求められているのは
「多くの人の目にとまる正統派のデザイン」
ではなく
「他の同業種との”違い”がわかるユニークなデザイン」
だったのです。

ディレクターからどんな会社か、どういった未来を思い描いているかをちゃんと聞いていたのですが、すっかり頭の隅に追いやってしまっていました。

 

5、レイアウトばかり見て、デザインの意味を深く考えていなかった

と、いうわけで今度はベンチャーよりの参考サイトを探しにいきました。
そして集めてみると、てんでバラバラ。
当然です。個性のあるデザインを持ってきているのですから。

ですのでその中から私は「このサイトのこのデザインならここをこうしたらテイストが合いそうだな…」とデザインを作り始めました。
お分かりでしょうか。私はまたしても「設計」をせずに「出力」を始めたのです。
いまでもやらかします。
そのため、今度は個性的にはなったものの、個性があること以外意味のないデザインになってしまっていたのです。

大事なのは「なぜこのデザインになったのか」というデザインの理由、意図。

分析する際にそこを見ることで、一見全く違うように見える「出力」でも、共通した「設計」の根本が見えてくるはずです。

反映させるときには設計意図を汲み取り参考にすることで、表面上をなぞったようなパクリのデザインにならず、自分の力にもなっていくのです。

 

まとめ

「デザインには意味がある」とこのブログを読む方なら見聞きしたことがあると思いますが、その「意味」にも設計と出力があり、両方の意味を考えて作る、というのは学生時代には考えていませんでした。
「見やすい」「トンマナがあっている」等の「出力の意味」は考えやすいけれど、「なぜこのコンテンツはこの配置であるべきなのか」等の「設計の意味」は今まで意識してこなかった分難しい。
今でも修行中です。

参考サイトを探すだけでなく、サイトトレスをする、先輩のデザインを見る、等のときも、真に見るべきはそういった表層的な部分ではなく、もっと奥の部分です。

同じものを目指して作られたデザインならば、見た目＝「出力」がバラバラでも、そのデザインに至る意図を読み解けば、「設計」には共通のものを見つけることができるはずです。

こうして「設計」と「出力」をそれぞれ分析し、どこを今回のデザインに取り入れられるか、取り入れないかを様々な視点で考えていくのが「参考サイト」の「参考の仕方」なのだと学びました。

今後参考サイトを探す際には、「デザインを見る」と言う1つの視点ではなく、「設計と出力を見る」と言う2つの視点を持っていこうと思います。