Daily Cocoda! #01プロフィール画面〜ガイドライン編〜

Daily Cocoda!#01を色々ブラッシュアップしながら作ったのですが、その際参考にしたMaterial Designのガイドラインをまとめてみました。

作成過程の話▼

Material Designとは

Googleの提唱するデザインシステムのこと。
直感的な操作ができるように、Material（物資：紙とインク）で現実世界のルールを表現しています。
統一したデザインを使うことで、様々なデバイスで一貫した操作性を得ることができます。

そんなMaterial Designのガイドラインに沿って写真をシェアできるSNSのプロフィール画面を作りました。

参考にしたガイドラインは主にApp Bar、写真の表示方法、フォントあたりなので、今回は備忘録兼ねてその辺をまとめておきます。

App Bar

App Barとは現在の画面に関する情報やナビゲーション、キーアクションを配置できる部品のこと。

画面上部に置く場合（App bars: top）は画面に関する情報やアクションを配置でき、

画面下部に置く場合（App bars: bottom）はナビゲーションやキーアクションを配置できる。

ということなので、今回は片手で簡単に操作できるように画面下部にApp bars: bottomを置く事にしました。

App bars: bottomの原則

App bars: bottomの使いどころ

使用可な場面：
・モバイルデバイス
・ナビゲーションドロワーにアクセスできる状態である
・2〜5個のアクションのある画面である

使用不可な場面：
・ページ下部にナビゲーションのあるアプリ
・アクションが1つまたはまったくない画面

という事なので、使用可な場面になるようにApp Barを配置しました。

また、FAB（Floating Action Button）のレイアウトは上に乗せるパターンとくり抜くパターンがありますが、今回は写真メインのSNSということもあり、見せられるようにしています。

Image lists

続いて写真の表示方法です。
画像の表示はグリット表示が原則になりますが、いくつかパターンがあります。

❶Standard image lists
サイズ、比率、およびパディングは均一で画像の順位が同列の場合に適している。

❷Quilted image lists
さまざまなサイズと比率を使用して階層を作ることで、特定の画像を強調することができる。

❸Woven image lists
織物のように縦横異なる比率で表示することで、リズミカルなレイアウトを作成することができる。

❹Masonry image lists
レンガを積んだような表示にすることで、トリミングすることなく元の画像を全体的に活かした表示が出来る。

この4パターンの中で今回は写真メインのSNSということでfav数が多いものを大きく表示させようと思いながら最初は適当に組んでいましたが、ガイドライン反映するようになってからは、メリハリを残しつつ見やすくしようmと思い、Quilted image listsになるようサイズを3パターンで揃えて、パディングも少し狭くしました。

Font

当初は女性向けSNSということで、丸みがあって可愛らしいかなと思う遊ゴシックにしていました。
ガイドラインに寄せた際にMaterial Designが提唱している漢字やハングル文字など密度の高い文字向けのフォントNotoの一種である、Noto Sans CJK JPに変更しました。
また、標準フォントであるRobotoは日本語のように密度の高い文字には対応していないのですが、英数字ではこちらを使用しました。

最後に

これまでの作業である程度Material Designは目を通してきていたので、多少は馴染みのあるMaterial Designにしましたが、以前読んだ時と内容が変わっていたり、増えていたりしたので、引き続き最新情報きちんと追っかけておかねばなと思いました。
また、今回はサイズなどまで詰めきれていないので、次回はこの辺りももう少し把握しながら作ってみれたら良いなと思います。