【基本編】WEBデザインの基本用語 今日の5ワード vol.2

このエントリーをはてなブックマークに追加




まめしば
 こんにちは。まめしばです。
 さて、今日の用語解説 5選始めまーす。
ぶるさん
 お疲れ様、まめしばくん。
 新しい言葉は一気にはなかなか覚えられないから、小刻みに少しずつ
 覚えていくのもよいアイデアだね。
 毎日の積み重ねが大事です! GOOD。

だんだんと夏らしい気候になってきましたね!
一部梅雨明けも始まり、これから夏本番といったところでしょうか。
学生は夏休みが始まり、活気が出てきましたね。
インドア派のまめしばは、涼しいお部屋でコツコツと日々の積み上げを継続しています。

さて、前回にひきつづき用語の紹介と解説をしていきます。

夏休み、ちょっとWEBサイト制作について勉強してみようかな?という方にも、導入向けの内容としては易しいと思いますので、ぜひ目を通していってくださいね。



■ 今日の5ワード ■

  1. UI<ユーザーインターフェイス>
  2. UX<ユーザーエクスペリエンス>
  3. メインビジュアル
  4. トップページ
  5. マークアップ

■UI<ユーザーインターフェイス>

よくUI(ユーアイ)と表記されます。
会話レベルでいうと「このサイトのユーアイについてだけど・・・」とか「このアプリのUIってどうなってる?」というような使われかたをします。

言葉を分割してみると
 ユーザー:User  使い手
 インター:導入 入口 接点
 フェイス:面 機会 窓口

というニュアンスになります。

つまり 「使い手との接点 入口・窓口」の意味合いでWEB業界では特にUIに配慮した設計が求められています。
デザインはただ自分の良いと思うものを作り上げるエゴの活動ではなく、使う側の視点でいかに利便性や躓きをなくせるか
がとても大事な要素になります。

次のUXとセットで協議されることが多いでのすので、UIとUXをそれぞれ理解しておくことをお勧めします。

分かりやすく解説されている記事がありましたので紹介しておきます。

■UX<ユーザーエクスペリエンス>

上述のUIよりももっと感覚的なのがUX(ユーエックス)になります。
ユーザーエクスペリエンス。
エクスペリエンスは「体感、体験」ちという直訳になります。

UIが入り口部分の視覚的な話とすると、UXは実際使ってみて体感すること、感じることを表現します。

現在、私たちが手にしている、目にするサービスもUXデザインで成功したものが数多くあります。
UXデザインとは何ぞや、どんなもの?と深堀されたい方は下記の記事も参考にしてみてください。


■ UXとは?成功したUXデザインの事例をご紹介!

https://www.internetacademy.jp/it/design/web-design/UX-design-success.html

■メインビジュアル

Webサイト、ホームページにアクセスした際に一番さ最初に目に入る画像のことを言います。
メインビジュアルまたはキービジュアルといい、立ち上げた一発目に目に入る画像のことを指します。

制作現場ではたとえば、「このメインビジュアルこの間の画像に差し替えお願い~」とか「メインビジュアルがパッとしないんだよね~」などの会話があったりします。

メインビジュアルでは、第一印象で伝えたいことをメッセージ、画像、デザインで表現します。

メインビジュアルのデザインについて詳しく解説されている記事がありましたので、参考に張っておきます。

メインビジュアルが綺麗だと、見入ってしまいますよね。

ちなみにこの豆SHIBACREATEのメインビジュアルは?といわれるとこちら↓になります。

■トップページ

順序的に逆になってしまったかもしれません。

前述の「メインビジュアル」がサイトを立ち上げた際に一発目に見える画像領域に対して、
一番最初のページ、看板ページのことを「TOPページ」と言います。

つまり、メインビジュアルはトップぺージに含まれることになります。

たとえば制作現場では、クライアントとの交渉時に、どんなデザインかを提案するのに
全ページ作るわけにいかないのでTOP提案という方法をとる場合があります。

実際、企業コンペの際にもTOP提案でのコンペだったり、社内で各デザイナー同士でTOP提案をしてスキルを競わせるといったやりかたもあります。

TOPページとメインビジュアルは最初のこと混同しやすいので、区別して理解しましょう。

■マークアップ

通常私たちが表記する言葉をコンピュータが正しく認識できるように<タグ>をつけていくこと。
詳しく説明するとHTMLタグをつけて、日常我々が表記しているテキストをブラウザで正しく表記すること。
対義語として「マークダウン」がある。

よく混同されることばとしては「コーディング」
コーディングはプログラミング言語を入力する作業のことで、本来であればマークアップとは区別される。

ただし、現場ではHTMLのマークアップもJavascript phpのコーディングもわざわざ使い分けているところは少ないかもしれない。



■最後に

WEBデザインにかかわる基本的な用語紹介と解説 第2回目いかがでしたでしょうか。
WEBデザイナーになるためにの勉強法なども紹介していますので、よければまた覗いてみてくださいね。

可能な限り毎日5ワードずつ紹介していきたいと思います。


これも一つ一つ積み上げですね。お役立てになれば幸いです。

まめしば



LINEで送る
Pocket

Leave a Reply