■URL
https://yorozu-uranai.com/
■GitHub
https://github.com/the-red/yorozu-uranai
誕生日や生まれた場所などを元に、占いに必要なデータを算出するアプリです。
西洋占星術のホロスコープ、数秘術のコアナンバー、四柱推命の命式を作成できます。
このサイトのように占いに必要な情報を計算できるサイトは多くあり、占いの勉強が趣味の私はよくお世話になっていました。そして過去利用する中で、占術ごとに参照するサイトを変える必要がある、デザインに少々古さを感じるサイトが多い、といった印象を抱いていました。
「レスポンシブに対応するなどUIにこだわる」「一つのアプリ内で複数の占術の計算ができる」という機能面の他に、「占術ごとにデザインを変えたら雰囲気が出て面白そう」といったアイディアが生まれ、今回それらを実現しました。
占術ごとにデザインをがらっと変え、それぞれの占いをイメージした雰囲気のデザインにした分、デザインを使い回せないことから制作に時間がかかったり、統一感が少々失われてしまった部分はあると思います。配色やフォントは違っても、ボタンのサイズや文字サイズをページ間で統一するなどをUIの面は今後改善していきたいと思います。
職場の同僚と4人でチームを組み制作。
私は仕様の方針決め、デザイン、コーディングの主にCSSでのスタイルあてを担当しました。
【西洋占星術のホロスコープ作成画面】
惑星、星座が占い結果として出てくるため、宇宙、クール、未来感をイメージしたデザインにしました。
星空の背景にすることで宇宙をダイレクトに表現し、全体の配色をホワイト、ネイビー、グレーでまとめることでクールさを表現。少し未来感を感じさせるような英語フォントを選びました。
【数秘術のコアナンバー計算画面】
数秘術ももちろん占いという意味では神秘的なイメージはあるものの、計算結果がシンプルな数値であることから、素朴で簡潔な印象を受けました。
1つ目に紹介した西洋占星術の画面はどちらかというと神秘的なイメージ寄りだったので、それと差別化する意味を込め、シンプルで素朴なイメージでデザインすることにしました。
さっぱりとした単色の背景に線画イラストをアクセントに追加することでシンプル・素朴さの中にほっこりとするような要素を追加しました。
【四柱推命の命式作成画面】
「占いの王様」と呼ばれる中国の占いなので、赤×黄色の配色や中華ランタンイラストやフレームの飾り罫でザ・中国風の雰囲気を表現しました。
計算結果の情報量が他の占いと比べかなり多いため、見やすくするための工夫として、現在に該当する行の背景色を変えたり、スマホ表示にした場合も見やすく、画面崩れ等が無いよう考慮しました。
