作者別: はな

ランダムな感じでワイワイ配置したデザインの作り方

こんにちは、三年目デザイナーのはなです。

私は洗練されたミニマルでシンプルなデザインも好きですが、どちらかというと装飾をワイワイたくさん置いた華やかなデザインの方が好きです。

今回はそんなワイワイしたデザインを作るときに欠かせない、バランスの良いオブジェクトのランダム配置のやり方についてお話します。

オブジェクトの準備

まず、オブジェクトを大まかに、大・中・小に分けます。

「大」は主役、もしくは準主役です。

真ん中にタイトルなどが来る場合はそれが主役になるので、「大」のオブジェクトは準主役になります。タイトルなどがない場合(イラストなどだけをランダム配置する場合)は主役になります。

基本的には一つの画面に1個か2個だけ置きます。

「中」は脇役です。

主役よりも色や書き込みの量に少し差をつけるとなお良いです。

画面の大きさやバランスによりますが、主役より多く、3~5個ほど置くと良いと思います。

「小」はモブです。

画面の賑やかしです。

主役と脇役を配置したあと、余白に置いていきます。

置く数は画面の広さで大幅に変わります。脇役の数より多いこともあれば、少ないこともあります。

オブジェクトの配置

「大」「中」「小」の順に配置していきます。

まず「大」を配置します。

大胆に画面からはみ出るぐらい置くとダイナミックさが出ていいと思います。

2つ以上置く場合は一箇所に固まりすぎないように気をつけ、角度に差をつけます。 

次に「中」を、「大」の間に置いていきます。

こちらも、近くにある「中」同士が似た角度にならないように気をつけます。

最後に「小」を、余った部分に入れていきます。

「小」と「すこし小さめの小」を作って一緒に配置していくとよりランダム感が出ます。

配置の良い例・悪い例

こちらが配置の良い例です。

そしてこちらがあまり良くない例です。

よりいいバランスのランダム配置にするには、下記のポイントに気をつけましょう。

・余白が均等に空きすぎている

タイトルの目立ち感が少ないですね。

また、オブジェクト同士の余白がだいたい同じぐらい空いていて、スカスカしているように見えます。

「粗」(空いているところ)と、「密」(詰まっているところ)が生まれるように配置しましょう。

また、主役の周りは「疎」にすると主役をより目立たせることができます。

・似た要素を似た角度で置かない

「大 A」「大 B」の角度が似ています。

また、「中 a」と「中 B」の角度も似ていますね。

ランダム配置の場合に似た要素が似た角度になると「何らかの意味」があるように感じられて不自然になります。

角度はばらばらになるようにしましょう。

・「触れるか触れないか」はやめる

「大 A」の下、「小」が触れるか触れないかの場所に置いてあります。

この、「触れるか触れないか」というのも「何らかの意味」を生みます。

ちゃんと離すか、ちゃんと重ねるかどちらかにしましょう。

ランダム配置は、「おもちゃ箱を投げたときにおもちゃが床に散らばる感じ」をイメージします。

同じ形のおもちゃが全く同じ角度になる確率はとても低いだろうし、おもちゃとおもちゃの隙間が全部均等になることなんて多分ありませんよね。

作成したランダム配置に沿って、お花を置いてみました。

お花バナー

華やかで可愛い感じにできたと思います!

まとめ

ランダム配置は何度も作っていると、なんとなく感覚でできるようになってきます。

それまでは、

他人に見せる→バランスが悪いと思うところを指摘してもらう

というのを繰り返すといいと思います。

少し休憩を挟んだり、離して見てみたりするのも有効な手です。

1人で作っているとなんだかよくわからなくなってくるので…

(私もしょっちゅうなんだかよくわからなくなっています)

この世に私好みの可愛くてワイワイしたデザインが一つでも増えるといいなと思っていますので、みなさんもどんどんランダム配置を使ったデザインを作ってくださいね〜!(強欲)


超初心者デザイナーがStoryboardを使ってみてよかったなと思ったこと

こんにちは。二年目デザイナーのはなです。

私はドドド文系かつ、今のところ人生でパソコン使ってる時間より紙と絵の具触っていた時間のほうが長いようなアナログ街出身の感覚派ですが、この度「デザイナーさんがStoryboardでアプリUI作ってくれたらすごく楽」というエンジニアさんの言葉により、XcodeのStoryboardを使ってみることになりました。

もちろん私の経験値はそのような状況(かろうじてHTMLとCSSはわかる…)ですので、傍から見ると低い段差に躓きまくりました。

それでもなんとかエンジニアさんからの介護を受けて、アプリのガワだけ作成することができ、「何このソフト…?英語しか書いてない…怖いよ~…」という状況からは脱しました。

こういうかたちのボタンはこういうふうに作れば良いんだよ、というのを理解するのに丸一日かかったりしました。

このボタン一つを苦戦しながら作って、どの画面サイズで見ても破綻していなかったときはとても感動したりしました。

あまりにも初歩的すぎますが、レベルが赤子なので見るものすべてに感動してしまうんですね。

Storyboardできる人は、まあ、一笑に付していただけると幸いです。

Storyboardを使ってみてよかったなと思ったこと

あとからエンジニアさんに細かいデザイン調整のお願いをしに行かなくて済む!

「すみません、ここなんですけど、あと10pxぐらい余白つめてもらっていいですか…」がなくなりました。

全部自分でつけてますからね。

「ここはシステム上これ以上余白詰めるのは難しいです」「そこをなんとか」という工程もなくなりました。

システム上難しいということを踏まえた上でデザインを作ればいいのです。

それが理解できるようになったことは、すごく大きな収穫だったなと思います。

画面の大きさによってどのようにレスポンシブさせるか自分で決められる!

例えばiPhone8の画面サイズで作ったUIデザインについて、5sの時はどこをどういうふうに縮める?iPhoneXやiPadの時はどこをどうやって伸ばす?というのを自分で決められます。

あとからエンジニアさんにお願いして変えてもらうとなると、下手したらAuto Layout付け直しじゃないですか(それも理解できるようになりました。そりゃ面倒くさいですね)

それを最初から自分で指定できるというのは、かなり効率がいいです。妥協もしないで済みます。

標準的なiosアプリのデザインがなんとなくつかめるような気がする!

Storyboardにはiosアプリの標準UIのパーツが元から入っています。

ドラッグするだけで置けます。すごい便利ですね。

逆に、「置けない場所」というのもなんとなくつかめてきます。

そうやって試行錯誤しているうちに、iOSアプリの標準的なデザインが、なんとなくわかってきたような気がします。

まとめ

 Storyboardを触ってみて、「デザイナーさんがStoryboardでアプリUI作ってくれたらすごく楽」という言葉の意味がわかりました。

見た目の微調整が自分で行えるということの素晴らしさを、デザイナーさんなら理解できると思います…

とはいえ、まだ入り口に立った段階ですので、これからも四苦八苦しながらStoryboardくんと仲良くやっていけるよう頑張りたいと思います。


うっかり人間なので生活の中にTodoistを導入した

こんにちは、二年目デザイナーのはなです。

私事ですが、 10月の頭から一人暮らしをはじめました!

料理も掃除も洗濯もなんとなくですが、ようやくまともにできるようになってきました。

 

今の所生活の中ですごく困ったことはあまりないのですが、あえて一つ上げるとするなら、うっかりミスのカバーを誰もしてくれないということです。

昔から忘れ物や紛失物がやたら多く、学生時代、学校で今日絶対必要なものを忘れた!お母さん駅まで持ってきて;;と慌てて電話した回数は数知れません。

ですが今はもう一人暮らし。もう誰もうっかりミスのカバーをしてくれません。

 

さらに、各種払込やいろいろなものの手続き、食材や日用品の買い物、朝のゴミ出しなど、うっかりミスを招きそうな場面が生活のなかに激増してしまいました。

買おうと思っていた野菜を一つ買い忘れたとかならまだ可愛いものですが、場合によってはライフラインが止まりかねません。

なんとかうっかりミス発生の回数を減らせないものかと考えた結果、スマホやパソコンで管理できるtodoistを導入することにしました。

 

Todoistはじめました

https://todoist.com/

Todoistはプランによってはビジネスでも使用できる、本格的でシンプルなタスク管理ツールです。

なぜ数あるタスク管理ツールの中からtodoistを選んだかというと、一番シュッとしててかっこよかったからです。

別に仕事用に使うわけではないし、機能が多くなって設定する項目が増えたりすると絶対途中で挫折すると思ったので、とりあえず最低限の機能が使える無料版で始めることにしました。

「プロジェクト」の使い方を間違っているような気がするのですが、今はこんな感じ。

私は何かを細かく分類することが苦手なので、タスクはあまり悩まずに分類できるよう、ざっくり大まかにわけることにしました。

分類の仕方は、「自分がどこで何をしているときにすべきことか?」を基準にしました。

 

例えば、「外出・お買い物系」なら、自分が外出している時にすべきことを入れておきます。

100均でタッパ買う」「コンビニでチケットの払込する」など、「別に今すぐじゃなくていいけど次街に出た時にやっておこう」と思ったものを入れておき、外出する日が決まったらその日付を入力しておきます。

遂行できたらチェックしてリストから削除。

「今日」の欄から「外出・お買い物系」のタスクがなくなったらミッション完了。帰宅します。

これで、「あれついでに買って来ようと思ってたのに忘れてた!」を減らすことが出来ます。

 

「創作系」なら、次の休みどうしようとか、いま暇だなーと思った時に何か始められるように、「〇〇の絵を描く」「本棚の設計図を作る」などをいいアイデアが思いついた時に入れておきます。

「この間次の休み何か作ろうと思ってたんだけど、何だったかな」を防ぎます。

 

使った感想

シンプルでわかりやすい!無料版でも、今のところは不便してないです。

一つの画面に、本当に必要な情報だけが表示されているという感じで、洗練されていて大変よいです。

また、デザインがシュッとしているという基準で選んだこともあって、「デザインが気に入らないものからは徐々に心が離れていく」という私でも使い続けられそうです。

アプリデザインの参考にもなりそうです。

 

何より、右にシュッとスワイプするだけでチェックできるのが楽です!

やってやったぜ!という爽快感もあります。

UX デザイナーさんが、「右にシュッとスワイプしてチェック」をどういう意図で実装されたかはわかりませんが、私は「ハイ!」とか「ヨシ!」とかいいながらチェックしています。(家の中でだけですけど)

絶対継続させるために

とりあえず今大切なのは、「絶対継続させること」。

以下のルール(?)を念頭に置きながら運用しています。

  • 日付が特に明確に決まってないものは日付を入れなくてもいいし、どうしても分類に悩むものは無理に分類せずそのまま置いておいてもいい
  • タスクのタイトルにフォーマットを決めない(「100均でタッパ買う」「白菜」などが混在していてもいいことにする)
  • 思いついたらその場で入れる
  • なるべく細かく分ける(「野菜を買ってきて茹でる」ではなくて、「野菜買う」「野菜茹でる」という感じで分ける)

(大雑把すぎてWebデザイナーとしてどうなの?という感じですがでもプライベーだしいいやということにしています)

 

そんな感じで、雑でもいいからこまめにやる、Todoリスト作成に精神のリソースを割かない、ということを意識しています。

Todoistで日常のタスクを管理し始めてから、うっかりミスが(心なしか)減った気がします!

特に、外出時の「あれついでに買って来ようと思ってたのに忘れてた!」は、ほぼなくなりました。

 

この調子で三日坊主にせず、継続していきたいと思います!


色の見え方と色覚多様性について

こんにちは。二年目デザイナーのハナです。

 

少し先の話になりますが、色彩検定のUC(ユニバーサルカラー級)が12月から始まりますね!

私も受ける気満々なんですが、注文した公式テキストがなかなか届きません…

とはいえ試験自体はまだかなり先なので、届いてからゆっくり勉強を始めたいと思います。

 

ちょうど一年前にこのブログでもユニバーサルカラーの話をしていましたが、今回はここから更に少し突っ込んだ話をしたいと思います。

 

色が見える仕組み

人間の目は、錐体と杆体という二種類の視細胞で光を感知しています。

杆体は主に暗いところで働く視細胞です。

暗い部屋に入ったとき最初は真っ暗で何も見えませんが、だんだん目がなれてきて薄っすらと周りが見えるようになってきます。

これは暗い部屋に入ってから杆体が働き始めるまで少しタイムラグがあるためです。

杆体は一種類しかないので、杆体しか働かない真っ暗な部屋では「色」というものを感じることはできません。

 

錐体は明るいところで働く視細胞です。

杆体は一種類しかありませんが、錐体はL錐体、M錐体、S錐体という三種類に分かれています。

L錐体は赤、M錐体は緑、S錐体は青をそれぞれ感知します。

目に入ってきた物の色が、赤い光が何%、緑の光が何%、青い光が何%で構成されているのかをLMSの錐体がそれぞれ感知し、脳でそのデータを組みあわせ、そこではじめて私達は見たものの色が何色であるか理解できるのです。

 

色覚多様性

…というのは、あくまでも杆体と錐体三種類が全て働いている人の話です。

全ての人間がそうであるとは限りません。

錐体が一種類でも働いていないと、色の見え方というのは大きく変わってきます。

杆体1色覚は杆体のみが働いている状態の色覚で、非常に視力が弱いです。

暗いところで杆体は正常に働きます。

 

1色覚は杆体と錐体一種類が働いている状態の色覚です。

S錐体1色覚は視力も非常に弱いです。

 

2色覚は杆体と錐体2種類が働いている色覚です。

欠けている錐体によって、1型、2型、3型と分類されます。

 

異常3色覚は、杆体と錐体2種類が正常に働いていて、一種類が異常である色覚です。

こちらも異常のある錐体によって、1型、2型、3型と分類されます。

見え方は2色覚と非常に似ています。

 

★マークのL・Mの2色覚と異常3色覚が特に多く、その他の先天的な色覚異常はまれです。

 

以上の先天的な色覚異常のほか、事故や病気による色覚の変化や、加齢によって以前見えていたように色が見えなくなる場合もあります。

 

まとめ

いろいろな個性の人がいるように色の見え方だって多様である、というのがユニバーサルカラーを考える上で重要な、色覚多様性という概念です。

自分が見ている色と同じ色を、必ずしもすべての人が見ているわけではないと念頭に置いておくことが大切であると思います。

 

もしかしたらここまで詳しい内容はUC級の試験には出ないかも…(公式テキストがまだ届いてないのでどこまで出題されるかわからない)

でも覚えておいて損はないので、よければ頭の片隅にでも置いていただけたら良いかなと思います。

あとこの内容は色彩検定1級の内容なので、1級の試験勉強の際に少しでも役立てていただけると幸いです。

 

UC級はあまり難易度が高くないんじゃないかな〜という個人的予想ですが、油断せずしっかり合格したいと思います。がんばりましょー!


理論でなんとかする配色法

こんにちは。二年目デザイナーのハナです。

 

みなさんは配色を行う時、どのように色を選びますか?

調和した配色を作ることは一見センスのいる難しいことのように思えます。

ですが実際は(あるにこしたことはないですが)センスは一切不要で、理論さえ知っていればなんとかなります。

 

配色を調和させるための理論や法則はたくさんあるのですが、今回はビビットな色をたくさん使う際にバランス良く色を選ぶことができる方法を紹介します。

 

用意するもの

 

・等間隔に色が配置された色相環

 

トライアド

トライアドは色相環上に正三角形を配置し、その頂点が指す色でつくる三色の配色方です。

 

正三角形がどんな角度でも、その頂点が指す三色の配色は調和します。

 

 

スプリットコンプリメンタリー

スプリットコンプリメンタリーは色相環上に鋭角二等辺三角形を配置し、その頂点が指す色でつくる三色の配色方です。

特定の一色と、その補色の両隣もしくは2つ隣の色を選ぶ、という手順でも作ることができます。

「スプリット」は分割、「コンプリメンタリー」は補色という意味です。

補色の片方を分割して二色にして作る配色法なのでこの名前がつけられています。

 

 

テトラード

テトラードは色相環上に正方形を配置し、その頂点が指す色でつくる四色の配色方です。

正方形がどんな角度でも、その頂点が指す四色の配色は調和します。

 

 

ペンタード

ペンタードは色相環上に正五角形を配置しその頂点が指す色でつくる五色、もしくはトライアドで選んだ三色に白と黒を加えて作る五色の配色方です。

正五角形で作るペンタード配色が少し派手すぎるかな?と思ったら白と黒を入れたペンタード配色にするとすっきりしまって見えます。

 

 

ヘクサード

ヘクサードは色相環上に正六角形を配置しその頂点が指す色でつくる六色、もしくはテトラードで選んだ四色に白と黒を加えて作る六色の配色方です。

ペンタードと同じく、白と黒を入れたヘクサード配色は、六色すべて有彩色の場合よりもスッキリして見えます。

ヘクサードに限らず、正多角形を用いた配色は、感覚に頼らず均等なバランスの色を選ぶことができるためとても便利です。

 

 

色彩学を勉強するメリットについて

 

色彩学は奥が深いですが、勉強することによって色々なメリットがあります。

・疲れて脳みそが回っていないときでもある程度適切な配色ができる!

・考えすぎてよくわからなくなってきたときでも配色に根拠があるので自信を持てる!

・なんでその色を選んだのか他人にちゃんと説明できる!

 

今回紹介した配色方法は、ジャッドという色彩学者が唱えた色彩調和論の「秩序の原理」というものに当たります。

ですが調和する配色はこの配色法だけではありません。たくさんあります。

ジャッドの色彩調和論には他にも「なじみの原理」「明瞭性の原理」「類似性の原理」が存在します。

また、もちろんですがジャッド以外にもたくさんの色彩学者がたくさんの色彩調和の法則を唱えています。

 

紹介してもしきれないので、別の機会に少しずつご紹介できればな、と思います。

私もまだまだ理解していない配色の方法がたくさんあるので、これからも勉強を続けていきたいと思います。

めざせ配色マスター!