サムネイル

delyインターン生がクラシルをリデザインしてみた。

こんばんは、dely デザイナーインターン3日目のエンドウ(@uni_e3n)です。

先日、delyのCXOである坪田さん(@tsubotax)が「クラシルをリデザインの題材として使っていいよ」とのツイートをされていたので、インターンとして入る前に制作した「iPad版クラシルのリデザイン案」をdelyでの体験を少し交えながらnoteにしてみたいと思います。

delyとの出会い

このnoteを書いている今、僕は大学4年生の就活生です。
すでに10月に入っていて周りが内定式の話をしている中でインターンをしているわけですね。

初めは、知り合いが経営する制作会社のWEBデザイナーとして力を付けていこうとしましたが、開業から10年経っても会社のステージに変わりがなく、あまりわくわくはしていませんでした。(変わらないことが悪いのではなく、納得の行くクオリティで掘り下げられる自社事業系IT企業でデザインとユーザー体験を深めていきたいと思い立ってしまったのです。)

そんな時にdelyのインターン生募集のWantedlyを発見しました。

これはもう飛び込むしかない。

まぁ、もしダメだったら来年就活し直そう、なるようになるさ。と
Macbookと最低限の着替えを持って上京しました。(ちょっとかっこいいから言ってみた)

まずは、Wantedlyで「話を聞きたい!」ボタンを押して、デザイン部のマネージャ兼PdMの小林さん(@kazkobay)と面談して、インターンの選考課題を受けて、挙動不審にビクビクしながらの上京でした。

すでに色々やらかしております、delyでのインターン生活ですが、東京の戦士たちと日々奮闘してます。もし来年、また就活していた時には、僕に職をください。

クラシルのiPad版アプリをリデザインせよ。

本題です。
お気付きの方もいらっしゃると思いますが、delyでのUIデザイナーインターンの選考課題が「クラシルのiPad版アプリのデザイン」でした。

使用したツールは今をときめくプロトタイプツールFigma!
ブラウザで動くためPCのスペックに依存せず、複数人を巻き込んで共同編集が可能な、よく出来た子です。最近は、発表スライドなどもFigmaで作っています。

Figmaの概要は坪田さんのnoteがわかりやすいので共有しておきます!

これからdelyに入りたい!と考えている方は、参考になるかわかりませんが、最後の方にFigmaのリンクを貼っておきますので、見てみてください。

クラシル iPad版アプリの現状

執筆現在、クラシルのiPad版アプリはこんな感じになっています。

画像1

画像3

2019/10/02現在 iPad Pro 11inch トップとレシピ画面 スクリーンショット 

おそらく、iPadでの利用者が少ないのでしょう。
メインのiPhone版アプリのデザインを文字やアイコン周りのみ最適化し、画像などはそのまま拡大されていり状態ですね。スクリーンショットを見てみると、そこまで違和感はないかもしれないですが、実機で確認するとかなりデカイです。せっかくのiPadの大画面が活かされておらず、一覧性が低い様に感じました。

自己満足のリデザイン

そして、リデザインしてみたものがこちらです。

画像2

画像4

iPadなどのタブレット端末こそ、クラシルの様な「ながら見」作業する系のアプリは親和性があるのではないかと思っていたのですが、その考えは間違いではなかった様です。

そして、iPadのもう一つの大きな特徴「ランドスケープモード」横画面表示ですね。

画像5

iPhone版も含めて、現行のクラシルアプリではレシピ動画を見ながら調味料や料理手順をみることはできません。

詳細を読まなくても映像を見ているだけで、誰でも簡単に料理を作れてしまうのが、クラシルの大きな特徴です。ですが、「次の手順ってなんだっけ?」「そういえば、他に調味料って必要だっけ?」など、詳細な文字情報を動画を再生しながら見たいときもあるのではないかと考えました。

また、ランドスケープ表示時の右半分はiPhone版のものをそのまま埋めこむことができる様に調整しました。実装しやすそうでしょ?(実際どうかは知らんけど。)

あくまで課題なので自分なりの利点を考えて詰めたわけですが、最適化の一つの形としては、「綺麗に収まった」のではないでしょうか。

実用の観点から見るUIデザイン

今見返してみると、手放して「良い」と言えるデザインではないですね。
そう感じるのは、delyでのインターンのおかげです。まだ、たったの3日ですが。

何がよくないのでしょうか。

ひよっこデザイナーのインターン生が調子こいて言える立場にありませんが、何個か自分の振り返りがてらあげてみようと思います。

1つ目は、使用している画像です。

このアプリのプロトタイプの画像は全てFigmaのUnsplashという画像挿入プラグインを使用しています。目的の単語で検索してクリックするだけで、映える商用利用可能、著作権表記不要の画像が挿入されます。

画像6

ぽちぽちするだけで高品質な画像が入っていくので、とても楽しいです。

しかし、これが罠でした...
何が罠かというと

なんかいい感じ

に見えてしまうのです!自己満足のデザインとはそういうことです。
UIデザイナーにとっては当たり前のことかもしれませんが、このアドバイスをインターンのフィードバックで頂いた時は、「ほんとだ、確かにそうだ。」と思いました。的確ですね。

グレーアウトした状態にしないことは理解していたのですが、大事なのは「UIデザインのデータはできる限り実際のデータに沿ったもので作ること。」印象と評価が正常にできなくなるからだと、お教えいただきました。

同じくクラシルのリデザインに挑戦したおっきいレモンさん(@indexYowao)のデザインを見てみるとわかりやすいですね!

2つ目は、ランドスケープ表示状態での動画のシークバー(再生場所を移動させるやつ)が下部の「ホーム画面に戻る棒」と干渉することです。

画像7

ホーム画面に戻る棒のスクリーンショット

これは iOS , iPad OS 特有の問題ですが、このバー付近で左右にスワイプさせる動作は非常にまずいです。
実は作りながら薄々気づいていたので、ホーム画面に戻る棒の気配が1ミリもありません。

あと、右半分の下タブもあまりよくなさそうですね。このようなタブの使い方は想定されていないと思います。

画像9

3つ目、最後はテキストですかね。

こちらは途中で気づいて、ちゃんと訂正版もデザインしたので「セーフ!」と言いたいところです。

スタイリッシュさを求めてテキストを消すのはよくありがちだと思いますが、これはかなり選択が難しいと思います。

ここでは、トップ画面のレシピタイトルです。
「レシピを認識するには写真だけで十分だろ!」と思ってデザインをはじめましたが、いざ実機で表示して実用を思い浮かべながら触ってみると、なんの料理か全くわかりませんでした。

これは反応が分かれそうですが、僕は「写真を見て、文字情報で補足して、レシピ内容を理解する。」という脳みその動きを感じました。

画像9

あと、よくやってしまうあるあるとしては、デザインの中で欧文を使ってしまうことですね。

上の画像にもあるように、デザインするときに欧文を入れがちです。
かっこよさ重視でユーザービリティを考慮しなくてもよいのであれば、欧文を使っても問題はないと思いますが、国内でドメスティックなアプリや使用する想定ユーザーが日本に限定されている場合は、あまり欧文を使わない方が良いかもしれません。

かっこよくなるのはわかりますけどね。

欧文に対して和文は情報量が多すぎます。
欧文はパッと見ただけでは意味がわかりませんが、和文は漢字のおかげで見た瞬間に意味を無意識で理解してしまいますよね。あと画数が多い。

意味がわかるというのは脳みそが読み上げていて、視界に入った文字情報を処理してしまうのでうるさくなります。

だから欧文を使うとなんかかっこよくスタイリッシュに見えるのかもしれませんね。

Re:DESIGN

そんな感じで、クラシルのiPad版 アプリのデザインを僕の復習と共にnoteにしてみました。

慣れないnoteと駆け出しのデザイナーへの、アドバイスや訂正などありましたら、ビシッとお教えいただけるととても助かります。

最後になりましたが、インターン中の面倒をみていただいている小林さん、坪田さん、delyの皆さん、そして堀江さん、ありがとうございます。

わくわくして初日前夜は寝られず、不慣れな東京で疲弊しておりテンションが低いですが、トライアンドエラーで自己最高級の成長をします。

おまけ

最後まで拙い文章をお読みくださりありがとうございます。

このnoteで紹介したプロトタイプのFigmaリンクを貼っておきます。グリグリ動かしてみてください。


この記事が気に入ったら、サポートをしてみませんか?気軽にクリエイターを支援できます。

note.user.nickname || note.user.urlname

いただいたサポートは、デザインの勉強をするための書籍やワクワクするプロダクトを購入するために使用させていただきます。

39
クリエイティブチームUnicellの代表とデザイナー 大学で体験のデザインとインタラクティブコンテンツの研究をしています。 HP:https://yusuke.unicell.jp/works/ Twitter:https://twitter.com/uni_e3n
コメントを投稿するには、 ログイン または 会員登録 をする必要があります。