デザイナーがwebサイトを模写する際に見るべき8つの学習ポイント

webやアプリのUIデザイン上達のコツとして、模写（コピー）がよく取り上げられます。私も過去に一時期やったことがありましたが、確かにいくつかのデザインを細かく観察して自分で再現してみることで、その後いざ実践！となった時に多くの学びを活かせたと記憶しています。

そうした経験から、最近も会社の若いメンバーに模写を進めて実践してもらっていたのですが、とあるメンバーから「模写はできたものの、どんなところを観察すればよいのでしょうか？」という質問を受けました。確かに、実践経験が少ない人にとっては、真似てはみたもののそこから何を学べばよいか分からない、というのは当たり前かもしれません。

模写というと変わったレイアウトや表現ばかりにとらわれがちなのですが、本当に身に付けたいのは「使えるwebサイト」を作る上でのデザイン力の基礎部分です。その基礎とは何か？を知ると学習の効率も上がります。そんなわけで今回は、模写する際にこんなところを観察すると良いですよ、というポイントをいくつかまとめてみました。

前提）有名企業・大企業のwebサイトを模写しよう

ポイントを確認する前にまず前提として、模写するサイトは有名な企業のサイトを優先的に選ぶことをお勧めします。大企業のwebサイトは多くのweb制作の知見を持つ人が関わり、ユーザーテストや専門家による分析も行われていることが多くあります。その分、多くの人が使うことを想定した使いやすさも担保されているため、先にも述べた「使いやすいwebサイト」を作る上で知っておくべきセオリーが沢山詰まっていると言えます。そんな観点からも、大企業のwebサイトリニューアルは意識的にチェックしておくことをお勧めします。では次から、実際の学習ポイントを順に見ていきましょう。

1. リンク要素の共通ルールをつかむ

初学者が必ず指摘されるポイントとして「リンク要素のルール統一」があります。例えばJR東日本のサイトなら「テキストリンクはサイト内で必ず緑色で統一されている」といったものです。ある程度経験を積めば頭の中でルールを整理しながら作ることもできますが、経験が浅い間は沢山のページを作るうちにルールの整合性がとれなくなりがちです。多くのサイトを見ながらルールの適用方法の幅を学べると、自分でもうまく反映できるようになります。

模写しながら観察すること
・リンクアイコンの位置は文字の後かな？前かな？
・文中のリンクテキストの表現はどうしてる？
・ボタンのデザインの形やサイズの種類は何種類ある？
・ドロップシャドウが使われている箇所の共通点は何だろう？
・逆にリンク色が使われているのにリンクに見えないのはなぜ？

模写後に身に付いている感覚
・このサイトのテキストリンクの基本ルールは〇色にしよう
・テキストリンクのアイコンは文字の頭に付けるルールにしよう
・ユーザーが幅広いから老若男女に分かりやすいリンク色にしないとな
・ドロップシャドウはリンク箇所だけに付けるから他はシャドウをなくそう
・リンク色が〇〇としてるから、あしらいで同じ色を使うのはやめよう

2. UI要素の王道サイズ・形のセオリーをつかむ

対象ユーザーにもよって変わる部分もありますが、UI要素にはデバイスによっておよそ一定のサイズ感、形というものがあります。例えばヘッダの縦幅は80～90pxくらいが多いとか、文字サイズは16～18pxくらいが読みやすいとか、ボタンの縦幅は通常サイズが縦50pxに対して小さいものは30pxというルールがあるとか、タブやラジオボタンは原則としてこういう形をしている、などです。この感覚が掴めている人は先輩からのフィードバックの数は半減するでしょう。

模写しながら観察すること
・上場企業のコーポレートサイトのヘッダの縦幅はだいたい何～何px？
・ボタンのサイズは1サイトの中で何種類ある？縦横サイズは何px？
・見出し、本文の文字サイズはそれぞれ何px？
・各UI要素はどのサイズを超えると違和感があるか？
・パネルの中や文字の頭に付くアイコンはどんなサイズが適切？

模写後に身につている感覚
・ヘッダのサイズはだいたいこのくらい、これ以上デカいと野暮ったい
・基本ボタンはこのサイズだけどコンバージョンに関わる時はデカくする
・こんなデカいと逆にボタンに見えないんじゃないか？
・こんな尖がったデザインだと対象ユーザーにはタブに見えないかも
・最近のフッタはこれくらいゆったり大きくレイアウトしていいよね

3. 薄い色は何種類あるかをつかむ

背景にうっすら敷かれている薄い色や、1pxのラインの色には、濃さの種類に特定のルールがあります。ルールは少ない方が良いのですが、少なすぎると逆に繊細な表現ができないため、許される範囲内での最小限ルールを作れるとベストです。実は一見シンプルな配色で作られているUIも、ある程度塗りには濃度の幅があり、それらが組み合わさることで丁度良い見やすさが保たれていたりします。この感覚をつかめていないと、モニタを明るくしているユーザーにはほとんど分からない色の差を付けがちです。

模写しながら観察すること
・結局、薄く敷かれたグレーの色は何種類あるの？1種類？2種類？
・1pxのライン、白とグレーの上で色に乗ってるもので違いがあるのかも？
・最も薄い色はだいたい黒の〇％の濃度にしているのか
・あ、実はこのグレーは青色が入ったブルー寄りのグレーなんだな

模写後に身につている感覚
・グレーの1pxのラインは濃度〇％、それ以上薄いと認識できなくなる
・この色だとモニタを明るくしてる人には色の差が掴めない
・ベタ塗りのグレーと1pxの線のグレーは別の濃度にした方が良い
・アプリのUIならグレースケールはだいたい〇段階くらい必要

4. コンテンツの横幅やグリッドのルールをつかむ

最近のPC用webサイトのコンテンツの横幅は、狭いと〇〇px、広いと〇〇pxなど、複数の幅を使い分けていることがほとんどですから、どのように使い分けているのかを研究すると良いでしょう。2000pxを超える広いモニタで見た時の最大幅は？その最大幅で表示している時にあえて狭い横幅で表示している要素エリアはどんなレイアウト？などを調べると、実際に自分で作る際に自分なりのスケール（定規）ができます。

模写しながら観察すること
・このサイトで使われるコンテンツ幅、グリッドは何種類あるかな？
・その幅は最大何カラムに分けられているのかな？最小は？
・2～3種類の幅を使い分ける際のルールや共通点は？
・このブロークングリッドの中には実はこういう法則性があるのでは？

模写後に身につている感覚
・最近のwebサイトのトップページのコンテンツ幅はだいたい〇px
・カテゴリトップのコンテンツ幅は〇px、詳細ページはだいたい〇px
・ページ内のコンテンツ量に差がある時、〇pxと〇pxの幅を併用する
・同じ幅でコンテンツが並ぶと単調だからあえてここは狭い幅にしよう

5. 写真や図の比率のルールをつかむ

美しい写真や図には一定の比率があります。一見何のルールも無さそうに見えても、黄金比、白金比、青銅比など、自然界で「美しい」とされる法則から導き出された比率が当てはめられていたりします。また縦置きなのか横置きか、何種類くらいが組み合わせてあるのかなどを研究し、ルールの共通点を導き出すと自分でも再現できるようになります。比率を導き出すツールもあるので、同時に参照するとより学びが深くなります。
https://voidism.net/metallicratio/

模写しながら観察すること
・写真や図の縦横の比率は何種類あるんだろう？
・この微妙な比率の違いって本当に必要なルールなのかな？
・一覧ページのサムネイルと詳細ページのメイン写真は使いまわしてるのか
・あえて写真の縦横比をバラバラにすることでランダム感が出てるな

模写後に身につている感覚
・ベーシックな写真の比率は〇:〇、〇:〇、〇:〇、の〇種類
・この何とも言えない形の比率、いっそ正方形にした方がよいのでは
・一定の比率の写真ばかりにしてるから、どこか面白みに欠けるな
・こういう特殊な内容の場合は無理に比率を合わせない方がよい

6. レスポンシブ時の変化のセオリーをつかむ

レスポンシブwebデザインのサイトはスクリーンの幅が変わるとコンテンツの幅や配置も変わりますが、どのように変化するのかを見るのはとても勉強になります。特にブレイクポイントで要素の並び順やサイズ感、デバイスごとにUIはどのように最適化されているのか？を知ると、自分でサイトをデザインする際にもその法則性を使いこなすことができるようになります。

模写しながら観察すること
・ブレイクポイントは何種類あって何pxで切り替わるんだろう
・小さなデバイスで表示される際、より上に表示されるのは文字？画像？
・文字サイズはPC版だと〇px、スマホ版だと〇pxというルールがあるな
・PC版で複雑なテーブルは、スマホ版だとこんなふうに見せているのか

模写後に身についている感覚
・基本は右にある要素を下に並べる、というのが王道の可変方法だよな
・この要素はスマホ表示時には〇〇的な表現にするのがベター
・タブレット版とスマホ版を併用することを考えると〇〇な表現が良い
・スマホ版に切り替わった際にカルーセルをやめてすべて露出させよう

7. 配色ルールの適用方法をつかむ

配色にはベース6割、メイン3割、アクセント1割という原則がありますが、それらがどこにどんな条件で使われているのか？までは研究した人でなければ知ることはできません。例えば「アクセントカラーはリンクテキストのアイコンのみに使われているから画面全体の1割程度になっているんだな」といった具合に、高い解像度で理解する必要があります。

模写しながら観察すること
・webサイトのUIでは最低限として何色の色が使われているのかな？
・ベース、メイン、アクセントの3色を抜き出すとどの色が抜き出せるか？
・ベース、メイン、アクセントはそれぞれどんな箇所で使われているか？
・写真や図版の色をなくした際に残る色はどんな色かな？
・トップページの配色の印象を下層ではどんな形で生かしてるのかな？

模写後に身についている感覚
・リンクにアクセントカラーを使うと全体に満遍なく色が行き届くよな
・実は写真の色もUIの配色の印象に寄せた方がまとまりが良くなるんだよな
・メインカラーは強調色という役割で特に目立たせたいところだけに使おう
・ブランドカラー＋薄い色一色、あと背景白にすれば基本は無難にまとまる
・レインボーカラーのサイトは実は結構難易度が高いんだよな

8. 読みやすい文字量をつかむ

ページやモジュールによって適切な文字量というものがあります。ブログなどの読み物でない限り、基本的にUIの中の言葉は少ない方が読みやすくなります。しかしいざ自分でデザインした時にはその視点が無くなり、沢山の文字を詰め込みがちです。カテゴリトップのリンク要素の文章量、メインビジュアル内のコピー、本文のブロックごとの文章量など、UI要素ごとに自分なりのセオリーを導き出せると良いでしょう。

模写しながら観察すること
・H2見出しが2行にわたっていると読むのが大変だな
・グロナビの各メニューの文字量はだいたい〇文字以内になってるな
・写真+リンクテキスト、みたいなモジュールはだいたい〇文字以内だな
・ボタンの中の文字量は〇文字までにしないとボタンに見えにくいな
・このLP分かりやすいと思ったらブロックごとの説明文は〇文字以内だな

模写後に身についている感覚
・こんなに長いコピーは読まれないから〇文字以内にした方がいい
・ここはもっと文章が無いと内容に説得力が生まれないぞ
・全体的に文章を今の2/3くらいにしないと言いたいことが伝わらないな
・文章が長すぎるからいくつかの見出しを入れた方が分かりやすくなるな
・見出しを短くキャッチーにして長い本文も読んでもらえるようにしよう

最後に（模写を継続するコツ）

一つのサイトを模写するのは結構な時間を使います。その上、2～3のサイトを模写しただけでは、この記事で述べたようなデザインする上でのコツをつかむのも難しいものです。続けて模写しても「やってて意味あるのかな？」と感じて、成果を感じる前にやめてしまう人も多くいます。

そんな人におすすめしたいのが、この記事でまとめた1～8のポイントのうち、一定期間は学ぶことをひとつに絞って模写してみるという方法です。例えば1. の「リンク要素の共通ルールをつかむ」ことを目標にするのであれば、すべての要素を完璧に再現することに時間を使わなくてもよくなります。

一つのサイト模写の時間が減れば、その分幾つものサイトを模写する機会が増え、多くのデザインルールを体得することができます。そうすれば、実際に仕事の中で「あ、前よりできるようになった…！」と感じることも増え、成長を感じることができるようになると思います。

というわけで、ぜひここで紹介したようなポイントを意識しつつ、多くの方のデザインの基礎力が向上すると良いなと思います。最後に、Twitterでもデザインに関することを呟いていますので、よろしければぜひフォローしていただけると嬉しいです。

ベイジ荒砂のTwitterアカウント
https://twitter.com/tomoyukiarasuna