【イベント報告】『メインビジュアル制作実践』｜STUDIO山口｜デジタルハリウッドの専門スクール（学校）

『メインビジュアル制作実践』を開催しました

こんにちは、デジタルハリウッド山口スタッフです。
先日、STUDIO山口の原田トレーナーを講師に迎え、オープンセミナー「メインビジュアル制作実践」を開催しました！
今回のイベントでは、Webサイトにおいてのメインビジュアルの役割や制作する上でのポイントを教えていただき、最後は実際にメインビジュアルのラフ案を作成していただきました。

メインビジュアルの役割

まずは、メインビジュアルついて学んでいきました。

メインビジュアルの目的は、「何をしているサイトなのかを視覚的に伝える」ことです。
その役割は、サービスを伝えることや旬な情報を伝えること、企業のブランディングやメッセージ、ユーザーへ安心感を与えることが挙げられます。

3つの基本原則

デザインを考える上で、最初に考えると良い3つの基本原則があります。

①メインビジュアルで何を伝えたいか（目的）
②顧客ターゲットを明確にする（誰に）
③どんなコンテンツが必要か（何を）

講義では、実際のサイトを例に挙げ、上記3つのポイントについて詳しく教えていただきました。
「誰に、何が目的で、どんなサービス」を提供したいかによって、デザインや使用する写真は変わってきます。

いきなりfigmaなどを立ち上げて制作するのもいいですが、足場が固まっていない状態でデザインを始めても、後々手詰まりになってしまう可能性があります。その為、最初は3つの基本原則を言葉で書きだすことが完成への近道だと原田トレーナーはおっしゃられていました。

レイアウトパターン

評判のいいWebサイトは無限にパターンがあるわけではなく、ある程度、型に分類されています。
では、どのような型が使われているのでしょうか？

左右余白なしの全面配置型

メインビジュアルの左右に余白がなく、おしゃれなサイトやかっこいいサイトに多い型となります。
一方で全面にメインビジュアルがある為、スクロールダウンなどのアイコンを配置し、下にコンテンツが存在するということをユーザーにお知らせするなどの工夫が必要です。

左右分離型

デザインがしやすく、ポピュラーな型となります。ビジュアルとコピーのどちらも認識しやすい為、ユーザーが一度に文字と写真を視界にいれることができます。
サイトのイメージが短時間で伝わりやすく、有効的にユーザーに情報を伝えやすくなっています。

メインとサブの配置型

こちらもよく見る型となります。メインとなる写真があり補足する写真が対角線上にあることで、余白が多く生まれます。
シンプルでおしゃれな印象を与えやすい型となります。
お店の外観と商品画像、外観と内観など、差別化して配置をします。

その他

その他には、写真を切り抜いて配置をしたり、スライドショーで写真をループしているような型もあります。
アイディアと写真を組み合わせると、印象的になり、ユーザーに「おっ！」と思わせるようなビジュアルができるそうです。

デザインのポイント

次は、デザイン作業に取り掛かる際に知っておくと役立つ知識やコツをポイントとしてご紹介していただきました。

・黄金比率

「1 : 0.618 •••」（近似値＝5:8）に分割していくものを繰り返していくと、螺旋状になり、人間が一番美しく見える形だと言われています。部分的に当てはめたり、反転させたり、組み合わせたり、使い方は様々です。
ただ、必ずしもこの形に沿わないといけないというわけでもありません。あくまでレイアウトをする時の下敷きのように使うといいとおっしゃられていました。

・3分割グリッド

カメラなどのガイドラインにもある3分割ラインはメインビジュアルのレイアウトを組む上でも役立ちます。
グリッド状に要素を配置する以外に、線の交点に要素を配置することで安定感が得られるレイアウトになります。

・対角線

30度くらいの傾斜がついた形を配置します。
人物など被写体を斜めに配置することで、躍動感や迫力、奥行きをつけることができます。
全体を斜めにする以外にも、部分的に使うことも効果的だそうです。

・写真を選ぶポイント

デザインをする際には、写真を写真素材サイトから入手する場合や、カメラマンに依頼する場合、自分で撮る場合、クライアントから提供される場合があると思います。いずれの場合も共通して言えることですが、写真として完成されているものより、文字を置いても読みやすいスペースがある、もしくは被写体の見切れが少ない（トリミングの余地がある）写真を入手すると使いやすいです。

・キャッチコピーを写真に重ねる

中には、写真に文字を重ねにくい時もあります。
そんな時は、袋文字や帯をつける（背背景、背景ぼかし）、写真をマスクしてコピーのエリアを確保するなど、工夫してキャッチコピーを配置します。
また、横書きを縦書きにしてみたり、フォントや文字の間隔を変えるなどといった工夫をすると印象が良くなるといいます。

このように、なるべくセンスに頼らないで、知識としてポイントを覚えておくとデザインのクオリティがあがります！

実践！ラフ案制作

いよいよ、実践となります。
まずは、原田トレーナーが準備してくださったお題を確認していきます。
お題は、架空のうどんチェーン店「角鶴製麺（かくつるせいめん）」アルバイト募集サイトです。
講義前半で学んだことを元に、みなさま集中して取り組まれていました。

講評会

最後に講評会に移ります。
同じ題材でも、それぞれの違う特徴があるラフ案ができあがりました！
メインビジュアルの中で働いている人の紹介をする案や格子状にレイアウトして伝えたい情報を組み込む案などなど、、
今回は時間に余裕があったこともあり、しっかりと案を練っていただけました。
中でも、印象的だったのが「手作りには人がいる」というキャッチコピーです。
「デザインも大切だけど、キャチコピーがバッチリとはまるとデザインも捗る」とおっしゃられていました。
ここから、フォントの工夫をしたり、背景にうどんを置いてみたりすると、キャッチコピーがより生きてくるそうです。