良いユーザー体験のためには格好良いデザインだけではなく、仕組みや構造、使いやすさにも気を配る必要があります。近年ではUXデザインの重要性が叫ばれ、こういった考え方も徐々に浸透してきてはいますが、だからといってビジュアルやインタラクションのデザインを軽視してもいいと言うわけでもありません。
この記事では過去にも何度か取り上げている、UIコンセプトギャラリーサイトのUpLabsからまたいくつかのUIコンセプトを実装コード付きでご紹介します。ユーザーがサイトを使うときの心地よさを演出するためのヒントがたくさん詰まっていますので、是非参考にして下さい。
※各項目ごとにCodePenを埋め込んでいるため、読み込みに少し時間がかかる場合があります
UpLabsのオススメUIコンセプト５選
1. カレンダー
右下から左上にかけて徐々にカラーパレットが移行していくグラデーションが美しいデザインです。カレンダーで想定されるような機能が全部入っているわけではないので実用性には欠けますが、トランジションやカラーリングが全体的に透明感があり、参考になります。
‘Calendar App’ — Concept by Ludmila Shevchenko
‘Calendar App Animation’ — Concept by Kirill
See the Pen CSS-only Colorful Calendar Concept by David Khourshid (@davidkpiano) on CodePen.
2. 画面遷移
マテリアルデザインを適用した、複数画面間のトランジションデモです。作成者曰く、特定の問題解決というよりもとりあえず筆を走らせて公開したデザインのようです。
‘Exploring’ — Concept by Dejan Markovic
See the Pen CSS Exploration App Concept by David Khourshid (@davidkpiano) on CodePen.
3. 更新
アプリなどでよく使われる下にドラッグして離すタイプの更新アニメーションです。ゴムや液体のようなスムーズで伸びやかなアニメーションの参考になります。
‘Pull Down To Refresh’ — Concept by Ramotion
See the Pen Elastic pull to refresh by Jonas Badalic (@JonasBadalic) on CodePen.
4. アクションボタン
切り取り、コピー、削除、シェアのアクションボタンをアニメーションさせた例です。小さく地味ではありますが、このような細かいところまでアニメーションを実装することは少ないので、意外性を演出したい場合に良いかもしれません。
‘Cut Copy Share Delete’ — Concept by Sikrant
See the Pen Cut Copy Share Delete by Ryan Mulligan (@hexagoncircle) on CodePen.
5. スイッチ
スイッチと連動したアニメーション例です。上部のグラフィックも心地よいですが、スイッチの動作と連動した文言部分だけでも、十分スイッチ動作の気持ちよさを演出できそうです。文言はスイッチとは逆方向に遊びのある動きをして出現しており、スイッチ自体に仕掛けや重みを感じる演出になっています。
‘Switch day/night’ — Concept by Youlanda
See the Pen Switch Day Night by Mohan Khadka (@khadkamhn) on CodePen.
もっと見たい方はこちらもどうぞ：