top of page

知っておきたいWebデザイン用語10選


知っておきたいデザイン用語

どんな分野でもトレンドを追ったり、専門用語を学ぶのは大変です。特にトレンドの移り変わりが早い、Webデザインの世界となるとなおさら!

今回は、業界動向に詳しいWixならでは、デザイナーでなくても知っておきたいWebデザイン用語10個を厳選してお届けします。

用語を学ぶ事で新たな発見があると思いますので、是非、チェックしてみてください。


パララックス

訪問者がホームページを閲覧する際、必ず行う動作の一つがスクロールです。そして、その動作を巧みにデザインに組み込んだのがパララックス・スクロールです。

スクロールする時に、複数のレイヤーにある要素を異なるスピードで動かすことで、ホームページを立体的に見せてくれます。よりダイナミックで、印象的なホームページを作りたい時、便利な手法です。




パララックス, デザイン用語

シネマグラフ

シネマグラフは、画面全体の中の一部だけが動くアニメーション画像のことです。これを使うことで、ユーザーの目を惹き寄せる、お洒落なサイトを作成することが可能です。

また、動画に比べてファイルサイズを小さく抑えることができるので、表示速度の低下を避けることもできます。

Wixの無料画像でも、いくつかのシネマグラフを用意しているので、是非見てみてください。もちろん、自分で作ったシネマグラフをサイトに追加することも可能です。



シネマグラフ

アシンメトリー

シンメトリーは左右対称で調和がとれた状態。一方、アシンメトリーは左右非対称のことを指します。レイアウトにあえてアシンメトリーを採用すると、デザインにアクセントや躍動感が生まれます。

Wixでは、以下のデザイナー用テンプレートをはじめ、いくつかのテンプレートにアシンメトリーを採用しています。


アシンメトリー

ミニマリズム

シンプルで洗練されたデザインを求めるなら、余白スペースを大胆に利用するミニマリズムを採用すると良いかもしれません。

簡単なデザインに思えるかもしれませんが、限られたデザイン要素を利用し、空白スペースについても計算し尽くす必要があるので、実はとても難しい技法です。

こちらのITイベント用テンプレートがミニマリズムの技法を使ったテンプレートです。


ミニマリズム

モダンレトロ

現代的な「モダン」と復古調の「レトロ」という全く逆の組み合わせ。

モダンレトロとは、80年、90年代調のドット絵や、ビンテージデザインなどによってレトロを演出しつつ、フラットデザインや色合いでモダンを表現した新デザインです。


モダンレトロ

デュオトーン

「デュオ」は英語で「2つ」を意味し、ディオトーンは直訳すると2つの色という意味になります。ベースとなるミドルトーンとハイライトカラーの2色のみで視覚的なインパクトを生み出す手法です。

この流行りのデザインを使うことで、特定のデザイン要素を強調させたり、このテンプレートのように強烈なビジュアルインパクトを持つホームページを完成させることができます。


デュオトーン

等幅フォント

等幅フォントは、漢字の通り、文字幅が同じ書体を指します。反対に文字ごとに文字幅が違うものをプロポーショナルフォントと呼びます。

基本的に日本語でのホームページ制作は、プロポーショナルフォントだと読みにくくなるため、等幅フォントを使うことがほとんどですが、アルファベットの場合、あえてプロポーショナルフォントを利用し、レトロ感を演出することがあります。

ミニマムデザインなどにもプロポーショナルフォントは良く利用されます。


等幅フォント

ネガティブスペース

ネガティブスペースとは、対象物を取り囲む周囲のスペース、つまり余白を上手に利用して、複雑なデザインをシンプル化するデザイン技法です。特にロゴデザインで多く使われます。

ネガティブスペースを使うことで、以下のNBCのロゴのように2つの意味を持つロゴ(パッと見たときに分かる虹色のロゴ、ロゴ以外の部分に浮かび上がるイメージ)を作成することもできます。


ネガティブスペース

ロレム・イプサム

ロレム・イプサム(lorem ipsum)とは、書籍やウェブページ、広告などのデザインで利用される、それ自体では意味のないダミーテキストのことを指します。

レイアウトなどの視覚的なデザインを調整するために用いられたリ、あえてダミーの文章を用いる事で内容が気にならないようにしたり、デザインを分かりやすく見せるために用いられます。

ダミーテキストを用意したい場合には、こちらのダミーテキスト作成サイトが便利です(英文のダミーテキスト作成サイト)。


ロレム・イプサム

Google Fonts

Google Fontsは、文字通りGoogleが提供している無料で使用できるWebフォント・サービスのことです。

現在、Googleは日本語のウェブフォントを試すことができるGoogle Fonts + 日本語早期アクセスサイトをオープンしているので、日本語フォント9種類を無料でダウンロード・使用することができます。


今後のホームページ作りのために、役立つ用語があれば幸いです。



ライター: Wix Team


ja03.png
bottom of page