2019年デザイナー新卒研修に迫ってみた #2

こんにちは!フェンリルのデザイン部でマネージャーをしている松浦です。

第1弾に引き続き、2019年の新卒研修の第2弾をレポートします!

第1弾の記事はこちら。

今週はガイドラインの理解だ!

今回の研修は「各OSに応じたアプリガイドラインの理解」です。

実はアプリを開発する時にとても重要なものがこのガイドラインです。

iOSでは「Human Interface Guidelines」、Androidでは「Material Design Guideline」というものが存在します。

そもそもガイドラインとは何か?

これは、ユーザーに一貫性のある体験を提供するために、各OSの方で推奨しているルールのようなものです。このガイドラインに沿うことで開発効率が上がったり、ユーザーが使いやすい操作を提供する事が出来ます。

ただし、ガイドラインに沿いながらもデザインの世界観や独自の操作性は、そのデザイナーが作っていかなければいけません。

今回の研修では、このガイドラインを読み、基本的な型について理解した上で、ガイドラインの使いどころの範囲と程度を見極められるようになる事が目的です。

まずは座学で各ガイドラインの基本的な思想を先輩から教わります。


Human Interface Guidelines

まずは、iOS向けのガイドラインである、Human Interface Guidelinesの3つの基本的な主要テーマから。

・明瞭 (Clarity)

コンテンツがはっきりと理解できるようにしましょう。

・控えめ (Deference)

ユーザーインターフェイスは控えめに。そして主役であるコンテンツを尊重しましょう。

・奥行き (Depth)

奥行きを用いて情報の階層構造をユーザーに意識させましょう。

<参考>https://developer.apple.com/design/human-interface-guidelines/

皆さん真剣に聞き入っています。


Material Design Guidelines

続いてAndroidのガイドライン、Material Design Guidelinesの主要なデザインテーマです。

・Material はメタファである (Material is the metaphor)

デザインの比喩にマテリアルや素材を取り入れましょう。

・大胆に、生き生きと、意図的に (Bold, graphic, intentional)

色の選択や画像、大きなタイポグラフィ、意図的な余白といった要素はユーザーを没入させるような生き生きとしたインターフェースを生み出します。

・モーションは意味を提供する (Motion provides meaning)

モーションはユーザーを注目させ、ユーザー体験を維持するために役立つ有意義で適切なアプローチ。

<参考>https://material.io/design/


少し言葉が難しいので理解に時間がかかるかもしれませんね。。


世の中のアプリがガイドラインをどう取り入れているか調べてみよう!

さて、今回の研修はただガイドラインを読むだけではなく、ガイドラインを読みながら、実際に世の中のアプリがどのようにそれを取り入れているかを調査するというものです。

ただし、ガイドラインを取り入れているから正解という訳ではなく、各アプリを調査する事によって

・アプリの性質(ツール、ゲーム、SNS などのカテゴリ) によっての違い
・画面の性質(メインになる画面、派生の画面、メニューなど画面間の遷移に使う部分など)によっての違い
・OS での違い(どちらか一方のガイドラインが優先されている、各OS のガイドラインに最適化されている、両OS ともオリジナルの法則で作られているなど)

なども知ってもらいます。


ガイドライン理解の振り返り

振り返りでは、各アプリについて、以下を中心に発表してもらいました。

・ガイドラインに沿っていた点/沿ってなかった点
・使いやすい点

皆さん単純にガイドラインや使いやすさだけの観点だけではなく、そのアプリの設計や構造についても、iOSとAndroidでの違いに疑問を持っていたので、先輩デザイナーからも「良い観点で調べている」とお褒めの言葉をもらっていました。

今後の課題も見えてきた第2弾研修

無事プレゼンが終了し、新卒スタッフにも感想を聞いてみました。

・アプリを調べる時に、ガイドラインから「あのコンポーネント(OSで事前に用意しているパーツ、タブバーなど)ここに書いてたな」と思い出しながら辞書的に引くことができた。
・細かなコンポーネント名など用語がわからない所があった。

やはりコンポーネントの名称や性質を理解する所がネックのようでした。

今回の研修ではそれぞれの課題が明確になったと思うので、今後コンポーネントのような専門用語は仕事をする上で、飛び交う言葉なのでここは抑えておきたいですね!

この研修だけで終わらず、世の中のアプリを調査したり、ガイドラインを読み込んだりは今後も続けていきましょう!

第2弾のレポートは以上になります。第3弾もお楽しみに!


【新卒募集要項】

新卒デザイナー
UXの全てに携わる!新卒デザイナーを大阪で募集
私たちは、"デザインと技術"でユーザーにハピネスを届けるため、 Sleipnirをはじめ、多くのプロダクトを創造してきました。 この先もアプリ開発にとどまらず、世の中に新しい価値を生み出し続けます。 ■ 自社プロダクト事例 ・ウェブブラウザ「Sleipnir」https://www.fenrir-inc.com/jp/sleipnir/ ・デザインレビューツール「Brushup」https://www.brushup.net/ ・オンラインデザインツール「Picky-Pics」https://picky-pics.com/ ・超高速プッシュ通知エンジン「BoltzEngine」https://www.fenrir-inc.com/jp/boltzengine/ ・バレーボール専用データ分析アプリ「VLabo」https://www.vlabo.app/ ・その他の自社プロダクト一覧 https://www.fenrir-inc.com/jp/ ■ 共同開発プロダクト事例 NHK 紅白アプリ、ぐるなびアプリなど有名なサービスも多数手がけています。 https://www.fenrir-inc.com/jp/works/
フェンリル
デザイナー・UXコンサル
新卒からビジョンを持って働く!UXコンサルタントを東京で募集
私たちは、"デザインと技術"でユーザーにハピネスを届けるため、 Sleipnirをはじめ、多くのプロダクトを創造してきました。 この先もアプリ開発にとどまらず、世の中に新しい価値を生み出し続けます。 ■ 自社プロダクト事例 ・ウェブブラウザ「Sleipnir」https://www.fenrir-inc.com/jp/sleipnir/ ・デザインレビューツール「Brushup」https://www.brushup.net/ ・オンラインデザインツール「Picky-Pics」https://picky-pics.com/ ・超高速プッシュ通知エンジン「BoltzEngine」https://www.fenrir-inc.com/jp/boltzengine/ ・バレーボール専用データ分析アプリ「VLabo」https://www.vlabo.app/ ・その他の自社プロダクト一覧 https://www.fenrir-inc.com/jp/ ■ 共同開発プロダクト事例 NHK 紅白アプリ、ぐるなびアプリなど有名なサービスも多数手がけています。 https://www.fenrir-inc.com/jp/works/
フェンリル
フェンリル's job postings
10 Likes
10 Likes

Weekly ranking

Show other rankings