Webデザインの常識bot (@ng_web_design) 's Twitter Profile
Webデザインの常識bot

@ng_web_design

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

ID: 1597404942511509504

calendar_today29-11-2022 01:40:00

313 Tweet

1,1K Followers

42 Following

Webデザインの常識bot (@ng_web_design) 's Twitter Profile Photo

リンクを用意したからといって、必ずアクセスしてもらえるとは限りません。 ユーザーにはユーザーの都合があります。

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

ユーザーにはユーザーの都合があります。
Webデザインの常識bot (@ng_web_design) 's Twitter Profile Photo

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

Webデザインの常識bot (@ng_web_design) 's Twitter Profile Photo

意外と知られていないことですが、サイドメニューを画面の中心に固定表示するのはアンチパターンです。 メインコンテンツの視認性が下がり、以下の動画のような状態になってしまいます。

Webデザインの常識bot (@ng_web_design) 's Twitter Profile Photo

人間は「苦労して見つけたもの」「やっと見つけたもの」に高い価値を感じる習性があります。 あなたのECサイトの購入ボタンに、以下のCSSを「ちょい足し」してみてはいかがでしょうか? button { opacity: 0.1; }

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

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

button {
  opacity: 0.1;
}
Webデザインの常識bot (@ng_web_design) 's Twitter Profile Photo

色やアイコンは、テキストの内容と同じくらい雄弁です。 伝えたいメッセージと合ったスタイルで装飾しましょう。 メッセージの内容とあしらいが乖離している場合、まるでユーザーを煽っているかのような印象を与えてしまうこともあります。

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

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

メッセージの内容とあしらいが乖離している場合、まるでユーザーを煽っているかのような印象を与えてしまうこともあります。
Webデザインの常識bot (@ng_web_design) 's Twitter Profile Photo

基本的にbody要素のopacityを0にするのは避けるべきです。 上質な情報を発信しても、見えなければ意味がありません。 #CSS #駆け出しエンジニアと繋がりたい

Webデザインの常識bot (@ng_web_design) 's Twitter Profile Photo

ダークモードのデザインを用意する場合、文字色は白など明るい色にする必要があります。 黒い文字のまま背景を暗くすると、視認性が下がる可能性があります。

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

黒い文字のまま背景を暗くすると、視認性が下がる可能性があります。
Webデザインの常識bot (@ng_web_design) 's Twitter Profile Photo

ITエンジニア向けのWebサービスを作る場合、UIは殆ど必要ないかもしれません。 Web APIさえ公開しておけば、エンジニア達は暗い部屋の中で黒い画面に文字を打ち込み、Webシステムを利用することができます。

Webデザインの常識bot (@ng_web_design) 's Twitter Profile Photo

Webデザイナーにとって、ITエンジニアと上手くコミュニケーションを取ることは重要です。 エンジニアたちは無刻印のキーボードを好むので、彼らのキーボードをタオルで念入りに磨き、アルファベットやかなの表示を消してあげると喜ばれることでしょう。

Webデザインの常識bot (@ng_web_design) 's Twitter Profile Photo

エンジニアに「これってできますか?」と聞いた際、「技術的には可能です」という回答が返ってくることがありますが、これは前向きな反応ではありません。 Webデザインに例えると、以下のような状況です。 依頼主「背景色を虹色、文字色を白にできます?」 デザイナー「技術的には可能です...」

Webデザインの常識bot (@ng_web_design) 's Twitter Profile Photo

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

Webデザインの常識bot (@ng_web_design) 's Twitter Profile Photo

ブラウザのアドレスバーやブックマークバーの部分をFigmaでデザインする必要はありません。 下手にデザインしてクライアント様からOKを貰うと、エンジニアが「ブラウザごと」実装することになります。

Webデザインの常識bot (@ng_web_design) 's Twitter Profile Photo

記事投稿サイトを作る場合、プログラミングのコードに色をつけてくれる機能を用意しておくと、ITエンジニアにも使ってもらいやすくなるでしょう。 その際、コードブロック部分のCSSとして text-align: center; を指定することはアンチパターンと言われています。

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

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

text-align: center;

を指定することはアンチパターンと言われています。
Webデザインの常識bot (@ng_web_design) 's Twitter Profile Photo

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

【#Webデザインの常識】

ローディング中に犬が一匹だけ表示されるUIは、意味不明なためアンチパターンと言われています。
Webデザインの常識bot (@ng_web_design) 's Twitter Profile Photo

「腹痛が痛い」のような「二重表現」はアンチパターンとされています。 ユーザーが違和感を感じてしまうためです。

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

ユーザーが違和感を感じてしまうためです。
Webデザインの常識bot (@ng_web_design) 's Twitter Profile Photo

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

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

「資料を請求する」よりも「強大な力を手に入れる」のほうが、コンバージョン率が1200パーセント高まることが知られています。
Webデザインの常識bot (@ng_web_design) 's Twitter Profile Photo

背景色と文字色は別にしましょう。 例えば、 ・背景色・・・赤 ・文字色・・・赤 にしてしまうと、画像のようなデザインになってしまいます。

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

例えば、

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

にしてしまうと、画像のようなデザインになってしまいます。
Webデザインの常識bot (@ng_web_design) 's Twitter Profile Photo

【エンジニアとUI】 ITエンジニア向けのWebサービスを作る場合、UIは殆ど必要ないかもしれません。 Web APIさえ公開しておけば、エンジニア達は暗い部屋の中で、破れかけたパーカーを着て、エナジードリンクを飲みながら黒い画面に文字を打ち込み、Webシステムを利用することができます。

Webデザインの常識bot (@ng_web_design) 's Twitter Profile Photo

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

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