ここからは全体のデザインを考えていきます。とりあえず大まかに。
私はFigmaを使用していたのでそのスクリーンショットを使用します。
手を付ける
たいていの場合何から手を付けるか迷うと思います。そういう時はとりあえず手を付けていろんなデザインを作成してみていました。
先ほどまでは構成を考えろなどと偉そうなことを言っていましたが、私は特にどれに用いるデザインか考えずにとりあえずいろいろ作ってみるようにしていました。最終的にはそこで作成したデザインの組み合わせで作ることが多かったのであながち間違いではないのかなと思います。
それでも難しい場合は、大まかな配置から考えていました。最近の多くのページはスマホに対する対応を考えて層のようになっているデザインが多いですが、サイドバーを作ってみてもいいかもしれません。あるいは縦に二分割されたようなデザインにしてみてもいいかもしれません。実際にあまり見ないデザインはたいてい何かしらの問題点があることが多いですが、作ってみることはとても大きな糧になるかなと思います。まぁ急いでいたらいいと思ったページのデザインをパク……参考にしましょう。
デザインを作っていく
モバイル端末とPC画面どっちから
近年はほぼ全員がスマートフォンを持ち歩いているのでHPのレスポンシブ対応は必須のものかと思います。そこで問題になるのが、デザインと作製、どちらから作るかということです。
基本的にレスポンシブデザインははCSSのメディアクエリを使用して実装します。そのためどちらから作るのが適当か問う話になります。デザインはモバイル端末、コーディングはPCからという風に入れ替わってもいいと思います。
少なくともコーディングについてはPCから作成することが主流であるようです。これは主に作成中に確認しやすかったり、コーディングが比較的容易であることが理由であるようです。
しかしながら私はモバイル端末から作成することが多かったです。こちら側のメリットとしては、モバイル端末に先に対応することによってhtml(php)の書き換えが起こることが少ないと考えているからです。
後から表示させる順番を入れ替えるということはなかなかめんどくさいので先に難しいほうに対応してしまおうということですね
どちらにせよ個人ごとの考え方に差があると思うので何度か自作してみて考えてみることがいいのかなと思います。
とりあえずグレースケールで
さらっと上の画像を出してしまいましたが基本的に最初はグレースケールで作成します。いきなりカラーで作成するのは何かと何インドが高いうえに情報量が多くなってしまって全体をとらえにくくなってしまうからですね。
当然一色のみではどうしようもないので濃淡のみでデザインを行います。ここで作成した濃淡は基本的に最後まで引き継ぐことが多かったので何度も見返して印象を確認することも大切だと思います。ただし色によって印象が変わることも多いので最後の最後になって色の調節することもしばしばあります。
何よりもこの段階では形や配置に配慮したいです。後から修正することもできますがこの段階で決めてしまえば後々の作業が行いやすくなるのでいろいろ試してみてください。
色を考える
ここから色を付けていく作業になります。いきなりすべて色を決めることは難しいと思うのでいろんなパターンを試してみることが大事かなと思います。
私は自分で色を考えることが得意ではなかったので様々な方法で調べたりしていました。
Pintarest
再び登場しましたが、Pintarestでは色の組み合わせを投稿してくれている方がたくさんいます。様々なイメージに合わせて作成してくれている方が多いのでそのことも含めて調べてみてもいいかもしれません
ほかのHP
当然ほかのHPの色も真似することができます。こちらはしっかりHPとして成立するような色が考えられていることが多いので完成度は高くなるかもしれません。
特に背景を単純な白ではなく全体に合うように薄く色を付けている点などはどのように色を選んでいるか考えてみてもいいかもしれません。
ポスター・パンフレット
デザインの完成度としてはこれが一番完成度が高いかもしれません。オブジェクトが動くことがない媒体ですから当然配置や配色などが考え抜かれたものが多くなります。
そのため独特な配色を採用していることも多くあり、そのまままねしてしまうというのは危険かもしれませんが間違いなく参考にするべき教材だとは思います。
配色する
この時点では配置も固まり切っていないので色の組み合わせを簡単においてみるという作業をしてみてもいいかもしれません。色によって形のイメージも随分変わるので今後の参考になるかもしれません。
ひとまずこんな感じに自分でカラーパレットを作成してもいいかもしれません。
コメント