制作背景
日本にはLGBTQ+当事者向けの情報サイトは多くある一方で、当事者をサポートしたい人たち(アライ)に向けた情報を書いているウェブサイトはまだまだ少ないのが現状です。加えて、近年は日本に住む外国人も増えており、彼らの中にはLGBTQ+当事者の方も一定数います。Rainbow Connectは、アライの人達には正しい知識と振る舞いの仕方を、外国人当事者と日本国内の当事者には日英バイリンガルウェブサイトという形で今までにないWebサイトを提供致します。
ターゲット層
日本に渡航予定がある英語を母語とする学生や社会人の当事者、日本国内の当事者、
LGBTQ＋のサポートをしたい人
使用ツール
企画書：Notion
ワイヤーフレーム制作：Figma
情報収集(出典調査も併用)：Claude ai、Grok
ロゴ制作：Photoshop
デザイン素材制作：Photoshop
プロトタイプ制作：Figma
テクスチャ素材と写真：Freepik
Figmaテンプレート：Figma Community
制作過程
1.企画
当初は燈株式会社でのインターンとHolland Collegeでの学びのアウトプットとして、マイノリティの人たちを助ける架空のアプリデザインを行おうという趣旨の元開始しました。しかし、Rainbow Connectの性質上、スマホアプリでは無くウェブデザインの方がよりユーザーの負担が少ないと考え、ウェブデザインに変更しました。
2.企画書
Notionで企画書を作成し、制作目的・コンテンツ構成・ペルソナ・ワイヤーフレーム・使用素材を一元管理しました。ペルソナは外国人当事者、日本国内当事者、教育現場と企業でアライとして動きたい人の4パターンを設定。コンテンツはサイト紹介、体験談、専門家監修設定の解説記事（日英両言語）、コンタクトフォームで構成しています。」
企画書リンク
実際に企画書にまとめたペルソナ
3.ロゴ作成制作
Rainbow Connectのロゴ制作ではシンプルかつLGBTQ+当事者とアライの人たちが本当の意味で助け合える世の中にしたいと言う、願いを込めて作りました。
没になったロゴデザイン案
左上のスマホアプリ制作時のロゴでありConnectの部分と緑の色が微妙に似ていて遠目でわかりにくいことと全体的にカラフルなウェブデザイン制作時には却下。右上はウェブデザインの最初のロゴデザイン。全体的に無機質な印象があり、ぱっと見でどんなサービスがわかりづらい為却下。
最終的に採用したデザイン案
前の２つのロゴの反省点を活かし、シンプルかつ何のサービスがわかりやすくするため、フォントを大きめにしアイコンには国内の当事者と英語話者の当事者とアライを繋ぐ意味を込めてロード中のアイコンをレインボーカラーに変更。
4.ワイヤーフレーム制作
デザイン制作に取り掛かる前にFigJamで大まかなレイアウトを作成しました。その際に検索バーの下にハッシュタグでの絞り込みを出来るようにするなど、コンテンツ内容の位置とそれらの役割などを考えました。
5.デザイン制作
メニューバーの言語切り替えボタンはユーザーが迷わないようにロゴの横には配置しました。日本語を一般的に広く使用されているのは日本のみのため日本語切り替えのアイコンは日本国旗にし、反対に世界中で話されている英語は地球儀のアイコンにしました。メニューのフォントも日本語版では、英語の36pxより小さめの32pxに変更し圧迫感を与えないように工夫をしました。また、アライと言う言葉は日本では一般的ではない為、「関心のある方へ」に変更しました。日英両方とも、誤クリックを防ぐため、全端末ともに間隔を十分に開けています(詳しくはプロトタイプをご覧ください)。
私たちについて(About Us)ページでは、組織全体の信頼性を高める為に、Freepikからダウンロードした写真をPhotoshopで加工しました。全体的にシンプルになりすぎないように、デザインシステムとして加工したデザインを使用し、薄橙色の背景と視覚的にカラーコンタラストが機能するように、濃いめの色を使用しました。英語のウェブサイトの多くは「〜しよう！」という言い回しや固有名詞を何度を使わないなど、日本語と文の書き方が根本的に違うことが多いため、完全な直訳ではなく、文の意味を汲み取った上で各言語ごとに自然な言い回しになるようにしました。加えて、教材作成は日本語版特有の機能のため、日本語版の各組織に最適な教材作成(Tailored learning resources)では、お問い合わせページに遷移するための文を追加しています。そして、私たちについて(About Us)と体験談(Our Experiences)では、日英両方に体験談を投稿するためのセクションが下に設置されており、説明文とボタンの文言でも日英によって文の書き方を分けています。
体験談(Our Experiences)のページでは、検索バーとハッシュタグでの記事の絞り込みを出来るようにしています(プロトタイプでも#レズビアンと#Lesbianで絞り込めるようにしています)。各フラッグを表示することによって、直感的にどのセクシュアリティの話なのかを分かるようにしています。フラッグは体験談投稿時に、セクシュアリティ選択もしくは記入した(現状全てのセクシュアリティに対応しきれていないため)内容に紐付けています。またボタンの文言も、日本語のUIの多くが「〜する」などの終止形が多く、ユーザー自身もそれに慣れている為、「記事を読む」と書きました。一方で英語では「Read the article」だと、冗長かつ英語のUIボタンの多くは命令形が多いため、「Read Now」に変更しました。
「体験談を投稿する(Share Your Journey)」のボタンをクリックすると、体験談投稿(Share Your Experiences)画面に遷移します。投稿するのはユーザー自身の為、負担をかけないために項目はタイトル、セクシュアリティー、ハッシュタグ、メッセージと最小限にしています。セクシュアリティーはプルダウンでの選択と、テキスト入力での両方が可能であり、選択したセクシュアリティーと投稿時のアイコンが紐づいています(選択肢に無いセクシュアリティーの場合は紫のアイコンになります)。また、体験談を見つけやすくする為、体験談に紐づける為の最大４つまでハッシュタグの追加ができます。選択と任意のハッシュタグの追加の、両方ができます。メッセージの内容は、基本的にユーザーの好きな書き方をできるようにしていますが、画像の投稿はできません。体験談は本サイトで公開される為、必ずプライバシーポリシー(the privacy policy)の同意してからでないと、投稿できない仕様にしています。
関心のある方へ(For Allies)のページは、体験談(Our Experiences)のページと大まかなレイアウトは同じです。ですが、ハッシュタグ(Keywords)の順番を、体験談ではセクシュアリティに関する語群を上にしてるのに対して、関心のある方へでは学習関連の語群を上に配置しています。これにより、各目的にあった記事を絞り込めるようにしています。アイコンも体験談のフラッグに対し、関心のある方へでは一般的に広く使われるイメージに紐づいていて、尚且つ中性的なアイコンにしました。加えて、色も全て変えている為、直感的に違う種類と言うのが分かりやすくなっています。
日本語版では関心のある方へのページに、教材の作成をお願いするためのCTAセクションを設置しています。サイト全体の一貫性を保つため、基本的なレイアウトは体験談を投稿するためのセクションと同じです。教材作りは各組織と個別でやり取りをする設定の為、お問い合わせページに遷移するようにしています。
体験談の記事のレイアウトはタイトル、読む時間の目安、投稿日、翻訳されている体験談の場合は翻訳者の名前も記載されています。読む時間の目安は文字数をベースに自動で計算されます。そして、記事を実際に載せる前には、必ずスタッフが誤字・脱字の確認を行います。また、ハッシュタグでの検索や、関連する他の体験談も読めるようになっています。また、タイトルの右上の体験談一覧に戻る(Back to our wxperiences)をクリックすると、体験談一覧に戻ります。
体験談と関心のある方々へ(For Allies)の記事は、レイアウト自体は概ね同じです。しかし、記事の信頼性を高める為、提携した専門家の方に書いていただいており、翻訳書もその記事に関連する学位を持っている方にお願いしている設定です(※)。記事を書いた専門家の情報をハッシュタグの下に書いています。
※あくまで学生の課題で作ったもののため、企画書、デザイン、内容含め全て私一人で制作しています。ですが、記事と体験談の内容は実際に調べた内容を元に書いています。
※あくまで学生の課題で作ったもののため、企画書、デザイン、内容含め全て私一人で制作しています。ですが、記事と体験談の内容は実際に調べた内容を元に書いています。
ユーザーの負担を減らす為、体験談投稿と同様に最低限の記入にのみしています。教材作成の依頼や書いて欲しい記事の依頼などは、全てこのContacts、もしくは全ページのフッターにある電話番号とメールアドレスからの連絡となります。
全ページ共通のフッターには、お問い合わせやRainbow Connectについて知りたい方のためにレインボーコネクトの連絡先とSNSアイコンが書いています。
Figma Link
▶️からPC、タブレット、スマホそれぞれのプロトタイプを見ることが出来ます。
※書いてある内容は実際は専門家の監修は受けていません。私自身が調べた内容をもとに書いています。
※書いてある内容は実際は専門家の監修は受けていません。私自身が調べた内容をもとに書いています。
