デザインするのを忘れがちなデザイン要素のまとめ

ロゴ、ナビゲーション、ヘッダ、見出し、画像など、Webページやスマホアプリには、さまざまなデザイン要素が必要です。もちろん、これらを忘れることはないでしょう。

思わず、デザインするのを忘れがちなデザイン要素を紹介します。
もちろん、ここで紹介する50個すべてが必要ではありませんが、プロジェクトごとに合わせてご利用ください。

そういえば、フォームのサンキューページをいつも忘れるデザイナーさんが昔いました。

デザインするのを忘れがちなデザイン要素のまとめ

50 Things You (Probably) Forgot To Design

下記は各ポイントを意訳したものです。
※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。

ログイン・サインアップ関連のデザイン要素

01. スプラッシュスクリーン

スマホアプリで起動した時、またはWebアプリでログインしてすべてが読み込まれた時に表示される画面。

スプラッシュスクリーン

by James Jackson

02. パスワードを忘れた場合のフロー

パスワードを入力する画面で、成功した時のデザインだけでなく、パスワードを忘れた時に必要なフローを表示します。

パスワードを忘れた場合のフロー

by Majo Puterka

03. サインアップの「ありがとう」ページ

この画面は通常、ユーザーがアカウントを作成し、メールアドレスを確認するように指示した後に表示されます。

サインアップの「ありがとう」ページ

by Hayley Cattlin

04. メールの打ち出し画像

これはプロダクトのデザインとマーケティングに跨っていますが、それは文字通り、ユーザーが持つ最初の印象です。あなたのプロダクトの第一印象が決定づけられます。

メールの打ち出し画像

by Brian Golatka

05. 利用規約とプライバシーページ

法律上仕方なくデザインするのではなく、読みやすく分かりやすいデザインにします。

利用規約とプライバシーページ

by Marko Prljic

ファースト エクスペリエンスのデザイン要素

06. ユーザーオンボーディング

5 Delightful Ways to Onboard New Usersに、さまざまな事例があります。

ユーザーオンボーディング

by MuNa

07. 空の状態

コンテンツに要素がある場合のデザインは絶対に忘れませんが、要素がない場合も必要です。

空の状態

by Veli-Johan Veromann

08. ヘルプページ

大きな企業であれば、専属チームがいるでしょう。ヘルプページは、ログインページなど他のページと同じくらい労力を必要とします。

ヘルプページ

by Maya Gao

09. ユーザーのデフォルトのアバター

ユーザーがサインアップした後に画像が必要な場合、画像を用意するとは限りません。そんな時はデフォルトのアバターを用意しておきます。画像にちょっとした感動を与えて、ブランドを見せてください。

ユーザーのデフォルトのアバター

by Hermes Strange

10. ログアウト ボタン

残念ながらユーザーがページから離れることを許可する必要があります。そんなユーザーには、ログアウトできるボタンが必要です。

ログアウト ボタン

by Henrik

小さいけれど大切なデザイン要素

11. アプリのフッタ

多くの場合、コンテンツが永遠に続くものであると思っているかもしれませんが、フッタが必要な場合もあるかもしれません。

アプリのフッタ

by Ash Schweitzer

12. ブラウザのファビコン

ブラウザのタブに表示される小さなアイコンです。たまに設置されていないサイトを見かけます。

ブラウザのファビコン

by Michael Flarup

13. 404ページ

指定したURLが見つからない時に表示されるページです。「Not Found」だけでなく、見つからない場合に有用な情報を配置しておきましょう。

404ページ

by Rizvan

14. デフォルト・ホバー・フォーカス・プレスの状態

ボタンなど、ホバーとフォーカスは区別する必要は少ないかもしれません。ユーザーの操作に合わせて、ボタンの状態を変化させます。

デフォルト・ホバー・フォーカス・プレスの状態

by UX Power Tools

15. Tabキーでの操作

ユーザーがTabキーを使用してページをナビゲートできるようにしておきましょう。

Tabキーでの操作

by Christian Beck

16. スクロールの振る舞い

どこでどのようにスクロールするかだけでなく、実際にスクロールするものです。ヘッダは固定されていますか?フッタはどうですか?

スクロールの振る舞い

by Peter Blazej

17. インターコム ボタン

あなたのアプリのカラーに合わせることができます。

インターコム ボタン

by intercom

18. ページネーション ボタン

無限スクロールを採用しない場合は、こういったページネーションが必要になるでしょう。

ページネーション ボタン

by Borunda

19. カーソル

ボタンにはポインタが必要です。非インタラクティブなものにはデフォルトのカーソルが必要です。テキストにはテキストカーソルが必要です。
要素にインタラクションを実装した時に、これらのことを忘れがちなので注意してください。

カーソル

by Jeff Broderick

20. テーブルのソート・フィルタ・サーチ

データテーブルには、データにより素早くアクセスする方法があるはずです。

テーブルのソート・フィルタ・サーチ

by Eugen Esanu

21. 結果がない状態

検索したり、フィルタリングした際に、結果がない時があります。単に無いと表示するだけでなく、イラストなどを加えて、ユーザーを応援してください。

結果がない状態

by Reiner Wendland

22. エラーの状態

入力が正しくありません。パスワードが間違っています。既存のアカウントです。選択された項目が多すぎます。
エラーは一つだけではありません、さまざまなものがあります。

エラーの状態

by Mike Stezycki

23. システムの通知

システムは常に裏側で何かをやっていますが、時にはそれがいつ終わるかを知らせることは良いことです。あなたは間違いなくそれをユーザーに知らせるべきです。

システムの通知

by Google Inbox

24. ドロップダウンの空の状態

ドロップダウンのオートコンプリートは便利ですが、結果が得られないことがあります。この場合、空のボックスが必要なわけではありません。ちょっとしたメッセージを表示するか、何らかの行動を取るようにします。

ドロップダウンの空の状態

by Jurriaan van Drunen

25. ローディングの状態

ページがロードされている時、ユーザーは目を離しているかもしれません。しかし、視覚的にローディングの状態を表示すると、ユーザーは目を向けるでしょう。

ローディングの状態

by XPLAI

割と目立つデザイン要素

26. アプリのアイコン

このデザイン要素は絶対忘れないようにすることをオススメします。

アプリのアイコン

by Eddie Lobanovskiy

27. App Store用の画像

スマホアプリを開発したら、App Store用の画像を忘れてはいけません。

App Store用の画像

by Daniel Beere

28. ソーシャル用の画像

Twitterでツイートしたり、Facebookで投稿したり、Mediumで投稿したりする時に、表示される画像です。

ソーシャル用の画像

by Kristy T

29. マーケティング用の画像

ロゴやアイコンの使い方など、他のサイトやブログに掲載される時に、どのように使うべきか決めておきましょう。

マーケティング用の画像

by Redkix

30. セールスデッキの画像

必要があれば、セールスチームと打ち合わせを行い、そのブランドと一致するようにコンテンツをスクラブする必要があります。

セールスデッキの画像

by Eric Hoffman

31. ピッチデッキの画像

セールスデッキの画像に似ていますが、もう少し先見性があります。つまり、お金を集めようとしていて、あなたはどのように後でそれを可能にするべきかについて考えるものです。

ピッチデッキの画像

by Claudiu Cioba

32. Product Huntの画像

新しいプロダクトをリリースしたら、Product Huntに掲載されると効果的です。

Product Huntの画像

33. FacebookとTwitterの広告用画像

FacebookやTwitterでの広告も宣伝するために、効果があります。

FacebookとTwitterの広告用画像

by caspersleep

34. ソーシャルメディアのプロフィール画像

すべてのソーシャルメディアに対応したサイズの画像を作成するのは、大変です。しかし、Sketchであれば、数秒で作成できてしまいます。

ソーシャルメディアのプロフィール画像

Using Nested Symbols to Create Tons of Social Assets in Seconds.

35. メールのバナー

HTMLメールも非常に効果的なツールです。

メールのバナー

by Current

プロフィールスタッフのデザイン要素

36. 通知パネル

アプリで何か起こったかを通知し、ユーザーに行動を起こさせます。

通知パネル

by Slack

37. 請求ページ

請求ページは非常に重要です。請求に関する情報を表示するだけでなく、変更ができたり、法的な情報も掲載する必要があります。

請求ページ

by Dropbox

38. アカウント削除のオプション

アカウントを削除することは少ないかもしれませんが、必要です。そしてまた戻ってきて、新しいアカウントを作成する時に、良い経験にするのは良い顧客サービスです。

アカウント削除のオプション

by Twitter

39. プロフィール画像のクロップツール

ユーザーは条件にあった画像を用意できるとは限りません。調整できるツールがあれば、よりスムーズにうまくいきます。

プロフィール画像のクロップツール

40. アカウントのアップグレード

黙ってお金を取るのは簡単ではありません。アップグレードした時の魅力を十分に伝える必要があります。

アカウントのアップグレード

by Buffer

ユーザーのさまざまなフローに対応するデザイン要素

41. アドレスを変更する時のフロー

一度登録した情報は、変更させることがあります。住所やクレジットカードの番号など、どのように変更するか明記します。

アドレスを変更する時のフロー

by Dhaval S. Gandhi

42. クレジットカードを追加するフロー

クレジットカードを複数、所有している人もいるでしょう。そして買う物によって、使い分けたいと思う人もいます。

クレジットカードを追加するフロー

by Carlos Medina

43. 大量に追加する時のフロー

システム的な処理は素早くできるかもしれませんが、ユーザーが入力する時は非常に面倒な作業になりがちです。

大量に追加する時のフロー

44. カスタムフィルタの作成フロー

フィルターする時の項目が多い場合は、その選択した項目を保存しておく機能があると便利です。

カスタムフィルタの作成フロー

by Oykun Yilmaz

45. カートに加える時のフロー

ユーザーが欲しいものをショッピングカートに加えるのは、非常に重要な操作です。分かりやすく、使いやすい操作にすべきです。

カートに加える時のフロー

by Alberto Conti

46. シェアする時のフロー

ソーシャルネットワークでシェアさせるのは、非常に大切です。

シェアする時のフロー

by Tomek Kwiatkowski

47. 既存から作成する時のフロー

これは、複製して編集する感じです。基本的に、ユーザーは既存のオブジェクトからはじめ、必要に応じて更新することができます。

既存から作成する時のフロー

48. 誰かを招待する時のフロー

招待や共有をするよりも、あなたのプロダクトにバイラル性を加える良い方法はありません。

誰かを招待する時のフロー

by Paula Pintaric

49. パーミッションを変更する時のフロー

ユーザーがパーミッションを変更する時は、すべてだけではなく、一部だけ変更したい時もあります。

パーミッションを変更する時のフロー

by Matt Shwery

50. 削除と復帰のフロー

削除した後に、やっぱり戻したい!と思うユーザーがいるのをあなたは知っていましたか?

削除と復帰のフロー

by Eric Tsai

top of page

©2017 coliss