実装側から見るWordPressにおけるWebデザインのあれこれ

わたしは表層のデザインセンスが皆無だ。見た目をどうすればよく見せることができるのか全くわからない。だから、それができる人たちは尊敬している。

だが、Webサイトにこれ必要？と思うようなものもあったりで、Webデザインというものがなにか全体的に勘違いされている気がする。

また、WordPressであるともっと違うことにも対応しなければならない。
実装側のわたしから見るデザインのあれこれを紹介しようと思う。

最初に結論

WebデザインはWebサイトの設計にほかならない。
見た目を良くすることが目的ではなく、Webサイトの目標を達成するために、閲覧者を誘導することが目的なのだ。

WordPressでは運用側がコンテンツを不自由なく作成できるように、また予算に見合うように、デザインを作っていく必要がある。

そもそもデザインとは

デザイン（英語: design）とは、審美性を根源にもつ計画的行為の全般を指すものである。意匠。設計。創意工夫。英語のdesignには本項の意味より幅広く、日本語ではデザインと呼ばない設計全般を含む。
デザイン - Wikipedia -
Wikipedia にはこのように書かれている。

そもそもの意味としては設計の意味合いが強く、見た目はデザインの一要素でしかないのだ。
日本ではかなり狭義の意味で使われていると認識したほうがいい。

そして、Webデザインは大本の意味でデザインという言葉を捉えられないと難しいのである。

実装側から見るWebデザイン

Webサイトの制作をおこなっていると、見た目デザインだけ別発注になっていてこの通りに作ってくださいというような依頼を受けることがある。

クライアントには申し訳ないが、その見た目デザイン大丈夫ですか？と言いたくなることが山ほどあるのだ。
その例を少しだけ紹介する。

PC（デスクトップ）用の画面しかない

デスクトップ用の画面しか用意されておらず、汎用的に作られているわけでもないため、レスポンシブにもできないというものだ。
そもそも見た目デザインを作成した人にHTMLやCSSなどの知識が圧倒的に足りていない場合に起こる。

これはもうどうにもならないので、作り直しか、崩れますけどそれっぽくなんとなく調整しますねという感じにするしかない。

解像度が高すぎる

その解像度でスマホ画面を作ると文字が7pxとかになりますけど？無理ですよ？というケースだ。

気持ちはわからなくはない。
ただ、残念ながらいくらでも細かいものが使えるほど、今のモバイル端末はまだ進化していない。

これも、それっぽくなるように調整しますねという対応になる。

HTMLが画像ばかり

HTMLの形で見た目デザインが提供されることもある。
中を見てみるとほとんどの要素が画像で作られており、上に乗っかっている文字や途中の文章までもが画像なのだ。

差し替え大変ですけど？大丈夫ですか？と言う確認から始めなくてはならない。
大体の場合、元データから利用できそうな部分だけ抽出して、それっぽく再現するというよくわからない手間がかかってしまう。

幅や余白などのピクセルがすべて指定されている

見た目を整えるという意味では良いことなのかもしれないが、それはその表示ができるデバイス上のみの話であって、実際に世の中にはいろんな大きさの画面が存在していて見ている環境をこちら側が制御できるということはない。

レスポンシブが当たり前である中で、ピクセル単位でこうしてくださいはちょっとまかり通らないのである。
どうしても見た目にこだわりたいのであれば、多種多様のデバイスに対応できるように画面の大きさごとに見た目を作る必要が出てくるため、工数はどんどん膨れ上がっていくことを知っておくといい。

WordPressガン無視

WordPressで作るんですよね？と確認しなければならなくなる。
どこからどこまでがヘッダーでフッターでどのブロックを利用する想定なんです？というのが全くわからない見た目でくるのだ。

このデザインを再現するとなると予算が圧倒的に足りませんという自体が起こってしまう。

なぜこのような悲劇が起こるのか

全てにおいて言えることはデザインから実装・設計・運用を切り離して考えてしまっているということである。

Webサイトは何かしら目標・目的があって作成される。そのためにプロに依頼し、お金をかけて作成するのだ。
もちろんデザインもその一要素である。見た目デザインだけがWebサイトの目標・目的を一切考えなくていいわけはない。

そして、Webサイトは運用していくものであり、WordPressを始めとしたCMSはその運用をやりやすくするためのツールである。
それを完全に無視してはいけない。それは、クライアントのビジネスを完全に無視しているのと他ならないからだ。

ではどうすればいいのか

WordPressで実装するのであれば、ブロックにどんなものがあってデフォルトでどういうスタイルが当たるのかを知っておくことだ。
ただ、ありとあらゆるものに対応するのは厳しいと思う。

おすすめなのは既存のテーマに特化することである。既存のテーマのデザインや挙動などを把握して、それに合わせた見た目を作成できるようにするのだ。
そうすれば、設計は実装者がやってくれる。

また、日本には優秀なテーマ作者がいて、日本語できれいに表示されるようなWordPressテーマを開発してくれている。
WordPressを利用するのにおすすめの〇〇は？と聞かれたら
この1つでもいい。特化して自分はこのテーマが得意ですとアピールしてほしい。

そうすることで、実装側的にも非常にありがたいのである。

まとめ

Webデザインは本来のデザインの意味で捉えなくてはならない。
大事なのは意図を持ってデザインすることであり、なんとなく見た目だけ整えればいいということではないということだ。

それだけ身につけなければならない知識や技術も増えてくるだろう。
ただ、これからの時代ここまでできないとプロとしてやっていけなくなるという可能性は非常に高くなる。

テーマ特化でも一点突破でもいい。
これはできる。というものを作ってアピールしてほしい。

実装側からの常なる願いである。