今日はこのツイート👇を元に書いた記事です。

結論を言うと「UIやUXなどのデザインがとても重要だから」です。
と言うのも、
・モノからサービスへ商品の価値が移ったこと
・使いやすさがなければユーザーが離脱する(UI)
・ユーザーが何を体験できるかが分かれ目(UX)
そんなUIやUXについては聞いたことがあると思います。
この記事では
「なぜWordPressにCSSが必要か？」について
WordPressテーマにUIとUXを取り入れる考え方をまとめていきます。

CSSとUI&UXのつながり

経験したことあるでしょうか？
「ログインしたいけど、ログインボタンってどこ？」そんな経験を。
どれだけ素晴らしい機能が実装されているサイト(アプリ)だとしても、
ユーザーにとって分かりにくい(使いにくい)サイトはすぐに離れるので…。

使いにくいサイトが出来る理由の1つは「独自性を出したい」から。
目立ったり、アニメーションを意識しすぎたことで
ユーザーにとっては使いにくかったり、導線が崩れてしまう。

特にプログラミング初心者あるあるかもしれませんが、
自分がカッコいいと思うレイアウトにしたせいで分かりにくい画面になるんですよ。
(私がそうでした…)

つまり、ユーザーが「慣れ」ているレイアウトにすること。
例えば、
パソコンのキーボードには「日本語配列」と「英語配列」があります。
この記事を書いているキーボードは日本語配列ですが、
過去に英語配列のキーボードを使った時には苦労しました…😅
記号とかの配置が全く違うからです。(WindowsとMacでも違いますよね)

なので、ユーザーが慣れ親しんだ操作(UI)を無視した
独りよがりなサイトは差別化どころか使いにくくなる。
UIは大事です。

UIが大事なのは間違いないけれど、
極端なことを言うと、UXが素晴らしければUIのスタンダードも塗り替わるんですよね。
ガラケーからスマホへの変化(30代の人にしか分からないかも…)が良い例です。
でも、スマホ(iPhoneなど)で体験できることがとても素晴らしいので、
ユーザーは一気にスマホを使ったからです。

言ってしまえば、最初は使いにくさがあってもスタンダードを塗り替えられるほどの
UXがあればいい。
それくらいUXは強力です。

WordPressで求められるUIやUXとは？

WordPressと言えばプラグインですが、
唯一の欠点がレイアウトなんですよね😅
プラグイン1つだけ見ると綺麗に整ってるけれど、
複数のプラグインを使っているとレイアウトの違いが割と目立ちます。
これは当たり前で、プラグインを作っている人が違うから。
だからこそ、
・プラグインの構造を理解する。
・サイトのレイアウトに合うようにclass名をつける。
・CSSで整える。
この3ステップが重要になってきます。
とは言え、プラグインの構造を理解するのはそれなりに時間がかかるので、
プラグインを使う数は表示速度の面でも大体10個までがベストです。
SNSへのリンクはググればコピペで使えるコードもあるので、
自分でコーディングしましょう^^

WordPressに適したCSS設計のポイント3つ

1.使うプラグインを決める。
2.スマホとタブレット、PCでのレイアウトを決める。
3.ページに対するclass名の一覧と注意点をまとめる。
え？と思った方もいるかもですが、
どんなclass名を使っているかを忘れてしまうので
class名の一覧は特にコーディングのしやすさを担保する上でも重要です。

プラグインを使う欠点がレイアウトだと言いましたが、
使う数が増えるとclass名のダブりが起きたり、
直す場所が分かりにくかったり。
なので、サイトのコンセプトを決めたら使うプラグインを決めます。
次に2つ目ですが、スマホやタブレット、PCでのレイアウトを決めると言っても、
ほぼ決まってますよね。
画面幅は決まっていて、見やすさ・操作性などを満たすレイアウトは決まってるからです。
レイアウトで差別化するよりも、徹底的にUIを他のサイトや本で学び、基本に忠実に実装する。
それだけでユーザーにとって素晴らしいサイトへの仲間入りが出来るはずです。
「ページに対するclass名の一覧と注意点をまとめる」
これは実装しながらの作業になるかもしれませんが、後で修正したい時にも役立ちます。
Aのページを実装していて、Bのページに取り掛かったとします。
Bを実装していてAを修正したいなと思って取り掛かると、ほぼclass名のポイントを忘れてます😅
class名の一覧と注意点をまとめるメリットは「なんだっけ？」と思い出す時間を限りなくゼロにするためです。
実装しながらまとめると、肝心の実装に時間がかかるでしょうが後々のことを考えると、
手間をかけるメリットはあると私は考えてます。

まとめ

・CSSとUI&UXのつながり
・WordPressで求められるUIやUXとは？
・WordPressに適したCSS設計のポイント3つ

ライトに開発するとWeb制作色が強くて、ヘビーに開発する時はWeb開発色が強くなる。
そんなWordPressは振り幅が広いからこそレイアウトを整えるスキルが重要です。

みつかより。