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