これだけは抑えて！Webデザインに関する用語とWebサイトのギミックに関する用語

”WebデザインやWebサイトのギミックに関する用語が難しい”
”最低限どのくらい知っておいた方が良いのだろう？”

中小企業で初めてWeb担当になった人や、新任のWeb担当者のなかには、このような疑問を抱えている人も少なくありません。

特にHP制作会社においては、Webデザイナーとやり取りをする場面は多く、その都度専門的な用語が飛び交うことは間違いないでしょう。

そこでこの記事では、初心者Web担当者が最低限知っておきたいWebデザインと、Webサイトのギミックに関する用語を解説します。

不安になる前に、一度この記事を参考にしていただければ幸いです。

Webデザインに関する6個の用語

まず、Webサイトの見た目に関わる”Webデザインに関する用語”について説明します。

”Webデザインに関する用語”抑えておくと、外部への連絡がスムーズにいきやすくなるので、少なくとも以下の6個の用語は抑えておきましょう。

1.トンマナ

「トンマナ」とは、トーン＆マナー（tone and manner）の略であり、Webサイトの雰囲気や感情、スタイルのことを指します。

トンマナを設定する際は、「一貫性を保つこと」や「会社のイメージと合わせること」に注意しましょう。

「一貫性を保つこと」とは、ページごとにデザインをコロコロ変えるのではなく全ページ同じデザインの印象を与えること、「会社のイメージと合わせること」とは、その会社や業種のイメージに合わせることを意味します。

例えば、飲食店のWebサイトなのに暗くて地味な印象を与えたり、法律事務所のWebサイトなのにポップで可愛らしい印象を与えたりするのは、却ってユーザーの信頼感の損なわせる可能性が高いでしょう。

つまり、”トンマナは単なるWebサイトの雰囲気作り”ではなく、企業への集客にも繋がるというわけです。

2.レイアウト

「レイアウト」とは、Webサイト内の配置のことで、どこに画像を添付するか、どこにボタンを設置するかを考える際に使われる用語です。

レイアウトを考える際は、「一貫性を保つこと」の他に「優先順位を明確すること」にも目を向けなければなりません。

Webサイト内に沢山の情報が溢れかえりすぎると、ユーザーはどこを見たら良いのか迷ってしまい、本当に伝えたいことが伝わらない可能性が出てきます。

ユーザーにとって見やすくて分かりやすいWebサイトにするためには、”Webサイト内でいちばん伝えたいこと（会社のサービス紹介など）はページ上部に配置する”など、優先順位を考えながらレイアウトを決めていきましょう。

3.ワイヤーフレーム

「ワイヤーフレーム」とは、Webサイトのレイアウトを線あるいは枠で表されたものです。

Webサイトを制作するための骨組みとも言えるこの作業は、あくまで”設計図”であるため、細かな装飾やデザインは省きます。

またこの工程においては、画面サイズに注意して設計しなければなりません。

ユーザーが使うデバイスはPCだけではなく、スマートフォンの場合もあるため、必要に応じてスマートフォン用のワイヤーフレームも設計する場合が出てくるでしょう。

4.カラースキーム

「カラースキーム」とは、Webサイト内で用いられる配色を決めていく際に用いられる用語です。

カラースキームをどうするかによって、Webサイトの雰囲気が大きく異なってくるので、この工程において最も重要視しなければならないことは、「企業の雰囲気（ブランド）に合っているか」ということです。

例えばカフェのWebサイトの場合は、お洒落で落ち着いた雰囲気を演出させたいので、オフホワイトやブラン系のカラースキームを選択。

スイーツ店のWebサイトの場合は、可愛くてSNS映えが出来る雰囲気を演出させたいので、ピンク系やネオン系が合っていると思います。

5.マテリアルデザイン

「マテリアルデザイン」とは、2014年にGoogle社が開発した、デザインのことです。

このデザインには、情報を1つのブロックでまとめた”カードレイアウト”や、まるでボタンが浮いているように見えるような”影”、クリックすると動きと同時に色が変わる”アニメーション”など、様々な特徴があります。

Google公式サイトにツールがあるため、初心者Web担当者でも使いやすくて、一貫性のあるデザインを創り上げることができるでしょう。

6.フラットデザイン

「フラットデザイン」とは、出来るだ装飾せず、シンプルで平面なデザインを指します。

先ほどの「マテリアルデザイン」との大きな違いは、影や奥行きがない点です。

フラットデザインによるWebサイトは、読み込みが速いためスマートフォンでもスムーズに動くこと、また、ユーザーの視認性が高くなることはメリットではあるものの、シンプルすぎて面白みが欠けてしまうことは、デメリットだと思います。

Webサイトのギミック関する3個の用語

つづいて、”Webサイトのギミックに関する3個の用語”を紹介します。

ユーザーの目に留まるようなWebサイトにするためには、以下3つの用語は抑えておきましょう。

1.スクロールアニメーション

「スクロールアニメーション」とは、Webサイトをスクロールした際に起こる演出のことです。

具体的には、”画像が左から右にスライドしてくる”とか、”テキストがフワッと浮かんでくる”といったアニメーションがあります。

企業がいちばん伝えたいことにスクロールアニメーションを付けると、よりユーザーの目に留まりやすくなるでしょう。

ただしスクロールアニメーションを付けすぎると、Webサイトが重くなったりスマートフォンの場合ちゃんと表示されなかったりするため、付けすぎには注意しなければなりません。

2.ヘッダー

「ヘッダー」とは、Webサイトのいちばん上に位置する部分を指します。

いわば、”Webサイトの顔”とも言える部分です。

ヘッダーに入っている項目として多く使われるのは、「会社のロゴ」、「お問い合わせ」、「ナビゲーションメニュー」などが挙げられます。

シンプルで見やすいWebサイトにするためには、ヘッダーは欠かせません。

3.フッター

「フッター」とは、Webサイトのいちばん下に位置する部分を指します。

実はフッターがあることで、Webサイト内の回遊率が上がり、SEOにも効果的だと言われています。

フッターに入っている項目として多く使われるのは、「お問い合わせ」、「サイトマップ」、「SNSリンク」などが挙げられます。

フッターに情報を詰めすぎるとスマートフォンでは見にくくなってしまうため、最低限の情報量に抑えておきましょう。

用語を覚えてWebサイトを構築していこう！

一度に全ての用語を覚えることは、難しいと思います。

しかし、今回ご紹介させていただいた用語を覚えておくと、外部との連絡がスムーズにいったり、意図を正しく伝えられたりした結果、自社の思った通りのWebサイトが完成すると思います。

始めは難しいかもしれませんが、業務と並行して覚えていただければ幸いです。

なお、Webサイト構築に関してご不明点ございましたら、私たちUNDERFLOORへお気軽にご相談ください。

弊社スタッフが全力でサポートさせていただきます。