【学ぶ=真似ぶ】webデザインの学習にはサイト模写をおすすめします

くどうです。webデザインの勉強法・上達法でこんなことを聞いたことないですか?

  • 優れたデザインを見る
  • どうしてデザインをいいと思ったのか言語化する
  • サイトをスケッチする(紙とペンで)
  • サイトをPhotoshopやIllustratorでトレースしてみる

いいデザインを模写する。これは多くのデザイナーが提唱する上達法ですよね。

私は師匠から「モデリングしましょう!」「初心者のうちにどれだけモデリングをこなせるかが大切なんです」と言われました。

最初は「モデリングって何???」「CG用語かな??」「トレースと一体どう違うんだろう‥?」と、ちんぷんかんぷんだったけど、3つのサイトをモデリングしてみて思ったことをまとめてみます。

トレースとモデリングの(くどう的)違い

トレース=PhotoshopやIllustratorで模写
モデリング=PhotoshopやIllustratorで模写→画像書き出し→コーディング→サーバーにアップロード

「サイト模写」という意味では同じ。違いはコーディングするかどうか

サイトトレースとモデリングの違い

Wikipediaによると
モデリングmodeling)は、広義の意味での模型(モデル)を組み立てる事を言う。
(モデリング – Wikipediaより)

デザインもコーディングもする人だったら、モデリングをするメリットはめちゃくちゃあると思います。

モデリングを行うメリット

①デザイン面で身につくこと

  • レイアウトの仕方、余白の取り方
  • 配色
  • 文字の扱い
    • フォント選び、色、級数、カーニング、行送り、ジャンプ率、加工の仕方
  • 画像の処理の仕方
  • テクスチャ、パターン、シャドウの使い所

②コーディング面で身につくこと

  • 画像の書き出し方、実装の仕方
    • 文字の表示は―デバイスフォント? 画像文字? webフォント?
    • 書き出し方は―スライスで? アセットを使って? web用に保存? アードボード書き出し?
    • 画像の実装は―svgクリッピングマスク? HTMLのimgタグで? CSSのbackgroundプロパティで?
  • 命名規則
    • ファイル名、idやclassの名前の付け方
  • CSSの書き方
    • サイズの単位はpx? em? %?

私はコーディングが大の苦手でしたが「このレイアウトはこうやって実装すればいいんだな〜」「ここは疑似要素を使うんだな〜」ということが経験的にわかるようになりました。この経験知は自分でサイトを作るときに活きてきます。「あ、あのサイトでやったやつだ!」みたいな。

モデリングをする前に考えるとより学びがあるかも?

  • そのデザインのどこをいいと思ったのか、洗い出す
  • そのデザインがどんな心理的効果をもたらしているか考える
  • そのデザインをどうやって実現しているのか当たりをつけてみる(デザインソフト・コーディングそれぞれ)
  • 仮設を立てる(サイトのターゲットは誰か?サイトの狙い・ゴールはなにか?)

これらを考えておくと、デザインのロジックが学べます。あとコーディング面では答え合わせができて楽しい。自分の予想が外れていても「そんなやり方があったのか!」といい意味で裏切られるし、使ったことのない技術を学ぶきっかけになります。

コーディングは答えありきでやってもいいと思う

私は、コーディングはコピペでやっています。意識の低い発言でスミマセン。

理由は2つあって、ひとつは私が担当したいのはデザインの方だから。ふたつめはコーディング苦手な自分が下手に考えるよりも、プロのエンジニアさんが書いたものを真似したほうが勉強になると思うからです。「目的に合わせてできる範囲で」がモットーです。

HTMLをまるっとコピーして、ブラウザの検証ツールを使いながら、上(親要素)から順にCSSを当てていきます。「こう書くとこうなるんだな」ということを掴んでいきます。わからないことがあったら調べまくります。HTMLは全部コピーだけど、CSSまで全コピするのは一切学びがないのでダメです。※当然ですがあくまで勉強用ですので実案件ではやらないようにしましょう

やってみると、コピペだとしても元サイトと同じようにならなかったりするんです。もしコーディングを誰かにお願いするとしても、自分がもやった経験がある方がエンジニアさんとのコミュニケーションが取りやすいだろうし、凄さや有り難みがわかると思いませんか?

モデリングは時間もかかるし大変だけど、得られるものが大きいのでwebデザインが上達したい人におすすめします。一緒にがんばりましょう!

以上、モデリングについてでした!m(__)m

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です