【初心者向け】サイトのデザインをはじめる前にやっておくといいこと

こんにちは。Elisaです。

Adobeの基本的な使い方を習得し、これから１からサイトのデザインをしていくぞ〜！となった時に、はじめにぶち当たった壁・・・
初めて中間課題を作った時、私の場合は「フォントサイズ何pxがいいんじゃ問題」と「作ってるうちにテイストが変わってしまう問題」がありました。（今も絶賛色んな壁にぶち当たり中ですが・・・）

今回はそれを私なりに調べて、どうにか解決した方法をまとめていきます！

ムードボードを作る

ムードボードとは、色やイメージ、雰囲気など、言葉にはしきれないアイデアを共有するための、関連する素材を集めたコラージュです。

アイデア共有に必須のムードボード！おすすめ作成ツール集｜Goodpatch Blog グッドパッチブログ

当時私はとりあえずpintarestで関連する資料をたくさんみればいいと思っていました。

しかし色々な資料を参考にするあまり、デザインの路線が違うところから参考を持ってきてしまっていたのです。

「作ってるうちにテイストが変わってしまう問題」ですね。
なので作りはじめる前に、ひたすら集めた参考を分類しなおして、よりイメージの合うムードボードを作ることで、デザインの方向性に迷いがなくなりました。

サイトトレースをする

「フォントサイズ何pxがいいんじゃ問題」はこれで感覚を掴んでいます。

ムードボードを作る過程で、イメージに近いサイトの参考が出てくると思います。それを１つ選んでトレースします。

そのままそっくり作らなくてもいいと思います。
見るべき点は、余白大・中・小で何px空けてるのか、上品なイメージのサイトならフォントは何を使って何pxなのか、という点です。
（あくまで目的を余白やフォントの感覚を掴むことにしているため。そっくりトレースするのも楽しそう）

イメージに近いサイトをトレースすることで、なぜその雰囲気が出ているのか、考察することができるのではないかな！と思います。