【fotorとは】

無料で簡単に画像編集が出来るサイトです。Photoshopのように難しいソフトではなく、超直感的にWEB上で画像を編集出来ます。

YouTubeに動画を上げる際のサムネを作成したりと、fotorパイセンには高校生の頃からお世話になっております…。

(ランディングページ)

・以降フォントは英語がAriel、日本語がMicrosoft YaHei(中国語用)とMeiryo(日本語用)で構成

・キャッチタイトルの補助的な文は下の白サークルにも挟まれてるので可読性を高めるため白寄りのグレー

・メインカラーが水色、サブカラーで文字の白色、プレミアム版に移動するバナーを、アクセントカラーが色相環的に水色のほぼ反対色にあたるピンク色にして目立たせている

(ランディングページ/ログイン)

・「パスワードを記憶させる」と「パスワードを忘れましたか？」のフォントは同じだけど色が違う。可読性

・「まだfotorアカウントないの？」と「Counect With Facebook」の間に仕切りとして薄い茶色の線が置いてある

・ポップアップ左側のアピール文はフォントがMicrosoft YaHeiだけど、ポップアップ右側(登録云々)の日本語はMeriyo。ランディングページとアピール文は同じフォントにして、ユーザー情報を入力する登録画面のフォントはMeiryoにする事によって差を付けたかったのかも。その後のページでもMicrosoft YaHeiが多く見受けられた。

・アカウント無い場合の煽り文の後ろに続く「登録」の文字色がログインボタンと同じく茶色。煽り文の黒とは違い、ログインの方が似た意味を持っており差別するため茶色にしてるのでは

(edit画面)

・プレミアムへ誘導させるボタンはランディングページと同じくアクセントカラーのピンク色

・画面に見えるボタンの角丸は全て5pxで統一感を持たせている

・右下の「広告を非表示にしたい?」が「いますぐ更新！」より1px小さい17px。補助分なのに背景の反対色である白で強調されてるから小さくされてるのかも

・上バーと下バーのプレミアム誘導ボタンの色が少し違う。上のバーの方がピンクが濃く。下のバーは薄い。背景の黒も下のバーのが薄いので印象を合わせるため同じような感じなので合わせてるのでは

・「開く」と「インポート」の同じ意味を2つのボタンだけ色が霞んでなく、初めにして欲しいアクションを色の濃さで表している(そもそも他の機能も使えなかった)

・インポート欄にある境目の灰色の線だけ白い影が付いてて厚みを持たせてる

・WEBでの編集のため、基本的に使う機能はマウスの動かしやすさを考慮して編集で使うアイコンは左バーか上バーに配置してある

(edit画面2/編集可能画面)

・使用できる状態になった機能(押してほしい)のアイコンは、オフ状態の灰色から白色に変化し分かりやすくなってる

・インポート列の各画像で、「今どの画像を編集してるか」が枠線で囲まれてるこによって分かりやすくなってる

・上バーの使えるようになった機能のアイコンと文字が明るくなってるけど、アイコンに比べて文字の方が暗い。可読性を上げている

(edit画面3/効果選択画面)

・今どの項目の効果を付けようとしてるのか、真反対の黒を持ってくることで分かりやすくしてる

(edit画面4/プラン選択画面)

・青枠の角丸が8pxなのに対して、白枠の角丸は5px。決済誘導画面なので厳かに見せているのかも

・青枠内のフォントはMicrosoft YaHeiなのに対し、白枠内(プレミアム誘導)の日本語はMeiryo

・他画面でオーバーレイを閉じる時の×印はハッキリと表示されてるのに、プレミアム誘導タブの場合×印の色は薄く、分かりにくくされてる

・割引コードの角丸が5pxなのに対して、確認ボタンの角丸は倍の10px

・オススメのプランの欄の左上淵に、アクセントカラーであるピンク色のラベル

・選択中(プレミアムコース)の欄はどこを見ているのか分かりやすいように背景がグレーになってる

(edit画面5/シェア画面)

・青枠の角丸が0pxなのに対して、白枠の角丸は12pxもある。青枠の中には四角形の画像が設置してあるので違和感を持たせないため、白枠はその2つ

・前のプレミアム誘導オーバーレイと同じく、白枠内の日本語はMeiryo

(profile画面)

・今いる画面からプロフィール画面に飛ぼうとする際、自アイコンのボタン押して出てくるバナーが上バーと色が違う

・カードの文字情報部分の背景が白を、画面背景を地味に灰色にし、オブジェクトに影を付けて浮かせる事で分かりやすくしている

【おわりに】

※Twitchと違いfotorはサブスクモデルのため、色相環的にメインの水色とは反対のアクセントカラーピンク色での有料プランへの誘導が激しい

※fotorを開発する会社は中国で、MicroSoft YaHeiは中国語ベースのフォントのためサービス内で多用されてる。ただYaHeiは日本人的には文字崩れを起こしてるので、登録や決済などの重要な場面ではMeiryo登場。プレミア版誘導のオーバーレイだけ他と比べてescの主張が甘い

　今回もまた気付きの多いトレースでした。取り合えずUIトレースは3回目である今回で留めておいて、ウズウズしてきたので作りたいサービスのデザインへ取り掛かろうと思います。