.webp)
ここから見た目を作るデザインをはじめよう
このシリーズではWebサイトをデザインするプロセスを真似ることで、見た目を作るテクニックを身につけていきます。まずは「目的」を決めることから。
かな〜り地味でわかりづらいのですが、”色の選定、バランスの選定...”などをしていく際に基準が必要になると思います。ここから3本の動画で方向性を定める、想像するプロセスを紹介しするのですが、その基準を考えるプロセスになっています。
どういう見た目にするのか？UIにするのか？を考えるにも自分の中でコンセプト、つまり基準がないと始まらないのです。
見た目を作るプロセスをトレースしてテクニックを学ぼう
この動画はシリーズの紹介動画になります。「診断サイトのアイキャッチ」をデザインするプロセスを全公開&その流れをトレースすることで、見た目を作る上で欠かせないプロセスを学んでいけます。
UIを作ろうが、バナーを作ろうが、同じプロセスを使うことができます。ついついUIデザインをやっていると機能の方ばかりに目が行ってしまいますが、”感情”や”印象”、”伝わりやすさ”をブーストさせる技術としてのデザインはデザイナーに必須です。
良い見た目を作るにはセンスはいりません。アートも必要ないです。ビジュアルの知識と経験の積み重ねで上達していきます。
良い見た目は努力で実現できます
このシリーズではテクニックをプロセス毎に共有していきますが、このプロセスでUIやバナーなどあらゆるものを作ることで自ずとその”知識と経験”を自分に貯めていけるプロセスにもなっています。
デザインの基本としてぜひ最後までお付き合いください。
プロセスのURLはこちら
動画で使っているプロセスです。おおいに参考にして、パクっていってください！
ゆくゆくは塗り替えていくことを期待しています。
目次だよ
00:00 トレースでグラフィックを学ぼう
01:23 取り組むメリット
03:35 使い方:1週間でやろう
ここから見た目を作るデザインをはじめよう
このシリーズではWebサイトをデザインするプロセスを真似ることで、見た目を作るテクニックを身につけていきます。まずは「目的」を決めることから。
かな〜り地味でわかりづらいのですが、”色の選定、バランスの選定...”などをしていく際に基準が必要になると思います。ここから3本の動画で方向性を定める、想像するプロセスを紹介しするのですが、その基準を考えるプロセスになっています。
どういう見た目にするのか？UIにするのか？を考えるにも自分の中でコンセプト、つまり基準がないと始まらないのです。
基準を考えていきましょう！
プロセスのURLはこちら
動画で使っているプロセスです。おおいに参考にして、パクっていってください！
ゆくゆくは塗り替えていくことを期待しています。
参考は強い相棒になってくれます
イメージにはイメージを。がかなり有効です。なんだか良い見た目を作れないな...という時は自分の中に”イメージ”が足りてないことがほとんどです。
ここでは最初の方向性を具体的に想像するための参考リサーチを取り扱っています。プロジェクトの最初はこんな感じに”定番”の形や”競合”の形などをしっかり調べて自分の中に落としておくととても良いです。
真似してスキルをつけよう
このシリーズをはプロセスを1つ1つ真似してグラフィックのスキルをつけていきます。
アイキャッチをデザインするため、動画を参考にお題にも取り組みましょう。
プロセスのURLはこちら
動画で使っているプロセスです。おおいに参考にして、パクっていってください！
ゆくゆくは塗り替えていくことを期待しています。
言葉で方向性に軸を刻んでみよう
この動画ではぼんやりと、「表現の方向性」を言葉にしていきます。後々作っている中で”やっぱりこうだった”と変わることもあります。が、1度自分で絞って見ることで、これから作るビジュアルのアイデアがシャープになっていきます。
具体化して違うと思えば立ち返ればOKです。なので臆せずに今の考えを1度絞ってみてください。見えるもの、考えられることがクリアになるのではないでしょうか。
真似してスキルをつけよう
このシリーズをはプロセスを1つ1つ真似してグラフィックのスキルをつけていきます。
アイキャッチをデザインするため、動画を参考にお題にも取り組みましょう。
プロセスのURLはこちら
動画で使っているプロセスです。おおいに参考にして、パクっていってください！
ゆくゆくは塗り替えていくことを期待しています。
ムードボードはとても強力です
イメージを形にするときにこれほど強力な手法はないと思います。自分の中でイメージを掴むだけではなく、他の人と共有する上でも大いに役に立ちます。
参考を集める流れはいくつかこの後も出てきますが、言葉と一緒に明確に方針を立ちかえる場所としてムードボードを作成してみましょう。
アイデア作りを真似しよう
このシリーズをはプロセスを1つ1つ真似してグラフィックのスキルをつけていきます。
アイキャッチをデザインするため、動画を参考にお題にも取り組みましょう。
プロセスのURLはこちら
動画で使っているプロセスです。おおいに参考にして、パクっていってください！
ゆくゆくは塗り替えていくことを期待しています。
このフローでデザインの7割が決まります
ビジュアルに不満があると装飾を足したりしがちです。が、見た目の9割は建築物のそれと同じで「骨組み」で決まります。この最初のパターンを白黒で構築し定義していく流れで、具体化するものがほぼ決まると言っても過言ではありません。
とても重要なフローなので、ぜひ手を動かして”どういう方向性が考えられそうか”をしらみつぶしに検討してみてください。
業務ではこの段階で1度共有したりします
お仕事をしているとこの段階で1度方向性がずれてないか確認したりすることがかなり多いです。それもそのはず、見た目の具体的なものがあると相手もイメージがしやすいからです。デザイナーだけが想像で会話することができますが、他の人は実物がないと伝わりません。
なので、この段階のパターンを見せて方針を決める。決まらなければ再度検討。このフローを繰り返して、作成するものの大枠の方向性を決めていきます。
アイデア作りを真似しよう
このシリーズをはプロセスを1つ1つ真似してグラフィックのスキルをつけていきます。
アイキャッチをデザインするため、動画を参考にお題にも取り組みましょう。
プロセスのURLはこちら
動画で使っているプロセスです。おおいに参考にして、パクっていってください！
ゆくゆくは塗り替えていくことを期待しています。
次は見た目のパターンだし
「レイアウト/構造」と「見た目（装飾）」を分けると変数が減ってデザイン物をコントロールがしやすくなります。最初の方は一緒くたに色々考えてしまうのですが、”何が原因で微妙なデザインになっているのか？”を切り出して理解しづらくなります。
理解できてないと、闇雲に見た目をいじって１日経ってしまった....という結果になるのがざらです。辛いです笑
なので、このプロセスで分けているように「レイアウト」と「見た目」で骨組みを分け、より装飾要素のある「配色」などはその後に考えるようにしたりしています。
プロセスと骨組みを理解して、的確に見た目を作れるようになっていきましょう。
真似してスキルをつけよう
このシリーズをはプロセスを1つ1つ真似してグラフィックのスキルをつけていきます。
アイキャッチをデザインするため、動画を参考にお題にも取り組みましょう。
プロセスのURLはこちら
動画で使っているプロセスです。おおいに参考にして、パクっていってください！
ゆくゆくは塗り替えていくことを期待しています。
やっと色を考えていきます
ベースができたら”色”を考えていきます。ここまでパターンを作ってみると、ほとんどもう完成しているのでは？と思うかもしれません。が、この段階からやっと細かい部分を詰めていきます。
色は印象への影響がとても大きい
色でかなり見た目に差がでます。なのでかなりビジュアルを考える上でとても大事な要素になってきます。ベースが同じでも色が違うだけでグッと印象を変えることができる力強い要素です。
そのためかなり慎重に考えていきます。動画でもさまざまなパターンを作っていると思います。本気のUIを作る場合は日を跨いで新鮮な目でどう印象を受けるか？などなど、何度も考えて再考することもあります。
逆に色で自分の狙った印象にならない場合、その前の工程に問題があることが大半です。その時は前のプロセスに戻ってデザインし直したりもします。
今回は参考を自分で集めて、UIに色を適用してパターンを作成しましょう。その中で今回狙いたいイメージに近いものを1つ決めていきましょう。
配色の考え方を真似しよう
このシリーズをはプロセスを1つ1つ真似してグラフィックのスキルをつけていきます。
アイキャッチをデザインするため、動画を参考にお題にも取り組みましょう。
プロセスのURLはこちら
動画で使っているプロセスです。おおいに参考にして、パクっていってください！
ゆくゆくは塗り替えていくことを期待しています。
さまざま要素を詰めてきました。最後です。
ここまできて、かなーり細かい見た目の要素を今詰めて考えていきます。今までのプロセスはビジュアルの”核”の部分を形作る作業でした。配色を含めた今回の過程は、その”核”を磨いて輝かさせるフェーズです。逆にいうと、ここまで来て”なんか違うな”と思ったら、今までのプロセスに何かミスがある可能性が高いです。これはディテールを詰めてこねくり回しても改善しづらい状態だったりします。
細かい要素を試しつつ質を上げましょう
例えば以下の要素を細かく何度も調整して、クオリティを上げていきましょう。
- フォント
- サイズ感
- 色
- 装飾
- アクセント
- ....
仕上げをしてクオリティを上げよう
このシリーズをはプロセスを1つ1つ真似してグラフィックのスキルをつけていきます。
アイキャッチをデザインするため、動画を参考にお題にも取り組みましょう。
プロセスのURLはこちら
動画で使っているプロセスです。おおいに参考にして、パクっていってください！
ゆくゆくは塗り替えていくことを期待しています。
