こんにちは、今年度に新卒入社したデザイン戦略室デザイナーの貴島と申します。本稿ではデザインガイドラインに焦点を当ててご紹介をしたいと思います。 私達がアプリの設計をする上で最初に行うべきことは、プラットフォームのデザインガイドラインを理解・熟知することでしょう。 Apple社は『iOSヒューマンインターフェイスガイドライン』、Google社は『マテリアル デザイン』といった独自のデザインガイドラインを設けており、プラットフォーム上のアプリに対してデザインガイドラインに沿った設計を推奨しています。 またデザインガイドラインは端末毎の差異を含めて画面構成が設計されているため、結果的に各OSに合わせた最適なユーザーインタフェイスの設計を可能にします。 ( ※マテリアル デザイン』日本語版のガイドライン(PDF形式)が先日公開されました。 ) マテリアル – 日本語 - Material Desi

徐々に浸透しつつあるGoogleのデザインガイドライン、マテリアルデザインですが、先日ようやく日本語版も公式にリリースされました。 マテリアルデザインやマテリアルモーションは実世界のモチーフを用いて、ユーザーがより直感的にUIを把握・誘導できるようにするためのものです。詳しくは以下の記事をご覧ください。 UIデザインの歴史に学ぶシャドウと奥行きの使い方 この記事ではUIコンセプトやポートフォリオをたくさん掲載しているMaterialUpから、マテリアルデザインを用いたデザイン例をピックアップしてご紹介していきます。すべてCodePenで実装済みの作品なので、裏側のコードを見て実装のヒントに役立ててください。 MaterialUpのオススメUIコンセプト５選 1. ミュージックプレイヤー 楽曲再生アプリのUIコンセプトです。プレイボタンを押すとジャケットやシークバーがレコードのように変わりア