10月から新規加入した、大学院生をしているイノスインターン生です。
私はインターンで、WebサイトのデザインとYouTubeの動画編集を担当しています。
今回のインターン活動記では、デザインを考える時に私が意識したことを共有していきます。
簡単にマネできる内容となっておりますので、ぜひ参考にしてみてください！
：目次
- はじめに
- 配色のコツ
- 配置のコツ
- 最後に
はじめに
Webサイト制作や動画編集で、悩みやすいことが配色と配置だと思います。
私の体感ですが、配色に失敗するとまとまりがない印象になってしまったり、重要な箇所が分かりづらくなってしまって伝えたいことが十分に伝わらなかったりしてしまいます。
また、配置に失敗すると、画面を見る際の自然な目の動きに合わず、やはり見づらいサイトになってしまいます。
そこで、ここから先は、配色・配置において、実際に私が気をつけたポイントについてまとめていきます！
配色のコツ
基本色は３色で
デザインをする際は、基本カラー３色でデザインをするとよいと言われています。
それぞれベースカラー・メインカラー・アクセントカラーと呼びます。
またこれらの色を使う際の比率も「70% : 25% : 5%」が良いとされています。
・ベースカラー
ベースカラーは、その名前の通り、下地になりやすい色を選ぶと良いです。
今回のサイト制作や動画編集では、白や白に近い色を選んでいます。
・メインカラー
メインカラーは、デザインの中心となる色のため、Webサイトの印象を決める色になります。
それぞれの色が持つイメージも考慮して決めると良いでしょう。
今回のWebサイト制作ではグレーを選択しました。
グレーには「洗練、シャープ、大人っぽい」などの意味イメージがあり、
クールな印象に見せることができます。
色の持つイメージの例
赤・・・活動的、力強い、明るい
緑・・・爽やか、穏やか、安全
黒・・・重厚感、高級、都会的
※詳しくは以下の参考サイトをご覧ください。
・アクセントカラー
アクセントカラーは、ボタンなど目立たせたいところに使う色です。
赤など使用し、視認性や誘目性が高くすることを意識するとよいでしょう。
視認性とは？
意識しているときの対象の見つけやすさのことを視認性と言います。
２つの色を組み合わせる時は、明度差を大きくすると視認性が高くなります。
誘目性とは？
意識していないときの人目につきやすさ、発見されやすさのことを誘目性と言います。
誘目性の高い色は、注目されやすいので、配置にも気を付けられると尚良いです。
動画編集での実際の例
私が編集した動画のシーンでの配色のポイントを説明していきます。
今回の動画では、
ベースカラー＝白
メインカラー＝濃い茶色＋濃い青
アクセントカラー＝赤
という配色にしました。
メインカラーを２つにしてあるのは、動画が対談形式で、イノス社長とゲストの吹き出しの色を
それぞれ分けた方が分かりやすいと判断したからです。
その代わり、こだわった点としては、イノス社長の吹き出しの色を右上のINOS COMPANYの画像と
同じ色を使用したことと、ゲストの吹き出しと同じ色を使って見出しを作ったことです。
これによって、使用する色を最小限に抑えて、まとまりのある映像になるようにしました。
また、メインカラーを濃い色にしたことで、アクセントカラーの赤が映えるようにしました。
参考サイト
3色の組み合わせパターンを活用！印象（イメージ）を決める配色のコツとは？
はじめてのデザイン 〜デザインの基本・考え方〜
視認性、誘目性・・・赤いバナーの効果について色彩学の視点でまとめてみました
誘目性・視認性とは（注目度を上げる方法）｜色彩検定®2級
配置のコツ
視線誘導のパターン
先ほどの配色で、「赤色は視認性が高いので注目を集めやすい」という話を書いたように、
人の視線は誘導することができます。
普段は意識していないのですが、視線誘導には、F型・Z型・N型のパターンが存在します。
・F型
ユーザーの視線が左上→右上→左下→右下→更に下の順で動く。
一番左にある内容が何回も見られ、ページの下に行くほど内容が飛ばされがち。
・Z型
ユーザーの視線が左上→右上→左下→右下の順に巡回するように動く。
・N型
ユーザーの視線が右上→右下→左上→左下の順に巡回するように動く。
小説のようなデザインだとN型になる。
※詳しくは以下の参考サイトをご覧ください。
今回のWeb制作では、左寄せでタイトルとサイトの説明を書き、メインコンテンツも左から右に
流れるように制作したため、F型にあたるかと思います。
また、視認性の高い色（赤色のボタンなど）を画面の左側に寄せておくことによって、
視線誘導のパターンに沿った形になるようにしました。
見慣れているUIの真似をする
今回の動画編集では、配色面では基本に合わせて作りましたが、配置に関しては少し別のことに
挑戦してみました。
テレビ番組などでは、画面の下の部分にテロップが出され、色分け等がされて話している人物が
区別されたり、話している人物の感情等が表現されたりしていることが多いように思われます。
しかし、今回の動画編集では、チャットアプリのUIを真似することを試みました。
チャットアプリ風の吹き出しで、どちらが話しているのか配置で伝わると考えたからです。
また、今回の動画で画面に映っているのはイノス社長だけですが、チャットアプリ風の吹き出し
にすることで、2人で会話している感が出るのではないかと考えたからです。
このように、既に普及してるUIの真似をすることで普段から見慣れている感覚を引き出す手法も
いいのではないかと思います。
参考サイト
視線誘導のパターン | F型、Z型、N型
最後に
今回は、Webサイト制作や動画編集の際に気を付けたポイントをまとめました。
この記事を読んでいただいた、あなたのお役に立てば幸いです。
イノスカンパニーでは、
プログラミングやウェブサービスの運用/企画を、
勉強会やサポートにより、学習しながら体験することができます。
あなたも一緒に、
ウェブサービスの運用/企画の知識や技術を
体験してみませんか？
最後に、合同会社イノスカンパニーでは
学生・社会人を問わずインターンメンバーを募集しています。
・プログラミング(HTML/CSS/Javascript/Python)
・ウェブサービス運用/企画
・動画編集
・SNS運用
これらを体験してみたい方、新事業を作ってみたい方、
一緒にやってみませんか？
応募はコチラから可能です。皆さまの応募をお待ちしています。