webデザインを練習中です。

こんばんは、さじです。

webデザインができるグラフィックデザイナーを目指して勉強中です。

グラフィックデザインにおける工夫がwebデザインでは通用しないことがあります。
今回は勉強中に仕入れた、グラフィックデザイナーがやりがちなやってはいけないwebデザインの簡単な例を紹介しながら、紙とwebのデザインの違いについて語っています。

ポスター、チラシ、はがきなどのデザインでは平面のレイアウトをデザイナーが工夫します。例えば、こちらは適当に考えたイベントチラシの主な掲載事項です。

①イベントタイトル
②イベント日時
③イベント内容
④ 登壇者情報

これを紙媒体で次のようにデザインレイアウトしたとします。

パターンA

このチラシでは、まずイベント名や日時、内容は二つ、と読み取って行くことができますが、それは頭の中で勝手にグループを捉えることができるからです。見る人によっては、最初に目の行く箇所が、画像だったり日時だったり、はたまた興味の湧く題目だったりの違いはあっても、これが「イベントのチラシ」だと理解するのに時間がかかることはあまりないはずです。

このチラシでは、イベントのタイトルがやや下の方に配置しています。また、2つのイベント内容は時間や組み方が上下左右など入れ替わっています。これらはデザイナーの「デザイン」のひとつです。

では、もうひとつ参考に作ってみました。Bです。

パターンB

これはお固めのイベント（学会など）でよくあるパターンなのですが、
タイトル→日時→内容→登壇者
と非常に捻りのない、乱暴に言えば盛り上がりに欠ける構成になっています。

好みはあれど、パッと二つを見比べたときに、最初のパターンの方が「グラフィカル」な印象を持つことは間違いないと思います。紙媒体ではごく普通に行われていることですね。

ところが、グラフィカルにしたはずのAが「webデザインでやってはいけないこと」なのだと知ったのはSEOを含めwebの勉強を始めて間もない頃のことでした。つまり「SEO的によろしくないデザイン」はwebデザインとしては「正解」ではないということです。

SEOに詳しい方であれば当然のことですが、ざっくりいえば、サーチエンジンがコードの文書構造のなっていないサイトを嫌うということに行き着きます。よって、デザインした感のあるAよりもBの方がwebデザインとしては正しいということです。これはショック。

では、上述2つ目のパターンBをグラフィカルにするにはどういったアイデアがあるかということで、次のパターンCはランディングページになります。この場合、同じ縦長ではありますが、ユーザー側のスクロールに依存することになるため、スクロールしてもらうための魅力的な文言などをファーストビューの中に備える必要があります。今回は例としてイベントの登壇者が世界的ベンチャー企業のCEOだと想定し、コピーをいれることにします。

パターンC

 まず、文書構造を正しくするため、次のことに気をつけました。

・順序の入れ替えは行わず、各要素ごとに順番に。
・空間に遊びを持たせるために内容の詳細はモーダルウインドウで別に出現させる。

これにより、すっきりしながらも「デザイン」した感を目指します。

正しい文書構造かつグラフィカルなデザインを施すことで、良いwebデザインにしよう、ということが大事なのですね。紙で行えていた配置の組み換えによる工夫をwebデザインで必要とされないことがやや物悲しくなりますが、致し方ありません。確かに、先日のアクセシビリティの記事でも順序を守ることは大切なことだと学んだばかりです。

webデザインがおおよそ似通った構造になっているのはこの理由が大きいようです。そして、これをいかに乗り越え、上質なwebデザインにするのかというと、アクションや動きによる「変化」を付け足すことが求められます。この「変化」の工夫もまた、webデザインのひとつだということを考えることが最も大きな違いかもしれません。

webにも人にも愛されるデザインの提案を心がけるように自分が変化しないといけないですね。

さじ

注記：サンプルの内容はすべてダミーとなっております。名前、題名などは架空のものです。画像はぱくたそさんよりダウンロードさせていただきました。

加熱する議論に感情が昂ぶるドイツ人ハーフのフリー素材 https://www.pakutaso.com/20171054304post-13863.html