「スマートダブリング」画面デザイン

デザイナーのかもゆうこです。

株式会社コルク様からのご依頼で、「スマートダブリング」というツールの、スマホ用画面デザインをさせていただきました。

DoubRing(ダブリング)とは

こちらの公式ページに詳しい内容が書いてありますが、とてもざっくり、かつ私個人の解釈でまとめると

「ふたつの言葉の関係性についての認識を、9つのパターンのいずれかの図で示すことによって、相手と自分の認識のズレを理解するツール」です。

こちらの記事もとても参考になります。

なぜ話が噛み合わない?ズレやすい「言葉の定義」を、コルク佐渡島さんと考えた

ダブリングの概念自体はとても面白いものなので、興味のある方はぜひ身近な人とやってみてもらいたいです!お互いの理解が深まると思います。(※注:どちらが正しいとか良い悪いを決めるものではありません)

今回、こちらの「ダブリング」を、スマホで簡単にシェアできる「スマートダブリング」というツールとして作りたいというお話があり、そのデザイン部分のご依頼をいただきました。

構成の確認

まず、全体の構成と画面数を確認するために、簡単な図を作らせていただきました。

イラストがあったほうが良いところや、結果の確認画面などもこの時点で軽くご提案と質問をして、作業内容にズレがないかをざっくり確認しています。

おおむね問題ないことが確認できたので、ここから具体的にデザインを作っていきました。

デザイン画面はこんな感じ

実際の作業はAdobe XDで行っていますが、全体の画面のイメージはこんな感じです。

※使用されているイラストも全て自分で描いています。

今回は機能(やりたいこと)がはっきりしていたので、装飾性を上げるというよりは、操作のしやすさや見やすさを一番重視しました。

XDは使いやすい

実はwebの実績はあまり多くないこともあり、XDもかなり長いこと触っていなかったので、今回はXDの扱い方に慣れるところからでした。

XDは出たばかりの頃からかなり進化して、非常に使いやすくなっていました。基本的な機能はXDひとつで完結するところは素晴らしいです。

共有用URLの作成が頻繁にエラーが出るのだけはなんとかしてほしいですが…。

ということで、もしweb系のデザインについても検討している方がおられましたら、一度ご相談ください!