005 練習のやり方「模写編１」

これも、もうすでに先人が何人もたくさん書いているので今更私がどうこういうのはおこがましいと感じています。ですが、そんな中…一応10数読んだのですが、誰も書いていなかった（見つけられなかった？）ことを書いておきます。

「サイト模写」

サイトを模写する前に、そのサイトが何を伝えようとしているのか、紙面に書き出している人がいない気がしました。どうしてそのサイトができた・作った・何を誰に発信したいのか。その理由を想像・理解せずして模写はできず、模倣することしかできません。模写と模倣は微妙ですがちょっと違います…。

模写する前に書き出してください。
書き出さないと模写うまくできないでしょ？できましたか？なんでこんな形？やり方？って思いながら作るはめになりませんでしたか？
もしくは「何も考えない」で絵面だけ写して無駄に時間を使うとか…
そんな風にして「模写して何がわかるんだろう？」なんて感想が出る結果になったりは…しませんでしたか？それは「模写」ではなく「模倣」になってますよ、と…。
そこが結構…気になりました。

なぜその表現？
なぜその枚数？
なぜその色？
なぜそのフォント？
なぜその写真なのですか？

全てには意味があり、理由がついています。
好きなものをいい感じで羅列なんてしていません。
会社のページです。学生のお絵描きではないのです。

模写する前に、

・そのサイトを選んだ理由
・そのサイトが何を訴えているのか一言で表す
・そのページ内で一番目を行かせたいポイントがどこなのか絞る
・そのサイトを見て、自分の言葉だけでサイトの説明をする

やってみてください。

「それから」模写です。
模写が終わったら、とても大事な作業をします。

どこがどのくらい見本と違うのか、書き出します。
何個ありますか？

その数が、貴方が「気を抜いた数」＝「ミスの数」です。

修正していきましょう。
そして同じにできなかった理由を書き出しましょう。

そこが貴方の「勉強しないといけないポイント」です。

「代替え案作成」

模写行為が終わったら、次はその題材で「自分流」のページを作成しましょう。
似ていて構いません。全く同じでなければいいのです。
一部変更でも構いません。
「（私が思うに）こうする方が成果性が上がるだろう」という変更にできたらOKです。

やり方は、模写したページを眺めます。
前述ですでに、そのページのテーマ・コンセプトは理解していますので、今度は「自分ならどう作るか」を考えます。

・テーマカラーは何にするだろう？
・フォントはどれを使うだろう？
・サイズは？位置は？写真は？
・自分ならこの内容をどう表現するだろう？

…です。

「手順」

１）ワイヤーフレームを作成します。

まずは、シンプルページ（１ページもの）のWEBデザインを、紙でも画面でも構いません描いてみましょう。（紙の方が素人の場合、脳内処理しやすいです。でも好みなのでどっちでもいいです。ワイヤーフレームさえ作れるのなら）

※ワイヤーフレーム…webページのレイアウト設計図

２）次にワイヤーフレームに寸法を書き込みます。

素人の時だけです。
空間把握能力のある人はする必要ありません。
ない人は、1ピクセルに気を許さないでください。
それがWEBデザインの基準であり基本です。
デジタルは０と１が全く違います。
適当はデザインの乱れを生みます。計算命なところが大変大きいです。
気をつけてください。ズサンは敵です。

３）図面が敷けたら、デザインカンプ作成です。

やっとここでPhotoshop、Illustrator、XD（似た他のツールで全然OK）などの制作ツール登場です。その図面通りに作成・配置していってください。自分のイメージ通りに置けましたか？修正が入りましたか？
それが今の貴方の「感覚のズレ」です。真剣に向き合って、微調整してください。

※デザインカンプ…デザインの完成見本

４）ここからは持っておられる知識とやりたいことの戦いです。

使いたいソースやコードがあれば調べたり探したりして自分の理想のデザインに近づけてください。

そうすると、今の自分がどこまでできて、何がわからなくて、どこがわからないのか、知らないのか、が見えるので、また、調べて探して勉強してください。

これを５回も繰り返せば、簡単なシンプルページ1枚くらいは楽しく作れるようになるでしょう。構造も理解し始めていると思います。

５）補足

LPなど、シングルページ（１ページ）ものもありますが、本来サイトは複数のページ構成ですので、フレームワークを作る際に、ディレクトリマップとサイトマップを作ります。
いわばビジネスビルのようなものですので…訪れたお客様が迷わないよう、上手にフロア配置してあげるといいのです。

※ディレクトリマップ…WEBサイトのすべてのページ情報をわかりやすく一覧にしたものです。
※サイトマップ…言葉のまま。サイト全体の配置をわかるようにしたものです。

「最後に」

デザイン制作は料理に似ています。
誰でもできるのですが、そこには「素人」と「玄人」がいて。
味覚にも差があって。
「美味しい」「不味い」が存在します。
そして、この美味しいのか不味いのかを決めるのは、
「作った人」ではなく「食べた人」です。

作った人がいくら「これは美味しんだ！」と熱弁しても、
食べた人が「不味い」と感じ、嫌だと思ったら、
お金を払ってもらえずクレームをもらうことになります。

ね？同じでしょ？

貴方は今、言わば「デザインの料理人」になろうとしているのです。
でも良かったですね。
料理人は免許が必要なんです。

デザイナーは免許が存在しませんので、気軽に始められます。

だからこそ、その分。
示唆がありません。
誰も「正しい道」「定番の道」は教えてくれないのです。
（連携のやり方と先輩たちが見つけてきたパターン・時短技と失敗談から学んだミス回避方法しかないんです）

これが、私たちデザイン業界の「習うより慣れろ」です。

この世界は「ベテラン」と「チャレンジャーの巣窟」なだけなのです。
まるで「冒険者志願」のようですね。
さあ。同じ武器は与えられています。
貴方はどう戦いますか？

そんな感じw

…と、今回はとっても攻める強い言葉で書きましたが、大事なことなので…。
模写も「自分の意思を持って」目的を明確にして行ってみてください。
有意性を上げていきましょう。