ノンデザイナー私が書く「最低限のデザイン」
※この記事はICT Advent Calendar2019の10日目の記事の予定でした(遅刻)
こんにちはしゅりです。アドベントカレンダー遅刻して本当に申し訳ありませんでした(土下座)
9日目の記事は後輩のらずちゃん。これからの成長に期待しかない。
明日の担当は、よく語彙力が消滅しがちなしゅり先輩です。
えっ？！もう2019年終わるんですか？！ - らずぽえむ
読みやすい記事になるよう語彙力総動員で頑張るわね。
さて、ICT現役としては最後のアドベントカレンダー。何書こうかなと悩んでいたらいつの間にか担当の日付を大幅に過ぎていました。
大幅に過ぎすぎたせいで我らが委員長(@urhara1107_s2)からも脅迫を受けてしまった。
ね？しゅり先輩♡♡
— ｳｴﾊﾗ (@urhara1107_s2) 2019年12月15日
今すぐにでも記事を書き上げなければ私の未来はない。だが書くことがない........どうしよう。そういやりしがこんな記事を書いていたな。
今年のICTによく出没していたお手伝いさん、いわゆるサンタクロースのお話。実は私もすこーーーーしだけ大会のお手伝いをしました。お手伝いの内容は主に大会での発表に使う資料作りの添削。大会が近づいてるだけあって、デザインに関するお手伝いがほとんどでした。
ふむ。ノンデザイナーの私が最低限のデザインについて記事を書いたら、未来のノンデザイナーが「0から始めるデザイン」をしなくても良くなるし、サンタクロースも妖精に戻れるのでは？なるほど。
閃いたぞ。
というわけで「最低限のデザイン」を書くよ
需要なんてかなぐり捨てて単なる自己満で書きます。こんなのデザインじゃねえとか知らねえ！！！！！！これが私のデザイン論だという気持ちで生きていきます。
想定の読者さん
- 一度もデザインしたことない人
- ノンデザイナーが何考えてるか気になるデザイナーさん(いるのかな)
- 「こいつなんか言ってるなあ」と顔を覗かせてるそこのあなた
大したこと書かないつもりなので話半分に読んでもらえると幸い。
この記事の目標
- 「改善点は山ほどだけど、まあ見れる(理解できる)！」ってくらいのデザインができるようになる
その1：揃えな！
「最低限」への第一歩は揃えるところから。何を？そりゃ色んなものよ。
文字や画像の位置を揃えな！
例えば、下の画像ってめちゃくちゃ見づらくないですか？なんとなくコレジャナイ感ありませんか？あるってことにして.....なぜなら文字や画像の位置が揃っていないから(要出典)。
文字や画像の位置(ついでに文字と画像との関係性とか話題とか色々)をある程度揃えるとこんな感じになります。ibisPaintを使わざるを得なくて細かいズレあるけど許して
揃えるのはなにも同じページ・画面にあるものだけじゃありません。パワポ資料の全ページで見出しの位置が揃ってるか？アプリのUIで画面遷移した時にボタンの位置が揃ってるか？全体を通して文字たちの位置が揃っているかを意識するだけでも情報の見やすさが変わるはず。
全体を通して使う色を揃えな！
極端な例になってしまうけど、このページの背景色は赤を使おう、ここは青を使おう、ここでは........ってのを続けると、全体を通して統一感のない見た目になってしまいます。ここまで極端ではないけれど、発表資料を作る時やUIを考える時は、ページを跨いだ先でも使われている色が揃っているかを考えるのが大事かも。「全ページ背景色を緑で揃えました！」的なノリでね。
あとは......そうだなあ......。これもまた極端な例になるけれど。アプリ版Youtubeを使ってるときに、急に背景がどぎつい緑になったら「Youtubeどうした...？」ってなりませんか？私はなるんですけど。
全体を通して一度も使われてない色を急に挟むと、それまで保たれてたアプリ(あるいは資料)全体の統一感が失われるだけじゃなくて、相手に「その色の持つ意味」を考えさせてしまう可能性があります。せっかく伝えたいことたくさんあるのに、変なとこに注目させちゃうのはもったいないですよね。
全体を通して使う色を揃えましょう。これやるだけでだいぶ統一感のあるデザインになるはずです。
他にも揃えな！
- 文字や画像の大きさ
- 使うフォント
- 図やイラストの種類(同じ矢印を使う、同じタッチのイラストを使う)
- 話題
- えとせとら
揃えられる場所は徹底して揃えていこう。そしたらだんだんと「敢えてはずす」とかいう高度なテクニックの使いどころが見えてくるかも？ちなみに私は見えてません。
その2：減らしな！
揃えられたなら次は減らそう。何を減らすか？そりゃ色んなものよ。
色を減らしな！
「色を揃える」とすこし関連するかもしれない(主観)。というか色を揃えるにはこの作業が不可欠な気もする。
色を減らすってのは文字通りで、5色も6色も使わずに最低限の色数だけに留めるとよさそうっていう話。その方が全体の色を揃える時色々考えずに済むし。
ノンデザイナー私の場合は文字色(黒に近い灰色)・背景(白)・目立たせる色(好きな色)の3色で十分だって思う時もあります。LTで使う資料とかは本当にそれだけで十分見やすいものが作れる気がしています。
UIとか考えないといけなくなった時は、文字色・背景色抜いて2色以内に収めるのを目標に色選びをしてたりします。色選びは引き算や。
1つの場所に書く話題を減らしな！
発表資料だと特に気をつけないといけないんだけれど、違う話題を同じ場所に書いてたりしませんか。1つのページに1つの話題を心がけるだけで、結構スッキリ見えたりします。不思議だ。
ちなみにポスターとかパンフも同じで、書く内容を必要なもの以外減らし、かつ違う話題が混ざらないようにレイアウトを心がけることで、「読めるわね」くらいのパンフ・ポスターが出来上がる...はず。
他にも減らしな！
- 人間にさせる操作の数(何回もOKボタン押すの辛いよね的なノリ)
- 目線移動の回数(あっちこっちに目線が散るのは良くない)
- えとせとら(思いつかない)
デザインはむしろ引き算だと誰かが言っていたような気がします。でも闇雲に引いてはいけません。デザインの引き算には理由が必要です。「これを目立たせたい」「話の流れを保ちたい」時に、初めて引き算を上手くやることができるんじゃないでしょうか。知らんけど。
「最低限のデザイン」まとめ
ノンデザイナー私が思う「最低限のデザイン」は次のふたつ。
- 揃えな！
- 減らしな！
この2つさえ守れば、「改善点は山ほどだけど、まあ見れる(理解できる)！」くらいのレベルのデザインまで持っていけるでしょう。やったね！おめでとうございます🎉
このふたつをなるべく守ってデザインしてくと、次第に「この色の組み合わせはオシャレかもしれない」などなど、「最低限のデザイン」から「いい感じのデザイン」に進化させる力も付いてくると思います！多分！
「最低限」から「いい感じ」へ
とはいっても、デザインの経験を積まないうちは「いい感じ」には到底辿り着けません。じゃあどうしたらいい感じになれるんでしょうか。
ICTにいるデザイナーさんたちを見てると、必ずこんな行動をしています。
- 何パターンもつくって見せる(色違いや配置違いなど)
- 誰のためのデザインかを考えている
- 普段使ってるアプリのUIについてや、資料のレイアウトなどについて勉強する、観察する
1つ目と2つ目はデザインを任されないとなかなか実行に移す機会は来ないです。でも3つ目なら、今からでも実行できそうですよね。
デザインについて勉強できるサイトを下に書いておきます。覗くだけでもなかなか楽しいですよ。
Dribble：死ぬほどおしゃれなデザインをたくさん見ることができるよ。色彩豊かで素敵なものばっかり。
User Inyerface：普段見慣れているUIがどれだけ優れてるかを身をもって知れるゲーム(ゲームの説明は英語で詳しく書いてあるよ)。
英語読めないマンはこのサイトでもゲーム説明が書かれてたりするから読んでぜひやってみて→https://gigazine.net/news/20190707-userinyerface/
おわりに
この記事をICTに残すことで、少しでも来年の発表資料作りやUI設計が楽になってくれるといいな。そんな気持ちを8割込めて、残りの2割は自己満足で埋めて、お話を切り上げようかなと。
改めて、記事が遅れてごめんなさい！そしてここまで読んでくれてありがとうございます。
11日目はICTのOGのやがみあん先輩です！Azureについて書いてくれています、なかなか一歩を踏み出せないままでいるのでありがたいです。
ICT現役最後のアドカレ、楽しかった！しゅりでした！メリークリスマス！
余談というか、近況報告
最近とあるVtuberにハマってしまいまして、しかもそいつ活動頻度が半端ない上に大体深夜5時間とか平気で配信するので睡眠時間がなくなりがちです。
でも推すのが楽しいからOKです。
楽しいついでに、推しVtuberにちなんだいい感じのタイピングゲームか非公式ファンサイトを作りたいなあという気持ちです。気持ちだけですが。果たして実行に移されるかな？
