WEBデザイン模写に隠された罠

WEBデザインやWEBコーディングの勉強には、ホームページを模写するのが一番！

私も昔から生徒や知り合いにそのように伝えていました。
しかし、TwitterやFacebookなどのSNSを見ていると、ここ近年でちょっと意味合いがズレてきている・・・というか模写として成り立ってないと思いこのnoteを書くことに決めました。

拙い文章ですが、最後までお付き合いください。

さて、まず模写とはどうゆう意味か再度確認してみましょう。

模写とは

模写（もしゃ、英: reproduction, reproduce）とは、美術において、他者の作品を忠実に再現し、あるいはその作風を写し取ることでその作者の意図を体感・理解するための手段、方法。またその行為によって生み出されたもの。したがって模写には再現のための知識・技量が必要となる。

Wikipedia 模写 より引用

この中でも一番注意してみていただきたいのが・・・

作者の意図を体感・理解する

当たり前のことですが、できているかと言われたら、できていないのではないでしょうか。

今あなたが自分で見つけてきて模写しているサイト、メンターから指示があり模写しているサイト、そのサイトの目的やゴールは把握していますでしょうか。

ほとんどの方が、「数をこなすといい」「とにかく作ってる」だと思います。
その模写は作者の意図を体感・理解できておらず、ただただコピーをしているだけになります。

例えると、子供のころにひらがなを覚えるために、漢字を覚えるために書き取りをしたと思います。
その書き取りをしているときに「書き順」や「バランス」「止め跳ね」などを意識してした人と、とにかく早くだけを目標として書き取りをしている人に差が生まれてしまう。
それと同じぐらいデザインの模写にも差がうまれます。

厳しいことをいいます。
コピーするだけでしたら、貴方がする必要がありません。
そこらへんにいる方でも変わらず制作が可能で、価格が低い人へ依頼を行いその価格競争に巻き込まれてしまうのがわかりきっています。

では、どのようにすればコピーではなく模写をすることができるのか。

正しく模写をする方法

模写と言ってもWEBサイトを作るのに本番と練習には制作工程で違いはありません。せっかくのチャンスなので、本番さながらの理解度を手に入れることにより、正しい模写を行うことができます。
模写を行う前に以下を確認しましょう。
①情報
②目的
③ゴール
④導線
⑤確認
⑥アレンジ
⑦提案

①情報

模写するサイトの情報確認。
これから模写を行うサイトはどのようなサイトなのかを確認しましょう。
以下を書き出すことにより、模写するWEBサイトがどのような物かを理解することができます。

ジャンル
どのようなジャンルのサイトを作るのかを確認しましょう。
コーポレート、EC、LP、ポートフォリオなどいろいろなジャンルがあります。

使用カラー
サイトで使用しているカラーの書き出し。
極力全部のカラーを書き出してください。
その際に見出し１はこの色など、指示書を書いているぐらい細かく書き出す事。

②目的　何をしたいのか

・商品を宣伝したい
・会社を知ってほしい
・ものを売りたい
・キャンペーンを行いたい　など
依頼者は何のためにこのWEBサイトを作りたいのかを理解する。

③ゴール　どうしてほしいのか

「②目的　何をしたいのか」が確認できましたら次は利用者にどうしてほしいのかを理解しましょう。
大きく分けるとゴールは2種類になるかと思います。

お問い合わせ
みた人にお問い合わせをしてほしい。
細分化すると、以下のようになります。
・問い合わせ
・見積り依頼
・カタログ請求（ダウンロード）
・取扱説明書請求（ダウンロード）
・技術相談　など

利用してほしい
見た人にサービスを利用してほしい。
細分化すると、以下のようになります。
・予約
・店舗情報
・検索
・購入　など

これ以上細分化については説明はしませんが、必ずゴールは設定する必要があるため、デザイン制作を請け負ったときは必ず依頼者へ確認してください。

そして一番間違えがちなのは、ゴールは必ずひとつにしてください。
大手サイトでは複数あるように見えていますが、何年もかけてホームページを運営しており、ある程度の見込みがあった時点でゴールを変えてきているため複数あるようにみえますが、制作者や運営側のゴールはひとつでそれに対して力を入れています。

④導線　どうやって誘導するのか

③ゴールに向かって、どのように導線が作られているか。
目的からゴールに向かってどうやって行動をさせるかの部分になります。
例えば目的がお問い合わせの場合は、すべてのページからお問い合わせができるか。ヘッダーを追走できるようにし、常にお問い合わせが表示されている状態になっているか。
商品宣伝をしたい場合は、トップページに一部商品表示がされておりそこから商品一覧もしくは商品詳細へ移動できるか。

⑤確認

③から④までの項目を模写するサイトや制作するサイトで設定できているかを確認します。

目的がこうで、ゴールがこうだから・・・
あーなるほど、だから導線はこうしてる！

まずはこの程度の確認で大丈夫です。

目的から導線、ゴールまでの過程はシンプルにすればするほど効果はでます。

インターネットで一番「目的」「ゴール」「導線」がはっきりしているのはgoogleです。言い切ります、googleです！

皆さん利用をしたことがあると思います。
googleのゴールは今も昔も「検索」してほしいがゴールです。
TOPページを見てください。

ほぼ検索しかコンテンツがありません。
いやでも検索します。検索するときにしかほとんど開かないぐらいです。

模写はここまで確認してから行うことで、最低限の効果が得られるようになります。

⑥アレンジ

ここからが「プラスワンポイント思考」です！

プラスワンポイント思考とは・・・
何かをするときに必ず付加価値を一つつけるように考えるということです。
私が勝手に考えて、勝手にいろんな人に教えて作った言葉です。

私は仕事以外ではできてません！ｗ

では、まずもう一度模写するサイトや制作したサイトをよーく見ます。

貴方はこのサイトを作った人にクレームを言うために見ています。そう、窓の桟に埃がついているのをネチネチいう姑のごとくサイトを見ています。
そんな人がこのサイトを見たときに、ゴールまでたどり着けるかを想像してみてください。
その人は必ずクレームを言うと思います。そのクレームを一通り聞いたら、修正してください。
そして再度クレームを言う人に脳内で出てきてもらい見てもらいます。

これを3回繰り返すと・・・

模写する前のサイトが、あなたなりに考えたものに生まれ変わっていると思います。

ここでは妥協をせずに、「こうしたい」「こうしたほうがいい」と思ったものを突き通してください。

⑦提案

そして最後に、メンターや依頼者へ提出するときにアレンジする前とアレンジした後のものを提出します。
自分でするときも二つ用意して見比べてください。
その時にアレンジしたほうは、なぜこうアレンジしたか説明を付け加えてください。

説明がうまくできないという方。

よーく今までの流れを思い出してください、そうすれば説明が完成しています。

例えば、ヘッダーメニューのお問い合わせを目立つようにアレンジした場合

目的はお問い合わせ数が増えてほしいと聞いています。
そのため、ゴールをお問い合わせと設定していますが、今いただいている課題のデザインではお問い合わせへの導線が弱いと感じたので、一部アレンジを行い提案いたします。
まずメニューにお問い合わせがありますが、そのままと他のメニューと同じになる為、お問い合わせ項目へ枠線をつけて色も変化しております。
これにより、サイト利用者が嫌でもお問い合わせに目が行くようになります。
課題のデザインよりも目立つようになり、初めにお問い合わせへ目が行くため、実際にお問い合わせをしたいと思ったとき「確かさっき見た」という「探す」ではなくて、「さっき見た」という記憶にとどめる効果があります。

こんな風に説明ができます。
脳内でクレームを言ってきている人の対応をそのまま文章にすれば、説明文がつくれてしまうのです！

自分で練習するときにもなぜこうしたのかを必ずメモしておいてください。

これを読んでいる貴方がデザイナーとしてデビューして依頼者と話をするときに必ず役に立ちます。
依頼者にお問い合わせ増やしたいんだよねーと相談されたときに、お問い合わせを目立たせる方法としてそのまま提案ができるからです。
方法が増えれば増えるだけ、依頼者へ提案する数も増え、利用者がより利用しやすいものができるからです。

まとめ

まずは拙い文章にもかかわらずここまでお読みいただき、誠にありがとうございます。
ここまでで約3000字ほどあります。
小説家になろうで言うことろの平均1話分です。

お読みいただいて、正しい模写とはどうゆうことかがわかっていただけたらと思い文章を書いております。

文字だらけで難しく考えてしまうかもしれませんが、単純に考えていただいて大丈夫です。

私たちが作る「デザイン」「制作物」は「依頼者の想い」と「デザイナーの想い」が存在し、サイトの「利用者の行動」が生まれることにより評価が発生します。
決してデザイナー独りよがりでも、依頼者の独りよがりでも利用者の行動は生まれません。

想いを形にして利用者に届けるお手伝いをする

これが何かを作り生み出す制作者の仕事だと私は思っています。

今からでも改めて模写を始めてみましょう。
模写が悪いとは言いません、とてもいいことです。
しかし、物事には必ず意味があることをわすれずに、情報を確認してそしてプラスワン思考してみましょう。

おまけ

メンターがいる方、教材を利用している方へ

おまけです！
ここからは色々見て、ひどい現状だったため私が思ったことを書いています。言葉が汚かったり変なことを言ってたりします。不快な思いをさせた方がいらっしゃいましたら先に謝罪をいたします。

大変申し訳ありません。

メンターや教材プログラムなどを利用されている方へお伝えします。

サンプルとしてメンターなどから渡されたデザインや、教材プログラムを利用している場合は、出題者や質問できるところへ確認してください。課題を作る際に必ず情報設定はあるはずです。
この情報を理解することにより、依頼者の希望からはずれていないかを確認することができます。

メンターに情報をきいてあやふやな情報しか提示してこなかった。
模写やコード、デザイン制作を教えますという記事やnoteをみつけたけど情報が載っていなかった。

近年よく見かけます。
実際にどうなのかと有名どころから無名、無料、有料問わず20件以上を確認してみました。
すべて設定がされていませんでした。

世の中には私が知らない練習サイトなどがあると思いますので、すべてがそうだとは言いませんが、無意味とは言いませんが模写としてはとても残念で受講している方のこの先のことを考えていないんだなと私は判断します。
私がこの業界で仕事をしたいと思っているなら、即自己学習に切り替えます。

でもそんなに思い切ったことをするのは難しいと思います。

そんな時は自分で勝手に情報をつけて、勝手にプラスワン思考しちゃいましょう！ｗ