Webデザインの一歩目で一番に心がけるべきこと。

主にWebデザインを始めたばかりという人向けに、最初に心がけるポイントについて書いていきます。
具体的なテクニックではなく、もっと根本的な部分の話です。

『Webデザインの一歩目で一番に心がけるべきこと』とは？

結論を一言でいうと
『徹底的にパクる！』
です。

これだけでは誤解を招くので、もう少しきちんと説明します。

初心者が失敗する一番のポイント

Webデザインを始めた際は、サイトを作っても『なんか違う』『イマイチ』と感じることがあると思います。

『なんか違う』は言い換えると『プロっぽくない』。

なぜプロっぽくないかというと『プロがしないデザインをしているから』
なぜプロがしないデザインになるかと言うと、『プロのデザインをよく見ていないから』

ではどうすればいいかと言うと、
『プロのデザインを見て、同じようにデザインをする』
これに尽きます。

これが今回の内容の全てで、凄くシンプルな話だと思います。

ただ、実際に実践しようとすると全然簡単ではなく。
細かい部分までは真似する以前に、気づくこと自体難しいかもしれません。

なので、とりあえずここではパッと見で分かるレベルの話とします。
『明らかにそんなデザインは他では見ないだろう』という部分をまずは潰せるようにしたいです。

『それなら』と思われるかもしれませんが、それでも簡単ではないと思います。

習いたての方のサイトを見て何よりも思うのは、『センスがない・技術がない』ではなく、『他では見ないデザインをしてる・プロのデザインを真似しようという意識が低い』です。

よく見る例としては、例えば、ドロップシャドウのかけ方。

こういった影のつけ方はプロのサイトではまず見ません。
『他のサイトと同じことをする＝他で見ないことはしない』という意識があればやらないことです。が、本当によく見るデザインです。

なので、まずは『とにかく何が何でもプロの真似をする！』という意識を持つことが大事だと思います。

最初に心がけるべきは『TTP』

繰り返しになりますが、
プロと同じことをすれば、明らかにプロがしないデザインにはならない筈です。

自分は『TTP』と教わりました。

TPPではなく、『徹底的にパクる！』の略で『TTP』。
教えてくれた人の造語かと思ってたら、検索でヒットしたのである程度一般的に浸透してる用語のようです。

他にも『自分の頭で考えないように』と何度も注意されました。
（デザインするのに自分の頭で考えないって禅門答のようだけど、主旨はここまでの内容で伝わるかと。）

デザインをする際、『全ページ全箇所、参考にするデザインをまず用意する』ということもありました。

文字通り『徹底的に』です。
『少しだけ見て、なんとなく同じことする』のではなく、『大量に観察・分析して、しっかり踏襲する』。

それを繰り返していくと、いちいち参考デザインを探さなくても素人っぽさが減らしていけると思います。

『パクる』際の注意点

念のため補足すると、ここでいっているのは
闇雲になんでもかんでも徹底的に丸パクリしろ
ってことではないです。当然。

注意点は色々ありますが、特に大事だと思うものを３つ挙げます。

これらの点を踏まえれば、『パクリ』でもただの二番煎じ・参考サイトの劣化版ではなく、オリジナルと言えるものになると思います。

① 真似すべきポイントと真似してはいけないポイントを見極める

一言でOKとNGの境界線を言い表すのは難しいですが。

例えば、以前女性ファッション関連の書籍やサイトの共通点を調べて、記事にしたことがあります（現在非公開）。

こういった共通点は、真似してOKだと思います。
タイトルにあるように一種の『作法』や共通の『型』となっているのは、むしろ積極的に取り入れていくべきです。

（ジャンル的にたまたま紙とWebのデザインが共通したので、雑誌も参考にしましたが、基本はWebだけ見るべきかと。紙はWebではやらない表現もあるので最初は参考にしない方が良いと思います）

他にも、農業関連のサイトなら配色は『緑・茶』、住宅関連なら『家をモチーフにしたロゴ』などは沢山サイトを見ればすぐに共通点として気づけます。
そういった一般的とも言える共通点は取り入れてOKでしょう。

② パクりにも必然性と根拠を

デザインには『理由』があるのが原則。
真似する場合もそれは同様。真似する必然性があるからパクるのです。

根拠もなく真似するのは、パクり以前の問題。
『なんとなくパクる』のは『なんとなくデザイン』するのと変わりません。

まず制作するサイトのワイヤーフレームやコンセプト・目的は当然オリジナルなはず。
そのWFやコンセプトに沿って参考にできそうなデザインを探します。

『メインビジュアルのレイアウトは、このサイトが参考になりそう。
全体の雰囲気はこのサイト。配色はこのサイト。メニューの見せ方はこのサイト』など。

そうやって、個別に根拠を考えながら参考サイトを探すのは、やってみると決して楽ではないというのがわかると思います。

③ 良いデザインからパクる

当たり前ですが、悪いデザインを真似しても意味ありません。
赤点の生徒をカンニングするようなもの。

そもそも良いデザインを見分ける自信がない場合はギャラリーサイトとかから選ぶと間違いが減るでしょう。

大手の企業のサイトもやはりクオリティが安定して高いので参考になります。

オススメの勉強方法

よくデザイン力アップの勉強方法として、『サイトの模写』が挙げられます。
見本サイトを観察して手書きで模写したり、フォトショで再現する練習です。

これもTTPの主旨に沿っていて有益だとは思うんですが、個人的にはあまり好きではないです。
基本既存のものをなぞるだけなので、作っていて正直退屈。。

なので、自分はクラウドソーシングのデザインコンペに参加してました/今も時々してます。
依頼主が用意したWFなどを元に、参考サイトを探して、真似しつつアレンジしていくというものです。

内容は練習というよりほぼ実践ですね。
ただ、コンペなので失敗しても当選しないだけ。期限に間に合わなくても問題なし。

そこが業務とは違って、気軽に練習気分で参加できるのが良かったです。
そして上手くいけば当選して報酬も得られるかもしれません。

ソフトの扱いにも慣れていない段階であれば別ですが、模写を繰り返すよりは個人的にはより実践的なこの方法をオススメします。

毎回別のジャンルのサイトを作っていたので、毎回新鮮で楽しかったですし。
（落選すると結構凹みますが…）

さいごに

さいごに、トップで載せている画像についてネタばらし(?)。
これは実際売られてる書籍の表紙ではありません。

この表紙はイラストレーター(絵描きの方)の勉強中の自分が作ったものです。

よく『マンガで分かる』ハウツー本があるので、それのWebデザイン版を練習で作ってみました。
普段はWebデザインをやってるので表紙のデザインは初めて。

この記事で書いたようにまずは何十冊も参考を探し、『プロが作った表紙』を観察しました。
そして、レイアウトからフォント・配色・イラストの雰囲気・文言まで『パクり』ました。

自分では『ぱっと見素人っぽい』レベルは超えられたんじゃないかと思ってます。
もちろん、本物の商品と比べると見劣りするし、色々反省点もありますが。

主に参考にしたのは、同じWeb関連のこの書籍。

実際の商品だとしたら近すぎて問題かもしれませんが、習作として『プロっぽいものを作る』が目的だったので、その辺は大目に見てもらえたらと。

ちなみにこの記事は、『せっかく作ったので、コレを題材にしてなんか記事にできないか』と書いたものです。
（本来なら、Webデザインの制作例を載せるべきなんですが、そういう事情で何故かイラストでの制作例です）

『Webデザインの一歩目(というか今でも)心がけてること』を、『イラストレーターの一歩目でも心がけていきたい』とも思い、改めて『TTP』について書いてみました。