はじめまして。WEBデザイングループの森田です。
2020年に新卒で入社し、不動産情報サイト アットホームや不動産情報アプリ「アットホーム」のデザイン・コーディング、各ページへ誘導するバナーの作成、記事をより魅力的にする画像の作成… 皆さんが目にする機会の多いデザイン業務を担当させていただいています。
新学期になり、出社のタイミングが近所の登校する小学生と重なるようになりました。
色とりどりのランドセルが駆け回る様子に癒されています。
昔と比較すると、デザインや機能性に加え、赤・黒以外の色展開が増えていて、自分だけのランドセルを選ぶのが楽しそうですね。
今回は、ランドセルの色を増やす素因の一部にもなった「ジェンダーレス」に特化したデザインについてお話しします。
目次
ジェンダーレスとは？
内容に入る前に、ジェンダーレスの定義を明確にしていきます！
ジェンダーレスとは、
生物学的な性別（女性・男性）を前提とした、社会的/文化的な区別・境界線をなくしていくという考え方
つまり「この色は男性に似合う」「フリルやレースは女性モノ」といった、性別での境界線をなくしていくことを指します。
ジェンダーレスと同義語として「ジェンダーフリー」というワードを見たことがある方もいらっしゃるのではないでしょうか。
ジェンダーレスはジェンダーフリーと同義語ではありませんので、内容に合わせて名称を使い分けることが大事です。
| ジェンダーレス | 男女での区別・境界線をなくしていくこと |
|---|---|
| ジェンダーフリー | 性（男女）による社会的・文化的差別をなくすこと |
SDGsとともに浸透したジェンダー意識
そもそもジェンダーというワードが世間に浸透し始めたのは、SDGs（持続可能な開発目標）と関係しています。
SDGsの一つに「ジェンダー平等を実現しよう」という目標が存在します。
これには、女性も男性と同じようにリーダーになれるようにすること、すべての女性と女の子に対する差別をなくすことなどが含まれます。
ジェンダーレスのことを簡単に知っていただけましたでしょうか？
ここからは、私が実際に担当したジェンダーレスデザインを採用したプロジェクトを紹介していこうと思います！
ジェンダーレスデザインに挑戦！
こちらは同棲をはじめるカップルに向けた、お役立ち情報・記事をまとめたページです。
お部屋選びのポイントや親へ挨拶するタイミングなど、同棲にまつわるさまざまな疑問を同棲経験者のリアルな声とともに紹介しています。
プロジェクト内でデザイン担当に任命いただき、企画担当者と「リラックスして見てもらえるページにしたい」「一人暮らしのウキウキ感とは違ったものにしたい」などの具体的な要望を練り上げ、デザイン案を作ることになりました。
ふと、今回のターゲットは「カップル」であり、性別に指定はないことに気づきます。
これはジェンダーレスデザインに挑戦できる、デザイナーとして成長できるいい機会だと思い、表現方法に「ジェンダーレスデザイン」を取り入れることにしました！
では、具体的にどんなことを意識したのかお話ししていきます。
【挑戦①】区別のない配色選び
色が日本人に与える一般的な印象を一覧にまとめてみました。
外国では宗教や文化の違いで、色の意味合いが変わってくるのでまた違う印象が出てくるとされています。
色が日本人に与える一般的な印象一覧
| 色名 | ポジティブな印象 | ネガティブな印象 |
|---|---|---|
レッド
 |
エネルギッシュ 情熱、活力、興奮、高揚 |
警戒、怒り、衝動、圧迫 |
ブラウン
 |
安心感 温もり、自然、重厚、素朴 |
汚い、地味、渋い、頑固 |
オレンジ
 |
陽気 喜び、活発、明るい、暖かい |
攻撃、安っぽい、目立ちたがり、わがまま |
イエロー
 |
無邪気 愉快、元気、軽快、希望 |
注意、注目、軽はずみ、幼稚 |
グリーン
 |
自然 癒し、調和、若々しい、健康 |
田舎、未熟さ、毒、疲れ |
ブルー
 |
知的 落ち着き、信頼感、誠実、爽快感、男性的 |
悲哀、冷たい、孤独、消極的 |
パープル
 |
上品 優雅、妖艶、神秘、高貴 |
不安、不満、嫉妬、慢心 |
ピンク
 |
愛情 可愛い、幸福、メルヘンチック、若い、女性的 |
幼稚、媚び、非現実、甘え |
ホワイト
 |
清潔 純粋、神聖、正義、さわやか |
空虚、無、自閉、冷たい |
ブラック
 |
高級 重厚感、威厳、神秘、格好よい |
恐怖、不吉、悪、死 |
ジェンダーレスデザイン前提で色を決める場合は、【男女を区別しやすい色を避ける】を守れば良いと思います。
昔のランドセルなどで使用された、赤/ピンクと青/黒の組み合わせは、避けるようにしました。
ファッション業界では、ジェンダーレスカラーとして「イエロー・グリーン」や「パステルカラー・グレイッシュカラー」が挙げられます。
ともに赤味・青味を感じない色合いが選ばれるようです。
今回は企画担当者から「リラックスして見てもらえるページにしたい」という要望がありました。
上記の表の中からリラックス効果がある印象を与える色は、以下の３色です。
- ブラウン：安心感 温もり
- グリーン：自然 癒し、調和
- ブルー ：知的 落ち着き、信頼感
【男女を区別しやすい色を避ける】ことから、原色のブルーを使うことは避け、青味のあるグリーンに組み合わせ配色を決定しました！
- メインカラー：ブラウン
一番使用する色、広い面積で使うことが多いので色の濃さなどを調整することを意識しました。 - サブカラー：イエロー
メインカラーを引き立てる色、ブラウンの類似色を選びました。 - アクセントカラー：青味のあるグリーン
要点を目立たせるために使用する色、ブラウンの補色を選びました。
こちらが実際に表示される画面を抜粋したものです。
当社のコーポレートカラーはレッドのため、これまであまり選ばれなかった配色になりましたが、うまくマッチする色味にできたと思っています。
【挑戦②】不要なものを隠したキービジュアル
サイトに移動した際に、一番最初に目に入る「キービジュアル」です。
このキービジュアルの印象で、ユーザーの目を引くことができるかがコンテンツの良し悪しに関わってきます。
当初はロゴとリード文だけでページトップのデザインを作成していましたが、インパクトが足りず目を引かないという意見もあり、背景に画像を置くことになりました。
人物はあえて後ろ姿のものを選び、その画像上に半透明のブラウンのレイヤー（層）を重ねることで、詳細まで画像が見えないように調整を行いました。
添付の画像で、レイヤー加工あり・なしの比較できるかと思います。
これにより「なんか2人で同棲の準備をしている？」という、ふんわりとした印象で意識が留まるのではないでしょうか。
性別などの情報をそぎ落とし、ページの趣旨をうまく伝えられるキービジュアルを作ることができたのではと思っています。
ジェンダーレスデザインを意識してみて
作業を進めていくにつれ、ジェンダーレスデザインは「特別な工程を踏まなければいけない」ということは一切ないのだなと感じました。
デザインを作っていくうえで必要なターゲット・ペルソナの情報がより鮮明になり、配色など何かを決める際に分かりやすい指標にすることができます。
普段あまり意識しないファッション業界の配色ルールなどを調べることができたので、自分のデザイン表現の幅は確実に広がりました。
デザイナーとして、また一つ成長できたと思います！
アットホームのサイト・アプリは、性別や年齢を限定せずに物件検索等していただけるサービスになっています。
今後もジェンダーレスデザインをうまく取り入れていき、役立てていけたらと思います。
最後までお読みいただきありがとうございました！
