エディトリアル・グラフィックデザイナーがWebデザイナーになるまで　Vol.04 やりがちデザイン問題

Webデザイナー/ディレクターのヤスハラタカユキです。

不定期にお届けしている「エディトリアル・グラフィックデザイナーがWebデザイナーになるまで」4回目です。

今回はエディトリアルデザイナーがWebデザインをするときにやってしまいがちな5つのミスについて語ります。

目次

• 紙の感覚、Webに持っていけない問題
• やりがちデザインその1 ディティールに拘りすぎ
• やりがちデザインその2　謎に要素をバラバラにデザインする
• やりがちデザインその3　改行に拘りすぎる
• やりがちデザインその4　そのトリミング無理ですって問題
• やりがちデザインその5　オブジェクトの数、気になっちゃう

紙の感覚、Webに持っていきにくい問題

エディトリアルデザインは、紙面の内容にデザイン的な規則性をもたせながら整理整頓をしていくような思考でデザインしていきます。

その規則性のなかでレイアウトを完成させていくわけですが、PC上でレイアウトをしてしまえば、あとは印刷されてお終い。

デザイン→出力（印刷or電子書籍）という工程です。

Webデザインの場合、デザイン的な規則性に加えてコーディング的な思考を持ってデザインをしないと、デザインがコーディング時に破綻するというケースに陥いることも。

デザイン→コーディング→出力（デバイス）という工程になるからです。

コーディングでこのデザインが可能かどうか、その判断をデザイナーがする必要があります。もし気にせずに、エディトリアルデザインの感覚でWebデザインをすると、コーダーが地獄に落ちることになります。

やりがちデザインその1 ディティールに拘りすぎ

ついやってしまいがちなこととして、ディティールに拘ってしまうということがあります。

例えばボタンを例にしてみます。

エディトリアルデザイナーは画像の上のケースのように、ちょっとばかりデコラティブにボタンをデザインしてしまうことがありますが、UI的に考えるとそのボタン押しやすいですか？という疑問が湧きます。ただの四角いボタンで良くない？？となります。

視覚的にボタンだ！とわかるほうが重要だからです。

もちろん四角いボタンは楽勝でコーディングできますが、デザイン頑張っちゃったデコラティブなボタンはその数倍以上のコーディングの面倒くささ（またの名を技術力）を有します。

ジョブチェンジ直後の私もついつい余計なものを加えてしまって、コーダーのYちゃんに嫌がられたものです。

美味しいタイカレーでご機嫌を取ったりしました。

やりがちデザインその2　謎に要素をバラバラにデザインする

エディトリアルデザインでは同じオブジェクトを繰り返して使うと、なんだか手抜きみたいな風潮があります。

それはメディアとしての特性として情報に優先順位があるからです。

例えば映画作品を4つ紹介するとして、イチオシ作品はAで、残りのC，Bはその次、Dはおまけで載せるといった感じでしょうか。

なので同じオブジェクトでデザインするとその順位が曖昧になるので、意図通りではない、手抜きだみたいな感じになります。

しかしWebの場合はイチオシを決めるのはユーザーであり、情報に優先順位は持たせません（もちろん持たせる場合もありますけど）。

情報は並列に淡々と載せていくケースが多いし、そのほうがユーザーとしても便利です。

だって観たい作品は自分で検索して探しますからね。

そのメディアとしての特性を理解しないでデザインをすると、情報を並列に置くことに違和感を感じ、画像のようについ変なことをしちゃいます。

そしてコーダーが地獄に落ち…

やりがちデザインその3　改行に拘りすぎる

文章って読みやすい改行って大事だと思うんです。それはめちゃくちゃ分かります。

しかし、Webでは見る人のデバイスのサイズは様々です。デザイナーが思う、この改行大事だよね！はユーザーのデバイス上で正しく改行されているとは限りません。

本稿のような、割とどうでもいい内容のテキストなら、まぁなんとなく適当に改行して多少見栄えがおかしくなっちゃうデバイスがあってもいいか、という感じですが、企業理念や挨拶文みたいな、区切りが大事な文章のときにデザイナーの拘りが存分に発揮されます。

これは編集者も陥りがちで、Webデザインを提出すると「ここで改行」と指示が入ることが結構あります。

それに対して、いやいやこういう理由で改行はしないほうがいいんですよ～と説明するのも、もうだいぶめんどくさくなってきました…

でもその指示、無意味ですよ。

やりがちデザインその4　そのトリミング無理ですって問題

トリミング、大事ですよね。

うん大事だ。

しかしそれもッ！無意味だァー！

背景に貼り付けたその写真は、あくまでバックグラウンドです。

デザイナーが狙ったとおりのトリミングで表示されるのは、そのデザイナーが作ったデザインでのみです。

オレっちのデバイスでは顔が切れる腕が切れる頭が切れる。

割り切りましょう。

その拘ったトリミングの写真はただの模様だ。

やりがちデザインその5　オブジェクトの数、気になっちゃう

10個の写真を並べるとします。

設定したデザインの横幅に、横に5個ずつ2段で並べると一つのサイズが小さすぎます。

じゃあ4個ずつにすると、丁度いい大きさになる。

でも10個だから4+4+2で2個余っちゃう…

割り切りたい！割り切れないならせめて何かでどうにかしたい！

これもエディトリアル→Webで陥りがちなケースです。

割り切れなかった2個だけセンター配置にしたり、足りない2個は何らかの画像を配置したりと、どうにかしようとしちゃいます。

その2個のためにコーダーが払う労力ほどの効果は、見た目には現れません。

Webのユーザーはそこはあまり気にしてません。

自分がWeb見るとき気にしてる？

まだまだありそうですが、長くなるのでとりあえず5つのやりがちケースを紹介してみました。

結局やりがちケースを回避するのは経験と慣れしかないかなと思います。

またこういうケースを見つけたらご紹介します。

ではまたお会いしましょ～。