HP制作のデザインアイデアを形にする方法 〜カラーと素材の選び方〜

こんにちは、デザイナーの高山です。
 いつもブログを読んでくださっている皆さん、ありがとうございます。

今回は、「ホームページ制作のデザインアイデアって、どうやって形にしていくの？」というテーマで、私がふだん行っているステップをご紹介したいと思います。色の決め方や素材の選び方など、これからデザインを始める方にもわかりやすいようにお話ししていきますね。

１．まずはイメージ集めから！Figmaで「イメージボード」をつくる

まずはデザインの方向性を決めるために、雰囲気に合いそうな写真やイラストを集めます。PinterestやInstagramで気になる画像を探すのもおすすめです。

集めたら、デザインツール「Figma」上にペタペタ貼り付けていき、「イメージボード」を作成します。これを作っておくと、全体の雰囲気やテーマが自然と見えてくるので、後の工程がとっても楽になりますよ。

２．色はどう選ぶ？イメージからカラーを抜き出す2つの方法

色選びって、迷いますよね。私は、以下の2つの方法を使って、気に入った色をイメージから抜き出しています。

・スポイトで直接ピックアップ
Figmaのスポイトツールを使って、集めた画像から気になる色をそのまま吸い取ります。ただし、写真やイラストの中には様々な色が混在しているので、ピックアップした色をそのまま使うと、全体の色の組み合わせがちぐはぐになってしまうことも。色同士のバランスや相性にも気を配りながら、組み合わせを見ていくことが大切です。

・Adobe Color（アドビ カラー）に画像を取り込む方法
Adobe ColorというAdobeの提供するサービスがあります。

こちらのサービスは、画像をアップロードすると自動でカラーパレットを作ってくれます。そこから好きな色を選ぶのもおすすめです。

「テーマを抽出」でアップロードした画像からカラーをピックアップしてくれます。

画面左側「カラームード」のオプション選択で、「カラフル」や「ブライト」などイメージにある項目を選ぶと、アップロードした写真の中からそのムードにあった部分の色を拾ってくれます。

ピックアップしたカラーパターンは画像としてダウンロードできるので、Figma上に貼り付けて利用すると便利です。

抽出したカラーとイメージボードの画像を適当に配置しました。画像からピックアップした色だから、あまり迷わずにまとまりのあるカラーになります。

・もし色のパターンに迷ったら
1つに絞るのではなく、2パターンくらい配色を試してみるのもおすすめです。少し距離を置いて見比べることで、どちらがより目的に合っているかが見えてきますよ。 Figmaでベクター画像の色を変更する方法を紹介したこちらの記事も、カラーバリエーションのテストに役立つのでぜひ参考にしてみてください。

３．色に役割を持たせてみよう

抜き出した色の中から、次は役割を決めていきます。色の使い方にちょっとルールを持たせるだけで、全体のデザインにまとまりが出てきます。

・メインカラー：一番印象に残る主役の色
・ベースカラー：背景などに使う落ち着いた色
・アクセントカラー：ちょっとした強調に使う差し色

この3つを意識すると、配色がグッと見やすくなりますよ。

４．形（シェイプ）もイメージからひらめく

色だけでなく、形のヒントも集めた画像の中にあります。写真やイラストをよーく観察すると、「あ、この丸っこい形かわいいな」とか「このライン、使えそう」なんて発見があるんです。

それをもとに、自分で図形をつくったり、似た素材を探したりして、デザインの部品にしていきます。

まとめ

いかがでしたか？

ホームページ制作のデザインって、一見むずかしそうに見えるかもしれませんが、今回ご紹介したように「イメージを集めて」「色を選んで」「形をつくる」というステップを踏むことで、ちゃんとカタチにしていけます。

大切なのは、「いきなり完璧を目指さないこと」。まずは気になる画像を集めるところから、気軽に始めてみてください。色や形に迷ったら、複数パターンを試してみたり、ツールを活用して整理するのも良い方法です。

最初は小さなヒントからでも、自分らしいデザインの道筋が見えてくるもの。少しずつでも積み重ねていくと、アイデアの引き出しがどんどん増えていきますよ。

ぜひ、今日から試してみてくださいね！