・模写がデザイン力向上にいいって聞くけど具体的にどうやってやればいい？
・単に模写しても何のスキルが身についているか分からない、、
- Webサイト模写のやり方と分析ポイントが分かる。
実体験をベースに記事を作成していますので参考になれば幸いです。
Webデザイン力向上策「模写」を具体的にやってみた
この記事では、模写の具体的なやり方を架空の見本サイトを想定して書いていきます。企画段階で目的とターゲットを定めてデザインは進みます。なので、目的とターゲットを簡単に想定しながらデザインのポイント、模写のやり方を書きます。
模写のメリットは
- 洗練されたプロデザイナーの技術を取り入れることができる
- 結果、デザイン基礎力がアップする
です。プロデザイナーは基礎がしっかりした上で見せ方を工夫しています。なぜこのデザインにしたか、を考えながら時には違うデザインに変えてみて自分の想定したことの検証をしてみる、ということになります。
なので、なんとなーく模写して同じデザインになったらOKということではなくてなぜこのデザインにしたのか、のポイントを言語化できるといい、ということになります。
Webデザイン模写する見本サイトを選ぶ
模写するには、模写するための見本サイトを選ばないといけません。大手企業、有名企業や他デザイナーがオススメしているサイトなどから選びましょう。大手企業系はデザインは専門デザイナーに制作してもらっていることがほとんどだから、という理由です。
また「ギャラリーサイト」で選ぶのもいいです。ギャラリーサイトにのせてあるサイトはカッコいいデザインのサイトしかありません。※過去記事→Webギャラリーを利用してWebサイトをたくさん見る
この記事では架空Webサイトを模写をする前提で話を進めます。（あるサイトをお手本にはしています）
以下のようなサイトがあると仮定します。
- シンプルだが基本に忠実な構成になっている
- ユーザー導線を明確にして有用性、権威性を直感的に伝達している
- コンバージョン（Webサイトの成果）が明確
- photoshopで制作できる（写真画像、企業ロゴを利用しているがイラストは使用していない）
伝えたい情報を分かりやすく「デザイン」して、ユーザー行動を明確にする「マーケティング」要素を持っているサイトということ。Webサイトの目的を達成するために必要な要素が盛り込まれているサイトを見本にするという前提で進めます。
デザインは、見た目のカッコよさ（印象のよさ）とターゲットを誘導するデザインの両軸で考えるとランディングページの制作にも活かすことができます。
※ランディングページとは、目標とするコンバージョン（サイトにおける最終的な成果）を獲得するために、必要な情報を1ページに凝縮したサイトのこと。
Webサイトの目的とターゲットを想定してみる
誰に（WHO）何をして欲しいか（WHAT）それはどのようにするのか（HOW）を想定してみます。
WHO
企業の総務担当者（仮想定してます）
→ファイル管理のルールが定まっていなく必要なモノが瞬時に取り出せないのでなんとか簡単に必要な物を取り出せないか、と日頃課題を持っている（仮課題です）
WHAT
無料お試しで本サービスを試してもらいたい、資料請求や問い合わせだけでもしてもらいたい＝本サイトのコンバージョン
→課題を簡単に解決できることをアピールし、実績多数である証拠を提示することで安心感を持ってもらい問合せへのハードルを下げる
HOW
・この企業のことは全く知らないが課題を解決してくれそう、と直感的に感じてもらい興味を持ってもらうための構成にする
・多忙な人でも流し読みで理解してもらえる視認性の高いデザインにする
こんな感じでサイトの目的とターゲットを自分なりに解釈することでデザインの意味が言語化できます。
サイトの「構成要素」を書き出してみる
先ずは手書きでもいいので構成要素を書き出してみます。
AdobeXDでファーストビューだけ書いてみました。
こんな導線でサイト作ってるんだ、と知ることが目的です。
ページ全体の構成要素を確認してどのような流れでページを読ませようとしているかを分析してみます。
- ファーストビュー
- サービス説明
- サービスメリット説明
- 具体的なサービス説明
- より具体的なサービス概要ページへのリンクボタン設置
- ユーザーの声
- お知らせ新着4件表示
- コンバージョンボタンを再度設置
- フッター（サイトマップ設置）
ヘッダーからフッターまでの間でどういう展開で流れていくのかを知る、ということ。
Webページにおいて、ユーザーが最初に訪れたときに目に入る部分
コンバージョンボタン
ユーザーをホームページの訪問者から顧客に転換（コンバージョン）させるためのボタン
サイトキャプチャーしてphotoshopで模写していく
見本サイトを画面キャプチャーしてphotoshopに表示させ、隣に模写していきます。photoshopご存じな方は見本サイトの透明度を下げて半透明にして上から模写（というかトレース）すれば楽なのでは？と思うかもですがそれだと何も考えずに進めてしまえるので隣に並べるのがいいです。ぱっと見て隣にキャプチャー画面も並べずに自分のイメージだけで模写してもいいですが、初心者にはきついのでとりあえず並べてみます。
左が見本サイトで右が模写です。自分で見た目こんな感じだろう、とフォントを決めたり余白をとったりライン幅を考えて引いてみたり、と手を動かして模写します。
見本サイトの画面キャプチャー方法
デザイン分析
模写できたー、完成！と終わらすのではなくてここから各部分について分析していきます。自分ならこうは考えなかったなぁ、なんでこの構成にしているのだろう（きっと意味があるはず）、他のデザインに変えてみるとどうなるのかな、という具合に分析してこのデザインになった「必然性」を自分なりに考えてみます。
ファーストビュー分析
一番最初にみる画面で興味ない人にも刺さるないようにしないといけません。（イメージ、実績は写真画像を想定しています）
これを構成要素で分解して考察してみます。
・ヘッダー要素
ヘッダー要素は、左から「企業ロゴ」「ナビゲーションメニュー」「コンバージョンボタン」となっておりユーザーにとって安心感ある設計。
・キャッチコピー
キャッチコピー（必要なファイルを瞬時に取り出す！）の文字のジャンプ率を上げてここで紹介するサービスは何なのか、を一言で伝達。ジャンプ率って大切、と分かる。
ジャンプ率
ホームページや商品パンフレットのデザインにおける、本文のサイズに対する見出しの大きさの比率のこと
引用：ジャンプ率：ferret
・コンバージョンボタン
画面中央寄りに、アクセントカラーを利用して視認性を上げてボタンをアピール。ボタン形状もボタンっぽく角丸にしている。もちろんホバーアクションも確認してみる。
3ヶ月間無料で・・・というコンバージョン用キャッチコピーを利用して誘導。
・メインビジュアル
サービスの具体的イメージ画像による利用イメージ想起。
・導入実績
１０,０００社のジャンプ率をあげることで瞬間的に１０,０００が目に入る。導入実績会社ロゴをスライドさせることで多数の実績を直感的にアピール。
カラー分析
デザイン理論で必ず出てくる配色比率。これを分析します。
「ベースカラー、メインカラー（サブカラー）、アクセントカラー」のこと。ベースカラー：メインカラー：アクセントカラー＝70 ％： 25％ ： 5％で考えるという理論です。
WEBサイトの配色は役割別に３つあり、それぞれに、ベースカラー、メインカラー、アクセントカラーと呼びます。
このサイトは以上のような配色設定になっているという想定です。一つのサイトでどれくらいの種類のカラーが使われているのかが見えてきます。
メインカラー
会社のブランドをイメージするブランドカラーとしても利用していることも多いです。
ブランドロゴに配色されていたりします。
アクセントカラー
コンバージョンボタンに利用されるので、メインカラーと比較して相対的に目立つ色、にすることが必要です。
サブカラー
説明する内容が変わる時にベースカラーだけでは分かりにくいので同じような色を背景にすることで切り替えを分かりやすくすることがあります。下の画像のように導入実績インタビュー（サブカラー背景）、お知らせ（ベースカラー背景）を切り分けるための背景色としているということ。
フォントカラー
これはスクールでも言われたことで、真っ黒な文字にすると黒が強すぎて疲れるからちょっと薄めの黒にした方がいい、ということ。このサイトでは、#444444というちょっと薄い黒を使う想定にしています。（真っ黒は#000000）
ピュアブラックの文字や背景と白の組み合わせは、ユーザーが文章を長時間読むとき目に不快感を与えることがあり、眼精疲労を招いてしまいます。
ラインカラー
お知らせのラインはサブカラーと似てるけどちょっとグレーよりで色分けします。
SNSアイコンカラー
フッターにSNSアイコンを配置する場合があります。サブカラー、ラインカラーよりも濃いけどフォントカラーよりも薄めに設定。
色の持つ効果と人に与える影響、そして色彩の効果をデザインに活用する方法について分かりやすい記事がありますのでご紹介します。
色の持つ効果とは？人に与える影響とデザインへの活用法：Web Design Trends
フォント分析
視認性の高いゴシックフォントを使っています。見やすいですね。
明朝体に変えてみるとこんな感じ。和な感じです。今回の目的とは合わないですね。
字間分析
字間とは、文字と文字の間のスペース幅のこと。文字詰めをしたり文字組みのテクニックがあります。微妙なことなんですけど、スクールでも重要なフォントデザイン要素として習った記憶があります。
漢字の場合は、文字間を調整することなくベタ組みしても問題ないことが多いですが、ひらがな、カタカナの場合には原則、詰め、隣り合う文字との余白を少なくします。理由は、漢字に比べ、ひらがなやカタカナの余白が大きいためです。
字間を狭くしている正式デザインは、以下の通り。
字間を広くしてみるとこんな感じ。
微妙な差ですが、ひらがなとカタカナの間は文字詰めしないと何か余白多めで抜けている感じになって見にくいですね。
画像分析
画像はみやすく、イメージに合うものを選ぶ必要があります。また視認性の高いものにすることも必要です。以下のようなことを考えてみます。
画像サイズについては、バランスの良いサイズというのがあり「黄金比」「白金比」という考え方があります。
ビジュアルデザインを行う上で、最低限知っておきたいものとして「貴金属比」というものがあります。「黄金比」という言葉を誰しも一度は耳にしたことがあるかと思いますが、これも貴金属比の一種です。貴金属比は古くから人間が美しいと感じる比率として用いられており、デザインに取り入れればバランス良く、整った見た目に仕上がります。
縦横比率が簡単に測定できるサイトもあります。METALLIC RATIO ／ 貴金属比 [黄金比・白銀比などを計算]
レイアウト分析
整然と制作されたデザインには規則があります。Photoshopでガイドを引いてみると分かります。ガイドとは下の画像の青色の線のこと。詳しくは次のサイトに説明ありです→【Photoshop】ガイドとグリッドの使い方まとめ：サルワカ
グリッドレイアウトとか言ったりして、画面を１２分割、１６分割してそこの間に要素を配置していく、ということ。
今さら聞けない！Webデザインの定番とも呼べるレイアウト方法「グリッドレイアウト」の基本：ferret
整然とされたデザインには規則性があります。
余白分析
余白をどれくらいとっているかを分析するのも自分の糧になります。余白を制する者はデザインを制する、と思ったりします。
また、下の画像のように「スペーサー」を使うことで間隔の長さに規則性を持たせることができます。これはデジハリLIGで習いました。
下画像のピンク円はwidth 100px height 100pxの円です。これをコピーして利用することで同じ間隔になっているところが画像の通りすぐに分かります。余白幅にも規則性があります。
他の気になるポイント分析
自分ならこの微妙なことは考えつかないな、と思うポイントがでてくると思います。
影をつけてみる
例えば、簡単なところで言うとボックスに影をつけるとか
影をつけないで線にするとこんな感じ。さらにボックスの角を微妙に丸にしていたのを角に変更。堅い感じになりますね。
ちょっとズラす
下の「01」の数字。自分ならボックス内に入れてしまうだろうところをちょっとズラしてボックスからはみでてます。でもこれがなんかカッコいい。
「01」をボックス内に入れてみると、
なんか硬いというか「01」が本文と混じって読みにくい感じ。ついでに写真画像と同じ縦幅に文字ボックスも変更。どこが強調部分か分からなくなってしまう印象。
分析するための基礎知識を得るには
分析してきましたが、上記以外にもサイトによって分析ポイントは色々あります。デザイン力向上にはいろいろなサイトから情報をインプットして活用していくことが必要なんですね。
とはいえ、分析するには基礎デザイン理論が頭に入ってないとどう分析したらいいのか分かりません。過去記事でデザイン独学に必要な本を紹介しているのでそちらをご参照ください。
スクール受講経験者がまとめる独学でWeb制作できる手順【企画から説明】→「デザイン」を目的に合わせて制作する
また、今回模写したサイトは「ランディングページ」の要素をもつコーポレートサイト、という前提でした。
普通のWebサイトも問い合わせであったり、資料請求であったり目標があります。そのため、ただの情報の羅列ではあまり興味がない人にとってはすぐいサイトから離脱していってしまいます。
目標を達成するWebデザインにしたい、と思った時オススメなのがこの本。ランディングページデザインを受注したときに購入しました。
加えて、Googleアナリティクス分析方法、競合分析、ABテストなど分析方法についても詳しく書かれています。
まとめ：身につけたスキルと知識をストックして活用しよう
模写の流れを整理すると、
- 見本サイトを選ぶ
- Webサイトの目的とターゲットを想定してみる
- サイトの「構成要素」を書き出してみる
- サイトキャプチャーしてphotoshopで模写していく
- デザイン分析
となります。
デザイン分析した後、「そっか、こんな方法で表現してもいいんだ」と納得して終わる、では次につながらないので使えそうなところはストックしてすぐに取り出し可能な状態にしておきましょう。模写したデザイン丸ごとphotoshopデータで保存しておいてもいいし、パーツだけ抜き出してストック用ファイルに貼り付けて保存しておいてもいいと思います。
オリジナルデザイン製作時は、そのストックを見て「これ使ってみよう」とかなるわけです。色々つぎはぎで作ると全体バランスが悪くなって調整が難しくなったりするんですけどそれも経験ですよね。僕もまだまだ未熟者なので頭の中のストックデザインだけでさらさら〜とデザインできればいいな、と思うわけですが時間かかります。
この記事はここまでです。
スキル０からオリジナルデザインのサイト制作ができるようになるまでの過程、
制作会社に営業するための「営業メールの作り方」「営業アポイントリストフォーマット」なども盛り込んでます。
実践的・網羅的な内容にしていますのでこれからWeb制作・Webデザインを始めようという方にオススメのnote
【note】スキル実績人脈０のアラフォー男がWeb制作会社に営業して副業収益化した具体的な手順