Webデザインの常識bot

かつては、Webデザインの常識を呟いていました。

[Webデザインの常識bot @ng_web_design]

あまり先回りし過ぎるのも、ユーザー体験を損なうと言われています。

[Webデザインの常識bot @ng_web_design]

異なる世界観のボタンが急に現れると、思わず押してしまいたくなり、コンバージョン率が向上すると言われています。

[Webデザインの常識bot @ng_web_design]

【エンジニアとUI】

ITエンジニア向けのWebサービスを作る場合、UIは殆ど必要ないかもしれません。

Web APIさえ公開しておけば、エンジニア達は暗い部屋の中で、破れかけたパーカーを着て、エナジードリンクを飲みながら黒い画面に文字を打ち込み、Webシステムを利用することができます。

[Webデザインの常識bot @ng_web_design]

背景色と文字色は別にしましょう。

例えば、

・背景色・・・赤
・文字色・・・赤

にしてしまうと、画像のようなデザインになってしまいます。

[Webデザインの常識bot @ng_web_design]

【ボタンの文言について】

「資料を請求する」よりも「強大な力を手に入れる」のほうが、コンバージョン率が1200パーセント高まることが知られています。

[Webデザインの常識bot @ng_web_design]

「腹痛が痛い」のような「二重表現」はアンチパターンとされています。

ユーザーが違和感を感じてしまうためです。

[Webデザインの常識bot @ng_web_design]

リンクを用意したからといって、必ずアクセスしてもらえるとは限りません。

ユーザーにはユーザーの都合があります。

[Webデザインの常識bot @ng_web_design]

【#Webデザインの常識】

ローディング中に犬が一匹だけ表示されるUIは、意味不明なためアンチパターンと言われています。

[Webデザインの常識bot @ng_web_design]

記事投稿サイトを作る場合、プログラミングのコードに色をつけてくれる機能を用意しておくと、ITエンジニアにも使ってもらいやすくなるでしょう。

その際、コードブロック部分のCSSとして

text-align: center;

を指定することはアンチパターンと言われています。

[Webデザインの常識bot @ng_web_design]

ブラウザのアドレスバーやブックマークバーの部分をFigmaでデザインする必要はありません。

下手にデザインしてクライアント様からOKを貰うと、エンジニアが「ブラウザごと」実装することになります。

[Webデザインの常識bot @ng_web_design]

少しウィンドウをスクロールしただけでスタイルが崩れてしまうようでは、優れたUXを提供できません。

スクロール時もスタイルが崩れないよう留意しましょう。

[Webデザインの常識bot @ng_web_design]

エンジニアに「これってできますか？」と聞いた際、「技術的には可能です」という回答が返ってくることがありますが、これは前向きな反応ではありません。

Webデザインに例えると、以下のような状況です。

依頼主「背景色を虹色、文字色を白にできます？」

デザイナー「技術的には可能です...」

[Webデザインの常識bot @ng_web_design]

Webデザイナーにとって、ITエンジニアと上手くコミュニケーションを取ることは重要です。

エンジニアたちは無刻印のキーボードを好むので、彼らのキーボードをタオルで念入りに磨き、アルファベットやかなの表示を消してあげると喜ばれることでしょう。

[Webデザインの常識bot @ng_web_design]

ITエンジニア向けのWebサービスを作る場合、UIは殆ど必要ないかもしれません。

Web APIさえ公開しておけば、エンジニア達は暗い部屋の中で黒い画面に文字を打ち込み、Webシステムを利用することができます。

[Webデザインの常識bot @ng_web_design]

ダークモードのデザインを用意する場合、文字色は白など明るい色にする必要があります。

黒い文字のまま背景を暗くすると、視認性が下がる可能性があります。

[Webデザインの常識bot @ng_web_design]

基本的にbody要素のopacityを0にするのは避けるべきです。

上質な情報を発信しても、見えなければ意味がありません。

#CSS
#駆け出しエンジニアと繋がりたい

[Webデザインの常識bot @ng_web_design]

色やアイコンは、テキストの内容と同じくらい雄弁です。

伝えたいメッセージと合ったスタイルで装飾しましょう。

メッセージの内容とあしらいが乖離している場合、まるでユーザーを煽っているかのような印象を与えてしまうこともあります。

[Webデザインの常識bot @ng_web_design]

人間は「苦労して見つけたもの」「やっと見つけたもの」に高い価値を感じる習性があります。

あなたのECサイトの購入ボタンに、以下のCSSを「ちょい足し」してみてはいかがでしょうか？

button {
opacity: 0.1;
}

[Webデザインの常識bot @ng_web_design]

意外と知られていないことですが、サイドメニューを画面の中心に固定表示するのはアンチパターンです。

メインコンテンツの視認性が下がり、以下の動画のような状態になってしまいます。

[Webデザインの常識bot @ng_web_design]

水滴のようなデザインを表現したい場合「PCに水をかければ良いのではないか？」と考えがちですが、それで水滴がつくのは「あなたのPCだけ」です。

CSSなどで水滴を表現するようにしましょう。