デザインするのを忘れがちなデザイン要素のまとめ
Post on:2017年9月5日
ロゴ、ナビゲーション、ヘッダ、見出し、画像など、Webページやスマホアプリには、さまざまなデザイン要素が必要です。もちろん、これらを忘れることはないでしょう。
思わず、デザインするのを忘れがちなデザイン要素を紹介します。
もちろん、ここで紹介する50個すべてが必要ではありませんが、プロジェクトごとに合わせてご利用ください。
そういえば、フォームのサンキューページをいつも忘れるデザイナーさんが昔いました。
![デザインするのを忘れがちなデザイン要素のまとめ](http://coliss.com/wp-content/uploads-201703/2017090501.png)
50 Things You (Probably) Forgot To Design
下記は各ポイントを意訳したものです。
※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。
- ログイン・サインアップ関連のデザイン要素
- ファースト エクスペリエンスのデザイン要素
- 小さいけれど大切なデザイン要素
- 割と目立つデザイン要素
- プロフィールスタッフのデザイン要素
- ユーザーのさまざまなフローに対応するデザイン要素
ログイン・サインアップ関連のデザイン要素
01. スプラッシュスクリーン
スマホアプリで起動した時、またはWebアプリでログインしてすべてが読み込まれた時に表示される画面。
![スプラッシュスクリーン](http://coliss.com/wp-content/uploads-201703/2017090302/01.png)
02. パスワードを忘れた場合のフロー
パスワードを入力する画面で、成功した時のデザインだけでなく、パスワードを忘れた時に必要なフローを表示します。
![パスワードを忘れた場合のフロー](http://coliss.com/wp-content/uploads-201703/2017090302/02.png)
by Majo Puterka
03. サインアップの「ありがとう」ページ
この画面は通常、ユーザーがアカウントを作成し、メールアドレスを確認するように指示した後に表示されます。
![サインアップの「ありがとう」ページ](http://coliss.com/wp-content/uploads-201703/2017090302/03.png)
04. メールの打ち出し画像
これはプロダクトのデザインとマーケティングに跨っていますが、それは文字通り、ユーザーが持つ最初の印象です。あなたのプロダクトの第一印象が決定づけられます。
![メールの打ち出し画像](http://coliss.com/wp-content/uploads-201703/2017090302/04.png)
05. 利用規約とプライバシーページ
法律上仕方なくデザインするのではなく、読みやすく分かりやすいデザインにします。
![利用規約とプライバシーページ](http://coliss.com/wp-content/uploads-201703/2017090302/05.png)
by Marko Prljic
ファースト エクスペリエンスのデザイン要素
06. ユーザーオンボーディング
5 Delightful Ways to Onboard New Usersに、さまざまな事例があります。
![ユーザーオンボーディング](http://coliss.com/wp-content/uploads-201703/2017090302/06.png)
by MuNa
07. 空の状態
コンテンツに要素がある場合のデザインは絶対に忘れませんが、要素がない場合も必要です。
![空の状態](http://coliss.com/wp-content/uploads-201703/2017090302/07.png)
08. ヘルプページ
大きな企業であれば、専属チームがいるでしょう。ヘルプページは、ログインページなど他のページと同じくらい労力を必要とします。
![ヘルプページ](http://coliss.com/wp-content/uploads-201703/2017090302/08.png)
by Maya Gao
09. ユーザーのデフォルトのアバター
ユーザーがサインアップした後に画像が必要な場合、画像を用意するとは限りません。そんな時はデフォルトのアバターを用意しておきます。画像にちょっとした感動を与えて、ブランドを見せてください。
![ユーザーのデフォルトのアバター](http://coliss.com/wp-content/uploads-201703/2017090302/09.png)
10. ログアウト ボタン
残念ながらユーザーがページから離れることを許可する必要があります。そんなユーザーには、ログアウトできるボタンが必要です。
![ログアウト ボタン](http://coliss.com/wp-content/uploads-201703/2017090302/10.png)
by Henrik
小さいけれど大切なデザイン要素
11. アプリのフッタ
多くの場合、コンテンツが永遠に続くものであると思っているかもしれませんが、フッタが必要な場合もあるかもしれません。
![アプリのフッタ](http://coliss.com/wp-content/uploads-201703/2017090302/11.png)
12. ブラウザのファビコン
ブラウザのタブに表示される小さなアイコンです。たまに設置されていないサイトを見かけます。
![ブラウザのファビコン](http://coliss.com/wp-content/uploads-201703/2017090302/12.png)
13. 404ページ
指定したURLが見つからない時に表示されるページです。「Not Found」だけでなく、見つからない場合に有用な情報を配置しておきましょう。
![404ページ](http://coliss.com/wp-content/uploads-201703/2017090302/13.png)
by Rizvan
14. デフォルト・ホバー・フォーカス・プレスの状態
ボタンなど、ホバーとフォーカスは区別する必要は少ないかもしれません。ユーザーの操作に合わせて、ボタンの状態を変化させます。
![デフォルト・ホバー・フォーカス・プレスの状態](http://coliss.com/wp-content/uploads-201703/2017090302/14.png)
15. Tabキーでの操作
ユーザーがTabキーを使用してページをナビゲートできるようにしておきましょう。
![Tabキーでの操作](http://coliss.com/wp-content/uploads-201703/2017090302/15.png)
16. スクロールの振る舞い
どこでどのようにスクロールするかだけでなく、実際にスクロールするものです。ヘッダは固定されていますか?フッタはどうですか?
![スクロールの振る舞い](http://coliss.com/wp-content/uploads-201703/2017090302/16.png)
by Peter Blazej
17. インターコム ボタン
あなたのアプリのカラーに合わせることができます。
![インターコム ボタン](http://coliss.com/wp-content/uploads-201703/2017090302/17.png)
by intercom
18. ページネーション ボタン
無限スクロールを採用しない場合は、こういったページネーションが必要になるでしょう。
![ページネーション ボタン](http://coliss.com/wp-content/uploads-201703/2017090302/18.png)
by Borunda
19. カーソル
ボタンにはポインタが必要です。非インタラクティブなものにはデフォルトのカーソルが必要です。テキストにはテキストカーソルが必要です。
要素にインタラクションを実装した時に、これらのことを忘れがちなので注意してください。
![カーソル](http://coliss.com/wp-content/uploads-201703/2017090302/19.png)
20. テーブルのソート・フィルタ・サーチ
データテーブルには、データにより素早くアクセスする方法があるはずです。
![テーブルのソート・フィルタ・サーチ](http://coliss.com/wp-content/uploads-201703/2017090302/20.png)
by Eugen Esanu
21. 結果がない状態
検索したり、フィルタリングした際に、結果がない時があります。単に無いと表示するだけでなく、イラストなどを加えて、ユーザーを応援してください。
![結果がない状態](http://coliss.com/wp-content/uploads-201703/2017090302/21.png)
22. エラーの状態
入力が正しくありません。パスワードが間違っています。既存のアカウントです。選択された項目が多すぎます。
エラーは一つだけではありません、さまざまなものがあります。
![エラーの状態](http://coliss.com/wp-content/uploads-201703/2017090302/22.png)
23. システムの通知
システムは常に裏側で何かをやっていますが、時にはそれがいつ終わるかを知らせることは良いことです。あなたは間違いなくそれをユーザーに知らせるべきです。
![システムの通知](http://coliss.com/wp-content/uploads-201703/2017090302/23.png)
by Google Inbox
24. ドロップダウンの空の状態
ドロップダウンのオートコンプリートは便利ですが、結果が得られないことがあります。この場合、空のボックスが必要なわけではありません。ちょっとしたメッセージを表示するか、何らかの行動を取るようにします。
![ドロップダウンの空の状態](http://coliss.com/wp-content/uploads-201703/2017090302/24.png)
25. ローディングの状態
ページがロードされている時、ユーザーは目を離しているかもしれません。しかし、視覚的にローディングの状態を表示すると、ユーザーは目を向けるでしょう。
![ローディングの状態](http://coliss.com/wp-content/uploads-201703/2017090302/25.png)
by XPLAI
割と目立つデザイン要素
26. アプリのアイコン
このデザイン要素は絶対忘れないようにすることをオススメします。
![アプリのアイコン](http://coliss.com/wp-content/uploads-201703/2017090302/26.png)
27. App Store用の画像
スマホアプリを開発したら、App Store用の画像を忘れてはいけません。
![App Store用の画像](http://coliss.com/wp-content/uploads-201703/2017090302/27.png)
by Daniel Beere
28. ソーシャル用の画像
Twitterでツイートしたり、Facebookで投稿したり、Mediumで投稿したりする時に、表示される画像です。
![ソーシャル用の画像](http://coliss.com/wp-content/uploads-201703/2017090302/28.png)
by Kristy T
29. マーケティング用の画像
ロゴやアイコンの使い方など、他のサイトやブログに掲載される時に、どのように使うべきか決めておきましょう。
![マーケティング用の画像](http://coliss.com/wp-content/uploads-201703/2017090302/29.png)
by Redkix
30. セールスデッキの画像
必要があれば、セールスチームと打ち合わせを行い、そのブランドと一致するようにコンテンツをスクラブする必要があります。
![セールスデッキの画像](http://coliss.com/wp-content/uploads-201703/2017090302/30.png)
by Eric Hoffman
31. ピッチデッキの画像
セールスデッキの画像に似ていますが、もう少し先見性があります。つまり、お金を集めようとしていて、あなたはどのように後でそれを可能にするべきかについて考えるものです。
![ピッチデッキの画像](http://coliss.com/wp-content/uploads-201703/2017090302/31.png)
32. Product Huntの画像
新しいプロダクトをリリースしたら、Product Huntに掲載されると効果的です。
![Product Huntの画像](http://coliss.com/wp-content/uploads-201703/2017090302/32.png)
33. FacebookとTwitterの広告用画像
FacebookやTwitterでの広告も宣伝するために、効果があります。
![FacebookとTwitterの広告用画像](http://coliss.com/wp-content/uploads-201703/2017090302/33.png)
by caspersleep
34. ソーシャルメディアのプロフィール画像
すべてのソーシャルメディアに対応したサイズの画像を作成するのは、大変です。しかし、Sketchであれば、数秒で作成できてしまいます。
![ソーシャルメディアのプロフィール画像](http://coliss.com/wp-content/uploads-201703/2017090302/34.png)
Using Nested Symbols to Create Tons of Social Assets in Seconds.
35. メールのバナー
HTMLメールも非常に効果的なツールです。
![メールのバナー](http://coliss.com/wp-content/uploads-201703/2017090302/35.png)
by Current
プロフィールスタッフのデザイン要素
36. 通知パネル
アプリで何か起こったかを通知し、ユーザーに行動を起こさせます。
![通知パネル](http://coliss.com/wp-content/uploads-201703/2017090302/36.png)
by Slack
37. 請求ページ
請求ページは非常に重要です。請求に関する情報を表示するだけでなく、変更ができたり、法的な情報も掲載する必要があります。
![請求ページ](http://coliss.com/wp-content/uploads-201703/2017090302/37.png)
by Dropbox
38. アカウント削除のオプション
アカウントを削除することは少ないかもしれませんが、必要です。そしてまた戻ってきて、新しいアカウントを作成する時に、良い経験にするのは良い顧客サービスです。
![アカウント削除のオプション](http://coliss.com/wp-content/uploads-201703/2017090302/38.png)
by Twitter
39. プロフィール画像のクロップツール
ユーザーは条件にあった画像を用意できるとは限りません。調整できるツールがあれば、よりスムーズにうまくいきます。
![プロフィール画像のクロップツール](http://coliss.com/wp-content/uploads-201703/2017090302/39.png)
40. アカウントのアップグレード
黙ってお金を取るのは簡単ではありません。アップグレードした時の魅力を十分に伝える必要があります。
![アカウントのアップグレード](http://coliss.com/wp-content/uploads-201703/2017090302/40.png)
by Buffer
ユーザーのさまざまなフローに対応するデザイン要素
41. アドレスを変更する時のフロー
一度登録した情報は、変更させることがあります。住所やクレジットカードの番号など、どのように変更するか明記します。
![アドレスを変更する時のフロー](http://coliss.com/wp-content/uploads-201703/2017090302/41.png)
42. クレジットカードを追加するフロー
クレジットカードを複数、所有している人もいるでしょう。そして買う物によって、使い分けたいと思う人もいます。
![クレジットカードを追加するフロー](http://coliss.com/wp-content/uploads-201703/2017090302/42.png)
43. 大量に追加する時のフロー
システム的な処理は素早くできるかもしれませんが、ユーザーが入力する時は非常に面倒な作業になりがちです。
![大量に追加する時のフロー](http://coliss.com/wp-content/uploads-201703/2017090302/43.png)
44. カスタムフィルタの作成フロー
フィルターする時の項目が多い場合は、その選択した項目を保存しておく機能があると便利です。
![カスタムフィルタの作成フロー](http://coliss.com/wp-content/uploads-201703/2017090302/44.png)
by Oykun Yilmaz
45. カートに加える時のフロー
ユーザーが欲しいものをショッピングカートに加えるのは、非常に重要な操作です。分かりやすく、使いやすい操作にすべきです。
![カートに加える時のフロー](http://coliss.com/wp-content/uploads-201703/2017090302/45.png)
46. シェアする時のフロー
ソーシャルネットワークでシェアさせるのは、非常に大切です。
![シェアする時のフロー](http://coliss.com/wp-content/uploads-201703/2017090302/46.png)
47. 既存から作成する時のフロー
これは、複製して編集する感じです。基本的に、ユーザーは既存のオブジェクトからはじめ、必要に応じて更新することができます。
![既存から作成する時のフロー](http://coliss.com/wp-content/uploads-201703/2017090302/47.png)
48. 誰かを招待する時のフロー
招待や共有をするよりも、あなたのプロダクトにバイラル性を加える良い方法はありません。
![誰かを招待する時のフロー](http://coliss.com/wp-content/uploads-201703/2017090302/48.png)
49. パーミッションを変更する時のフロー
ユーザーがパーミッションを変更する時は、すべてだけではなく、一部だけ変更したい時もあります。
![パーミッションを変更する時のフロー](http://coliss.com/wp-content/uploads-201703/2017090302/49.png)
by Matt Shwery
50. 削除と復帰のフロー
削除した後に、やっぱり戻したい!と思うユーザーがいるのをあなたは知っていましたか?
![削除と復帰のフロー](http://coliss.com/wp-content/uploads-201703/2017090302/50.png)
by Eric Tsai
sponsors